0

I'm working on a tabbed archive page for taxonomy terms.

Ultimately, I want each tab to show the 10 most recent posts for an individual post type with a "see all" link at the bottom of the tab that will direct visitors to a Post Type archive filtered by a taxonomy term.

I know I can achieve this relatively easily with multiple queries and something along the lines of:

<section class="tab" id="tab1">
    <?php $query1 ?>
    [loop content here]
</section>

<section class="tab" id="tab2">
    <?php $query2 ?>
    [loop content here]
</section>

[...]

For the templates in question, I'll only be using 4 tabs, but I'm wondering if there is a more efficient way to do this with a single query.

What I'd really like to output is something more like:

<article class="custom-type1">
    [Listing content]
</article>

<article class="custom-type2">
    [Listing content]
</article>

<article class="custom-type1">
    [Listing content]
</article>

<article class="custom-type3">
    [Listing content]
</article>

<article class="custom-type2">
    [Listing content]
</article>

[...]

Then I would use the tabs to turn visibility on/off for specific CSS classes. (I also think this second option would look nicer for visitors with JS disabled).

  • for visitors with JS disabled Do not try to please the absolute minimum which do not use JS. – Pieter Goosen Jul 14 '15 at 17:28
  • Why not? I've always felt that JS should enchance the user experience not define it. – Mike Jul 14 '15 at 18:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.