How To Use And Configure WordPress Widgets – Part 2

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

Adding WordPress Widgets To The BlogIn Part 1 of this tutorial, we cover the basics of using WordPress widgets.

In this tutorial you will configure various frequently-used sidebar widgets in WordPress.

Widget Configuration

By default, your site comes with a number of pre-installed widgets, such as widgets for displaying external links, filter posts by categories, text or HTML banners, add a search box, etc.

By default, your site comes with a number of preinstalled widgets

(By default, your site comes with several built-in widgets)

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

In this tutorial series, we are going to add, configure and reorder various WordPress widgets, including:

  • Adding a Support Contact button linking to your help page.
  • Adding a Categories section.
  • Adding a Recent Posts section to display the latest posts.
  • Adding a list of your site’s main Pages.
  • Display Links on the sidebar.
  • Display news items with an RSS Feed section.
  • Add a list of clickable tags with a Tag Cloud.
  • Adding and configuring an Archives section to the sidebar.

The Widgets screen is located inside your WP dashboard and can easily be accessed from the WP admin menu by choosing Appearance > Widgets

Understanding WordPress For Newbies: About WordPress Widgets

(Widgets Menu)

This brings up the Widgets screen in your browser …

Widgets Screen

(Widgets Panel)

Let’s begin to configure some widgets …

Adding Text Widgets

Text widgets are quite useful …

Text widget

(Text widget)

Useful Information

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)

A text widget can be used to add instructions, social media buttons, scripts and more to your site … simply by typing in text or inserting HTML into the content area. You can also give the widget a title. Remember to save your settings when done …

A text widget is very useful

(Text widgets are really versatile!)

Example: Use A Text Widget To Add A Support Button To The Sidebar Navigation Menu

For this example, we’ll set up a support button on the sidebar that takes 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 visitors can click on …

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

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

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

Step 1 – Upload your image.

To display the clickable button image on your site, the graphic image must be uploaded to your server. Upload your image to a folder on your server and note the path to your image location.

E.g. …

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

This information will be required in Step 3.

For visitors to be taken to the contact page when they click on the help button, you will need to 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 – Create the destination page.

Create a contact page on your site and note the page URL …

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

Step 3 – Create 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. Basically, you just need to create the instructions linking your button image to your contact page/helpdesk.

Your instructions can be typed into a simple text editor and will look something like this …

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

  • 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 above with the URL of your image location.

The image below shows the sections of the above sample code that you will need to replace with the actual contact page and image URLs …

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

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:

Now, go back to your Widgets screen …

Activate or deactivate widgets using drag & drop

(Widgets Area)

Step 4 – Add a Text widget.

Add a Text widget to your sidebar in the location where your button should display.

In the Available Widgets area, select the Text widget …

WordPress text widget

