How to Create WordPress Thumbnail Based Post Archives

How to create thumbnail based post archives with page navigation option? The archives pages generated by wordpress and different plugins are usually text based. It often displays the archives as a combination of text excerpt and images. In this post I will explain about how to create thumbnail based unique posts archive views using the query_posts() function provided by the wordpress platform.

The example includes a small piece of coding in PHP. If you are familiar with PHP programming languages and the wordpress functions then it is very easy to understand and implement. If you do not know PHP , don’t worry what you need to do is just follow the instructions explained below.
Thumbnail based archives works well with blogs those often attach thumbnail images to every single post or majority of the posts. If you do not use thumbnail images to posts then the appearance of the archive may not be very attractive. This is because images always attracts more attention than plain text. See Thumbnail based archives in action here.  See the screen-shot below.

How the create attractive thumbnail based Post Archives?

The explanation below focuses on creating a new page template and use that template to add Thumbnail Based Post Archives page. The below example creates post archive for a unique category. The same example can be used as a base to create multiple category post archives.
In fact you can include the code explained below to any template page. If you add the code to a template page at a specific point, the thumbnail based archives will be displayed there.

Create a page template to display thumbnail based post archives

You need to create a custom page template. You can inherit the styles and other option to maintain the uniform look and feel of your other blog pages.
Once your page is ready , you can add the following code to the content area of your page. The code doesn’t include any style information. You can apply CSS styles and arrange post entries in multiple rows or columns. Here we are using the wordpress query_posts() Function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('posts_per_page=5&cat=98&paged='.$paged); 
 ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); 
	?>
	<a href="<?php the_permalink(); ?>">
		<span ><?php the_title(); ?></span>
		<?php if ( get_post_meta($post->ID, 'thumb', true) ) : ?>
			<a href="<?php the_permalink() ?>" rel="bookmark">
				<img src="<?php echo get_post_meta($post->ID, 'thumb', true) ?>" alt="<?php the_title(); ?>" />
			</a>
		<?php endif; ?>
 
	</a>
<?php endwhile; endif; ?>
<!-- Add the page navigation option here  -->

If you want to include post excerpt, then you can add the below piece of code just under line no:15.

1

<span><?php the_excerpt(); ?></span>

Also depends on your page navigation settings you need to add the code below “” For example if you use wp_pagenavi then use the following code.

1
2
3

<?php if(function_exists('wp_pagenavi')) { 
wp_pagenavi(); 
} ?>

You can apply CSS styles to the above code that matches your blogs look and feel. See Thumbnail based archives in action here.

Before you Go,

Before you go, subscribe to get latest technology articles right in your mailbox!.

EmailEnter your email address

Subscribe