How to Add Blog Posts to Pages in WordPress with Ease

WordPress started as a blogging platform and quickly expanded its capabilities to a veritable content management system. Displaying posts inside pages was something that a few years ago would’ve required advanced technical skills, editing theme files, and creating custom templates in PHP.

Those days are long gone and if you’re like me, then you’re probably already using a page builder for designing your pages and even posts.

Mixing posts and pages with WordPress is a normal thing nowadays, and something which can be achieved with just a few clicks, by simply leveraging your favorite page builder plugin.

In this tutorial, I’m going to show you how you can actually add posts inside your pages with ease! Let’s dive right into it!

Mục Lục

Displaying Blog Posts to WordPress Pages with Gutenberg

Gutenberg is the new WordPress editor and it’s awesome!

Here are 5 reasons why Gutenberg is so great:

It’s the WordPress’ new default editor/builder, replacing the TinyMCE editor.
It’s here for the long run, with an incredible open-source community maintaining it and developing new features and extensions for it.
It offers a drag and drop, visual experience to building posts and pages.
It somehow un-bloats WordPress by replacing a series of plugins functionality.
It’s blazing fast!

Now that I took these off my chest, let’s move on to the subject of the article.

At this moment, the only out-of-the-box Gutenberg element related to blog posts is the Posts Widget, which is nothing but the default WordPress posts widget that you’re used to for ages.

So we’re going to use one of the many Gutenberg extensions available, some in the WordPress plugins repository, others private.

Option #1: Neve Theme + Gutenberg Blocks by Otter Plugin

To be as specific as possible, I’ve set up a demo site for which I’m using the Neve WordPress theme, together with their Gutenberg Blocks and Template Library by Otter plugin and one of the demo examples available for Gutenberg.

{neve-options-starter-sites}

So, let’s open the front page and add a blog posts widget inside. Otter library comes with an element called Posts:

The element comes with a series of extensive options such as:

two layout styles;
options for columns and number of items to show
options for selectively displaying meta information such as featured image, title, meta, category, description.

Once you have it on the page, it should look like this:

Option #2: Gutenberg Post Blocks Plugin

Now, let’s switch to a solution exclusively oriented to posts: The Gutenberg Post Blocks Wp Plugin.

Once installed, the plugin makes it super easy to get you started, right inside the Gutenberg editor, by adding a series of templates that you could use instantly:

At this point, there are 11 blog post elements packed inside the plugin, each one of them coming with its own layouts and settings and covering pretty much every blog post style you can imagine: lists, grids, sliders, etc.

What’s cool about it is that it features a series of pagination options as well, such as numbered pagination, infinite loading, and load more loading. How awesome is that?

Another feature that caught my eye is the query builder – in other words, I could build a grid out of whatever post type I want: blog posts, projects, and any type of listing I want to show on the site. That’s quite impressive!

Adding an element into the page is pretty much self-explanatory so I won’t be wasting your time doing that.

How to Add Blog Posts to Pages with Elementor

Another popular page builder used by millions of people is Elementor. At this moment, Elementor seems to be above Gutenberg, being considered “the coolest guy in the neighborhood”.

What I love about it is that in time became more than just a page builder…it now transcends pages and posts, being a veritable website builder, covering headers, footers, archives, and that can even be used as a marketing and sales solution. I personally use it for the majority of my sites, including DeliciousThemes.

So if you’re like me and want to keep plugins at a minimum and a WordPress environment bloat-free, then Elementor Pro should be a no-brainer. Why Pro? Because the Posts element comes packed with the pro version only. There’s also a Portfolio element that could be used to create project-like grids for any post type:

Alright, let’s drag and drop the Posts element into the page:

In seconds, I have a nice, classic list of blog posts on my page.

I chose to display the latest 3 blog posts inside my widget and deliberately added a “Check out the Blog” button under them.

What I love about this widget is that it doesn’t set links on the meta data(date, author, comments), which from an SEO point of view is a good thing because the post URLs get more link equity and could rank slightly higher in search results. So the widget is the perfect choice for SEO savvy geeks out there 🙂

The Portfolio element acts the same, so if you’re looking for a project-style layout for your posts, then this one might come in handy. Plus, it supports category filters as well so that’s a nice UX addition to the grid that your visitors will probably enjoy.

Elementor Blog Posts Extensions

In its early days, Elementor was so cool that it managed to disrupt the entire WordPress industry. No wonder there are tons of extensions for it, some of them being fully-fledged businesses nowadays, with teams 100% dedicated to maintaining and developing the plugins. Here are even more options for displaying your posts with Elementor:

Shortcode Based Posts Widgets

Now, what if you’re not using a page builder for your website? Well, firstly I would say that it doesn’t hurt to use one and as you could see, the options are pretty much limitless. Secondly, I get it, your site runs perfectly fine as is and you just need a quick solution to display your blog posts or even custom posts on pages other than your frontpage.

The solution here would be to use a plugin or extension which generates shortcodes that you could use on any page.

You know what’s great about them? You can use the shortcodes with any page builder as well.

On the other hand, if you have no problem getting your hands dirty, then you could code some custom page templates and use the functions generated by the plugins to display the grids as you wish. Personally, I find this approach counterintuitive and unproductive, although I’m a web developer myself. My suggestion for you is to not reinvent the wheel, but build up your stuff on what’s available out there.

Wrapping Up

Displaying blog posts wherever you want on a site has never been so easy. Page builders such as Gutenberg and Elementor, but also Divi Builder, Brizy, Beaver Builder, or Thrive Architect are here to stay and it’s in our interest to rely on such amazing tools for successfully running our sites and businesses.

Click to rate this post!

[Total:

Average:

]