In Part One of this tutorial, we cover the basics of how to use WordPress widgets.
In this section you will configure various WordPress sidebar widgets.
Configuring Sidebar Widgets
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, filter posts by categories, news items, filter content by tags, etc.
(By default, your site comes with several pre-installed widgets)
Configuring Commonly-Used WordPress Widgets On Your Sidebar Navigation Section: Tutorial
In this tutorial, we will add, configure and reorder a number of frequently-used WordPress widgets, including:
- Add a clickable Support graphic linking to your help page.
- Add a Categories section.
- Adding a Recent Posts section.
- Adding a list of the site’s most important Pages.
- Display important Links on your sidebar area.
- Displaying news items with an RSS Feed section.
- Add a list of clickable tags through a Tag Cloud.
- Configure how your Archived Posts display on the sidebar menu.
The Widgets screen is located inside your WordPress dashboard and can be easily accessed by going to Appearance > Widgets …
(WordPress Widgets Menu)
This loads the Widgets panel in your web browser …
(Widgets Section)
Let’s begin configuring your sidebar widgets …
Adding Text Widgets
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 quotes, images, news and updates and more to your site … simply type in text or add HTML into the widget content area. You can also give the widget a title. Remember to save your settings when done …
(A text widget is extremely versatile!)
Example: Use A Text Widget To Add A Clickable Support Button To Your Sidebar Navigation Menu
For this example, we’ll set up a help button on the sidebar 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 you will use on your own site …
We’ll set up the clickable Help button to display at the top of your sidebar area like in the example shown below …
Step 1 – Upload your image.
To display the clickable button image on your site, first you must upload the image to a folder on your server and write down the path to your image location.
For example …
http://www.yourdomain.com/images/supportbutton.jpg
You will use this information in Step 3.
For visitors to go to the contact page when the help button gets clicked, you must 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 – Create your support page.
Create a contact page on your site and note its URL …
Step 3 – Create your text widget code.
Don’t worry … this sounds a lot more technical than it is. Basically, you just need to create the instructions linking your graphic image to your destination URL.
Your instructions can be composed in a simple text file and will 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 will need to replace with your actual contact page and image URLs …
Replace the above URLs and then copy all of the above code to your clipboard when finished.
If you need help figuring out basic HTML code, refer to this tutorial:
Go back to your Widgets section …
(Widgets Panel)
Step 4 – Add a Text widget.
Add a Text widget to your sidebar where you would like your clickable button to display.
In the Available Widgets area, find a Text widget …
(Text widget)
Drag your Text widget to the Active Widgets section and release the widget at the very 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 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 your widget if you want (e.g. “Need Help?”, “Get Help”, etc.) and paste the code with the correct destination links into the text area, then click the save button …
Note: Make sure to test all URLs before pasting scripts into the Text Widget, or your clickable button will not work.
*** If using WordPress version pre-4.8 ***
If you’re 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 paste in formatted HTML content like we’re doing in this tutorial).
Here is some text with Automatically add paragraphs option not checked …
(Automatically add paragraphs option not selected)
Here is some text added to a Text widget with Automatically add paragraphs option checked …
(Automatically add paragraphs option checked)
***
Step 6 – Refresh the web browser.
Once you have added your text widget and HTML content, visit your site and refresh your web browser. If all links have been entered correctly, then the support button will display in the site’s sidebar menu …
(Clickable button widget on blog sidebar)
The screenshot above shows ’click for help’ button added to a brand new WordPress site.
Step 7 – Test your button.
The last step is to ensure that your links work. Test this by clicking the button. You should be taken directly to your support page …
(Test your clickable button to make sure it works)
Tips:
If you would like your contact page to display inside 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. include the part containing target=”_blank” in the text widget code):
When inserting images into your sidebar navigation section, 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 elements differently depending on their templates and layout. Some sidebars may be too wide or too narrow. If your theme’s sidebar width is narrower than the width of the graphic images, then you may have to either adjust the size of your images, or the column width to make elements display correctly on your theme.
(Adjust column width or reduce image size)
Extra Tips:
- If you don’t want the button to be centered in your sidebar, delete the <center> and </center> tags from the beginning and end of the HTML code. The image will then align to the left.
- Link your contact button to any URL you like (e.g. to an external link, helpdesk, support forum, etc.) and change this anytime by replacing the links in your text widget.
***
This is the end of section 2 of this tutorial series about using Widgets.
To continue reading, click this link:
***
"I love the way your email series "Infinite Web Content Creation Training Series" is documented and presented. It is very absorbing and captivating. The links and tutorials are interesting and educational. This has motivated me to rewrite my content following the concepts I am learning from the email series." - Mani Raju, www.fortuneinewaste.com