How To Use And Configure WordPress Widgets – Part 4

Learn how to add and configure various useful WordPress widgets on your sidebar and how to create custom sidebar widgets …

How To Use WordPress WidgetsIn Part 1 of this step-by-step tutorial series, we explained how to use widgets in WordPress and in Part Two, you learned how to configure text widgets.

In Part 3, we began configuring various commonly-used widgets.

In this final section, we are going to complete the step-by-step tutorial by configuring a few more frequently-used WordPress widgets.

Important

In WordPress v. 4.8, WordPress introduced new media widgets covering images, audio, and video, and an updated text widget that supports visual editing

WordPress 4.8 - WordPress Widget Updates

(WordPress 4.8 introduced new widget updates)

These widgets let you add content from your media library and media stored in other servers or storage locations (e.g. Google Drive, Dropbox, Amazon S3, etc.).

Let’s go through how to configure and use each of these widgets:

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 format text, create lists, add emphasis, and insert links into your sidebar text quickly and easily …

(Format text easily with the new text widget)

To learn more about using text widgets in WordPress, see the tutorial below:

WordPress Image Widget

The WordPress Image Widget lets you add an image to your sidebar from your Media Library or an external storage location.

To add an image, drag an image widget to your active widgets area …

Image Widget

(Image Widget)

Click on ‘Add Image’ …

Let's add an image!

(Let’s add an image!)

Select an image from the Image Library, check or add image details (e.g. Caption, Alt text, Description, etc.) if desired and click the ‘Add to Widget’ button …

Select an image

(Select an image)

The image will automatically load into the widget area …

Image added to widget

(Image added to widget)

Add a Title to your image if you want, or leave the ‘Title:’ field blank and click ‘Save’ …

Save your image

(Save your image)

Preview your website and you should see the image displayed where you have placed your image widget …

Image added to website using image widget

(Image added to website using WordPress image widget)

If you want to link your image to an URL, go back to your image widget and click on ‘Edit Image’ …

Image Widget - Edit Image

(Image Widget – Edit Image)

Add a URL in the ‘Image Details’ > ‘Display Settings’ > ‘Link To’ screen and click the ‘Update’ button …

Link your image to an URL

(Link your image to an URL)

To add an image stored in an external server or remote location, locate and copy the URL of the image to your clipboard …

Copy image URL to your clipboard

(Copy image URL to your clipboard)

Go back to your image widget and click on ‘Replace Image’ …

Image Widget - Replace image

(Image Widget – Replace image)

The Media Library browser opens. Click on ‘Insert from URL’ and paste in the image URL copied to your clipboard, then click on ‘Add to Widget’  …

Add image URL

(Add image URL)

If you have previously added an image title in your widget, remember to replace it if required, then click ‘Save’ …

Save your new image

(Save your new image)

The new image will now display on your sidebar …

New image added using WordPress image widget

(New image added using WordPress image widget)

To learn more about adding images to WordPress, see this tutorial:

WordPress Video Widget

The WordPress Video Widget lets you add audio files to your sidebar from your Media Library, YouTube, Vimeo, or an external storage location.

To add a video to the sidebar, drag a Video widget to your active widgets area …

Drag a Video widget to your sidebar

(Drag a Video widget to your sidebar)

Click the ‘Add Video’ button …

Video widget - Add Video

(Video widget – Add Video)

Select a video from your media library or add a video URL and click the ‘Add to Widget’ button …

Add a video URL

(Add a video URL)

Add a title to the widget if desired and click ‘Save’ …

WordPress Video Widget - Save Button

(WordPress Video Widget – Save Button)

Your video will display on your site where the video widget has been added …

Video added using WordPress video widget

(Video added using WordPress video widget)

To learn more about adding video to WordPress, see this tutorial:

WordPress Audio Widget

The WordPress Audio Widget lets you add audio files like podcasts, music or a personal greeting to your sidebar from your media library or an external storage location.

To add an audio file to your sidebar, drag an audio widget to your active widgets area …

Add an audio widget to your sidebar

(Add an audio widget to your sidebar)

Click the ‘Add Audio’ button…

