Using WP_Query to call Beaver Builder-Edited posts causes layout to break

Beaver Builder
1

So I have a Custom Post Type called Homepage. Homepage are separate posts that get queried on the home page. I have a beaver builder post that loses its layout on the home page. But if you look at that page as a single post (not on the homepage) the layout is in tact. What appears to be happening is in the wp query on the homepage, the beaver builder modified page it’s lost its markup, whereas on the single post view the markup is intact.

This is a new install, so this hasn’t worked yet in the way I intend it. Thoughts there?

2

Hey Alex,

I’ve already assigned another member of the team who can assist you further.

Ben

3

For reference here’s what I have for the homepage query

    <?php
    // WP_Query arguments
    $args = array (
    'post_type'              => array( 'homepage' ),
    'post_status'            => array( 'publish' ),
	  'orderby'                => 'menu_order',
    'order'                 => 'DESC',
    );

    // The Query
    $query = new WP_Query( $args );

    // The Loop
    if ( $query->have_posts() ) {
    while ( $query->have_posts() ) {
      $query->the_post();
      get_template_part( 'page-templates/content', 'home' );
    }
    } else {
    // no posts found
    }

    // Restore original Post Data
    wp_reset_postdata();
     ?>

And for the actual post loop

<?php
/**
 * The template for displaying the homepage.
 *
 * This page template will display any functions hooked into the <code>homepage</code> action.
 * By default this includes a variety of product displays and the page content itself. To change the order or toggle these components
 * use the Homepage Control plugin.
 * https://wordpress.org/plugins/homepage-control/
 *
 * @package storefront
 */
?>
 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 	<?php echo the_content(); ?>
 </article><!-- #post-## -->
4

Hi Alex,

Thanks for the detailed info. The reason this is happening is because Beaver Builder only loads its CSS/JS assets for posts in the main query. It’s not possible for us to enqueue assets for posts in secondary queries (especially ones run after wp_head).

In order to get the assets for those posts to load, you’ll need to use the fl_builder_global_posts filter found here…

http://forum.wpbeaverbuilder.com/knowledge-base/filter-reference/

Let me know if you have any questions about that.

Justin

5

Hey Justin,
Thanks for the prompt reply. I know code support isn’t in-scope for your support, but I’m hoping you can still guide me here.

Would something like this work

    <?php
      function my_global_builder_posts( $post_ids ) {
        $latest = new WP_Query( array (
            'post_type'              => 'homepage',
            'posts_per_page'        => -1
        ));

        if ( $latest -> have_posts() ) : while ( $latest -> have_posts() ) : $latest -> the_post();

        endwhile; endif; wp_reset_postdata();

          $post_ids = wp_list_pluck( $latest->posts, 'ID' );
          return $post_ids;
        }
      add_filter( 'fl_builder_global_posts', 'my_global_builder_posts' );
    ?>

Then, could I set the markup for posts returned from that query?

Basically the BB assets would need to load for all posts returned in the query I posted above.

6

Hey Alex,

No worries. Without testing, it’s hard to say if that works, but it does look correct. Is it not working?

You might try this instead…

<?php
  function my_global_builder_posts( $post_ids ) {
    $latest = new WP_Query( array (
        'post_type'              => 'homepage',
        'posts_per_page'        => -1
    ));

    if ( $latest -> have_posts() ) : while ( $latest -> have_posts() ) : $latest -> the_post();
    	$post_ids[] = get_the_ID();
    endwhile; endif; wp_reset_postdata();

      return $post_ids;
    }
  add_filter( 'fl_builder_global_posts', 'my_global_builder_posts' );
?>
Then, could I set the markup for posts returned from that query?

Yes, you can pull the markup as you were before and the assets should be available.

Justin

7

Okay, I think I might be confused as to how to use the filter. So let me try to clarify for myself.

If I take this snippet

function my_global_builder_posts( $post_ids ) {
    $post_ids[] = '123';
    return $post_ids;
}
add_filter( 'fl_builder_global_posts', 'my_global_builder_posts' );

and drop it into functions.php, my assumption is that any post with a post id of ‘123’ that is called in a custom wp_query function or in a sidebar—or anywhere else—will retain it’s beaver builder css, js and markup? Do I have that right? It’s just a matter of getting the right post IDs.

Thanks again.

8

Okay, I tried the following in functions.php and my posts still don’t seem to have their formatting elements in-tact.

 function digisavvy_beaver_builder( $post_ids ) {
   $args = array( 'posts_per_page' => -1, 'post_type' => 'homepage' );
   $post_ids[] = get_posts( $args );
   
   return $post_ids; }
 add_filter( 'fl_builder_global_posts', 'digisavvy_beaver_builder' );
9

Hey y’all. I just wanted to ping you guys right quick on my last reply. This snippet doesn’t work (reply 28585), so I’m not sure what I’m missing.

10

Hi Alex,

My apologies for the delay. The reason your code isn’t working is because you are loading all of the post objects into the $post_ids variable. Instead, that needs to be an array of post IDs like this…

function digisavvy_beaver_builder( $post_ids ) {
   $args = array( 'posts_per_page' => -1, 'post_type' => 'homepage' );
   $posts = get_posts( $args );
   
   foreach ( $posts as $post ) {
   	 $post_ids[] = $post->ID;
   }
   
   return $post_ids; 
}
add_filter( 'fl_builder_global_posts', 'digisavvy_beaver_builder' );

I haven’t tested that, but it’s along the lines of what you need to do.

Justin

11

Thanks for all the help Justin. That did the trick plenty well!

12

Great! I’m glad to here it’s working now.

Justin