How to create an Industry News Page with the Gutenberg Block Editor

Recently I created a page on pootlepress.com that helps my readers keep up to date with my favourite WordPress Blogs and Writers.

You can find the page here https://www.pootlepress.com/best-wordpress-blogs-to-follow/

The Pootlepress.com WordPress Industry News Page

pootlepress rss industry news page created with the gutenberg block editor

An Industry News page is a nice and simple way that you can drive more traffic to your website.

And the good news is that Industry News Pages like the one I created above are simple to create.

We just need to use the RSS Block. This now comes as part of the WordPress Block Editor (Gutenberg).

Video Walkthrough

Before I show you how to build an Industry News Page with WordPress, here’s a quick explanation of RSS.

What is RSS?

RSS stands for Really Simple Syndication.

Essentially RSS is an easy and automatic way for CMS’s like WordPress to share their content, with other websites and other computer systems.

  • Every WordPress website publishes it’s own RSS feed
  • To find the RSS feed of a WordPress website just enter the url followed by /feed. So for my website, you would go to https:pootlepress.com/feed
  • You can use the Gutenberg RSS Block to display RSS feeds on your website

As well as WordPress websites creating RSS feeds there are also other places that you can grab RSS feeds to build your own Industry News Page.

For example, the BBC makes a number of news feeds available here.

BBC News Feeds

BBC RSS Feeds

BBC News page created using the Gutenberg RSS Block

Example RSS Industry News Page

You can also find useful collections of RSS feeds per Industry here.

RSS feeds by Industry

How to Build an Industry News Page: step by step Instructions

Step 1: Add the RSS Block

First, we need to add the RSS Block. This is Block that comes with the Block Editor, so you don’t need to add any plugins.

add the Gutenberg RSS Block

Step 2: Add the URL of the RSS feed

Once you add the RSS Block to your page, you’ll be prompted to add the RSS feed URL.

If you are getting the RSS Feed from another WordPress website you need to use https:xxxx.com/feed.

So if you want to show the feed from my website you would use https://pootlepress.com/feed

RSS Block Feed Url box

Step 3: Choose your RSS feed display options

The RSS Block comes with some useful customization options, found in the Block Customizer panel.

RSS Block Settings

  • How many stories to display
  • Display Author information
  • Display the date the Post was published
  • Dislay the Excerpt, and how many words to show in the Excerpt
RSS Block Settings

RSS Block Display Settings

There are two main display settings with the RSS Block, and these can be found in the Editor toolbar.

  • List view
  • Grid view
RSS Block display setttings

Step 4: Taking things further

By itself, the RSS Block doesn’t currently give you an option to change the colours.

In my BBC example above, I added some extra layout styles using two tweaks.

  • I converted the RSS Block to a Group Block so I could add a background colour
  • I added some CSS to the RSS Block so I could change the font colour and also add some padding

This is how it works.

Convert the RSS Block to a Group Block and add a Background colour

I converted the RSS Block to a Group Block so I could add a Background Colour to the whole section.

To convert the RSS Block we just select the RSS Block, then click on the little RSS icon

Select the RSS Icon

Once you click on the RSS Block icon you then need to click on Group

transform the RSS Block to a Group Block

Now it’s converted to a Group Block you’ll be able to change the background colour in the Block Customizer panel.

Group Block colour settings

Add some extra Style to the RSS Block

Finally, I wanted to add a little extra style to my layout.

  • Change the RSS Block font colour
  • Add some padding

First, we need to give the RSS Block a CSS class.

In my example below I add a class called rss

adding a class to the RSS Block

The final step is to add the CSS in the Theme Customizer Panel.

Go to Customize / Additional CSS

additional css for rss block

And here’s the CSS, just in case you want to use it on your own website 🙂

.rss a:link {
	
	color:white;

}

.rss {
	padding:50px;
}

Conclusion

Creating an Industry News Page can be a really good way to drive more traffic to your websites. Using the Gutenberg RSS Blocks makes this a breeze, and it will only take you a few minutes. I constantly update my Industry News page with new Blogs that I find useful, and it’s a great way to keep abrest of what’s happening in your Industry without having to visit multiple websites every day.

I hope you found this tutorial useful, if you have any questions, please feel free to ask in the comments below.

Thanks for taking the time to Pootle 🙂

Jamie

5 thoughts on “How to create an Industry News Page with the Gutenberg Block Editor”

  1. Pingback: WordPress News Hub – How to create an Industry News Page with the Gutenberg Block Editor

  2. Pingback: How to create an Industry News Page with the Gutenberg Block Editor — WPNEWS.io

  3. Pingback: Theme.json Horizon, Classic Editor plugin extended, Gallery Block Refactor and more - Weekend Edition #182 - Gutenberg Times

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top