WordPress Audio Widget - Add Audio button

(WordPress Audio Widget – Add Audio button)

Select an audio file from your media library or insert the URL of an audio file stored in an external location …

Select your audio file

(Select your audio file)

Add a title to your widget if desired and click the ‘Save’ button …

Save the audio file on your audio widget

(Save the audio file on your audio widget)

Your site will now display an audio file to visitors where you have placed the audio widget …

Audio file added to your site using the WordPress Audio Widget

(Audio file added to your site using the WordPress Audio Widget)

To learn more about adding audios to WordPress, see this tutorial:

Add An RSS Widget

Let’s add a widget to your sidebar that displays RSS feeds.

To add the widget, find an RSS widget in the Available Widgets section and drag it to your active area …

WordPress RSS Widget

(WordPress RSS Widget)

Enter the following information into the widget settings:

  1. RSS feed URL: Paste the RSS feed URL into this field.
  2. Feed Title: If you would like to add an optional title to your feed, enter it into this field.
  3. Items to display: Select the number of RSS feed items you would like to display in your sidebar section from this drop-down menu.
  4. Display item content: Check this box if you would like to display the item content.
  5. Display item author: Check this box to show the RSS feed item author.
  6. Display item date: Check this box to display the RSS feed item date.

WordPress RSS Widget settings

(RSS Widget settings)

Experiment with different options to find the ideal combination for your website.

The example below shows an RSS widget configured using the settings shown above …

RSS Widget on sidebar

(WordPress RSS Widget added to sidebar navigation area)

The example below shows the RSS Feed widget configured using other options selected …

RSS Widget settings

(WordPress RSS Widget settings)

To learn more about using RSS feeds in WordPress, see this tutorial:

Add A Tag Cloud Widget

Let’s now add a widget to your sidebar that will display a list of tags.

Important

Tags appearing in your Tag Cloud widget are managed in the Tags panel …

WordPress Tags area

(WordPress Tags area)

To add the widget, find a Tag Cloud widget in the Available Widgets section and drag it to your sidebar area …

Tag Cloud Widget

(WordPress Tag Cloud Widget)

There is very little to set up here. You can add a widget title, and choose whether to display items in the tag cloud using Tags or Categories. Click Save when done …

Tag Cloud Widget settings

(WordPress Tag Cloud Widget settings)

Your Tag cloud will now display on the sidebar …

Tag cloud displaying WordPress post tags

(Tag cloud displaying WordPress tags)

The screenshot below shows a published Tag Cloud widget set for showing Categories instead of Tags

Tag cloud displaying categories

(Tag Cloud widget displaying WordPress post categories)

To learn more about using post tags in WordPress, see this tutorial:

Configuring Your WordPress Archives Widget

To complete this tutorial, we’ll configure the default Archives Widget, which is another commonly-used WordPress widget.

As you publish new posts in WordPress, your older posts begin to move further away from public view. Your posts are still there, it’s just not as visible.

The Archives Widget lets your blog readers access dated WordPress posts …

Archives Widget

(Archives Widget)

There is really very little to set up. You can add a title, and choose whether to display items in the sidebar in a dropdown menu, and show the number of posts published each month . Click Save when done …

Archives Widget settings

(Archives Widget settings)

The screenshot below shows an Archives widget set up for displaying posts as a dropdown menu with post counts enabled …

Archives widget added to sidebar

(Archives Widget added to sidebar)

Now that you know how to configure most of the frequently-used widgets in WordPress, let’s explore some other aspects of using WordPress widgets.

WordPress Widgets – Useful Tips

Here are some useful features worth knowing about widgets:

Add ‘Visibility’ Function To Widgets

Installing the Jetpack plugin not only adds many new widgets to your widgets area …

Jetpack Widgets

(Jetpack Widgets)

It also adds a useful ‘Visibility’ function to all WordPress widgets …

Jetpack adds 'Visibility' to all widgets

(Jetpack adds ‘Visibility’ to all widgets)

This function lets you specify whether to display or hide widgets from your sidebar based on conditions you set for a particular category, author, user. role, tag, date, or page …

Set conditions to show or hide widgets

