How To Use And Configure WordPress Widgets – Part 2

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

Get Thrive Leads for WordPress

How To Add WordPress Widgets To The Sidebar SectionIn 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.

By default, your site comes with several pre-installed widgets

(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

Understanding WordPress For Newbies: About WordPress Widgets

(Widgets Menu)

This loads the Widgets section into your browser …

Widgets Section

(Widgets Panel)

Let’s get started …

Add A Text Widget

Text widgets are incredibly useful …

Text widget

(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 extremely versatile

(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 …

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

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

Using A Text Widget To Add A Contact Button To Your Sidebar Menu

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.

E.g. …

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

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 …

Using A Text Widget To Add A Contact Button To The Sidebar Navigation Area

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 …

Use A Text Widget To Add A Support Button To The Sidebar Area

  • 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 …

Use A Text Widget To Add A Contact Button To Your Sidebar Navigation Area

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 …

Activate or deactivate widgets using drag & drop

(Widgets Panel)

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

(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 WordPress text widget

(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 …

WordPress text widget

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 …

WordPress text widget

Useful Information

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 unchecked

(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

(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 …

Add A Clickable Contact Button To The Sidebar Section Using A Text Widget

(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

(Test your clickable button to ensure you’ve set up everything correctly)

Useful Tip

Useful Tips:

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:

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

To this (i.e. add the section containing target=”_blank” in your code):

Add A Clickable Contact Button To The Sidebar Section Using A Text Widget - open in new window

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.

Adjust column width or reduce image size

(Make sure that the image width does not exceed the sidebar column width)

Additional Tips:

  • 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.

How To Add And Configure WordPress Widgets In The Website

***

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.

Get Thrive Leads for WordPress

***

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.

Author: Martin Aranovitch

WPCompendium.org provides hundreds of FREE WordPress tutorials for beginners. Our detailed step-by-step tutorials will save you money and teach you how to start, manage, and grow a website or blog using WordPress that puts you in complete control and delivers results with no coding skills required!