[Resolved] Mimic the Query Loop Container/Grids Layout

[Fergal]

Hey there,

Would like to replicate the style of the query loop seen in the top photo of https://imgur.com/a/xgZXJ6g

The bottom photo is where I’ve copied the html from the output of the query loop (seen in the first photo), then added in my custom fields for a custom post type.

I see a lot of dynamic values in the div classes that if I remove then my layout breaks down. E.g., the post number is inserted into the gb-grid-column, 8 random characters get added to each div class.

Therefore, can you please help me create a grid/container layout for my custom wp_query loop so that it looks similar to the one produced by the Query Loop Block?

Thanks,
Fergal

[Fernando]

Hi Fergal,

To clarify, are you trying to duplicate the Query Loop you already have, and just replace the queried posts?

If so, it might be easier to just duplicate the Query Loop you already have, and then just replace its parameters.

Let us know.

[Fergal]

Hey Fernando,

Thanks for responding. I think my initial description was overly confusing.

I’m using metabox.io for custom fields and a custom post type. I have a custom query loop like the below:

$ids = $wpdb->get_col( "SELECT ID FROM job_openings" );

        $paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
        $jo_query = new WP_Query( [
            'post_type'         => 'job-opening',
            'post__in'          => $ids,
            'posts_per_page'    => 3,
            'paged' => $paged,
        ] );
        // Do something
        // The Loop
        while ( $jo_query->have_posts() ) {
            $jo_query->the_post();
            $company_name_value = rwmb_meta( 'company_name', '', get_the_ID() );
            $location_value = rwmb_meta( 'location', '', get_the_ID() );
            $jo_job_type_value = rwmb_meta( 'jo_job_type', '', get_the_ID() );
            $date_posted_value = rwmb_meta( 'date_posted', '', get_the_ID() );
            //$logo_image1 = rwmb_the_value( 'jo_comp_logo', '', get_the_ID() );
            $logo_image = rwmb_meta( 'jo_comp_logo', '', get_the_ID() );
            $image = reset( $logo_image );
            $enhanced_bgc_value = rwmb_meta( 'enhanced_listing', get_the_ID() );
            $filledexpired_value = rwmb_meta( 'filledexpired', get_the_ID() );
            ?>

I have the loop working just fine and I’m able to access the values I need, my only problem is the layout. My desired layout for each item of the query loop is 4 columns and I will insert values from the custom fields into the respective column.

Thanks for your help.

[Fernando]

Ohhh. I see. You should be able to retrieve the post meta fields of your CPT through Headline/Image blocks.

It may be better to create this Query loop from scratch in the Block Editor. Just add a 4 column Grid Block inside the Query Loop Block and work from there.

If you’ll need assistance, let us know.

[Fergal]

The method you mention would be ideal, but the Query Loop doesn’t seem to know about the custom fields I’ve built.

I’ve tried the following : https://imgur.com/a/hmcJSxn and nothing shows up on the front end. Am I doing it wrong?

[Fernando]

I see. Let’s do some testing first.

Can you try creating a Hook Element, then add this code?:

<?php

var_dump(get_post_meta( get_the_ID(), 'company_name' )); 

?>

Then hook it to generate_after_header for instance. Make sure “Execute PHP” is enabled and the display rule is set to your CPT posts.

Let me know if the company name appears.

[Fergal]

Hey Fernando,

Sounds good. I did as you said and I see the result:
array(0) { }

Can we try anything else?

Thanks,
Fergal

[Fernando]

That’s odd.

Can you reach out to Metabox why get_post_meta() isn’t working?

It says here in their documentation that it should: https://docs.metabox.io/displaying-fields-with-code/ however, it’s not retrieving the data.

[Fergal]

Hey Fernando,

I figured it out thanks to your direction. I’m using a custom table to store the custom fields. I stopped using the custom table and now I can access the custom fields. I’ll now use the query loop in the block editor. Thanks!

Regards,
Fergal

[Fergal]

Hey Fernando,

Can pagination be added to the Query Loop in the block editor?

Thanks,
Fergal

[Fernando]

I see. You’re welcome!

As for the pagination, when you have the Query Loop selected. There should be a + icon in the tool bar(bar where you can find the alignment settings). That button is for adding the pagination.

[Fergal]

Great to know thank you.

I have another question and please let me know if I should start a new topic at any point.

So I have home page set to display latest posts. The latest posts are for post type “job-opening”.
Below the blue line is where these posts display. I’d like to display a title “All Jobs” here on the home page. For each paginated page I’d like to show “All Jobs – Page 2”, “All Jobs – Page 3”, etc. I’m trying the following code, but nothing is showing up. Can you please assist with this? Maybe my archive titles are disabled?

add_filter( 'get_the_archive_title', function( $title ) {
    if(is_post_type_archive('job-opening')) {
        the_post();
        //global $page;
        $paged = get_query_var('paged') ? get_query_var('paged') : 1;
        $title = sprintf('All Jobs - Page %1$s', $paged);

        rewind_posts();
    }

    return $title;
} );

[Fergal]

I see it is actually working on the job-openings archive page, but not when using the pagination links on the home page. Is there a way I can make it work for both?

[Fernando]

Hi Fergal,

I see. May you start a new topic?

Let us know if you want “A niche job board for Wineries” to be “A niche job board for Wineries – Page 2” or something else when it’s paged.

You might need a different code for this.

[Fergal]

Sound good Fernando. I just created a new topic here: https://generatepress.com/forums/topic/change-archive-title-that-displays-on-homepage-and-paginated-pages/

Thanks for your help.

[Author]

Posts