In Part One of this tutorial, we explained the basics of how to use WordPress widgets.
In this section we are going to show you how to configure a number of WordPress widgets.
Sidebar Widget Configuration
In a default WordPress installation, your site comes with a number of built-in active widgets, such as widgets that let you display external links, recent posts, news items, filter content by publish dates, etc.
(In a default WordPress installation, your site comes with a number of active widgets)
How To Set Up Frequently-Used Widgets On The Sidebar: Step-By-Step Tutorial
In this tutorial, we will add, configure and reorder s number of WordPress widgets, including:
- Adding a clickable Support graphic linking to your contact page.
- Add a Categories section.
- Add a Recent Posts section.
- Add a list of the site’s main Pages.
- Display a list of useful Links on the sidebar menu.
- Display a newsfeed using an RSS Feed section.
- Adding a Tag Cloud section.
- Configure how Archived Posts display on your sidebar area.
To use widgets, access the Widgets panel located inside your WP admin by going to Appearance > Widgets …
This loads the Widgets section into your browser …
Let’s get started …
Add A Text Widget
Text widgets are incredibly useful …
(WordPress Text widget)
A text widget can be used to add comments, image links, special promotions and more to your site … simply type in text or insert HTML into the content area. You can also add an optional title in the Title field. Remember to save your settings when done …
(Text widgets are very useful!)
Example: Use A Text Widget To Add A Clickable Contact Button To The Sidebar Section
For this example, let’s set up a clickable support button on your sidebar navigation 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, create or source a “help button” graphic image that your visitors can click on …
We’ll set up a clickable Help button to display at the top of the sidebar menu like in the example shown below …
Step 1 – Upload your image.
To display the clickable button image on your site, the button image must be uploaded to your server. Upload the button graphic to a folder on your server and note down the path to your image location.
This information will be required in Step 3.
For someone to go to your contact page when they click on the support 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 graphic to this URL in Step 3 …
Step 2 – Add a destination page.
Create a contact page and note down its URL …
Step 3 – Compose the HTML code for your text widget.
Don’t worry … this sounds a lot more technical than it is. Basically, we just need to create the instructions linking your button image to your contact page/helpdesk.
Your code can be composed in a plain text editor and will 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 screenshot below shows which sections of the above code you need to replace with the 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 figuring out basic HTML code, refer to this tutorial: Using HTML Formatting Tags In WordPress
Now, go back into your Widgets area …
Step 4 – Add a Text widget.
Add a Text widget to your sidebar in the location where the clickable button should display.
In the Available Widgets area, select a Text widget …
(WordPress text widget)
Drag your Text widget to the Active Widgets section and release it at the very top of the Widget Area …
(Drag and drop your Text widget)
Step 5 – Configure the widget.
Click on the widget title bar to configure its 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 your widget if you want (e.g. “Need Help?”, “Get Help”, etc.) and paste the code with the correct destination links into the large text box, then click the save button …
Note: Remember to check your contact page and image URLs before pasting scripts into your Text Widget, or the clickable button won’t work.
Also, if you’re adding text without formatting tags like paragraph breaks, 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 type 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 option not selected)
Here is some text added to a Text widget with Automatically add paragraphs option selected …
(Automatically add paragraphs box checked)
Step 6 – Refresh your browser.
After adding the text widget and code, visit your site and refresh the web browser. If all links have been entered correctly, then the support button will display at the top of your site’s sidebar menu …
(Clickable support button widget on sidebar)
The above screenshot shows the contact button added to a brand new WordPress site.
Step 7 – Test your button.
The final step is to ensure that your destination URL works. Test your button to make sure that visitors will go to the support page when clicking the graphic image. You should be taken directly to your contact page …
(Test your clickable button to ensure you’ve set up everything correctly)
If you want your contact page to display in a new window when visitors click on the help (so they don’t leave the page they’re in), then change the code from this:
To this (i.e. add the section containing target=”_blank” in your code):
When adding images to your sidebar menu, make sure that the width of the image doesn’t exceed the width of the sidebar column, especially if you are using a non-responsive WordPress theme. Note that some themes can display different column widths depending on their templates and layout. Some sidebars may be too wide or too narrow. If the sidebar of your theme is narrower than the width of the graphic images, then you may need to either adjust the image size, or the column width to make graphics display correctly on your theme.
(Make sure that the image width does not exceed the sidebar column width)
- If you don’t want your button to be centered in your sidebar, delete the <center> and </center> tags from the beginning and end of the line of code. The image will then align to the left.
- Link the contact button to any destination you want (e.g. to an external site, helpdesk, FAQ page, etc.) and change this anytime by editing the content inside the widget.
This is the end of section 2 of this tutorial about how to use WordPress widgets.
To view the rest of this tutorial series, click this link: Adding WordPress Widgets To The Sidebar Navigation Menu – Part 3
"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
Disclaimer: This site has no association with WordPress or any WordPress-related products promoted on this website. We may receive a financial benefit from purchases of any products or services advertised, endorsed or linked from our website. All product images are the copyright of their respective owners, comply with all license terms and agreements of use to the best of our knowledge and are used solely for illustrative or training purposes.
Did you find this article useful? Feel free to use the social links below and share this article with others who could benefit from WordPress.