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.

I am building a site in wordpress where at a certain part there is a container that has a list of post items (see it as a menu/sidebar), and an empty space where I will load content. When you click on one of the titles from the list of posts, the content of that clicked title is supposed to load into the empty div. Clicking another title from the list of titles should of course replace the previous content.

So it looks like this, basically:

<div class="container">
  <ul class="cats">
     <?php
       $my_query = new WP_Query('showposts=10&cat=4');
       while ($my_query -> have_posts()) : 
           $my_query->the_post();
           $category = get_the_category(); 
     ?>

       <li class="trigger">
         <h5>
           <? the_title(); ?>
         </h5>
       </li>

     <?php 
       endwhile; wp_reset_query(); 
     ?>
  </ul>
  <div class="the-content">
    <? the_content(); ?>
  </div>
</div>

So, I already looked up something for ajax but I don't have any experience with that. What would be the best way too do this?

share|improve this question
add comment

1 Answer 1

up vote 0 down vote accepted

If the page & content is short enough & you don't mind some extra initial loading time, you can load all the content tabs on the page at the first time & then just use javascript to show/hide different tabs

// the loop to list the titles here
$wp_query->rewind_posts(); // reset the loop
while ($my_query -> have_posts()) : 
    $my_query->the_post();
    ?>
    <div id="<?php the_ID();?>" class="the-content">
        <?php the_content();?>
    </div>
    <?php
endwhile;

If you strictly want ajax, see this http://codex.wordpress.org/AJAX_in_Plugins

You'll need to pass the id of the post as a parameter in ajax request & then use this parameter in your code to determine which post's content is to be returned

share|improve this answer
    
So I can keep the title loop as it is, then put your piece of code where I had the-content div? Then just use some jquery for the show/hide? Alright, going to try this out –  Carlo Ravelli Nov 13 '12 at 11:28
    
That's correct, & probably add rel="<?php the_ID();?>" to the li.trigger element for identifying the link between them –  Mridul Aggarwal Nov 13 '12 at 11:33
    
The loading works alright, now on to the jquery. Thanks for the help :) –  Carlo Ravelli Nov 13 '12 at 11:49
add comment

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.