Tab with CPT Looper

[bill_hodgson]

Hello,

I have a tab element being driven from a CPT, and in the page editor works 100% correctly. When I view the page live outside the editor an extra bogus tab appears.

In the editor: 4 tabs - all perfect.

Viewed live - one extra bogus tab

I checked the looper index - it works fine, each tab is index 1/2/3/4. The bogus tab has no content so I can’t click on anything within it.

Any ideas? Bill.

[prakash_s]

Hello Bill,

Thanks for writing to us.

It generally happens due to a broken HTML error, I would suggest you please clone the page and then delete the section one by one to check which section is causing the issue. If it doesn’t work for you, please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin-level username and password
• Exact page URL

You can find the Secure Note button at the bottom of your posts

Thanks

[bill_hodgson]

Hello,

I’ve tried hacking content out of the page, and running a duplicate of the looper section. The first iteration of the code produces the bug, the second copy doesn’t. If you swap the two sections, the first one always has the bug.

I’ll post a secure message and let you take a look.

Bill.

[bill_hodgson]

The data model is:

Group - which has a taxonomy with the name of the group
Group Content - which also has the same taxonomy, linking the content posts to the group

Bill.

[ruenel]

Hello Bill,

Please double check your query string first:
post_type=hps-group-content&order=ASC&orderby=meta_value&meta_key=hpsgc_content_order &tax_query[0][taxonomy]=hps-group&tax_query[0][field]=name&tax_query[0][terms][]={{dc:term:name}}&tax_query[0][operator]=IN&tax_query[relation]=AND

This is not the proper query string. I am also seeing a blank space character between hpsgc_content_order and &tax_query. You will have to compose a query argument first and then get the correct query string.

Query Argument:

$query = array(
    'post_type' => 'hps-group-content',
    'order'     => 'ASC',
    'orderby'   => 'meta_value',
    'meta_key'	=> 'hpsgc_content_order',
    'tax_query' => array(
    	'relation' => 'AND',
        array(
            'taxonomy' => 'hps-group',
            'field'    => 'name',
            'terms'    => 'Yoga',
            'operator' => 'IN',
        )
    )
);

Final Query String:
post_type=hps-group-content&order=ASC&orderby=meta_value&meta_key=hpsgc_content_order&tax_query%5Brelation%5D=AND&tax_query%5B0%5D%5Btaxonomy%5D=hps-group&tax_query%5B0%5D%5Bfield%5D=name&tax_query%5B0%5D%5Bterms%5D=Yoga&tax_query%5B0%5D%5Boperator%5D=IN

For your reference which would properly explain how to get the final and proper query string, check out this old thread:

• How to exclude current post from recent posts

Best Regards.

[bill_hodgson]

Hello Rue,

Thanks for the input. Here’s what I’ve done.

• Removed the space
• Made a copy of the section and used your version of the query string
• Placed both on the page
• Tested both as first or second
• Results below

Here’s the result using my own query string, without the space. This shows the extra tab.

CleanShot 2023-06-02 at 09.16.26

Here’a the result with your query version coming first. This also displays the same problem.

CleanShot 2023-06-02 at 09.16.49

This hasn’t changed things - both queries return the correct 5 posts in the correct order. Whichever query goes first seems to cause the unwanted extra first tab.

Is there some way to get inside the Tab element and trace the inputs from the looper?

Best wishes, Bill.

[ruenel]

Hello Bill,

You were still using your same old query. I have to modify the query again and use this:

$query = array(
    'post_type' => 'hps-group-content',
    'orderby'   => array( 'meta_value_num' => 'ASC', 'title' => 'none' ),
    'meta_key'  => 'hpsgc_content_order',
    'tax_query' => array(
        array(
            'taxonomy' => 'hps-group',
            'field'    => 'name',
            'terms'    => 'Sommerset',
            'operator' => 'IN',
        )
    )
);

Replacing Sommerset with {{dc:term:name}} will give us this final query string:
post_type=hps-group-content&orderby%5Bmeta_value_num%5D=ASC&orderby%5Btitle%5D=none&meta_key=hpsgc_content_order&tax_query%5B0%5D%5Btaxonomy%5D=hps-group&tax_query%5B0%5D%5Bfield%5D=name&tax_query%5B0%5D%5Bterms%5D={{dc:term:name}}&tax_query%5B0%5D%5Boperator%5D=IN

In the live view, it is still displays the unwanted tab. This might seem to be a bug. I will consult with our Developer about this so they can investigate further.

Best Regards.

[bill_hodgson]

Thanks again. What is the reasoning for replacing the [] characters with their numeric encoding instead? Same for the ampersand.

I’ve been using query strings which contain [] & successfully in many places both on this site and others. I’d like to understand.

I’m using the query builder here https://crocoblock.com/freemium/tools/wp-query-generator/ and then converting the format with this site https://www.convertonline.io/convert/json-to-query-string which so far has worked fine for me.

For now I might use CSS to hide the unwanted tab, and move onwards.

Best wishes, Bill.

[ruenel]

Hello Bill,

You are most welcome. Having to encode the character ensures that the query string will not break anything which is why we always use http_build_query( $query ) function in getting the query string.

Cheers.