(Set conditions to show or hide widgets)

This is a really useful function to have.

For example, you can:

  • Display a widget only on your home page or only on posts published under certain categories, tags, authors, dates, etc.
  • Configure widgets to display specific or time-sensitive announcements based on a post’s category, date, etc.
  • Configure widgets to display targeted ad banners based on a post’s category or tag.
  • Hide widgets from appearing on certain posts or pages to prevent users from being distracted (e.g. remove widgets with ads from your sales pages).
  • And more!

To learn more about using the Jetpack plugin, go here:

Override Default WordPress Sidebar Widgets

If you see widgets displaying on your site’s sidebar that aren’t showing up under the active sidebar inside your Appearance > Widgets section, it’s because some themes will display their own default set of widgets until you add widgets to your sidebar.

For example, the site below shows some widgets in the sidebar section …

How To Override Default Sidebar Widgets

If you look inside the Widgets area, however, you will find that no widgets have actually been added to any of the active widget areas …

Override Default Sidebar Widgets

The theme above could be using default widgets.

Once you add one or more widgets to an active widget area, the other widgets will disappear and be replaced with the newly-added widgets instead.

Note: If you want nothing to display in your sidebar, either use a theme page template without a widgets layout or just add a blank Text widget to the sidebar navigation section.

Add a blank text widget to a widget area …

Overriding Default WordPress Sidebar Widgets

And default widgets will not appear in your sidebar/footer section …

How To Override Default Widgets

Accessibility Mode

As we have explained earlier, WordPress lets you quickly and easily reorganize how content displays in areas of your site sidebars, footers and navigation menus with only a few clicks of your mouse, using drag-and-drop …

Reorganize sidebar elements with widgets to improve your site's visitor experience

(Reorganize sidebar layout with widgets to improve user experience)

In the above screenshot, for example, you can see that we have rearranged the sidebar by switching the search and testimonial sections. This is easily done by simply dragging and dropping the widget elements into different positions inside the sidebar widget area.

Reorganizing sidebar elements using widgets can help improve visitor experience.

If, for some reason, you find that you cannot move widgets using drag-and-drop (e.g. using a mobile device that doesn’t support dragging-and-dropping), then you can still work with widgets by enabling Accessibility Mode.

How To Enable Widget Accessibility Mode

Enabling Accessibility Mode, via Screen Options, lets you use Add and Edit buttons instead of using drag & drop.

To enable Accessibility Mode, log into your dashboard and navigate to Appearance > Widgets

Widgets Menu

(WordPress Widgets Menu)

Click on Screen Options on the top right hand corner of the screen …

Widgets - Screen Options

(Widgets – Screen Options)

Click on Enable accessibility mode

Enable accessibility mode

(Switch On accessibility mode)

Once the feature has been enabled, the widgets in the Available Widgets and the Active Widgets sections, widgets will display an Add and Edit link respectively …

How To Enable Accessibility Mode For WordPress Widgets

Click on a Widget’s Add link in the Available Widgets section …

How To Enable Widget Accessibility Mode

A screen displays the selected widget with options for customizing the widget’s settings, selecting the location to add the widget, with dropdown menus that let you specify the position of the widget in the widget location (e.g. position “1”, “3”, “6”, etc.) …

How To Enable Widget Accessibility Mode

Click Save Widget to add the widget to your Active Widgets section, or click the Cancel button to return to the previous screen …

How To Enable Accessibility Mode For WordPress Widgets

Click on an active widget’s Edit link …

Enabling Accessibility Mode For Widgets

A screen will display the selected widget with options for modifying its settings.

Click Save Widget to update your settings and go back to the Active Widgets screen, or click the Delete button to delete the widget from the Active Widgets section …

Enabling Accessibility Mode For WordPress Widgets

Click on Disable accessibility mode in the Screen Options section to restore the drag and drop function to your Widgets …

Turn off accessibility mode

(Disable accessibility mode)

Creating Your Own Custom Sidebar Widgets – An Easy Cheat

Most widgets will either be installed by default when you create a new WordPress site, or be automatically added to your Available Widgets area when you install a new plugin on your site.

