Recent-Posts-Widget-with-Thumbnails

Recent Post Widget with Thumbnails

Dynamic content is continually updating as you create new posts and offers.

Your new Posts automatically appear at the top of your frontpage (Blog).

But people need to be able to see the older content as it no longer shows high on the front page. 


But you need an Archive page where people can access previous material

WordPress ships with a Widget to display a Blog archive. Place the Widget in a sidebar, it will show a list of recent posts from previous months.

Clicking on a month will open a wordpress generated page showing all the posts for that month. Just the basics.

There is a template in WordPress core that groups the posts by month.

It then displays  a page for the selected month when clicking the widget.

It will not show in your list of pages in the backend.

Neither will it show a thumbnail image. It will be somewhat boring.

Now if you want a visible static page for your Post Archive that’s a different story. 

In WordPress, Widgets can be inserted in widgetized areas such as sidebars but not always in pages or posts.

With the advent of the Block editor and Gutenberg since WordPress 4.9 this has started to change. But slowly.

In the Block editor it is possible to add only two or three of the core WordPress widgets, but no support for third party Widgets.

One of those is and Archive widget, but its not really a recent post widget.

Gutenberg still has a long way to go before it is a full featured interface. We need another option.

Using Widgets and Plugins in Pages and Posts

If you use one of the reputable page builders your options quickly expand.

Most take control of the  WordPress core templates and add much more freedom for content.

Page Builder by Site Origin is one I particularly like. Its a solid free plugin.

SiteOrigin keep Page Builder frequently updated to maintain compatibility with all WordPress core functionality.

A twist to this, is it integrates with Gutenberg and adds all the Site Origin compatible widgets to the Block editor.

Couple it with the SiteOrigin Widgets Bundle (also free), and you are ready to rock.

I use them on a lot of sites. 

If you don’t already have a page builder, download and install these now.

Page builder by siteorigin

They also have the most comprehensive range of free widgets. All packaged in a single plugin.

siteorigin widgets bundle

Now when you create a new page or post you will see an added option.

There will be a third tab in the editor

pagebuilder-tab

So we have the two regular tabs Visual and Text, but also one called pagebuilder.
When you click on it, you see the image below.

pagebuilder-interface

This is the game changer. Now our options for what we can put in a page have opened up to allow more flexibility.

The option we want is “Add a Widget”. Clicking on this will open the widget library where you can select a widget.

See my previous post SiteOrigin Page Builder for the full rundown

So our process here in dot points to create a Post Archive will be

  • Create a new page.
  • Name it Post Archive
  • Select the Pagebuilder tab (editor above the content box.)
  • Then add a Widget.
  • From the Widget selection window – choose “Archive”.
  • Now open the widget to choose its setting and save
  • Save the page and close it.

Now go to the Appearance- Menus> add the page to the menu where you like it to appear – Save the menu.

Go to the front end. Select it from the menu. Now you see a list to choose the months and year to  view posts from.

We chose the simple Archive Widget. It still gives a simple list of posts by month and year.

It is the same as the widget we originally used in a side bar. Its still a bit boring, but we can add color and alter basic appearance.

The Site Origin Pagebuilder gives us tools to do that also in the editor.

The difference here is we have an editable page that we can control all the appearance and layout.

But sadly no thumbnail images of each post.

There are more advanced Post and Archive Widgets that allow further options and customization.

Recent Post Widget with Thumbnails

One that works well is Recent Post Widget with Thumbnails

Download and install the plugin from the link or from the WordPress plugin Directory.

Once activated, it will add itself to your available Widgets in the Widget library.

Although its name suggests recent posts ,you can set the number of posts it will show up to 999.

  • It will show all in a list,
  • with date published.
  • you can just show the title,
  • you can have a short excerpt as well.
  • finally it allows you to display the post featured image thumbnail which is really nice.

So if you have been following the steps in this tutorial,

  • you can now go back to the Pages tab
  • open the Archive page you made in Pagebuilder.
  • delete the previous Archive widget from the page
  • then select add new widget
  • the widget library opens
  • You will now see the Recent Post Widget with Thumbnails in the library
  • select and edit it to suit your needs

Recent-Post-Widget-with-Thumbnails-1

The image here only shows a portion of the the settings page. You can format a little or a lot, up to you.

The other benefit of the PageBuilder  is it gives you control over the style elements. See the column on the right of the image.

That is the Page builder interface. Use them to change background colors, pictures,borders,padding etc, etc.

If you change nothing, then WordPress or your Theme styling will be the default.

The Recent Post widget with Thumbnails settings are in the left side of the screen.

Without the page builder you could only use this widget in a widget area like a sidebar.

Using the page builder allows you to insert widgets into full pages or posts.

I hope you like it. See you in the next post.

 

For our latest posts an topics visit our main Blog here

For an archive or all our topics go here

Don’t forget to Subscribe to receive notifications for new articles and Tutorials as they appear.

You can get in touch with this author at: 'brendan@brendan-ryan.com''

Hi, I'm Brendan Ryan. Welcome here. I build, maintain and troubleshoot WordPress based websites for myself and my customers. I regularly help out by psting splutions in beginners forums on Facebook and the like. I hope the posts here demystify some of the process that make a website. I am happy to help if you require assistance. Small things I am happy to guide you. For larger things my rates are reasonable and my service is prompt. Contact me in the form below if you need more information or help. Enjoy your visit. Get me on Facebook Messenger:- m.me/https.brendan.ryan

1 Comment

  1. […] See these ways to make your older Blog Posts easily available to returning readers […]

    Reply

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to top