• Affiliate Disclaimer
  • Privacy Policy
  • Write for us
  • Contact Us
  • About Us
Monday, January 18, 2021
DroidCrunch
  • Tech
  • Review
  • Smartphones
    • Android
    • iOS
    • Windows
  • PC
    • Windows
    • Mac
    • Linux
  • Tips
    • Android
    • Facebook
    • WhatsApp
    • Instagram
    • YouTube
    • Tech
  • Blogging
  • DealsNew
  • Games
No Result
View All Result
  • Tech
  • Review
  • Smartphones
    • Android
    • iOS
    • Windows
  • PC
    • Windows
    • Mac
    • Linux
  • Tips
    • Android
    • Facebook
    • WhatsApp
    • Instagram
    • YouTube
    • Tech
  • Blogging
  • DealsNew
  • Games
No Result
View All Result
DroidCrunch
No Result
View All Result
Home Blogging

Create Custom Post Type Loops Templates with Dynamic Content + Elementor

Lokesh Kapoor by Lokesh Kapoor
October 19, 2020
in Blogging, WordPress
A A
0
Creating Custom Post Type Loop Template WordPress
0
SHARES
78
VIEWS
Share on FacebookShare on Twitter
ADVERTISEMENT

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.

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.

ADVERTISEMENT

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

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

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
Previous Post

25+ Best Productivity Apps for Android 2020【LATEST】

Next Post

Interserver Hosting Review 2020: Features, Pros & Cons

Lokesh Kapoor

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.

Related Posts

Best Ad Spy tools
Blogging

Best Ad Spy Tools of 2021

January 8, 2021
LiveCanvas WordPress Pagebuilder Review
Blogging

Livecanvas Bootstrap Page Builder for WordPress Review – Really worth it?

List of best Keyword Research Tools to Rank on Competitve Keywords
Blogging

Best Keyword Research Tools to Improve SEO

November 11, 2020
Load More
Next Post
Interserver Hosting Review Features, Pros & Cons

Interserver Hosting Review 2020: Features, Pros & Cons

7+ Best Email Marketing Software of 2020

7+ Best Email Marketing Software of 2020

Discussion about this post

Lets connect

Recent Popular

how to Unfreeze Your Tiktok Frozen Account

How to Unfreeze TikTok Account / ID in 2021

January 12, 2021
Relaythat Review : Faster to Create Social Media & Ad Campaigns?

Relaythat Review : Faster to Create Social Media & Ad Campaigns?

December 28, 2020
Best Ad Spy tools

Best Ad Spy Tools of 2021

January 8, 2021
Youtube Facebook Twitter Instagram LinkedIn

About

 

 

 

DroidCrunch is your trusted tech blog that covers technology tips and tricks, how-to, WordPress, Blogging, Reviews and more more.

Newsletter

DMCA.com Protection Status

© 2020 DroidCrunch - Best Place for Tech Nomad

No Result
View All Result
  • Tech
  • Review
  • Smartphones
    • Android
    • iOS
    • Windows
  • PC
    • Windows
    • Mac
    • Linux
  • Tips
    • Android
    • Facebook
    • WhatsApp
    • Instagram
    • YouTube
    • Tech
  • Blogging
  • Deals
  • Games

© 2020 DroidCrunch - Best Place for Tech Nomad

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.