Mimic the Query Loop Container/Grids Layout

This topic has 15 replies, 2 voices, and was last updated 1 year, 7 months ago by Fernando.

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

Author

Posts
September 11, 2022 at 11:16 am #2339829

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

September 11, 2022 at 6:21 pm #2340013

Fernando
Customer Support

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.

September 11, 2022 at 7:20 pm #2340027
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.
September 11, 2022 at 8:02 pm #2340047

Fernando
Customer Support

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.

September 11, 2022 at 8:13 pm #2340053

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?

September 11, 2022 at 9:39 pm #2340083
Fernando
Customer Support
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.
September 11, 2022 at 10:07 pm #2340094

Fergal

Hey Fernando,

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

Can we try anything else?

Thanks,
Fergal

September 11, 2022 at 10:16 pm #2340100

Fernando
Customer Support

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.

September 11, 2022 at 11:14 pm #2340134

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

September 11, 2022 at 11:34 pm #2340144

Fergal

Hey Fernando,

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

Thanks,
Fergal

September 12, 2022 at 12:35 am #2340178

Fernando
Customer Support

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.

September 12, 2022 at 9:43 am #2340827
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;
} );
```
September 12, 2022 at 11:21 am #2340886

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?

September 12, 2022 at 5:23 pm #2341065

Fernando
Customer Support

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.

September 12, 2022 at 5:45 pm #2341070

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

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

You must be logged in to reply to this topic.

[Resolved] Mimic the Query Loop Container/Grids Layout

Popular Articles

Start building better websites today.