Custom Loop with Pagination (part1)

Posted by Me (Kris Jay) & Written on Aug.15, 2010

hrbg

Devloping a website can be a time consuming, and sometimes hair pulling experience. There are few details that should be overlooked, if any at all. Navagation is one that you need to get right. WordPress offers a great system to display your pages, posts and cats in a systematic way for easy surfing.

This system contains an automatic method that adds, and links all pages when there is more posts than you're allowing to be displayed at one time on that particular page (settings >> reading). With the built in system WordPress offers, it provides links to 'Older' or 'Newer' posts, or 'Next' and 'Previous' pages.

That system works great. But what if by chance, you've created a custom loop? The dam built in Pagination won't work!So let's make a custom loop, make the pagination work, and make it much-much better in the process! I'm going to be creating this on the Kubrick Theme, making this possiable for anyone to try out themselves.

Just a warrning, this is a four (4) part tutorial over the corosponding days. It will consist of building a functional custom loop, styling it, enabling pagination within the custom loop and making it even better. Hope you'll stick around and find out how to do it!

Live Example of the Custom Loop & Pagination

First off this has been tested on WordPress 2.7.1-3.0.x, so it should be good to go all around. We will start off by building our custom loop, and work our way up to the functions of our customized pagination.

So like any loop we start off with:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

// custom loop will go in here

<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endwhile; endif; ?>

Now lets get into the fun part of building our loop. Time to figure out what it will do.

Lets say this loop will be for the main page of your blog. It should display an exerpt of the post, with a thumbnail picture. We will take it up a step and make the exerpt length customizable via the loop, and make it pull an image directly from the post.
No need to even add a thumb, it will basicly do it for you.

So add the following to make our custom loop (you can remove the green notes):

<?php



$customloop = 0; $customloop2 = 0;

if (have_posts()) : while (have_posts()) : the_post();

$customloop++; $customloop2++;

if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>

<div
<?php if ($customloop == 1) { echo 'custom1'; } else { echo 'custom2'; $customloop = 0; } ?>" id="post-<?php the_ID(); ?>">
id="post-<?php the_ID(); ?>">



<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?>
</a></h2>



<span>Posted by <?php the_author(); ?> on <?php the_time('F j, Y') ?></span>

<div>




<?php
$id =$post->ID;
$the_content =$wpdb->get_var("SELECT post_content FROM $wpdb->posts WHERE ID = $id");
$pattern = '!<img.*?src="(.*?)"!';
preg_match_all($pattern, $the_content, $matches);
$image_src = $matches['1'][0];
?>

<p>



<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img width="100px" height="100px;" src="<?php if($image_src != '') { echo $image_src; } else { ?><?php bloginfo('template_directory'); ?><?php } ?>" alt="<?php the_title(); ?>"/>
</a>



<?php
$customtext = get_the_excerpt();
if(strlen($customtext ) > 0) {
$customtext = substr($customtext , 0, 330);
}
echo ''.$customtext.'...';
?>

<br />



<a href="<?php the_permalink() ?>" style="float:right;" rel="bookmark" title="Read More of <?php the_title(); ?>">read more</a>
<br />
</p>
<div>hrbg</div>

</div>

</div>

<?php wp_link_pages(); ?>



<?php endwhile; endif; ?>

<div>

<div><?php previous_posts_link('« Previous') ?></div>

<div><?php next_posts_link('More »') ?></div>

</div>

Ya, I know. That's quite a loop, but we're not done with it yet. So put it to the side and we will come back to it later in Part 2 of 4 tomorrow. If you want you can go test it out, but we will have to add our CSS to it for all to function and look good. I recommend downloading the file to use as you learn due to sometime some syntax wont show up on the site. Better to have a hard copy.

I hope you come back tomorrow and read part two (2) of How to Create a Custom WordPress Loop with Pagination. We will be adding our CSS to the loop, and making the Pagination function within our custom loop.

Download Basic Loop Read Part 2

hrbg