HomeTutorialsHow to Build a Single-Page Content Aggregator Website
How to Build a Single-Page Content Aggregator Website
March 25, 2021
Many people visit the same websites every day to stay up to date on the latest news. What if you could see everything in one place and automatically give your website’s audience more content at the same time?
In this article, we will learn how to build a single-page content aggregator website that can:
Automatically post evergreen content that’s hand-curated for your audience
Show off your latest articles from multiple sites
Provide one link to send visitors to all your social profiles
…and so much more!
In fact, you might be familiar with a few single-page aggregator sites already.
Aggregator sites like Drudge Report and PopURLS display tons of news content from many sources on one single page. These sites give viewers a practical way to keep up with news from across the web with an uncomplicated design.
RSS and Atom Feeds
Aggregator sites use RSS and Atom feeds from many sources to generate links to different articles.
The source websites update their RSS feeds when they publish something new. Then, the aggregator website uses the updated RSS feed to post the new link.
Combining the simple style of a single-page website with any RSS or Atom feeds offers a straightforward setup with lots of room for creativity.
Install both themes by clicking on Appearance > Themes, then the Add New button.
Click Upload Theme and browse to Seedlet’s .zip folder.
Click Install Now.
Repeat this process to install Blank Canvas.
Under Appearance > Themes, activate Blank Canvas by hovering over the theme and clicking Activate.
That’s it for the theme, now for the RSS plugin.
First, download the base WP RSS Aggregator plugin. Install the plugin by clicking Upload Plugin under Plugins > Add New.
Click browse and select the plugin’s .zip folder, then click Install Now.
Activate the plugin by clicking Activate Plugin.
Now it’s time to add some RSS feeds to show off.
Finding Feed Sources
To add a feed source, you first need to find the URL linking you to the RSS feed. This can be a bit tricky. While there are tools available to help find them, viewing the source of any page and searching for “RSS” or “feed” will usually lead right to it.
With the plugin installed, we can view the feed sources by going to RSS Aggregator > Feed Sources.
Clicking the Add New button brings us to the Add New Feed Source page.
2. Enter a name and the URL of the feed.
3. Click Publish to create the feed. Repeat this process to add multiple feed sources.
Creating the Page
Now we can get to work on how this single-page site will look!
Add a new page by clicking on Pages > Add New.
Since we’re building a single-page site, this page will hold the entire website. As we are using Blank Canvas, right now, it’s a blank slate.
We’ll use some of the block patterns included with Blank Canvas, and the WP RSS Aggregator Feeds block to bring this together.
Using Blank Canvas Block Patterns
You can find the included block patterns in the Blocks menu on the patterns tab.
This example is using the About Me pattern at the page’s top.
And it’s using the Split Screen pattern on the bottom. All the blocks are set to full width.
You’ll add these blocks by clicking the + button and looking on the patterns tab to achieve this look.
As you can see, we’ve edited the image, text, and links on both blocks to personalize the block patterns.
Adding and Organizing the Feeds
This example uses the column block to hold several WP RSS Aggregator Feeds blocks.
You are not limited to this layout, but to get this set up, you would:
Add the columns block by clicking the + icon and selecting the columns block with three equal columns.
Select the column block in the List View found at the page’s top.
Change the alignment to Full Width in the block’s menu bar.
Click a + icon inside a column and add a heading for the feed.
Add the WP RSS Aggregator Feeds block below the heading. Note: more on customizing this block’s contents in the next section.
Repeat this process inside the other two columns, adding more headings and feed blocks inside the columns to display additional feeds.
If you want to create another section like this, it’s easy to duplicate the column block by clicking the three dots on the white menu bar and selecting Duplicate. You would then adjust the block settings as needed.
Next, we’ll set the desired feed sources inside each of the Feed blocks.
By default, the WP RSS Aggregator Feeds block displays all the feed sources. You can change that by including or excluding feeds in the block settings on the right-hand pane.
By setting which feed sources to show, you can create a separate section devoted to a specific website or topic.
You’ll also find the Display Options in the block settings. Here you can set the number of items to display and turn pagination on or off.
Set WordPress to Display a Static Home Page
With our page finished, we need to tell WordPress to display the page we made as the home page. By default, the home page shows the latest posts.
To display a static home page instead of the default most recent posts:
1. In the dashboard, click on Settings > Reading.
2. Tick the option for a static page, and select the page from the drop-down menu.
3. Click Save Changes.
Now when someone visits our website, they’re greeted by automatically generated content in an easy-to-understand format. And hey, it was pretty easy to put together, too!
Customizing the Feed Appearance and Content
WP RSS Aggregator offers several useful extensions to customize the appearance and content in a feed. The Templates extension goes well with Blank Canvas to give your feeds some style. And the Keyword Filter can be indispensable for crafting a feed on a specific topic or keyword.
The Templates extension is a great fit for the Blank Canvas theme because it provides a user-friendly way to style the WP RSS Aggregator Feeds block. With it, we can change the list style of the feeds.
To set up this template, first install the Templates extension. Then, go to RSS Aggregator > Templates and click on Add New.
Give the template a name, then select Grid from the Template Types.
The only change we made here was to set the columns to one. Scroll down a bit to find this field.
Click Publish and your new template is ready to use. Heading back to our home page in the editor, we can now select the new template in each feed’s block settings.