How To Use Widgets In WordPress - Part 2

How To Use WordPress Widgets – Part 2

WordPress Widgets screen.In part 2 of this tutorial series on using widgets, you will learn how to add commonly used widgets to your sidebar, header, or footer.

This tutorial covers:

For additional tutorials, go here:

Default Widgets

As explained in Part 1, WordPress includes many default widgets.

These widgets allow you to add useful functions and features to widgetized areas of your site like displaying a search box, archives, calendar, RSS feed, categories, tags, pages, latest posts, latest comments, custom menus, etc.

Composite image of widgets configured in an active widget area and what site visitors see.
Add useful functions to your site using widgets.

The block-based widget editor provides great flexibility, as it allows you to add any type of block available to your widget areas.

Block Widgets screen.
Block-based widget editor.

In this tutorial, we will use the Classic Widgets editor and refer to the related blocks you can use to add the same functionality.

Commonly Used WordPress Widgets

We’ll add the following widgets to a site:

  • A text box containing some text.
  • A clickable image linking visitors to your contact page.
  • A post categories section with a drop-down menu.
  • A section to display your latest posts.
  • A section to display your latest post comments.
  • A list of your site’s pages.
  • A custom menu widget with links to useful resources.
  • A video.
  • An audio file.
  • A list of clickable tags using a tag cloud.
  • Post archives.

To access the Widgets screen, go to Appearance > Widgets.

Widgets menu.
Go to Widgets.

This will bring up the Widgets screen on your browser.

Classic Widgets screen.
Classic Widgets screen.

If your site uses the block-based Widgets editor, your screen will look like the screenshot below.

Block-based Widgets screen.
Block-based Widgets screen.

Let’s start adding some widgets.

Add Text

You can add text to a sidebar, header, or footer area using the Text widget.

Select the Text widget from the Available Widgets section and either drag and drop it into a widget area or click to select and add it to a location.

Text widget.
Text widget.

The text widget has rich text editing capabilities.

Text widget.
The Text widget has a rich text editor.

You can quickly and easily format text using bold and italics, create bullet or numbered lists and insert links into your text.

Text widget displayed on sidebar.
Format text easily with the text widget.

You can add just about anything you want using a text widget, especially when using the Text tab or the Insert Media button.

For example, you can add:

  • Single lines, sentences, paragraphs, or snippets of text
  • Comments, notices, quotes, event announcements
  • Email and contact details
  • Lists
  • Tips
  • Images, videos, and other media
  • Forms
  • Messages
  • And more!
Text widget - Text tab.
Paste HTML into the Text tab.

tip

If adding scripts or HTML-formatted content, we recommend using the Custom HTML widget instead.

Custom HTML widget.
Custom HTML widget.

If you are using the block-based Widgets editor, there are several blocks you can choose from, including:

Block Widgets screen - Paragraph block added to Sidebar widget area.
Add text to a Sidebar widget area using a Paragraph block.

Add A Clickable Image

Let’s add a clickable image so visitors can contact you for help and support.

Make sure you have:

  1. Created or sourced your image.
  2. Uploaded this image to your site’s server or cloud storage location.
  3. Created a destination page to link the image to (e.g. a ‘Contact Us’ page)

If you need help with these steps, see the tutorials below:

Here’s the image we will use for this example…

Need Help? Click Here
Let’s add this image to our sidebar and link it to our Contact Us page.

We’ll set up the clickable image to display at the top of the sidebar like in the screenshot shown below.

WordPress site with sidebar image widget.
Our sidebar image widget.

Step 1 – Upload your image.

Upload the image to your server and write down the URL pointing to your server’s image location.

For example:

http://www.yourdomain.com/images/support.png

You will need this information in Step 3.

Step 2 – Add your destination page.

For visitors to go to your contact page when they click on the image, you should already have created a contact page, or an existing destination page (e.g. a helpdesk).

We will link your image to this URL in Step 3.

Contact Page URL.
Your Contact Page URL.

Step 3 – Link your image to your destination page.

If you’re not a technically minded person, don’t worry…this sounds more technical than it really is.

In simple terms, we need to add an instruction for our site to link our image with our destination URL (e.g. Contact page).

