Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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>

<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>
</ul>
</div>
<!-- / post lists -->

Script that makes it all work:

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

                    <script>
                    $(document).ready(function() {
                        var h1 = $("#list1").height();
                        var h2 = $("#list2").height();
                        $("#list1,#list2").height(Math.max(h1, h2));
                        $("#list2").hide();
                    });
    
                    $("#link1").live('click', function() {
                        $("#list1").show();
                        $("#list2").hide();
                    });
    
                    $("#link2").live('click', function() {
                        $("#list2").show();
                        $("#list1").hide();
                    });
                </script>
    

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.

share|improve this question

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.
share|improve this answer
    
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 '12 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 '12 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 '12 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 '12 at 12:05
    
Thank you @Rarst, will do. –  Phantasmix Oct 15 '12 at 16:17

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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