(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

(Drag-and-drop your Text widget)

Step 5 – Configure the text widget settings.

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

Text widget

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

Text widget

Important

Note: Make sure to test your contact page and button image links before pasting scripts into the Text Widget, or your button will not work.

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

If 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 an HTML paragraph code (note: this is not necessary if you paste in HTML content like we’re using in the example for this tutorial).

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

Automatically add paragraphs box not selected

(Automatically add paragraphs box not selected)

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

Automatically add paragraphs box selected

(Automatically add paragraphs box ticked)

***

Step 6 – Refresh your browser.

After adding your text widget and code, visit your site and refresh your web browser. If all links have been entered correctly, then the support button will display at the top of your sidebar menu …

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

(Clickable button widget on sidebar)

The above screenshot shows a clickable button added to a brand new WordPress site.

Step 7 – Test your button.

The last step is to ensure that your clickable button works. Test this by clicking on the support button. If you are taken directly to the contact page, then your text widget has been set up correctly …

Test the clickable button

(Test the text widget)

Practical Tip

Tips:

If you want your support page to display in a new window when visitors click on the help (so they don’t leave the page they’re on), then change the code from this:

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

To this (i.e. include the section that says: target=”_blank” in your code):

Add A Support Button To Your Sidebar Navigation Menu Using A Text Widget - open in new window

When inserting images into your sidebar navigation area, make sure that the width of your image doesn’t exceed the width of your 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 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 column width to make images display correctly on your sidebar.

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

(Adjust column width or reduce image size)

More Tips:

  • If you don’t want your button to be centered in the sidebar, delete the <center> and </center> tags from the beginning and end of the HTML code. The image will then align to the left.
  • You can link the support button to any URL you want (e.g. to an external link, helpdesk, forum, etc.) and change this anytime by replacing the links inside the widget.

How To Add WordPress Widgets To The Website

***

This is the end of part 2 of this tutorial series on using WordPress widgets.

Click on this link to continue:

***

"This is AMAZING! I had learnt about how to use WordPress previously, but this covers absolutely everything and more!! Incredible value! Thank you!" - Monique, Warrior Forum

***

Recommended Video Courses For WordPress Users

How To Use cPanelHow To Use cPanel

cPanel is a powerful and simple-to-use web hosting management software application that gives website owners the ability to quickly and easily manage their servers and websites using a simple and intuitive dashboard.

This video course will teach you how to use the main features of cPanel to manage your web hosting.

More info: How To Use cPanel

Recommended Video Courses For WordPress Users

How To Add A WordPress Site To FacebookHow To Add A WordPress Site To Facebook

Learn how to add your WordPress site to Facebook. Learn how to obtain and set up a free SSL (Secure Sockets Layer) certificate for your WordPress site, how to change your site protocol from "http" to "https" (secure site) and how to set up a Facebook app and import your entire WordPress site into Facebook.

More info: How To Add A WordPress Site To Facebook

Recommended Video Courses For WordPress Users

Using Password ManagersUsing Password Managers

Password Managers provide an easy and secure way to keep track of all your passwords. This video course shows you how to use two FREE powerful password management tools.

More info: Using Password Managers

Recommended Video Courses For WordPress Users

Build A WordPress Site ... Fast!Build A WordPress Site ... Fast!

Need a new website or blog in a hurry?

This video course shows you how to quickly install and configure a WordPress website or blog on your own domain name and be up and running in no time!

More info: Build A WordPress Site ... Fast!

Recommended Video Courses For WordPress Users

WordPress SecurityWordPress Security

Learn how to keep your WordPress site or blog secure and protected from malware, hackers and brute-force attacks.

More info: WordPress Security

Recommended Video Courses For WordPress Users

Using S2 MemberUsing S2 Member

Learn how to set up and configure a WordPress membership site using the S2 Member free WordPress membership plugin.

More info: Using S2 Member

Recommended Video Courses For WordPress Users

How To Install, Set Up & Use WordPress MultisiteHow To Install, Set Up & Use WordPress Multisite

Learn how to quickly and securely set up an online community of websites or blogs using the powerful WordPress Multisite feature.

More info: WordPress Multisite

Recommended Video Courses For WordPress Users

Using Layers WPUsing Layers WP

Learn how to use Layers WP, a powerful, flexible and user-friendly WordPress theme that lets you build professional and stunning websites easily using point-and-click.

More info: Using Layers WP

Recommended Video Courses For WordPress Users

How To Set Up A Forum On WordPressHow To Set Up A Forum On WordPress

Learn how to set up a forum for your visitors, prospects, customers, members, or affiliates using WordPress.

More info: How To Set Up A Forum On WordPress

Recommended Video Courses For WordPress Users

How To Use Amazon S3How To Use Amazon S3

Learn how to set up and use Amazon S3 to upload, store, manage, and protect your site’s images, large media files, downloadable files, stream videos and more.

More info: How To Use Amazon S3

Author: Martin Aranovitch

Martin Aranovitch is the founder of WPCompendium.org and the author of The Small Business Digital Manager. WPCompendium.org provides hundreds of FREE tutorials that show you how to use WordPress to grow your business online with no coding skills required! Get our FREE "101+ WordPress Tips, Tricks & Hacks For Non-Techies" e-course with loads of useful WordPress tips!

Originally published as How To Use And Configure WordPress Widgets – Part 2.