How To Use And Configure WordPress Widgets – Part 2

Learn how to add, configure, and use text widgets on your WordPress sidebar …

How To Add WordPress Widgets To Your WebsiteIn Part One of this step-by-step tutorial series, we explained the basics of how to use WordPress widgets.

In this section you are going to begin configuring various WordPress widgets.

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, filter posts by categories, newsfeeds, adding site search features, etc.

In a default WordPress installation, your site comes with several preinstalled widgets

(In a default WordPress installation, your site comes with a number of built-in widgets)

Configuring Sidebar Widgets In WordPress In WordPress: Step-By-Step Tutorial

In this tutorial, we are going to add, configure and reorder s number of WordPress widgets, including:

  • Add a Support graphic button linking to the contact details page.
  • Add a Categories section.
  • Add a Recent Posts section to display the latest posts.
  • Adding a list of your site’s Pages.
  • Display Links on the sidebar section.
  • Adding an RSS Feed section.
  • Adding a Tag Cloud.
  • Configure how Archived Posts display on your sidebar area.

The Widgets area is located inside the dashboard area by going to Appearance > Widgets

Understanding WordPress For Newbies: About WordPress Widgets

(Widgets Menu)

This brings up the Widgets screen into your browser …

Widgets Section

(Widgets Section)

Let’s start configuring your widgets …

Adding Text Widgets To The Blog Sidebar

Text widgets are quite useful …

Text widget

(WordPress Text widget)

Important Info

Rich Text Widget

From version 4.8 onward, WordPress has added native rich-text editing capabilities to text widgets …

Rich Text Widget

(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 instructions, videos, news and updates 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 …

Text widgets are extremely versatile

(A text widget is really versatile!)

Example: Add A Contact Button To Your Sidebar Navigation Section Using A Text Widget

For this example, let’s set up a clickable contact 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, create or source a “help button” graphic image that visitors can click on …

Add A Clickable Contact Button To Your Sidebar Area Using A Text Widget

We’ll set up the clickable button to display at the top of the sidebar navigation section like in the example shown below …

Add A Clickable Help Button To The Sidebar Navigation Area Using A Text Widget

Step 1 – Upload your image.

Upload the button image to a folder on your server and note down the address of your image location.

For example …

http://www.yourdomain.com/images/supportbutton.jpg

This information will be used in Step 3.

In order for visitors to go to your contact page when they click on the help button, either create a contact page, or have an existing destination page already set up (e.g. a helpdesk). We will then link your button graphic to this URL in Step 3

Step 2 – Create a destination page.

Create a contact page and note the page URL …

Using A Text Widget To Add A Clickable Contact Button To The Sidebar Navigation Menu

Step 3 – Create the HTML code for your text widget.

Don’t worry … this sounds a lot more technical than it is. In simple terms, we just need to create the instructions linking the graphic image to the contact page/helpdesk.

Your code can be composed in a simple text file and should look something like this …

Add A Clickable Help Button To Your Sidebar Navigation Area Using A Text Widget

  • 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 which sections of the above code you need to replace with the actual web addresses …

Use A Text Widget To Add A Help Button To The Sidebar Navigation Area

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, see this tutorial:

Go back into your Widgets panel …

Activate or deactivate widgets using drag & drop

(Widgets Screen)

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, select the Text widget …

WordPress text widget

(WordPress text widget)

Drag your Text widget to the Active Widgets section and release the widget at the very top of the Widget Area

Dragging and dropping your WordPress text widget

(Drag-and-drop your Text widget)

Step 5 – Configure the widget settings.

Click on the Text widget title bar to configure the widget options. Paste the code with the links to your contact page and graphic button into the text widget content area and click the save button …

Text widget

Add a title section to the widget if you want (e.g. “Need Help?”, “Support”, etc.) and paste the code with the correct URLs into the text area, then click the save button …

WordPress text widget

Important

Note: Remember to check all links before pasting scripts into the Text Widget, or the button won’t work.

*** If using WordPress version pre-4.8 ***

If 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 paragraphs (note: this is not necessary if you’re typing in formatted HTML content like we’re doing in this tutorial).

Here is some text added to a Text widget with Automatically add paragraphs option not checked …

Automatically add paragraphs box not ticked

(Automatically add paragraphs option not ticked)

Here is some text added to a Text widget with Automatically add paragraphs box selected …

Automatically add paragraphs option ticked

(Automatically add paragraphs option ticked)

***

Step 6 – Refresh the web browser.

After adding your text widget and formatted content, go to your site and refresh your web browser. If you have entered all of the links correctly, then the clickable support button will display in the site’s sidebar menu …

Use A Text Widget To Add A Help Button To Your Sidebar Section

(Clickable support button widget on blog sidebar)

The screenshot above shows the support contact button added to a brand new WordPress site.

Step 7 – Test the button.

The final step is to make sure that your clickable button works. Test the button to make sure that visitors will go to the support page when they click on the button. You should be taken to the contact page …

Test the clickable button

(Test your text widget to ensure you’ve set up everything correctly)

Tip

Text Widgets – Useful Tips:

If you want a new browser window to open up when visitors go to the support page (so they don’t leave the page they’re in), then change the code from this:

Use A Text Widget To Add A Clickable Contact Button To Your Sidebar Navigation Section

To this (i.e. insert the part containing target=”_blank” in the html code):

Add A Help Button To The Sidebar Area Using A Text Widget - open in new window

When adding images to your sidebar menu, 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. Note that some themes may display different column widths depending on their templates and their layout. Some sidebars are wide and some are narrow. If your theme’s sidebar is narrower than the width of your button images, then you may have to either adjust the size of your images, or the width of your sidebar column to make elements display correctly on your sidebar area.

Adjust column width or reduce image size

(Adjust column width or reduce image size)

Additional Tips:

  • If you don’t want your button image to be centered inside your sidebar, delete the <center> and </center> tags from the beginning and end of the code. The image will then be left-aligned.
  • You can link the help button to any destination you like (e.g. to an external site, contact form, support forum, etc.) and change this anytime by replacing the code inside the text widget.

Adding Widgets To Your Blog Sidebar Area

***

This is the end of part 2 of this series of tutorials.

To view Part Three, click here:

***

"Wow! I never knew there's so much to learn about WordPress! I bought one of the WordPress for Dummies three years ago, such authors need to be on this course!" - Rich Law, Create A Blog Now