In Part One of this tutorial series, we explained the basics of how to use widgets in WordPress.
In this section you will learn how to configure various WordPress widgets.
How To Configure Sidebar Widgets
In a default WordPress installation, 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 for displaying external links, filter posts by categories, news items, add tag clouds, etc.
(By default, your site comes with a number of active widgets)
Adding Frequently-Used WordPress Sidebar Widgets To WordPress: Step-By-Step Tutorial
In this step-by-step tutorial series, we will add, configure and reorder various commonly-used widgets, including:
- Add a Support button linking visitors to the contact page.
- Adding a Categories section with a drop down menu.
- Adding a Recent Posts section to display your latest posts.
- Adding a list of the site’s Pages.
- Display a list of useful Links on your sidebar.
- Display news items with an RSS Feed section.
- Add a Tag Cloud section.
- Adding and configuring an Archives section to your sidebar.
The Widgets screen is located inside your WP administration area and can easily be accessed from the administration menu by clicking on Appearance > Widgets …
(Widgets Menu)
This brings up the Widgets panel in your web browser …
(Widgets Area)
Let’s get started …
Add A Text Widget To Your Sidebar
Text widgets are incredibly useful …
(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)
A text widget can be used to add policies, videos, special promotions and more to your site … simply type in text or insert HTML into the widget 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 Menu Using A Text Widget
For this example, we’ll set up a clickable support button on the sidebar area that will take 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 graphic image that your visitors can 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 button image to your server’s images folder and note the address of your image location.
E.g. …
http://www.yourdomain.com/images/supportbutton.jpg
This information will be required in Step 3.
For someone to be taken to the contact page when the help button is clicked, either create a contact page, or have an existing destination page already set up (e.g. a helpdesk). We will link the button image to this URL in Step 3 …
Step 2 – Create a support page.
Create a contact page and note its URL …
Step 3 – Compose the HTML code for your text widget.
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 linking your graphic image to your contact page/helpdesk.
Your instructions can be typed in a plain 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 image below shows the sections of the above code that you need to replace with the actual web addresses …
Replace the above URLs and then copy all of the above code to your clipboard when finished.
If you need help understanding basic HTML code, refer to this tutorial:
Next, go back into your Widgets area …
(Widgets Screen)
Step 4 – Add a Text widget.
Add a Text widget to your sidebar where you want your clickable button to display.
In the Available Widgets area, select a Text widget …
(Text widget)
Drag your Text widget to your Active Widgets section and release it at the top of the Widget Area …
(Drag-and-drop your Text widget)
Step 5 – Configure your widget.
Click on the 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 save …
Add a heading 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 test all URLs before pasting scripts into your Text Widget, or your clickable button will not work.
*** If using WordPress version pre-4.8 ***
If adding text without 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 typing in formatted HTML code like we’re doing in this tutorial).
Here is some text with Automatically add paragraphs box unchecked …
(Automatically add paragraphs box not ticked)
Here is some text with Automatically add paragraphs box selected …
(Automatically add paragraphs option selected)
***
Step 6 – Refresh the web browser.
Once you have added the widget and code, go to your site and refresh your browser. If all links have been entered correctly, then the clickable support button should 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 navigation area of a newly-installed WordPress site.
Step 7 – Test your widget.
The final step is to make sure that the destination link works. Test this by clicking the graphic button. If you are taken to the support page, then your text widget has been set up correctly …
(Test your clickable button to make sure you’ve set up everything correctly)
Tips:
If you want a new browser window to open up when visitors click on the help button (so they don’t leave the page they’re on), then change the code from this:
To this (i.e. insert the part that says: target=”_blank” in your code):
When choosing images to add to your sidebar area, 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. Note that some themes may display different column widths depending on their templates and their layout. Some sidebars may be too wide or too narrow. If the sidebar of your theme is narrower than the width of your graphic images, then you may need to either adjust the image size, or the width of your sidebar column to make images display correctly on your sidebar section.
(Adjust column width or reduce image size)
More Tips:
- If you don’t want to center your button inside your sidebar, delete the <center> and </center> tags from the beginning and end of the HTML code. The image will then be left-aligned.
- Link the help button to any destination you like (e.g. to an external site, helpdesk, FAQ page, etc.) and change this anytime by editing the links in your text widget.
***
This is the end of part two of this tutorial series on how to use Widgets.
To view the rest of this tutorial series, click here:
***
"I was absolutely amazed at the scope and breadth of these tutorials! The most in-depth training I have ever received on any subject!" - Myke O'Neill, DailyGreenPost.com