WordPress.org

1. matthewpaul
   Member
   Posted 2 years ago #
   

   In my site's sidebar, I have a list of the 10 latest posts. I'd like to add a link at the bottom to "Show More Posts" and "Show Less Posts" when clicked.

   For example: Go here
   On the right sidebar, scroll down to "Archives". The "See All Archives" / "Hide Archives" feature is what I'd like to create, but using the latest post titles (w/ links) rather than an archive.

   Anyone know of a jQuery or similar plugin that can handle this feature?

   This is the code I'm currently using to display the latest 10 posts:
   

   <?php
   	wp_reset_query();
   	if (is_single()) { ?>
   		<span class="latest">Latest Posts</span>
   		<ul class="blogroll">
   			<?php $myposts = get_posts('numberposts=10&category=-3');
   			foreach($myposts as $post) :?>
   			<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>&nbsp;</li>
   			<?php endforeach; ?>
   		</ul>
   	<?php } ?>

2. ambrosite
   Member
   Posted 2 years ago #
   

   That's definitely a Javascript/jQuery effect. I guess you already knew that. One of these tutorials should help.

   http://wpcult.com/how-to-showhide-any-div-box-with-jquery-in-wordpress/

   http://www.learningjquery.com/2007/02/more-showing-more-hiding

   http://www.gowestwebdesign.com/demos/jquery-effects-1/index.cfm

   http://papermashup.com/simple-jquery-showhide-div/

3. matthewpaul
   Member
   Posted 2 years ago #
   

   Thanks. Basically I'll have a list of 10 posts. Then a "Show More" button below, which would reveal more posts when clicked.

   So I'm thinking I'll have to create a new div to hold the additional posts. Is it possible to use "get_posts" to show posts 10 through 15 (since the 10 newest posts would already be listed above the new div)?

   My only issue is getting this feature to function properly with WordPress code.

4. ambrosite
   Member
   Posted 2 years ago #
   

   The 'more' posts definitely need to be in their own div. You don't necessarily need two separate loops for that, though. I would think something like this could work:

   <div class="latest-posts">
   <?php
   $i = 0;
   if (have_posts()) : while (have_posts()) : the_post();
       if ( $i == 10 )
           echo '<div class="more-posts">'; ?>
       <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
       <?php $i++;
   endwhile; endif; ?>
   </div> <!-- end more-posts -->
   </div> <!-- end latest-posts -->

   That will create a div within a div containing the 'more' posts. Then you use Javascript to show/hide the inner div.

5. matthewpaul
   Member
   Posted 2 years ago #
   

   ambrosite,

   I tried your code, but all that appears is the links to whatever posts are contained on the current page. Like on a single page, only a link to the page I'm viewing is displayed.

   I was able to get a it working (prior to implementing any jQuery) using this code:

   <?php
   	wp_reset_query();
   	if (is_single()) { ?>
   		<span class="latest">Latest Posts</span>
   		<ul class="blogroll">
   			<?php $myposts = get_posts('numberposts=10&category=-3');
   			foreach($myposts as $post) :?>
   			<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </li>
   			<?php endforeach; ?>
   		</ul>
   		<a href="#" class="show-more">Show More</a>
   		<ul class="blogroll">
   			<?php $myposts = get_posts('paged=2&numberposts=5&category=-3');
   			foreach($myposts as $post) :?>
   			<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </li>
   			<?php endforeach; ?>
   		</ul>
   	<?php } ?>

   Not the cleanest code, but it works. Can this be written simpler?

6. ambrosite
   Member
   Posted 2 years ago #
   

   If you wanted to use my code, you would need to call query_posts prior to entering the loop in order to retrieve the posts you want to display.

   But there is nothing wrong with your code. Even if you rewrote it to use only one loop, it wouldn't save you much, since the 'show more' posts need to be marked up in a separate list anyway. If it works, don't fix it.

Topic Closed

This topic has been closed to new replies.