How to design your truly custom “Latest posts” block

   Joe Lobo

How to

August 6, 2020
0

A lot of the time users will head to a website to see the latest content. If you are a web designer one of the most important skills to have is the ability to create a section for your latest posts which stands out.

The most popular platform for building websites is WordPress. Its core editor, called Gutenberg, offers a block called “Latest posts” so that you can display the posts you have most recently published.

However, the block comes with many problems. Luckily, if you use Toolset Blocks you will be able to create a custom block of recent posts which stands out.

What is the problem with the default “Latest posts” block?

While WordPress’s default “Latest posts” block does its job it comes with a number of limitations. These can be addressed with coding but most designers are not experienced enough to do this without investing a lot of time.

The default “Latest posts” block leaves a lot to be desired.

1. You are limited in what you can display and cannot change the order

You can use Gutenberg’s “Latest Posts” block to display the image, post title, date, post excerpt and that is it.

Usually, this is fine if you are running a basic website but what if you have created custom fields for your posts? For example, on a travel post, you might create a custom field for the price which you might want to include in your latest posts. Unfortunately, you will not be able to if you use just WordPress without coding.

2. You can only display content from the default “Posts” type

With the default “Latest Posts” block you can only show content which you add to the WordPress “Posts” section. Most websites will have other sections that they will create using custom post types. 

For example, a real estate website might have sections for apartments and houses both for rent and for sale. However, using just Gutenberg you will not be able to display the three latest flats for sale, for example, without coding.

A custom website will contain a number of custom posts.

3. You cannot choose how to display your posts

With Gutenberg’s method, you can only display your posts as a list or a grid. You are unable to create custom slider, unordered list or any other way of displaying your posts.

You can choose where you center your image or how you order your posts but that is it.

4. You cannot style your posts

A web designer loves styling their posts to make them stand out but with the default WordPress block for latest posts this is almost impossible.

You are unable to change the font, the color, add margin/padding, add a border, background color or really anything. You can adjust the image size and edit the post excerpt’s length but that is about it.

You are limited with what you can style using the default “Latest posts” block.

Design your latest posts section using Toolset Blocks

Fortunately, WordPress has a number of extensions that provide many of the features that Gutenberg is missing. One of those extensions for a great custom latest posts section is Toolset Blocks.

With Toolset Blocks you can style your content, display it in a number of different ways and add dynamic content – all without any coding at all.

How to design a custom “Latest posts” section using Toolset Blocks

Below we will go through how you can create a latest posts section in minutes using Toolset Blocks and Gutenberg, without any coding.

I will create a section of my latest tours posts on Toolset’s travel reference website which you can download and play around with for free.

1. Create the content which you want to display

First, you will need to actually create the content which you will draw from when you add your latest posts.

You can add your content to your posts but I’ve chosen to create a custom post type for my tours so that I have a separate section. I have also built a number of custom fields that contain information about the tours including the price, rating and duration of each tour.

You can see the custom fields that I have created.

Once you have created your custom content you need to create the tours and fill in the information.

An example of a post with all of the fields and custom fields filled in.

For a step-by-step guide check out our documentation on setting up custom post types and fields.

2. Insert the View block

Now that you have your content it is time to create the latest posts section. First you need to insert the right block.

The best way is to use Toolset’s View block which lets you load and customize your list of posts.

I have created a new page and inserted the View block which you can find within the Toolset section of blocks.

To insert the View block look under Toolset’s list of blocks.

Next you can use the View block wizard to customize your list of posts. The most relevant part of this is the ability to select the View loop style whether you want a grid, a collage, masonry or any other type of layout.

You can choose from a number of different loop styles with Toolset.

Finally, you select the content you want to display with your latest posts. I will choose the Tours posts which I created before.

You can choose the content you want to display by using the wizard.

For more information on adding custom lists of content check out Toolset’s guide to creating a View.

3. Add your blocks

We have created the structure for our latest posts, now we need to add the actual content. 

Just like with our View block we can add blocks for each part of our content. For example, I can first add Toolset’s Header block for the post title.

Notice how I’m using Toolset’s own Header block rather than the default one because with Toolset’s we can create dynamic content.

See below how I add the Header block and choose on the right-hand side the source of the content which will be the post type. As you can see, the titles for each of my tours posts appear.

The titles for each of my tours posts are displayed after I select the source for the Header block.

I can add additional blocks with dynamic content until I have added all the blocks I want to include.

4. Style your blocks

After adding your information it is time for one of the most important tasks for any web designer – making everything look good.

Unlike Gutenberg on its own, Toolset provides a number of styling options for your content. For example, I can change the background color, add margin/padding, change the font and much more using the right-hand sidebar.

Toolset stands out because of its sheer array of styling options.

Apart from styling, I can also limit the number of posts that appear under the Limit and offset -> Items to display. For example, I have set a limit of three.

I have limited the number of posts I see to 3.

Under the Ordering Settings section you can choose how to sort your posts. For this one I have set them by post date and descending so that the latest ones are displayed.

I have ordered my posts by the post date.

Now you can see my list of latest posts on the front-end. 

You can see my posts on the front end.

Start creating your custom latest posts section today!

Here are the steps to take so that you can start adding your custom latest posts sections.

  1. Download Toolset 
  2. Check out one of our Toolset courses to learn all about adding latest posts sections.
  3. Practice adding latest posts and other features using one of Toolset’s free reference sites.
  4. When you are ready, install and register Toolset on your own website and get started!