How To Use Widgets In WordPress - Part 3

How To Use WordPress Widgets – Part 3

WordPress Widgets screen.

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:

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.

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.

Block-based Widgets screen - Social Icons.
Let’s add social media links to our sidebar.

Select and drag the Social Icons block into your sidebar.

Adding Social Icons block to sidebar using drag and drop.
Drag and drop the Social Icons block to your sidebar.

After adding the Social Icons block to your sidebar, click on the Add block button to begin adding your social media accounts.

Social Icons block - Add social media account.
Click on Add block to start 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.

Adding icons to the Social Icons block.
Let’s add a Facebook icon to the Social Icons block.

The selected icon will be added to the block.

Icon added to block.
Icon added to 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.

Adding a social media URL to icon.
Enter the social media URL associated with the icon.

Click on the ‘Add block’ tool and repeat the above process to continue adding icons.

Social Icons block - adding new icons.
Continue adding icons to the Social Icons block.

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).
Social Icons block - Configuring block settings.
Adjust the Social Icons block.

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.

Reordering icons inside the Social Icons block.
Reorder icons inside the block.

You can transform the block into a Columns block  or Group block and apply different icon styles (e.g. Default, Logos Only, Pill Shape)

Social Icons block settings - Transform block and add Styles.
Apply different styles to your icons.

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.

Social Icons block - Block Settings section.
Use the Block Settings section to further configure and customize your icons.

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.

WordPress site with Social Icons block added.
Social icons added to the sidebar.

Tip

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.

Social Icons block - Add block tool.
Let’s add an RSS icon to our block.

Search for “RSS” and click on the RSS Feed block in the search results.

Social Icons block - RSS Feed block.
Search for the RSS Feed block.

This will insert the RSS icon into the block.

The next step is to add a link to your site’s RSS feed.

Social Icons block - RSS icon added.
RSS icon added – now we need the feed URL.

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

Meta widget - Entries feed link.
Copy your site’s RSS feed link from the Meta widget.

Click on the RSS icon and paste your feed URL into the link field, then click the Apply button.

Social Icons block - link area.
Paste your feed URL into the link area and click Apply.

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.

Social Icons block with RSS feed added.
RSS feed added to Social Icons block.

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).

WordPress site with sidebar.
Let’s add an RSS feed to our sidebar.

Click on Appearance > Widgets on the main menu to go to the Widget section.

Dashboard menu: Appearance - Widgets.
Go to the Widgets section.

This will bring up the Widgets screen and a panel with a list showing all the available widget areas for your installed theme.

Widgets screen with available widget areas.
This theme’s available widget areas.

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.

Widgets screen - Expanded widget area.
Expand the widget area.

Next, click on the Add block tool.

Widgets screen - Add block tool.
Click on the Add block tool.

This brings up the Block menu and search tool.

Widgets screen - Block menu.
Block menu.

Alternatively, click on the Inserter tool in the location of the widget area where you would like to add your RSS feed.

Widgets screen - Inserter tool.
You can also add a block using the Inserter tool.

Search for “RSS”.  Locate the RSS block and click or drag it to insert the block into your sidebar widget area.

Widgets screen - RSS block.
Click on the RSS block.

All you need to do here is paste your feed URL into the RSS block.

Widgets screen - RSS block added to widget area.
RSS Block added to the widget area.

Copy the feed URL of the site you want to display posts from to your clipboard, then paste it into the URL field.

Widgets screen - Add Feed to RSS block.
Add the feed and click the Use URL button.

If the feed URL is correct, feed content from the site will display immediately in the block.

Widgets screen: RSS block - feed content.
Feed content is displaying, so the feed URL we have entered is correct.

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.

Widgets screen: RSS block - Grid view.
Select List or Grid view for your feed content.

To further configure your feed, open the Block Settings section.

Widgets screen: RSS block settings.
Configure your feed in the RSS 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).
Widgets screen - RSS block settings.
Experiment with different options and configure how your feed will display.

When done, remember to update and preview your site to make sure that everything is working correctly.

WordPress site with RSS Widget displayed.
Visitors will see the feed on the sidebar via the RSS widget.

info

If you have the WordPress Classic Editor installed, you will follow a similar process.

RSS feed added to the sidebar using the Classic editor.
RSS feed added to the sidebar using the Classic editor.

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.

Classic Widgets screen - RSS widget.
Add an RSS widget to the sidebar (Classic Widgets screen)

Enter the following information into the widget settings:

  1. RSS feed URL: Enter the URL of your RSS feed into this field.
  2. Feed Title: You can add an optional title to your feed.
  3. Items to display: Select the number of feed items to display from the drop-down menu (1-20 items).
  4. Display item content: Check this box to display content for items in your feed.
  5. Display item author: Check this box to display the feed item’s author.
  6. Display item date: Check this box to display the feed item’s date.
RSS Widget options.
RSS Widget options.

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).

RSS feed on sidebar.
This feed displays only the title of the feed items.

And here is the same feed with all the widget’s options enabled.

RSS feed showing on sidebar.
This RSS Feed widget has all the 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.

WordPress site with widgets on sidebar.
Add widgets to your sidebar and increase engagement on your site.

***

This is the end of the tutorial series on using Widgets.

***

Print Friendly, PDF & Email

Updated: April 9th, 2023

Terms Of Use | Privacy Policy

Scroll to Top