There are a couple of ways to do this:

  1. Use an Image widget (easiest method)
  2. Use a Text widget (you just need to add the linking instructions in HTML format. Note: you could also use the Custom HTML widget.)

Let’s go through both methods.

Use An Image Widget

In the Widgets screen, select and add an image widget to the sidebar area.

Image widget - Add Widget button.
Select the Image widget and click on the Add Widget button to add the widget to your sidebar.

After adding the Image widget to your sidebar area, expand the widget and click on the Add Image link.

Sidebar widget area: Image widget - Add Image
Click on the Add Image link.

Select the image from your Media Library (either upload it or use the Insert from URL feature) and click on the Add to Widget button.

Media Library - Add Image.
Select your image.

Complete the following steps:

  • Add a title to your widget (e.g. “Get Support”),
  • Insert the URL to your contact page (see Step #2)
  • Click the Save button when done.
Sidebar area - Image widget
You’re almost done…

Finally, preview and test the clickable image on your site to make sure it works and sends visitors to the correct destination URL.

Sidebar with a clickable image widget added.
Congratulations! You have added a clickable image to your sidebar.

If you want to link your image to an external URL or replace your clickable image, use the ‘Edit Image’ or ‘Replace Image’ buttons.

Image widget - Edit Image and Replace image buttons.
You can easily edit or replace your clickable image.

To learn more about using these image functions, see this tutorial: How To Add And Format Images In WordPress

If you are using the block-based Widgets editor, see this tutorial: Image block

Use A Text Widget

As stated earlier, we recommend using the Custom HTML widget for adding HTML code.

For this example, however, we’ll stick with the Text widget as it will help you understand the basic concept.

Also, if you plan to add a clickable image using a text widget, we recommend writing the instruction code for adding a clickable image in a plain text file.

We’ll then copy and paste the code into the text widget.

Your code should look something like this…

Notes:

  • Replace https://yourdomain.com/contact-us in the above code with the URL of your contact page location.
  • Replace the above image URL with the URL of your server’s image location.
  • Test your clickable image URLs (e.g. your contact page) to make sure you have the correct URLs, or your clickable image won’t work.

The image below shows the sections that need to be replaced with your contact page and image URL details.

Clickable image code.
Replace the highlighted sections with your actual details.

Replace the above URLs and copy all this code to your clipboard.

If you need help understanding HTML code, see this tutorial: A Basic Guide to HTML

Also, see the “Tips” section of this tutorial for additional information and shortcuts to creating HTML code you can add to widgets.

With the code copied to your clipboard, go back to your Widgets screen.

Let’s add a Text widget to the sidebar location where you want your clickable image to appear.

In the Available Widgets area, select the Text widget.

Text widget.
Text widget.

Select Sidebar and click the ‘Add Widget’ button or drag the widget to the Active Widgets section and release it at the top of the Sidebar widget area.

Sidebar Widget - Text Widget.
Add the Text widget to the top of the Sidebar widget area.

Next, let’s configure the text widget’s settings.

Click on the Text widget title bar to expand the widget. We’ll paste the code with the graphic image and link to your contact page from your clipboard into the text widget’s content area.

Make sure you have the Text tab selected.

Text widget - Text tab content area.
Paste the HTML code from your clipboard into the Text tab content area.

Do the following:

  1. Add a title to your widget if you want (e.g. “Need Help?”, “Get Support”, etc.) – optional.
  2. Paste the code with your links into the Text tab’s content area.
  3. Click the Save button when done.
Text widget settings configured.
HTML code for clickable image added to a Text widget.

The last step is to visit your site, refresh your browser, and make sure everything’s working ok.

If all links have been added correctly, clicking on the image in your sidebar should take you to the correct destination.

Testing a clickable image on sidebar.
Test your clickable image to make sure it’s working correctly.

tip

Useful Tips:

Adding target="_blank" to the destination URL code opens the destination page in a new window when visitors click on the image (so they don’t leave the page they’re currently visiting).

HTML code to open link in a new window.
Adding this code opens the destination link in a new window.

Remove this code if you don’t want the link to open in a new window (i.e. visitors will leave the page they’re on and go to the destination page.)

Additional Tips:

  • If you don’t want your clickable image 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 align to its default settings (normally left-aligned).
  • You can link the image to any destination URL you like (e.g. any external or external link, helpdesk or contact form page, support forum, FAQ section, etc.)
  • You can also change the destination link anytime by replacing the link in the text widget’s content.

Now that you know how to set up a text widget containing a clickable support button, let’s configure a widget to display your  Post Categories.

Add A Post Categories Widget

The Categories widget displays on your sidebar by default.

If the Categories widget has already been added to your widget area (normally the sidebar), all you need to do is position it where you want it to display using drag and drop or by clicking on the widget’s ‘move’ links.

Sidebar widgets area - reposition the Categories widgets.
Reposition your Categories widgets.

If you can’t see the Categories widget on your active widgets area, use drag and drop or select and click on the ‘Add Widget’ button to add it to your sidebar (or footer, header, etc.) from your Available widgets section.

tip

Set up your Post Categories before adding the Categories widget to display a list of categories on your site using the widget.

If you need help setting up post categories, see this tutorial: How To Use Post Categories In WordPress 

WordPress Post Categories screen.
Post Categories screen.

Configure your Categories widget as follows:

  • In Title: leave as is or change the title to something more relevant for your visitors, e.g. “Choose A Topic” (1)
  • If you plan to add many categories, check Display as dropdown (this will display all your categories in a drop-down menu, significantly reducing the footprint of your categories widget on your sidebar. If you plan to publish posts under a few categories only, then leave the Display as dropdown box unchecked. (2)
  • Leave all other options unchecked or see the additional notes on configuring the Categories widget below.
  • Click Save to update your settings. (3)
Post Categories widget's settings.
Configure your Post Categories widget’s settings.

Next, click Visit Site on your admin toolbar or refresh your browser to see how the Categories widget displays to your visitors.

Post categories widget.
Categories widget displayed using a drop-down menu.

tip

Category Widget Tips:

  • Make sure you change the default Uncategorized post category to something that will be more relevant to your site’s users and visitors.
  • If you use nested categories on your site, you may want to check the Show hierarchy option, otherwise, leave this option as is.
  • To display the number of posts published in each category, tick the Show post counts check box.
Post categories widget - post counts and hierarchy options enabled.
Post categories widget with show post counts and show hierarchy options enabled.

If using the block-based Widgets editor, see this tutorial: Categories block

Add A Recent Posts Widget

The Recent Posts widget normally displays on your sidebar by default. All you need to do is position and configure your widget.

If you can’t see the Recent Posts widget on your active widgets area, use drag and drop or select and click on the ‘Add Widget’ button to add it to your sidebar (or footer, header, etc.) from your Available widgets section.

Recent Posts widget.
Recent Posts widget.

Click on the Recent Posts widget title bar to expand the widget and configure its settings.

There is not much to configure here. You can add a title if you like, select the number of posts to display and opt to display post dates.

The default Number of posts to show for this widget is “5”. You can leave this as is or adjust the number (between 1 and unlimited).

Click the Save button to update your settings.

Recent Posts widget - settings.
Adjust the widget’s settings and click Save.

Your latest posts will display to visitors on the sidebar.

Recent Posts displayed on the sidebar.
Display your latest posts to visitors.

If using the block-based Widgets editor, see this tutorial: Latest Posts block

Add A Recent Comments Widget

If you allow visitors to leave comments on your posts, then you may want to display the latest comments on your site to visitors using the Recent Comments widget.

The only settings to configure in this widget is the Number of comments to show (default = 3). You can also give it an optional title.

Recent Comments widget.
Recent Comments widget.

Your latest post comments will then display to your site’s visitors.

Recent comments displayed on sidebar.
Display the latest post comments on your site.

If using the block-based Widgets editor, see this tutorial: Latest Comments block

Add Page Links

Let’s add a widget to display your site’s main pages on your sidebar.

Select and drag a Pages widget from the Available Widgets section to your sidebar widget.

Pages widget.
Add a Pages widget.

The Pages widget lets you configure the following settings:

  • Title: Add a title to display above your links (e.g. “Explore This Site“) (1)
  • Sort by: Sort how your pages will display: by title (i.e. alphabetically), by page order, or by page ID. (2)
  • Exclude: Hide selected pages on your sidebar (3).
Pages widget settings.
Pages widget settings.

Pages display by title in alphabetical order by default. To display pages using another option, choose a different method from the Sort by: drop-down menu.

To exclude pages from displaying to visitors on your sidebar, enter the Page IDs of all the pages you would like to exclude into the Exclude field, separated by commas.

Pages widget settings.
Exclude pages by ID.

If you need help finding WordPress post or page IDs, see this tutorial: How To Find Post Or Page IDs In WordPress

Click the Save button when finished.

Links to your site’s main pages will now display to visitors on your sidebar.

A list of pages displayed on the sidebar using the Pages widget.
Use the Pages widget to display a list of your site’s pages on your sidebar.

tip

You can add multiple Pages widgets to your widgetized areas. This is useful if you want to display different groups of pages on your site (e.g. “Products”, “Legal Pages” etc.)

If using the block-based Widgets editor, use the Page List block.

Block-based Widgets screen - Page List block.
Page List block.

Let’s add a widget to your sidebar that will display a custom menu with links to useful resources.

Before adding a custom menu widget, make sure that you have already set up and configured a menu in the Menus section.

Menu screen.
Let’s add this menu to the sidebar.

If you need help creating menus, see this tutorial: How To Use Menus in WordPress

Add a Navigation Menu widget to the sidebar widget area using drag and drop or by selecting the widget in the Available Widgets area and clicking the ‘Add Widget’ button.

Widgets screen - Add Navigation Menu widget to sidebar.
Add a Navigation Menu widget to the sidebar widget area.

In the widget settings, select the menu you would like to display in the sidebar from the Select Menu: drop-down.

Navigation Menu widget - Select a menu.
Select a custom menu to display in the widget.

Give the menu widget a title and click the Save button to update your settings.

Navigation Menu widget settings.
Add a title to the menu widget and save.

The menu widget will now display to visitors on your sidebar.

WordPress site with custom menu added to sidebar.
Your custom menu has been added to the sidebar.

If using the block-based Widgets editor, select one of the Navigation blocks to add a menu with links.

Block-based Widgets editor.
Navigation blocks.

Add A Video

The WordPress Video Widget lets you add video 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 or select the widget in the Available Widgets section and click the ‘Add Widget’ button.

Video widget.
Add a video widget to your sidebar.

Click the ‘Add Video’ button.

Video widget settings - Add Video button.
Let’s add a video.

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

If you need help adding videos to WordPress, see this tutorial: How To Add Videos In WordPress

Add Video screen.
Select a video.

In the Video widget settings area, you can do the following:

  • Title: – Add a title to the widget (optional)
  • Edit Video – Edit your video’s details.
  • Replace Video – Display a different video on your widget.

Click ‘Save’ when done.

Video widgets settings.
Configure your video widget’s settings.

The video will display on your site.

Video added to WordPress site sidebar using the video widget.
Display videos on your site using the Video widget.

If using the block-based Widgets editor, see this tutorial: Video block

Add An Audio File

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 or select the widget in the Available Widgets section and click the ‘Add Widget’ button.

Audio widget.
Add an audio widget to your sidebar.

Click the ‘Add Audio’ button.

Audio widget settings.
Let’s add an audio file.

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

If you need help adding videos to WordPress, see this tutorial: How To Add Audio Files In WordPress

Add Audio screen.
Select your audio file.

In the Audio widget settings area, you can do the following:

  • Title: – Add a title to the widget (optional)
  • Edit Audio – Edit your audio file’s details.
  • Replace Audio – Display a different audio on your widget.

Click ‘Save’ when done.

Audio widget settings.
Save your audio widget settings.

The audio file will display on your site.

Audio files added to WordPress site using the Audio widget.
Display audio files on your site using the Audio widget.

If using the block-based Widgets editor, see this tutorial: Audio block

Add A Tag Cloud

Let’s add a widget to your sidebar that will display a tag cloud with clickable tags.

To add a Tag Cloud widget, select it from the Available Widgets section and drag it to your sidebar widget area.

Tag Cloud widget.
Let’s add a Tag Cloud widget.

tip

You can manage all your site’s tags in the Tags screen.

If you need help using post tags, see this tutorial: How To Use Post Tags In WordPress

Tags screen.
Tags screen.

After adding the Tag Cloud widget to an active widget area, you can do the following:

  1. Title: – Add a title (optional)
  2. Taxonomy: – Select an option to display in the tag cloud (e.g. display tags or categories).
  3. Show tag counts – Check this box to display the tag (or category) count in the Tag Cloud.

Click Save when done to update your settings.

Tag Cloud widget settings.
Configure your Tag Cloud widget settings.

Your Tag cloud will now display on your sidebar.

Tag cloud widget displaying Tags on sidebar.
Tag Cloud widget displaying clickable Tags.

If you have configured the Tag Cloud widget to display Categories instead of Tags, then you will see a list of clickable categories instead.

Tag cloud widget displaying Categories on sidebar.
Tag Cloud widget displaying clickable Categories.

If using the block-based Widgets editor, use the Tag Cloud block.

Block-based Widgets screen - Tag Cloud block.
Tag Cloud block.

Add Post Archives

Let’s configure the default Archives widget.

Archives widget.
Archives widget.

As you publish new posts, older posts get pushed further down the chronological list and become less visible to your site visitors.

Your posts are still there and published on your site, they’re just not as visible.

The Archives Widget gives your site visitors access to all your previously published posts.

Clicking on a Post Archives link will take users to an Archive Page listing all the posts published on your site for that month.

Post Archives.
Visitors can click on your Post Archives.

This widget is simple to configure.

You can add a title and choose to display items as a dropdown menu and display post counts (display the number of posts published each month).

Click the Save button when done to update your settings.

Archives widget settings.
Archives widget settings.

The screenshot below shows a published Archives widget set up to display posts as a dropdown menu with post counts enabled.

Post Archives widget.
Select a month from the drop-down menu to view all posts archived for that month and year.

If using the block-based Widgets editor, see this tutorial: Archives block

Meta Widget

To complete this tutorial, let’s talk about the Meta widget.

WordPress Meta widget.
WordPress Meta widget.

The Meta widget is a default widget used mostly for administration purposes.

Essentially, this widget displays a link to log into your site, links to your site’s RSS feeds, and a link to WordPress.org.

WordPress site with Meta widget added.
Meta widget.

There’s nothing to configure here. You can add an optional title to the widget or click the Delete link to remove the widget from your sidebar.

Alternatively, if you want an easy way to log in without making it prominent on your sidebar, drag the widget to another widgetized area like your footer.

Meta widget settings.
Meta widget settings – nothing here to configure.

Create Your Own Custom Widgets Without Coding – Simple Cheat

Most of the widgets you will use 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 new plugins on your site.

If you want to create your own custom sidebar widgets containing images, text, links, scripts, etc. without touching any code, here is a really easy way to create a custom widget using the WordPress Classic editor:

First, create a new Post and add the content that you would like to display on your sidebar (or footer, header, etc.) to the post’s content area.

WordPress Post - Add content.
Create the content for your sidebar in a WordPress post.

Note: Keep in mind that you don’t have a lot of room to add content on your sidebar, so try and keep your information concise.

Also, don’t worry about saving or publishing your Post – all we want is to copy the HTML code of the content we’ll be creating so we can paste it into our custom widget later.

After creating your content in the post editor, switch to the Text tab.

WordPress Post Editor - Text tab.
Select the Text tab to get the HTML code for this post.

Select everything inside the text editor area and copy it to your clipboard.

WordPress Post Editor: Text tab - Select and copy the content to your clipboard.
Select and copy the content to your clipboard.

Next, go to your Widgets Screen and add a new Text widget to your sidebar, then paste the content from your clipboard into the content area, and click Save.

Custom HTML widget.
Paste the content from your clipboard into a Custom HTML widget.

Your custom widget will be added to your sidebar.

Create your own widget using the Custom HTML widget.
The Custom HTML widget lets you create your own custom sidebar widget.

Congratulations! Now you know how to use and configure a number of commonly used widgets.

WordPress site with sidebar widgets.
Add commonly used widgets to your sidebar.

***

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

Now that you know how to configure some commonly used widgets on your site, let’s add some more advanced widgets to your site.

To view the next tutorial on our series on using WordPress widgets, click here: How To Use WordPress Widgets – Part 3

***

Print Friendly, PDF & Email

Updated: April 9th, 2023

Terms Of Use | Privacy Policy

Scroll to Top