How to Create a WordPress Post List Style - 2022
Logo
Back To Blog

How to Create a WordPress Post List Style? [Demo Guide]

WordPress_Post_List_Style

Introduction 

Today we’ll be talking about implementing the WordPress Post List Gutenberg blocks. Before starting the discussion, there’s an important question: 

Why would want to use a Gutenberg post list plugin in the first place?

First of all, it’s super easy to implement with Plugins [PostX is the choice we’re going with here]. Second, you can play with a lot of different built-in options to create a custom design for your audience. 

These are the two compelling reasons to go through the content. If you’re someone looking to use PostX and its post list functionality, this post will help you out big time! 

So, without further ado, let’s get started! 

PostX WordPress Post List Variations

PostX already has a wide variety of readymade blocks. Among them, you’ll find 4-Post list variations. We’ll be talking about the WordPress Post List #1 primarily. There are other variations to explore as well.

WordPress Post List Variation demo [Post List #1]

The first post list variation allows for some advanced styling. We will now demonstrate how to use Post List #1 using the PostX built-in settings. 

Of course, the very first thing you need is to install PostX. Installing PostX is the same as any other plugin. Still, you can check out the documentation to learn more. 

Once you install it, you’re ready to import the ready-made design to your WordPress page. To do that, you can: 

There’s another way you can do this as well. Of course, this will work better if you’re actively using Gutenberg: 

Accessing PostX Post List
Accessing PostX Post List

Once the design is loaded you can observe it. Now, let’s see what new settings are there.

***Post list #1 features various premade layout designs that you can easily use with the click of a button. Also, design suggestions will show up right below the available layouts. Also, there are other Post Lists designs you can explore as well. Check out which one fits your site’s structure the most.

Let’s head to the ‘Setting’ tab to find out the feature sets and show you how to use them.

Exploring the PostX Post List #1 Settings  

Under the ‘General’ tab in settings, you’ll find the option to Select Advanced Style. You can click on each style option to see what happens. For demonstration purposes, we will be: 

*** You get some advanced list post styles with the PostX plugin. You can choose from these advanced layouts and see how it fits your design needs. 

Design Variations

There are several design variations you can use for showing lists. All you have to do is import the design from the Design Pane and import it. Here’s a quick demonstration on working with the different design variations:

Post List Design Variations
Post List Design Variations

Explore Post Block Design Variations you can use with PostX in the following link:

***NOTE: You can enable/disable settings from the ‘General’ tab under Settings. Once you enable/disable a setting, you can change the design properties associated with that particular setting. 

At this point, we want to change the layout of our post list. To do that: 

Choosing the second layout
Choosing the second layout

Now, we’ll go back to the Settings tab once more. Under the General Settings: 

Now, let’s move on to the part where we can make the design better. Let’s start with the heading settings: 

List Style Heading Settings
List Style Heading Settings

Heading Variations

A good thing to mention here is the number of heading styles you can explore with PostX. You can work with various different design choices to make your list style look more appealing. Take a look at the following example:

Heading Style Variations
Heading Style Variations

Next, we want to make our category look better for the WordPress post list design. For that, we’re going to: 

Normal Category Styling
Normal Category Styling

We’ll now move on to the Entry Header. Here are the changes we want to make for completing the WordPress post list layout. 

We want to: 

Entry Header Settings
Entry Header Settings

Also, there’s one small thing that needs to change. And that’s going to be the Meta color. We want to set it to black (#000000) for better contrast. 

We’ve also added an AJAX pagination property to our WordPress post list style. AJAX pagination is one of the more effective features to offer better functionality to the user. We’ve added a video in the later sections where you can explore the features of the pagination.

Here’s a quick example for creating quick pagination for your post list style [We used a similar design for the demo]:

AJAX Pagination Design
AJAX Pagination Design

If you want to learn more about Pagination, make sure to check out the following video:

AJAX Pagination

Final List Style Demo

Once you make changes as we discussed [make sure to explore all the design variations if you haven’t already], your WordPress post list page will look something like the following: 

WordPress Post List Final Demo
WordPress Post List Demo

How to Use Shortcode to Show WordPress Post List Page? 

You can use shortcodes to show your post list WordPress page. In order to do that, you’ll need to use the Saved Template functionality of PostX. 

We’ve created a similar type of page to show you how to showcase it with shortcodes. We made a few small tweaks: 

Then we published the page. 

You will now be able to see the shortcode from in the shortcode section of the Saved Template window. You can now use this shortcode with popular page builders. As we just created the page, we will paste the shortcode to use the post list design with other WordPress page builders. 

Now, let’s see how to use shortcodes to show different post list WordPress pages: 

Using Shortcodes with Oxygen Builder 

If you’re using Oxygen Builder, then you can use the builder’s shortcode element to show the WordPress post list. Here’s how to do it: 

Add Shortcode for Post Lists Style
Add Shortcode for Post Lists Style
Adding Shortcode using Oxygen Builder
Adding Shortcode using Oxygen Builder

You can now see the preview of the design. If you’ve followed along, then you should see something like the following: 

Using Shortcodes with Elementor and Beaver Builder 

You can easily use shortcodes with both Elementor and the Beaver builder. You can read about it in the PostX documentation in detail: 

WordPress Post List Advanced Editing: Creating Custom Post Lists

It’s only natural to want to make a more focused WordPress list style so that your viewers can get the best possible experience. In this demo, we’ll be using most of the above-mentioned settings. But we’ll show you how you can create proper post lists by using the features of the PostX Query Builder, Filtering, pagination, and more.

PostX WordPress Query Builder Plugin Functionality

The PostX Query Builder is a powerful tool for you to showcase particular post lists to your audience. You can easily create custom queries and show only the most relevant and most popular posts to your audience.

A quick demo of it can be to show the sticky posts in your blog that are related to fashion [as we will demonstrate right now]. In order to do that, you need to go to the settings tab and work with the query builder.

WordPress Query Builder Settings
WordPress Query Builder Settings

These are just some of the settings you can use to show WordPress post list categories. As a matter of fact, you have various options to play within the advanced query builder:

WordPress Post List with Query Builder

Working with the PostX WordPress Post Filter Plugin

There’s another way to further customize your post list for your audience. And that’s to use the AJAX filtering capabilities of PostX. With this, you can easily filter posts for post lists. We’ll be demonstrating a short example as to how to use PostX to show WordPress filter posts by tag.

Post List Filter Typograpghy Settings
Post List Filter Typograpghy Settings
WordPress Post List Filter Hover Settings
WordPress Post List Filter Hover Settings

It should be clear to you by now how extensive the PostX filter functionality is. Make sure to play around with the different settings and see how you can offer a super customized experience to your users.

FAQ 

Here are answers to some frequently asked questions. As always, we will try to be as descriptive as possible when it comes to the WordPress post list variations. 

Q: How do I make a Post List in WordPress? 

Ans.:  There are plenty of ways you can make a Post list in WordPress. And if you’re using Gutenberg, then the process is super easy with PostX. All you have to do is: 

Once imported, you can change the layout and explore various design choices from the block settings window.  

Q: How do I Show Lists in WordPress? 

Ans.: As mentioned earlier, you can easily show lists with the PostX post list WordPress plugin. You can be very creative with all the different designs and layouts. Also, there’s the option to use shortcodes with different WordPress builders. 

Just follow the steps shown in the previous sections and see whether it’s flexible enough for you [from what we’ve shown you so far, we believe it should be!]. 

Q: How do I Show My WordPress Posts in a List Layout? 

Ans.: You can use PostX Post List #3 to show WordPress posts in a list layout. Here’s how you can do it: 

That’s just one way to show WordPress Post Lists in a List Layout. PostX again, PostX has a lot of options for you to explore. 

Q: How do I Show Post Categories in WordPress? 

Ans.:  In order to show Post Categories in WordPress, you need to import a PostX readymade block of your choice. From there, you can choose to change the category settings to your liking. We did bring some changes to our post in the previous sections. Make sure to check it out first. 

It’s probably worth mentioning the ‘Specific Color (Pro)’ feature of PostX. With this, you can show how the category will show with its specific color in each post. A feature like this is certainly worth exploring.  

Q: How to Create a Custom Post Type Template in WordPress? 

Ans.:  Custom post types are custom contents for WordPress where you can add your own custom fields. For instance, if you’re creating your own book review site, then there’s the possibility that you’d need to create a custom post type with your own custom fields. 

For instance, for a custom post type, you’ll need to add the following bit of code to your WordPress functions.php file: 

add_action( 'init', 'create_post_type' );
function create_post_type() {
    register_post_type( 'your_custom_name',
        array(
            'labels' => array(
                'name' => __( 'Custom_names' ),
                'singular_name' => __( 'Custom_names' )
            ),
        'public' => true,
        'has_archive' => true,
        )
    );
}

Here’s a quick link where you can find examples of custom post types.

Q: How many types of post formats are available in WordPress? 

Ans.:  By default, WordPress comes with 3-custom post types: a)post, b)page, c)attachment

You can explore more about the WordPress post types here.  

Q: How to use a Post List with Elementor? 

Ans.: You can easily show WordPress post list with Elementor using the PostX ‘Saved Templates’  functionality. There are two ways you can do this: But in both cases, you will need to paste the shortcode of the page you created. After that, here’s how it’s done: 

You can also show the post list WordPress template using the PostX Gutenberg Post Blocks Element for Elementor. The process for adding the element is the same. All you have to do is make sure the template is published from the PostX Saved Templates Editor. Then, once you’re in the Elementor Editor: 

These are the ways you can show a WordPress post list using the PostX Elementor element. But you can use shortcodes with other popular WordPress builders as well. 

Final Thoughts 

If you’ve followed along, then you know how flexible PostX is when creating WordPress post list styles. Also, you should now know how easy it is to manipulate different settings to create the news magazine, recipe, travel, fashion blogs, and more with this plugin. 

We would love to hear your thoughts on what you think of the design flexibilities in PostX. Sound off in the comments below. 

Also, new features are coming in hot! Stay tuned for incoming updates that are right around the corner.

Cheers!

Written bySadik Ahmed

Hey there, I'm Sadik Ahmed, a WordPress enthusiast who loves to try out and review new themes and services.

Leave a Reply

Get Discount