“Recent Posts” module- which is the best method?

Of course you could always query 20 posts, but show 5, then give a link to show the other results…

Think how a tabbed sidebar works, it generates the conent but hides sections, you simply hide what you don’t want shown, then alternate the content shown when an area/link is clicked….

I thought about this too. I’m trying out the AJAX method right now, but I feel like the bext thing to do would be to load a giant div with all of the recent posts in it, hide all but 5, and then move it incrementally to the right

I’m also going to try your method. I downloaded that exact same script you linked to before I read that response, and I’m currently in the process of making it work on my site.

Thanks for the help!

So here’s the whole solution, for anyone interested-

First, you’ll need this AJAX script. There’s probably a better way to do this, but I don’t know anything about AJAX, so this is what I used.

Here’s the CSS-

/*---:[ Previous Posts module ]:--- */

.drop ul {
	padding: 0px;
	margin: 0px;
	display:block;
	z-index:3;
}

.drop ul li {
	display: inline;
	width: 100%;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	height: 30px;
	position: relative
}

.drop ul li a {
	background-color: #FFFFFF;
	color: #FFFFFF;
	width: 100%;
	text-decoration: none;
	height:30px;
}

.drop ul li a:hover {
	background-color: #FFFFFF;
}

.drop ul li ul li a {
	color: #39F;
}

.drop ul li ul li a:hover {
	color: #30F;
}

.drop ul li ul {
	visibility: hidden;
	position: absolute;
	bottom: 10px;
	left:0;
}

.drop ul li:hover ul {
	visibility: visible;
	position: absolute;
	bottom: 10px;
	left:0;
	background-color:#FFF;
	width: 500px;
	height:100px;
	border:#000 thin solid;
	float:left;
}

.recent {
	width: 50px;
	height:100%;
	border-right:#000 thin solid;
	padding-right:10px;
	padding-left:10px;
	float:left;
}

.postnavbutton {
	float:left;
	display:inline;
}

Here’s the XHTML from the front page, where the “recent posts” link is-

<div class="drop">
    <ul>
    <li>Previous Posts
    <ul>
        <script type="text/javascript">
		ajaxpage('http://www.mysite.com/?page_id=50&posts=4', 'recentbox')
		</script>
		<div id="recentbox">
		</div>
    </ul>
    </li>
    </ul>
    </div>

So when the page loads, there is already something inside the “recentbox” div. Now here’s the tricky part-

<?php
/*
Template Name: Recent Posts
*/
?>    

<?php
$count_posts = wp_count_posts();
$published_posts = $count_posts->publish;
?>

<?php query_posts('showposts=4&offset='.$_GET['posts'].''); ?>

	<?php if ($_GET['posts']-4 != 0) { ?>
    <div class="postnavbutton">
	<a href="javascript:ajaxpage('http://www.mysite.com/?page_id=50&posts=<?php echo $_GET['posts']-4; ?>', 'recentbox')" >
    <img src="<?php bloginfo('template_url'); ?>/images/go2.gif" alt="&raquo;" />
    </a>
    </div>
    <?php } else {} ?>

	<?php while (have_posts()) : the_post(); ?>
 	<li>
    <div class="recent">
    <?php the_title(); ?>
    </div>
    </li>
    <?php endwhile; ?>

	<?php if ($_GET['posts']+4< $published_posts) { ?>
    <div class="postnavbutton">
    <a href="javascript:ajaxpage('http://www.emrl.com/clients/sandbox/?page_id=50&posts=<?php echo $_GET['posts']+4; ?>', 'recentbox')" >
    <img src="<?php bloginfo('template_url'); ?>/images/go.gif" alt="&laquo;" />
    </a></div>
	<?php } else {} ?>

First, I made this a page template, because I couldn’t figure out any other way to make WordPress process my php file. I set up a new WordPress page called “Navigation Hack” and made this the template.

The URL on the home page points to that page, with an added variable for GET to process.

Next, I get a count of the published posts, so our “recent posts” box doesn’t show any posts already displayed on the page.

Next, I do a custom query using the GET variable as the offset number.

Next, I display the buttons. The button on the right is set to only show up when there is at least one more previous post to display. If the “offset” parameter is larger than the number of published posts, nothing shows up.

The button on the left is set up to display only after you’ve gone deeper into the list of previous posts, so you can go the other direction as well. If the only posts left are the ones showing on the front page, this button doesn’t show up.

Is there a way to do this without making this php file a page template and setting up a page?