in ,

Create Custom Post Type Loops Templates with Dynamic Content + Elementor

Creating Custom Post Type Loop Template WordPress

Are you using Elementor Plugin and struggling to create nice post type loops ? If yes, then bare with me and I will share with you how you can create custom post type loops templates with Dynamic Content for Elementor Plugin and of course we will also be using Elementor Pro Plugin for the same.

Advertisement

What is Custom Post Type in WordPress ?

Custom Post Types are nothing but content types that we see in our WordPress Dashboard such as Posts, Pages. These post types have taxonomies, categories, tags and archives. Apart from the standard post types already present, website owners may need to extend the post types for various reasons. And in such case, they take recourse to custom post types to extend the post types on their Websites.

Learn More About Post Type here

In our tutorial, we are going to use Custom Post Type UI Plugin to create new post type for our WordPress website.

What are Custom Fields?

WordPress allows the users to store meta data for the specific post types in key value pairs and such meta data is referred as custom fields. We use this meta data or custom fields to achieve more complex results. For example, if we want to store tagline for our posts, then we can achieve this my using custom fields.

Learn More About Custom Fields here

In our tutorial, we are going to use Advanced Custom Fields aca ACF Plugin to create custom fields for our post types.

Why is Custom Post Type Loops and why we call it loops?

A post type can have multiple posts stored in array and can be display through the loops such as while loop as shown in the below image.

<?php
 
// The Query
$the_query = new WP_Query( $args );
 
// The Loop
if ( $the_query->have_posts() ) {
    echo '<ul>';
    while ( $the_query->have_posts() ) {
        $the_query->the_post();
        echo '<li>' . get_the_title() . '</li>';
    }
    echo '</ul>';
} else {

 

Custom Post Type Loops WordPress

So, when we show the posts with their data in a template form, we may call it post type loops. We may also call it querying by Post Type as we use WP_Query

Querying by post type WordPress

So, now we have come to know some of the basics about what is custom post type, what is custom fields and what are post type loops. Lets get started.

How To Create Custom Post Type Loops Templates with Dynamic Content + Elementor

Installing Required Plugins

For this tutorial we are using the below listed plugins:

  1. Elementor & Elementor Pro
  2. Dynamic Content for Elementor
  3. ACF (Advanced Custom Fields)
  4. Custom Post Type UI

Create A New Post Type

How-To-Create-A-Custom-Post-Type

Create Custom Fields for the Post Type

To perform this step, make sure you have advanced custom fields(ACF) plugin installed. When installed, you can find Custom Fields section right in your WordPress menu.

Custom Fields WordPress

Advertisement

Here you can create a new field group, name it something, add fields in it and assign that to a location.

Custom Fields for WordPress How To

In the above screenshot you can notice that I have created a field group named “Coupon Fields”, added 5 custom fields in it. And also have assigned it to Coupon Post Type that i created easlier with CPT UI for that purpose.

So, now we are ready with a new Custom Post Type and some custom fields for that post type.

Create A Loop Template for Post Type Loop

Go To Elementor Templates > Theme Builder and add a new “section” template.

Now basically we have to design a section like highlighed in the below screenshot. We can call it our custom post type design and when it will be queried in the archive, will change the game.

Creating Custom Post Type Loop Template WordPress

And remember we will be using dynamic fields for the data such as Post Title, ACF keys and all that.

Post Type Dynamic Tokens

Once you have designed your section, just save it.

Create Archive Template for Post Type

Go To Elementor Templates > Theme Builder and add a new “archive” template.

To perform the below step, make sure you have already installed and activated dynamic content for elementor plugin. 

If yes, then you need to find dynamic posts widget and drag and drop it on section.

Dynamic Posts LoopYou will majorily two things to setup on this widget viz. 1) Post Type 2) Loop Template (that you created earlier)

Dynamic Posts Loop for WordPress

In the post type you need to select the post type you created and in the dynamic content you can choose the loop template that you created.

There are also a lot of options that you can explore and experiment on trial and error. Once ready with your posts loop archive you can go ahead and set the display conditions for this template and set it to the newly created custom post type archive.

Display Conditions for Post Type Loops

Advertisement

So, now you have successfully created a loop template for your custom post type in WordPress. If you have any questions, you can comment down below or reach us out at our social media platform.

Advertisement

Leave a Reply

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

Written by Lokesh Kapoor

I love to explore the possibilities and android is full of it. I firmly believe that An ego is never an amigo. Apart from writing, I love to sing and design. If you like this article, don't keep this to yourself and spread the words to your friends on social media. You can also connect me via social media.

Advertisement