In Part One of this tutorial series, we explained the basics of using widgets in WordPress.
In this section you will learn how to configure a number of widgets in WordPress.
Configuring Sidebar Widgets
By default, your site comes with a number of built-in widgets that can be used out of the box with minimal to no configuration needed, such as widgets that let you display links to your pages, filter posts by categories, RSS feed content, adding a search box, etc.
(In a default WordPress installation, your site comes with a number of built-in widgets)
How To Configure Sidebar Widgets: Tutorial
In this step-by-step tutorial series, you are going to learn how to add, configure and reorder various WordPress widgets, including:
- Add a clickable Contact Us graphic linking visitors to the help page.
- Adding a Categories section with a drop down menu.
- Adding a Recent Posts section.
- Add a list of the site’s main Pages.
- Display Links on the sidebar.
- Displaying a newsfeed with an RSS Feed section.
- Adding tag links through a Tag Cloud section.
- Configure how Archived Posts display on the sidebar.
The Widgets screen is located inside your WordPress dashboard and can be easily accessed from the WordPress administration menu by going to Appearance > Widgets …
(WordPress Widgets Menu)
This loads the Widgets panel in your web browser …
(Widgets Panel)
Let’s begin configuring some widgets …
Adding Text Widgets To The Blog Sidebar
Text widgets are incredibly useful …
(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 can be used to add single lines or paragraphs of text, ads, forms and more to your site … simply type in text or paste HTML into the widget content area. You can also give the widget a title. Remember to save your settings when done …
(Text widgets are really versatile!)
Example: Add A Support Button To Your Sidebar Menu Using A Text Widget
For this example, we’ll set up a support button on your sidebar navigation section that takes your 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 a clickable Help button to display at the top of your sidebar navigation area like in the example shown below …
Step 1 – Upload your image.
To display the image on your site, the button image must be uploaded to your server. Upload the button image to your server and note the URL pointing to your image location.
For example …
http://www.yourdomain.com/images/supportbutton.jpg
You will use this information in Step 3.
For visitors to be taken to the contact page when the support button gets clicked, either create a contact page, or have an existing destination page already set up (e.g. a helpdesk). We will link your button graphic to this URL in Step 3 …
Step 2 – Add the support page.
Create a contact page on your site and note its URL …
Step 3 – Compose your text widget code.
Don’t worry … this sounds a lot more technical than it is. Basically, you just need to create the instructions for your clickable button.
Your instructions can be composed in a plain text file and should look something like this …
- Replace “http://www.yourdomain.com/contact-us” in the code with the URL of your contact page location.
- Replace “http://yourimagelocation.com/img/supportbutton.jpg” in the code above with the URL of your image location.
The image below shows the sections of the above code that you will need to replace with your actual contact details …
Replace the above URLs and then copy all of your text file content to your clipboard when finished.
If you need help understanding basic HTML code, refer to this tutorial:
Next, go back to your Widgets screen …
(Widgets Panel)
Step 4 – Add a Text widget.
Add a Text widget to your sidebar in the location where your support button should display.
In the Available Widgets area, find the Text widget …
(Text widget)
Drag the Text widget to the Active Widgets section and release the widget at the very top of the Widget Area …
(Drag-and-drop your WordPress text widget)
Step 5 – Configure the widget settings.
Click on the Text widget title bar to configure the widget 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?”, “Support”, etc.) and paste the code with the correct destination URLs into the Content box, then click the save button …
Note: Remember to check all links before pasting scripts into your Text Widget, or your button won’t work.
*** If using WordPress version pre-4.8 ***
If adding text with no formatting tags like paragraph breaks, you may want to tick the Automatically add paragraphs box to wrap each block of text in paragraphs (note: this is not necessary if you type in formatted HTML content like we’re doing in this tutorial).
Here is some text with Automatically add paragraphs box unchecked …
(Automatically add paragraphs option not checked)
Here is some text added to a Text widget with Automatically add paragraphs box checked …
(Automatically add paragraphs option ticked)
***
Step 6 – Refresh the browser.
Once you have added the widget and HTML content, go to the front-end of your site and refresh your browser. If all links have been entered correctly, then the clickable support button should display at the top of the site’s sidebar menu …
(Clickable support button widget on sidebar)
The above screenshot shows the support button in the sidebar area of a newly-installed WordPress site.
Step 7 – Test your widget.
The final step is to make sure that the destination URL works. Test the button to make sure that your visitors will go to the help page when clicking the button. You should be taken directly to the contact page …
(Test the text widget to ensure you’ve set everything up correctly)
Text Widgets – Useful Tips:
If you would like your support page to open in a new browser window when visitors click on the help (so they don’t leave the page they’re on), then change the code from this:
To this (i.e. add the section that says: target=”_blank” in the html code):
When inserting images into your sidebar navigation menu, make sure that the width of the image does not exceed the width of the sidebar column, especially if you are using a non-responsive WordPress theme. As mentioned earlier, some themes may display elements differently 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 graphic image, then you may need to either adjust the graphic size, or the column width to make images display correctly on your theme.
(Make sure the image width does not exceed the sidebar column width)
Extra Tips:
- If you don’t want to center your button in your sidebar, delete the <center> and </center> tags from the beginning and end of the code. The image will then be aligned to its default settings (normally left-aligned).
- You can link your contact button to any URL you want (e.g. to an external site, contact form, FAQ page, etc.) and change this anytime by editing the links in the text widget.
***
This is the end of part two of this tutorial series.
To view the rest of this tutorial, click this link:
***
"Learning WordPress has been a huge stumbling block for me. I've been looking for something that covers absolutely everything but doesn't cost an arm and a leg. Thank you so much ... you have just provided me with what I have been looking for! Truly appreciated!" - Tanya