Adding custom WP Query loop into page builders without a plugin

Categories: Code

Tags: , ,

By using a simple shortcode trick, you can add any type of custom WP_Query to pages or posts while using a page builder.

Have you not ever felt that the WordPress theme you’re using seems rigid and limited? Especially when you try to set up sliders or carousels that are not using static content, but you want the content to get dynamically updated when new posts are added? Most page builders come with a blog module that displays the recent posts on a page, however it’s limited to posts, and doesn’t include custom post types in most cases.

Recently I worked on a model agency website. So I’ve created a custom post type called ‘model’, and I designed to have numerous model profile photos showing on the home page. I could’ve used static images, but I wanted to have the photos updated when new models are added to the site. The challenge was adding WP_Query scripts into the page builder and of course the page builder doesn’t allow any PHP code.

We can go about this by creating a shorcode that functions as WP_Query, then we can add the shortcode to the page builder modules. It’s a simple idea, but also a game changer for me, and opens a door to so many possibilities. So I would like to share it here.

Firstly you’ll need to have a function.php in your child theme, and add the code below. This creates the custom WP_Query shortcode.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// WP Query Shortcde
function post_listing_parameters_shortcode( $atts ) {
	ob_start();
 
    // define attributes/parameters and their defaults
    extract( shortcode_atts( array (
        'post_type' => 'post',
        'order' => 'date',
        'orderby' => 'desc',
        'posts' => -1,
        'offset' => 0,
        'category' => '',
        'exclude_category' => '1',
    ), $atts ) );
 
    // define query arguments based on parameters
    $args = array(
        'post_type' => $post_type,
        'order' => $order,
        'orderby' => $orderby,
        'posts_per_page' => $posts,
        'offset' => $offset,
        'category_name' => $category,
        'category__not_in' => $exclude_category,
    );
    $query = new WP_Query( $args );
    // run the loop based on the query arguments
    if ( $query->have_posts() ) { ?>
        <div class="post-listing">
          <?php while ( $query->have_posts() ) : $query->the_post(); ?>
          <div id="post-<?php the_ID(); ?>">
          	<div class="img_frame">              
			<?php if ( has_post_thumbnail() ) { ?>
				<a class="entry-featured-image-url" href="<?php the_permalink(); ?>">
					<?php the_post_thumbnail( 'medium_large', [ 'alt' => esc_html ( get_the_title() ) ] ); ?>
				</a>
			<?php } else { ?>
			        <a class="entry-featured-image-url img_archive_default" href="<?php the_permalink(); ?>"><p>Image coming soon.</a>
			?php } ?>
                </div>
		<h3 class="entry-title"><a class="entry-title-url" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
          </div>
          <?php endwhile; wp_reset_postdata(); ?>
        </div>
    <?php
        $myvariable = ob_get_clean();
        return $myvariable;
    } //$query ends
}
add_shortcode( 'list-posts', 'post_listing_parameters_shortcode' );
  • The first part of the code (line 5 – 14) is setting up attributes for the shortcode, so the shortcode can have parameters for post type, number of posts, category, etc.
  • The second part (line 16 – 25) is using the shortcode attributes as $args for the WP_Query.
  • And lastly, the third part (line 26 – 48) is creating a loop from the WP_Query.

Now you can use a shortcode like below anywhere in your posts or pages,

1
[list-posts post_type="post or custom_post_type" posts="any number of posts you want to display" category="any category name"]

This will display the array of featured images and titles on your page or post (if you have published posts in your WordPress).

More amazingly you can add custom taxonomies to the code as well. In my case of the model agency website, I have added ‘gender’, ‘type’, and ‘location’ taxonomies. So the shortcode can have more options. See the snippet below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    // define attributes and their defaults
    extract( shortcode_atts( array (
        ...
        'gender' => '',
        'type' => '',
        'location' => '',
        ...
    ), $atts ) );
    // define query arguments based on parameters
    $args = array(
        ...
        'gender' => $gender,
        'type' => $type,
        'location' => $location,
        ...
    );

You can also exclude the current post from the loop if you are using it on a single post by adding below argument.

1
2
3
4
5
6
7
8
9
10
11
12
    // define attributes and their defaults
    extract( shortcode_atts( array (
        ...
        'exclude_posts' => array(get_the_ID()),
        ...
    ), $atts ) );
    // define query arguments based on parameters
    $args = array(
        ...
        'post__not_in' => $exclude_posts,
        ...
    );

The section below displays the WP_Queried posts’ featured images and titles from my blog. I have used some CSS styling to tidy up its layout.

1
2
.post-listing {display:flex;flex-direction:row;}
.post-listing h3.entry-title {display:none;}

This simply is really amazing.

In the next article, I will show you how to turn these images into a slider or a carousel.