In Part 1 of this step-by-step tutorial, we explained the basics of using WordPress widgets.
In this tutorial we are going to show you how to configure a number of sidebar widgets in WordPress.
Configuring Commonly-Used WordPress Widgets
By default, your site comes with a number of pre-installed active widgets, such as widgets for displaying external links, filter posts by categories, text or HTML banners, add site search features, etc.
(In a default WordPress installation, your site comes with several preinstalled widgets)
How To Set Up Sidebar Widgets: Step-By-Step Tutorial
In this tutorial, you will add, configure and reorder various widgets, including:
- Add a Contact Us graphic linking visitors to the support page.
- Add a Categories section with a drop down menu.
- Adding a Recent Posts section to display the latest posts.
- Adding a list of Pages.
- Display Links on your sidebar navigation section.
- Add an RSS Feed section.
- Adding a Tag Cloud section.
- Configure how Archived Posts display on your sidebar.
The Widgets screen is located in your WordPress administration area and can be easily accessed by going to Appearance > Widgets …
(Widgets Menu)
This loads the Widgets section in your browser …
(Widgets Panel)
Let’s get started …
Add A Text Widget To Your Sidebar Area
Text widgets are incredibly versatile …
(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)
A text widget can be used to add article snippets, videos, news and updates and more to your site … simply by typing in text or inserting HTML into the content area. You can also give the widget a title. Remember to save your settings …
(A text widget is very useful!)
Example: Add A Clickable Contact Button To Your Sidebar Area Using A Text Widget
For this example, we’ll set up a contact button on the sidebar 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 you will want visitors to click on …
We’ll set up the clickable Help button to display at the top of your sidebar like in the example shown below …
Step 1 – Upload your image.
Upload the graphic image to a folder on your server and note down the path to your image location.
E.g. …
http://www.yourdomain.com/images/supportbutton.jpg
You will use this information in Step 3.
For someone to be taken to your contact page when the help button gets clicked, either create a contact page, or have an existing destination page already set up (e.g. a helpdesk). We will then link your button image 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.
If you’re not a technical-minded person, 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 button.
Your instructions can be typed into a simple text editor 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 with the URL of your image location.
The screenshot below shows which sections of the above sample code you will need to replace with the actual contact page and image URLs …
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:
Go back to your Widgets panel …
(Widgets Panel)
Step 4 – Add a Text widget.
Add a Text widget to your sidebar where you want the support button to display.
In the Available Widgets area, select a Text widget …
(WordPress text widget)
Drag your Text widget to your Active Widgets section and release the widget at the top of the Widget Area …
(Drag and drop your WordPress text widget)
Step 5 – Configure the text widget.
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 the text widget content area and click the save button …
Add a title section to the widget if you want (e.g. “Need Help?”, “Get Help”, etc.) and paste the code with the correct URLs into the text area, then click Save when done …
Note: Make sure to test all links before pasting scripts into your Text Widget, or the button will not 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: this is not necessary if you’re typing in formatted content like we’re using in the example for this tutorial).
Here is some text with Automatically add paragraphs box not ticked …
(Automatically add paragraphs box not ticked)
Here is some text added to a Text widget with Automatically add paragraphs option selected …
(Automatically add paragraphs option ticked)
***
Step 6 – Refresh your browser.
After adding your text widget and code, visit your site and refresh the web browser. If all links have been entered correctly, then the support button should display at the top of the sidebar menu …
(Clickable support button widget on sidebar)
The screenshot above shows the contact button in the sidebar navigation menu of a newly-installed WordPress site.
Step 7 – Test your button.
The last step is to ensure that your destination link works. Test this by clicking on the button. You should be taken directly to the contact page …
(Test your text widget)
Tips:
If you would like a new browser window to open up when visitors click on the support button (so they don’t leave the page they’re in), then change the text widget code from this:
To this (i.e. insert the part that says: 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 the sidebar column, especially if you are using a non-responsive WordPress theme. As we’ve previously mentioned, some themes may display different column widths depending on their templates and their layout. Some sidebars may be wider or narrower. If your theme’s sidebar is narrower than the width of your button image, then you may need to either adjust the image size, or the column width to make elements display correctly on your sidebar section.
(Adjust column width or reduce image size)
More Tips:
- If you don’t want the image to be centered in the sidebar, delete the <center> and </center> tags from the beginning and end of the HTML code. The image will then align to the left.
- You can link your help button to any destination you want (e.g. to an external site, contact form, support forum, etc.) and change this anytime by editing the links in your widget.
***
This is the end of part 2 of this tutorial series on how to use Widgets.
Click on this link to read the rest of this tutorial series:
***
"I am beyond impressed with what you have put together. I can tell that you put a ton of hard work into building what you have. You have the absolute best content on WordPress I have ever seen!" - Robert T. Jillie