Objective and layout:

  1. I have two separate divs (this is in a Custom Page template). DIV1 has a listing subcategories of a specified parent category.
  2. Clicking on any of the listed subcats brings up a list of posts in that category in DIV2. Just the titles with links to the posts.

It's working now, but it's half manual.

Code in 1st DIV:

<?php $products = get_categories('child_of=1143&hide_empty=1');
  foreach ( $products as $product ) {
  echo '<li><a href="#" class='. $product->cat_ID .'>'.$product->cat_name.'</a></li>';
  } ?>

Code in 2nd DIV:

<!-- post lists -->
<ul id="list1" style="display: none;">
<?php $my_query = new WP_Query('category_name=lightbulbs&showposts=25&post_type=product&orderby=title&order=asc');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>

<ul id="list2" style="display: none;">
<?php $my_query = new WP_Query('category_name=refrigerators&showposts=25&post_type=product&orderby=title&order=asc');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<!-- / post lists -->

Script that makes it all work:

  • http://code.jquery.com/jquery-latest.js in the header
  • Plus this:

                    $(document).ready(function() {
                        var h1 = $("#list1").height();
                        var h2 = $("#list2").height();
                        $("#list1,#list2").height(Math.max(h1, h2));
                    $("#link1").live('click', function() {
                    $("#link2").live('click', function() {

I wanted to see if there's a way to automate the second part. When I add a new subcategory, it gets listed in DIV1 automatically, but to show the posts in that category in DIV2, I have to manually a) add the div with the new list, and b) classes to the script.

1 Answer 1


Same principle applies:

  1. You are looping through all products to generate first div.
  2. Now take same list of products and generate list of posts for it in second div.
  3. Count how many products you have and generate that many classes in your JS code.
  • This is too advanced for me, I don't think in those terms, sorry. I can often do my own research and piece things together, but only when I know exactly what it's called.
    – Phantasmix
    Oct 14, 2012 at 20:23
  • @Phantasmix well, you can follow foreach ( $products as $product ) { in first div, right? It's would be just more of the same. This is more of a basic PHP than WP thing.
    – Rarst
    Oct 14, 2012 at 20:24
  • Rarst, let's say I can get the php part to work, but I'm clueless when it comes to jquery. Any pointers in what direction to look? Thanks!
    – Phantasmix
    Oct 15, 2012 at 3:22
  • @Phantasmix you might want to ask how to improve that jQuery part on Stack Overflow. I doubt that hardcoding all classes into it is the best way to go.
    – Rarst
    Oct 15, 2012 at 12:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.