If you want to create your own custom sidebar widget, then here is a really simple and easy way:

First, create a new Post and type in the content that you want to display in the sidebar navigation area…

Creating Your Own Custom Sidebar Widgets

Ensure that any images you plan to use are resized to fit the maximum width of your sidebar menu. Also, keep in mind that there’s no a lot of room to put content on your sidebar, so try and keep your information concise.

Also, don’t worry about saving your Post – all we are looking for is the content so we can paste it into your sidebar widget.

Once you have composed your content in the WordPress editor, click on the Text tab …

Create Your Own Custom Sidebar Widgets

Select and copy everything to your clipboard…

Create Your Own Sidebar Widgets

Next, go into your Widgets Screen.

Insert a new Text widget into your sidebar, paste the content from your clipboard into the content field and click Save

How To Create Your Own Sidebar Widgets

Your custom widget will be added to your sidebar section…

How To Create Your Own Custom Sidebar Widgets

(Create your own custom sidebar widgets)

Congratulations! Now you know how to use and configure various commonly-used sidebar widgets.

Using WordPress Widgets

Subscribe below & receive 101+ useful WordPress tips that will help grow your business online faster ...

101+ WordPress Tips, Tricks & Hacks For Non-Techies

Get 101+ Powerful WordPress Tips, Tricks & Hacks For Non-Techies ... 100% FREE!

Enter your details below and we'll send you 101+ useful WordPress tips, tricks and hacks directly to your inbox:

We will never SPAM you!

***

"If you're new to WordPress, this can stand on its own as a training course and will stay with you as you progress from beginner to advanced and even guru status." - Bruce (Columbus, Ohio)

How To Use And Configure WordPress Widgets – Part 3

Learn how to add and configure a number of useful widgets on your WordPress sidebar …

How To Add WordPress Widgets To Your Sidebar SectionIn Part One of this tutorial, we explained how to use WordPress widgets and in Part 2, you learned how to configure text widgets.

In this section we will continue configuring other commonly-used sidebar widgets.

Add A Post Categories Section To The Blog Sidebar

Now that you have configure a text widget containing a clickable support button, let’s configure a widget for Categories.

The Categories widget displays on the sidebar section by default. Place this widget wherever you want your categories to display by clicking and dragging it on the sidebar widget area …

Categories Widget

(Post Categories widget)

Practical Tip

Before adding a Categories widget to the sidebar, we recommend setting up your categories inside your WordPress dashboard …

WordPress Categories

(Post Categories)

Note: We plan to provide a separate step-by-step tutorial about how to configure and use WordPress post categories.

Let’s configure your categories settings as described below:

  • In Title: type something that blog readers will understand, for example, “Choose A Topic…” (1)
  • Check Display as dropdown if you plan to have many categories (this significantly reduces the size of the widget content by displaying all categories in a drop-down menu). Leave the box unticked if you want a list of all categories to display on your sidebar. (2)
  • Leave the other options unticked, or see the additional notes on configuring this widget below.
  • Click Save to update your settings …

WordPress Categories Widget settings

(WordPress Categories widget settings)

Click Visit Site or refresh your page to see how your Categories widget will display to blog readers …

Categories widget added to sidebar menu

(WordPress Categories widget added to sidebar navigation menu)

Tip

Tips:

  • Change the default Uncategorized post category to something more meaningful.
  • If you use nested categories on your site, you may want to check the Show hierarchy option, otherwise leave this section as is.
  • To display the number of posts published in each category, tick the Show post counts check box …

Category widget options - Post Count Enabled vs Post Count Disabled

(Category widget options – Post Count Enabled vs Post Count Disabled)

Add Recent Posts To The Blog Sidebar

The Recent Posts widget normally shows on the sidebar navigation area by default. All you need to do is configure this widget.

Click on the title bar to display the configuration settings …

Recent Posts widget

(Recent Posts widget)

There is very little to set up here. You can add a widget title, select the number of posts to display and display post dates. If you’re happy with the default setting for Number of posts to show, then just leave the widget as is, otherwise enter the number of posts to show and click Save

Recent Posts widget settings

