How to insert a post into another post

*This is a more advanced tutorial that involves the use of custom fields, dynamic tags and the listing grid widget. If you haven’t done this before, send a comment right away that you’d like some help

Ok, so recently I wrote about hiding and showing Elementor sections with a simple button, based on a feature a client wanted for his magazine website. Specifically, the intention of such button was to have a table of contents with image boxes where the visitors could only see the first three items of the TOC and if they wanted to see more, a button labeled “view all articles” would give them said capability.

This time, I’m writing this article to explain the second feature he wanted for his website, which was the ability to insert not only the contents of a post into another post (this part is very important) but the entire layout and Elementor based design of one post inside another. If you remember that previous tutorial (I know you may have no reason to), you’ll know that the website has two different custom post types, one acting kind of like of parent posts – the magazine issues  – and one acting like child posts – the articles.

The reason I mention the parent and child relation is because both the magazine issues and articles have their own Elementor templates, but a big part of the magazine template is focused on working like a collection of articles (which is where the insert the entire layout and Elementor based design part comes into play).

Isn’t there a plugin already that does this?

There is, but it doesn’t really the work the way needed. Several plugins in the WordPress repository do this, like RPS Include Content or Insert Pages. But the issue with both of these plugins is that they only insert the content of a post, not the entire layout. So, if you built a template for your posts or custom post types using Elementor Pro, none of that will carry over once you use the plugins, rendering all your work kind of useless.

This is exactly what happened to me on that project. Both of those plugins work with a shortcode that needs the ID of the post you want to insert. So, I tried using both of those plugins coupled with Elementor’s dynamic tags and the shortcode function so that the client would only have to enter the ID on the backend and the tag would do the rest. And while it worked in getting the ID of the article custom post type, all it pulled was the text, placed in a full width section. Far from what I desired.

I also tried with the Elementor based plugin Anywhere Elementor, but I quickly found out the features of that plugin only work for pages. This means that the shortcode the aforementioned plugin provides is only good if you want to insert an Elementor-based page into another page. It will not work with WordPress regular posts, much less with custom post types.

In the grand scheme of things, the button with the hiding and showing sections functionality was incredibly tiny compared to this one. The crux of the entire project was having the magazine issues work like a collection of articles, meaning I quickly found myself in a big pickle. That is until I turned to the Listing Grid widget from Crocoblock’s JetEngine add-on.

Recommended reading: Shapes with Elementor: How to create them

JetEngine’s Listing Grid is the name of the game

I have been creating websites with Custom Post Types and custom fields for a very long time, using any cpt creator like Pods or CPT UI and the very popular plugin Advanced Custom Fields at first, due to its powerful features just on the lite version. It worked fine for all my projects, until I used JetEngine, which is like if Advanced Custom Fields and Elementor had a baby.

Why do I say that? Because JetEngine, on top of providing the user with the chance of creating custom post types and using the dynamic tags in a better way, it also comes with Elementor specific widgets, such as the Dynamic Field, Dynamic Image or the one that’s the main point of this article, the Listing Grid widget.

According to their website:

Listing Grid is a widget of the JetEngine plugin that allows you dynamically display custom post types and taxonomies from Meta fields and Terms. It helps to post any type of content like Products, Services, Projects, and much more in the listing form, which is possible to customize to any taste and vision.

I feel like that definition sells it short because it sticks to the basics of creating a grid for your posts or any other custom post type you may have on your website. It doesn’t talk about the fact that you can create a dynamic slider or how it can be used to insert a post into another post.

Let’s move on to that, actually. Let me show you how you can add an entire post – with its Elementor design – inside of another post.

Step 1: Create a template for the parent posts

I know that in many of my tutorials, I’ve talked about the use of code, whether that’s CSS or JS, but luckily for this one you’re only going to use your Elementor expertise.

Go to the Theme Builder and create a template for the post or custom post type where you want to have the collection. In my case, it was a template for the magazine issues. There, add a full width section, remove the padding from the columns and add the “Post Content” widget. This is to ensure that later on you’re able to edit the posts you need to add the “Listing Grid” widget on with Elementor.

Step 2: Create a template for the child posts

Ok, so now that you have a template for the parent posts with the “Post Content” widget, it’s time to work on the child posts. This template is where you’re going to be implementing the actual design with the images, text and all the bells and whistles. If you’re trying to follow along with my example, this template was for the articles custom post type. The template for the magazine issues custom post type is kind of like a blank canvas with only the previously mentioned “Post Content” widget, and the one for the articles is where I lay everything out.

Step 3: Creating the listing

For the second step, what you have to do is go to JetEngine > Listings. Here you’ll see the Listing Items screen and you need to click the “Add New” button.

Once you click on “Add New” the Setup Listing Item will popup. Here, select the pertinent to your specific case. The fields are as follow:

• Listing source. You have 4 options here. For this particular tutorial, the other 3 are not important. We want to work with Posts.
• From Post Type. This is where we have to select which particular post type the information is going to be pulled. While I was doing all of this for the magazine custom post type, the listing I needed to create was specifically for the articles custom post type. You choose the one suits for your case.
• Listing Item Name. You can type anything here.
• Listing View. Choose Elementor in this dropdown

Click “Create Listing Item” to be taken to the Elementor editor so you can create the listing.

Once the Elementor editor is opened for the listing, insert the same template you created in the previous step, the template for the child posts.

Step 4: Putting everything together

At this point, we’re pretty much finished because now is when you need to start creating everything in the backend, that is the child posts first and then the parent post where you’re going to be using the “Listing Grid” widget.

To explain this step more properly, I’ll use my project example. The first magazine issue in my project had 10 articles, meaning I needed to create the 10 articles separately in the backend (which were going to have the design mentioned in step 2). Afterwards, I created the magazine issue “March 2021” and edited it with Elementor, which is possible because as mentioned in step 1, the “Post Content” widget is there.

Then I proceeded to perform 3 quick actions:

• Drag and drop the “Listing Grid” widget
• Select the Listing (created in step 3) and
• Select only one column.

*For posts number, you can change the number based on the amount of posts your collection will have.

Finally and still in the “Listing Grid” widget, I went to the “Posts Query” tab. There, I clicked on the “Add item” button and selected “Posts & Author Parameters” from the dropdown. You will notice that from the options available there, one of them says “Include posts by IDs” which is where the magic happens, because that allowed me to create the collection. Since all WordPress posts (whether that’s regular posts or custom post types) have an ID, I looked for my articles’ ID and typed it there.

*If you’re working on this and want to add multiple posts, you can follow the example in the image and type the IDs separated by a comma.

Final Words

The cool thing about this is that your collection of child posts doesn’t necessarily have to be 10 posts one post after the other, because like I said, by having the “Post Content” widget in a full-width section in the parent post, you have a blank canvas where you can add the “Listing Grid” widget one time with one child post only, add something else like a separator, video, display ad, etc., then add the “Listing Grid” widget again to insert a different child post.

This may be a bit confusing to understand initially. But once you create the first collection, you will notice it is very simple! Let me know what you think in the comments.