Tag: WordPress Widgets

In Part 1 of this tutorial, we cover the basics of how to use widgets in WordPress.

In this tutorial you will learn how to begin configuring several WordPress widgets.

Configuring Frequently-Used WordPress Sidebar Widgets

In a default WordPress installation, your site comes with several preinstalled widgets, such as widgets that let you display links to your pages, recent posts, newsfeeds, add site search features, etc.

(By default, your site comes with a number of pre-installed widgets)

Setting Up Sidebar Widgets: Tutorial

In this tutorial, we will add, configure and reorder s number of widgets to display in the site’s sidebar, including:

• Add a clickable Support Contact graphic button linking visitors to the support page.
• Add a Categories section with a drop down menu.
• Add a Recent Posts section to display the latest posts.
• Adding a list of the site’s Pages.
• Display Links on your sidebar area.
• Add an RSS Feed section.
• Add a list of clickable tags with a Tag Cloud section.
• Add and configure an Archives section to your sidebar navigation section.

The Widgets screen is located inside the WP admin area and can easily be accessed by going to Appearance > Widgets …

(Widgets Menu)

This loads the Widgets panel in your browser window …

(Widgets Section)

Let’s get started …

Add A Text Widget To Your Sidebar

Text widgets are versatile …

(WordPress Text widget)

Rich Text Widget

From version 4.8 onward, WordPress has added native rich-text editing capabilities to text widgets …

(Rich Text Widget)

This lets you quickly and easily format text, create lists, add emphasis, and insert links into your sidebar text …

(Format text easily with the new text widget)

Text widgets let you insert just about anything you want into your sidebar or other widget sections, such as policies, images, forms and more to your site … simply type in text or insert HTML into the content area. You can also give the widget a title. Remember to save your settings …

(A text widget is really useful!)

Example: Add A Clickable Support Button To The Sidebar Navigation Area Using A Text Widget

For this example, let’s set up a clickable help button on the sidebar navigation section that will take visitors to a page on your site (or an external site, e.g. a helpdesk) where they can contact you for help and support.

First, you will need to create or source a “help button” graphic image that visitors can click on …

We’ll set up the clickable button to display at the top of the sidebar like in the example shown below …

Step 1 – Upload your image.

To display the clickable image on your site, the image must be uploaded to your server. Upload your image to your server and note the path to your image location.

For example …

http://www.yourdomain.com/images/supportbutton.jpg

This information will be required in Step 3.

In order for someone to be taken to your contact page when they click on the graphic button, either create a contact page, or have an existing destination page already set up (e.g. a helpdesk). We will then link the button image to this URL in Step 3 …

Step 2 – Create the destination page.

Create a contact page and note its URL …

Step 3 – Create your text widget code.

Don’t worry … this sounds a lot more technical than it is. In simple terms, you just need to create the instructions for your clickable image.

Your instructions can be written a simple text editor and should look something like this …

• Replace “http://www.yourdomain.com/contact-us” in the code above with the URL of your contact page location.
• Replace “http://yourimagelocation.com/img/supportbutton.jpg” in the code with the URL of your image location.

The image below shows which sections of the above code you need to replace with your actual contact page and image URLs …

Replace the above URLs and then copy the above code to your clipboard when finished.

If you need help understanding basic HTML code, refer to this tutorial:

• A Useful Guide To HTML Tags For Beginners

Go back to your Widgets screen …

(Widgets Screen)

Step 4 – Add a Text widget.

Add a Text widget to your sidebar where you want your button to display.

In the Available Widgets area, select a Text widget …

(Text widget)

Drag the Text widget to your Active Widgets section and release the widget at the top of the Widget Area …

(Drag and drop your Text widget)

Step 5 – Configure the text widget.

Click on the Text widget title bar to configure its settings. Paste the code with the links to your contact page and graphic button into your text widget content area and click save …

Add a title to your widget if you want (e.g. “Need Help?”, “Get Support”, etc.) and paste the code with the correct URLs into the large text box, then click the save button …

Note: Make sure to check all URLs before pasting scripts into the Text Widget, or your clickable button won’t work.

*** If using WordPress version pre-4.8 ***

If adding text with no formatting tags, you may want to tick the Automatically add paragraphs box to wrap each block of text in an HTML paragraph code (note: not required if you’re pasting in formatted content like we’re using in the example for this tutorial).

Here is some text with Automatically add paragraphs option not selected …

(Automatically add paragraphs box not selected)

Here is some text with Automatically add paragraphs option ticked …

(Automatically add paragraphs option ticked)

***

Step 6 – Refresh the browser.

Once you have added your widget and HTML content, go to your site and refresh your web browser. If you have entered all of the links correctly, then the support button will display at the top of your site’s sidebar menu …

(Clickable support button widget on blog sidebar)

The above screenshot shows the contact button in the sidebar of a newly-installed WordPress site.

Step 7 – Test the button.

The last step is to ensure that your destination URL works. Test this by clicking the support button. If you are taken to your contact page, then everything has been set up correctly …

(Test the text widget to make sure you’ve set up everything correctly)

Text Widgets – Useful Tips:

If you want a new browser window to open up when visitors go to your support page (so they don’t leave the page they’re in), then change the text widget code from this:

To this (i.e. include the section containing target=”_blank” in the html code):

When adding images to your sidebar navigation area, make sure that the width of your image does not exceed the width of your sidebar column, especially if you are using a non-responsive WordPress theme. Note that some themes may display different column widths depending on their templates and layout. Some sidebars are wide and some are narrow. If your theme’s sidebar width is narrower than the width of your button images, then you may have to either adjust the size of your images, or the width of your sidebar column to make graphics display correctly on your theme.

(Adjust column width or reduce image size)

Extra Tips:

• If you don’t want to center your button image inside the sidebar, delete the <center> and </center> tags from the beginning and end of the line of code. The image will then be aligned to its default settings (normally left-aligned).
• Link your contact button to any destination you want (e.g. to an external site, helpdesk, forum, etc.) and change this anytime by replacing the content inside the widget.

***

This is the end of section two of this series of tutorials.

Click here to keep reading:

• Adding WordPress Widgets To Your Website – Part Three

***