Tag: Using Widgets

In Part One of this step-by-step tutorial series, we explained the basics of using widgets in WordPress.

In this tutorial you are going to configure various WordPress widgets.

Configuring Sidebar Widgets

In a default WordPress installation, your site comes with a number of pre-installed widgets that can be used out of the box with little to no configuration required, such as widgets that let you display external links, recent posts, text or HTML banners, add search features, etc.

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

Setting Up Frequently-Used Sidebar Widgets: Tutorial

In this step-by-step tutorial, we will add, configure and reorder s number of widgets, including:

• Add a clickable Contact Us graphic linking to your help page.
• Adding a Categories section.
• Adding a Recent Posts section.
• Add a list of your site’s most important Pages.
• Display important Links on your sidebar menu.
• Displaying the latest news using an RSS Feed section.
• Adding tags to your sidebar using a Tag Cloud section.
• Adding and configuring an Archives section to your sidebar.

The Widgets panel is located inside the WP admin area and can easily be accessed from the administration menu by choosing Appearance > Widgets …

(Widgets Menu)

This brings up the Widgets panel in your browser …

(Widgets Area)

Let’s begin to configure some widgets …

Text Widgets

Text widgets are versatile …

(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 let you insert just about anything you want into your sidebar or other widget sections, such as instructions, image links, special promotions and more to your site … simply by typing in text or inserting HTML into the widget content area. You can also give the widget a title. Remember to save your settings …

(Text widgets are very useful!)

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

For this example, let’s set up a contact button on your sidebar that takes 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 graphic image that your visitors can click on …

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

Step 1 – Upload your image.

To display the image on your site, the image must be uploaded to your server. Upload your button graphic to the images folder in your server and write down the path to your image location.

E.g. …

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

This information will be used in Step 3.

For visitors to be taken to the 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 link the button graphic to this URL in Step 3 …

Step 2 – Add the contact page.

Create a contact page and note its URL …

Step 3 – Compose your text widget code.

Don’t worry … this sounds a lot more technical than it is. Basically, you just need to create the instructions for your clickable button.

Your instructions can be written a simple text file and should 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 above with the URL of your image location.

The screenshot below shows the sections of the above sample code that you need to replace with your actual contact details …

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

• A Practical Guide To HTML Formatting Tags For WordPress Dummies

Now, go back to your Widgets area …

(Widgets Area)

Step 4 – Add a Text widget.

Add a Text widget to your sidebar where you want the button to display.

In the Available Widgets area, find a Text widget …

(Text widget)

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

(Drag and drop your Text widget)

Step 5 – Configure your text widget.

Click on the widget title bar to configure the widget options. Paste the code with the URLs 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 URLs into the text area, then click Save when done …

Note: Remember to test all URLs before pasting scripts into the Text Widget, or the clickable button will not work.

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

If adding text with no formatting tags, 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 type in formatted HTML content like we’re using in the example for this tutorial).

Here is some text with Automatically add paragraphs box not ticked …

(Automatically add paragraphs option not ticked)

Here is some text with Automatically add paragraphs box selected …

(Automatically add paragraphs option ticked)

***

Step 6 – Refresh the web browser.

After adding the widget and code, visit the front-end of your site and refresh your web browser. If you have entered all of the links correctly, then the clickable support button should display at the top of the sidebar menu …

(Clickable button widget on blog sidebar)

The above screenshot shows ’click for help’ button added to a newly-installed WordPress site.

Step 7 – Test the button.

The last step is to ensure that your destination link works. Test this by clicking the support button. You should be taken directly to your contact page …

(Test the clickable button to make sure you’ve set up everything correctly)

Text Widgets – Useful Tips:

If you would like a new window to open up when visitors go to the support page (so they don’t leave the page they’re on), then change the text widget code from this:

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

When choosing images for your sidebar section, make sure that the width of your image does not exceed the width of your 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 are wide and some are narrow. If the sidebar of your theme is narrower than the width of your button image, then you may need to either adjust the size of your images, or the width of your sidebar column to make images display correctly on your theme.

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

Extra Tips:

• If you don’t want to center your image in your sidebar, delete the <center> and </center> tags from the beginning and end of the code. The image will then be aligned to its default settings (normally left-aligned).
• Link your support button to any destination you want (e.g. to an external site, contact form, support forum, etc.) and change this anytime by replacing the content inside the widget.

***

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

To view the rest of this tutorial series, click this link:

• Adding WordPress Widgets To The WordPress Blog Sidebar – Part 3

***