How To Use WordPress Widgets – Part 3
In part 3 of this tutorial series on using widgets, you will learn how to set up useful widgets to help boost user engagement on your site.
This tutorial covers:
For additional tutorials, go here:
- WordPress Widgets Explained – Learn what WordPress widgets are, how widgets work, and how widgets can help you customize and extend the functionality of your website or blog.
- How To Use WordPress Widgets – Part 1 – The basics of using and managing widgets in WordPress.
- How To Use WordPress Widgets – Part 2 – Add commonly-used widgets to your sidebar, header, or footer.
- How To Use WordPress Widgets – Part 3 – (You are here)
To access the Widgets screen, go to Appearance > Widgets.
This will bring up the Widgets screen on your browser.
If your site uses the block-based Widgets editor, your screen will look like the screenshot below.
For this tutorial, we’ll use the block-based Widgets editor.
Note: With the block-based Widgets editor, adding widgets is really just adding blocks from the WordPress Block Library to your sidebar, header, footer, etc.
How To Add Social Media Links
Let’s add social media links to your sidebar using the Social Icons block.
In the Widgets screen, click the Inserter Tool [+] and start typing in “social” to bring up all social media-related blocks.
Select and drag the Social Icons block into your sidebar.
After adding the Social Icons block to your sidebar, click on the Add block button to begin adding your social media accounts.
The Social Icons block supports many icons, including LinkedIn, Dropbox, Etsy, Reddit, Snapchat, TikTok, and many more.
Type in the icon you are looking for into the block search tool and click on a block to add the icon.
The selected icon will be added to the block.
Select the icon and enter your social media URL for that network. (Note: if no URL is entered, the icon will not display on your site.)
Click the Apply button to add the URL.
Click on the ‘Add block’ tool and repeat the above process to continue adding icons.
After adding icons, you can adjust and configure the block in various ways, including:
- Repositioning the block on your widget (use the up and down arrows or drag the block to another location).
- Align the block (left, center, right).
- Change items justification (justify items left, center, right, and add space between items).
- Change the Size of icons (small, normal, large, huge).
You can also add new icons and reposition icons within the block.
Click on the [+] button to add new icons or click on an icon and use the left and right arrows to reorder.
You can transform the block into a Columns block or Group block and apply different icon styles (e.g. Default, Logos Only, Pill Shape)
To further edit and configure the Social Icons block, open up the Block Settings section.
Here, you can set links to open in a new tab, change the color settings of the icon and background color, and apply advanced settings like jump links and CSS classes.
When you are done adding social icons, update the Widgets section and preview and test the links on your site to make sure they’re all working correctly.
An additional icon you can add using the Social Icons block is your site’s own RSS feed.
This provides your site visitors with an easy way to subscribe to your posts.
Let’s add an RSS icon to your existing block of social icons.
To insert an icon into the block, click on the Inserter tool [+] at the end of the block or between icons. For this example, we’ll insert our RSS icon between our YouTube and Amazon links.
Search for “RSS” and click on the RSS Feed block in the search results.
This will insert the RSS icon into the block.
The next step is to add a link to your site’s RSS feed.
If your site has the Meta widget installed, copy the link to the Entries feed to your clipboard.
If you need help finding or using your site’s RSS feed, see this tutorial: Using WordPress RSS
Click on the RSS icon and paste your feed URL into the link field, then click the Apply button.
The RSS icon and feed URL are now added to your Social Icons block.
Remember to update your widgets screen and test the icon on your site to make it’s working correctly.
How To Add A News Section With RSS Feeds
Now that you have added icons to your site including a link to your RSS feed, suppose you want to publish content from another site’s RSS feed on your site like a “Latest News” section?
This section will show you how to do it.
We’ll add a widget to the sidebar displaying the latest news or updates from another site (e.g. a news site).
Click on Appearance > Widgets on the main menu to go to the Widget section.
This will bring up the Widgets screen and a panel with a list showing all the available widget areas for your installed theme.
We’ll add the RSS feed to the sidebar of this theme.
Click on the triangular icon in the title area to expand the widget.
Next, click on the Add block tool.
This brings up the Block menu and search tool.
Alternatively, click on the Inserter tool in the location of the widget area where you would like to add your RSS feed.
Search for “RSS”. Locate the RSS block and click or drag it to insert the block into your sidebar widget area.
All you need to do here is paste your feed URL into the RSS block.
Copy the feed URL of the site you want to display posts from to your clipboard, then paste it into the URL field.
If the feed URL is correct, feed content from the site will display immediately in the block.
You can choose to display feeds in List or Grid format. You can also align the feed in your content and edit/replace it with another feed URL.
To further configure your feed, open the Block Settings section.
Here, you can configure additional settings like:
- The number of items to display on your feed.
- Display feed author.
- Display post date.
- Display post excerpt for each feed item.
- If ‘Display excerpt’ is enabled, you can also specify the maximum number of words to display in the excerpt.
- Advanced settings (CSS classes).
When done, remember to update and preview your site to make sure that everything is working correctly.
If you have the WordPress Classic Editor installed, you will follow a similar process.
With the classic widget editor, you can add an RSS widget from the Available Widgets section and drag it to a widget bar in your active area.
Enter the following information into the widget settings:
- RSS feed URL: Enter the URL of your RSS feed into this field.
- Feed Title: You can add an optional title to your feed.
- Items to display: Select the number of feed items to display from the drop-down menu (1-20 items).
- Display item content: Check this box to display content for items in your feed.
- Display item author: Check this box to display the feed item’s author.
- Display item date: Check this box to display the feed item’s date.
Experiment with different settings to find the combination that works best for you.
The screenshot below shows an example of an RSS Feed widget configured using only the settings shown above (feed item only).
And here is the same feed with all the widget’s options enabled.
For additional information about using RSS feeds on your site, see this tutorial: Using WordPress RSS
Congratulations! Now you know how to add additional functionality to your site using widgets in WordPress.
***
This is the end of the tutorial series on using Widgets.
***
Updated: July 5th, 2024