(Recent Posts widget settings)

Your most recent posts will display on the sidebar area …

Recent Posts WordPress widget on blog sidebar

(Recent Posts widget displayed on sidebar)

To learn how to create and edit WordPress Posts, see this step-by-step tutorial: How To Create A New WordPress Post

Adding A Pages Widget

Next, let’s add a widget to your sidebar for listing pages.

Find a Pages widget in the Available Widgets section …

WordPress Pages Widget

(WordPress Pages Widget)

Drag the Pages widget to your active widget section …

Inserting a Pages widget into the sidebar area

(Adding a Pages widget to the sidebar menu)

The Pages widget lets you configure the following settings:

  • Title: Add a title to the widget (e.g. “Site Info“) (1)
  • Sort by: Sort how your pages display: by title (i.e. alphabetically), by page order, or by page ID. (2)
  • Exclude: Use this setting to hide pages on your sidebar section (3) …

Pages Widget settings

(Pages Widget settings)

By default, pages will be listed by title in alphabetical order. If you want to display pages using one of the other options, then choose a different method in the Sort by: drop-down menu …

WordPress Pages Widget settings - sort options

(Pages Widget settings – sort options)

To exclude certain pages from displaying to visitors, type in the Page Ids for all the pages you would like excluded separated by commas into the Exclude field of the widget …

Pages Widget settings - exclude pages

(Pages Widget settings – excluding pages by ID)

For a step-by-step tutorial on how to find a WordPress post or page ID, go here: Finding A WordPress Page Or Post ID

Click the Save button when done and click Close at the bottom of the widget box to minimize the widget.

Links to the blog’s main pages will now appear in the sidebar …

WordPress Pages Widget on sidebar

(Pages Widget on sidebar)

Practical Tip

Tip: You can add multiple Pages widgets to the sidebar. This is useful if you need to display separate groups of pages on your sidebar (e.g. “Products”, “Legal Pages” etc.)

Add A Links Widget

Now, let’s add a Links widget to your sidebar.

Before adding the Links widget to the sidebar area, you will first need to configure the Links section inside the dashboard …

WordPress Links section

(WordPress Links screen)

Note: We plan to provide separate tutorials about how to configure and use the WordPress Links feature.

To add the widget, select a Links widget in the Available Widgets section …

WordPress Links Widget

(Links Widget)

Drag the Links widget to your sidebar area …

Making Links Widget active

(Making Links Widget active)

The Links widget offers a number of configurable options, including the ability to specify what information to show about your links and how many links you want to display on your sidebar …

Links Widget Settings

(Links Widget Settings)

You can add as many separate ‘Link Widgets’ to your sidebar as you want. As you will see in a moment, this lets you create and display specific lists of links on your site …

Add Multiple WordPress Links Widgets To Your Sidebar

(Add Multiple Links Widgets To The Sidebar Menu)

You can sort links by Link title, Link rating, Link ID, or display links in Random order …

WordPress Links widget: 'Sort by:' drop-down menu

(Links widget: ‘Sort by:’ drop-down menu)

You can also create and display a list of items for a specific category, by selecting a link category from the ‘Select Link Category’ drop-down menu …

WordPress Links widget: 'Select Link Category' drop-down menu

( WordPress Links widget: ‘Select Link Category’ drop-down menu)

When you have finished configuring the Links Widget, click the Save button …

Links added to WordPress sidebar

(Links added to WordPress sidebar)

As the above example shows, you can display specific links to your site visitors (e.g. a list for a specific link category only), and add multiple lists of links to your sidebar.

How To Add And Configure Widgets On Your Blog Sidebar Navigation Section

***

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

Click here to continue reading:

***

"Your training is the best in the world! It is simple, yet detailed, direct, understandable, memorable, and complete." Andrea Adams, FinancialJourney.org

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 And Configure Widgets In WordPressIn Part 1 of this step-by-step tutorial, we cover the basics of using WordPress widgets.

In this section you will configure various widgets in WordPress.

Configuring Frequently-Used WordPress Widgets

By default, your site comes with a number of built-in widgets, such as widgets that let you display external links, recent posts, news items, adding a search box, etc.

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

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

Adding And Configuring Commonly-Used WordPress Widgets On Your Sidebar Navigation Menu: Tutorial

In this step-by-step tutorial, you are going to add, configure and reorder various WordPress widgets to display in your site’s sidebar navigation area, including:

  • Add a clickable Help image linking visitors to the contact page.
  • Add a Categories section.
  • Adding a Recent Posts section to display the latest posts.
  • Adding a list of Pages.
  • Display useful Links on your sidebar navigation section.
  • Display news items using an RSS Feed section.
  • Adding tag links using a Tag Cloud.
  • Configure how Archived Posts display on the sidebar area.

To use widgets, access the Widgets area located inside the administration by going to Appearance > Widgets

Understanding WordPress For Newbies: About WordPress Widgets

(WordPress Widgets Menu)

This brings up the Widgets section in your web browser …

Widgets Screen

(Widgets Area)

Let’s begin by configuring a WordPress text widget …

Add A Text Widget To Your Sidebar

Text widgets are versatile …

Text widget

(WordPress Text widget)

Important

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 quotes, videos, messages and more to your site … simply type in text or paste HTML into the content area. You can also give the widget a title. Remember to save your settings when done …

Text widgets are really useful

(Text widgets are extremely versatile!)

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

For this example, we’ll set up a clickable contact button on your sidebar navigation area 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 graphic image that your visitors can click on …

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

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

Using A Text Widget To Add A Support Button To Your Sidebar Navigation Section

Step 1 – Upload your image.

To display the image on your site, you must first upload the graphic image to a folder on your server and note down the path to your image location.

For example …

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

This information will be required in Step 3.

In order for visitors to be taken to your contact page when the support button gets clicked, 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 your button graphic to this URL in Step 3

Step 2 – Create the destination page.

Create a contact page and note its URL …

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

Step 3 – Compose your text widget code.

If you’re not a technical-minded person, don’t worry … this sounds a lot more technical than it is. In simple terms, we just need to create the instructions for your clickable button.

Your code can be written a plain text editor and should look something like this …

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

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

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

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

Activate or deactivate widgets using drag-and-drop

(Widgets Area)

Step 4 – Add a Text widget.

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

In the Available Widgets area, find the Text widget …

Text widget

(WordPress text widget)

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

Drag-and-drop your WordPress text widget

(Drag-and-drop your Text widget)

Step 5 – Configure your text widget.

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

Text widget

Useful Information

Note: Remember to check your contact page and button image URLs before pasting scripts into the Text Widget, or your clickable button won’t 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 paragraphs (note: not required if you type in formatted HTML code like we’re doing in this tutorial).

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

Automatically add paragraphs box not ticked

(Automatically add paragraphs option not checked)

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

Automatically add paragraphs box ticked

(Automatically add paragraphs box selected)

***

Step 6 – Refresh your web browser.

Once you have added the widget and code, visit your site and refresh the web browser. If all links have been entered correctly, then the support button should display in the sidebar menu …

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

(Clickable button widget on blog sidebar)

The above screenshot shows a clickable button in the sidebar of a brand new WordPress site.

Step 7 – Test your button.

The final step is to ensure that your destination link works. Test the button to make sure that your visitors will go to the support page when clicking the button. You should be taken to your support page …

Test the clickable button to make sure it works

(Test the text widget)

Tip

Tips:

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

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

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

Use A Text Widget To Add A Help Button To Your Sidebar Navigation Section - open in new window

When choosing images for your sidebar 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. As we’ve previously mentioned, some themes can display different column widths depending on their templates and their layout. Some sidebars may be too wide or too 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 the images display correctly on your sidebar area.

Adjust column width or reduce image size

(Adjust column width or reduce image size)

More Tips:

  • If you don’t want to center the button in the 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 the contact button to any destination you like (e.g. to an external site, helpdesk, support forum, etc.) and change this anytime by replacing the content inside the text widget.

Configuring Widgets On Your WordPress Sidebar Section

***

This is the end of section 2 of this tutorial series on how to use WordPress widgets.

To keep reading, click here:

***

"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