Since WP Mods was launched the archives page has showed older posts by month and by category. Posts are listed using the index.php template so the title, excerpt and featured image are all displayed. Whilst this is a user friendly way of displaying older articles, it isn’t necessarily what everyone wants.
WP Mods has reviewed hundreds of themes and plugins since it was launched. Visitors that are just browsing the site at a leisurely pace will be more than happy with the traditional archive layout however it’s not the quickest or more practical way of listing posts for people who want to quickly find what they are looking for. The search box is useful if you know exactly what you are looking for however, as most of you know, the default WordPress search engine doesn’t always list the articles you’re trying to find.
Therefore, I looked into listing all the posts from one category on a single page in a traditional list format i.e. no excerpts or image thumbnails, just the name of the post and a link to it. This is a good solution for a site like WP Mods as there is only 6 post categories and hundreds of posts in each category (Note, I didn’t want to simply list all posts by category in the existing archives page as this would involve listing links to several hundred articles below the monthly and category archive links).
There are a few ways in which you can achieve this. You can either create custom templates for each category or you can use a plugin. In this post I am going to show you how you can do both :)
Using A Custom Template
Displaying all the posts from one category on its own page can be achieved easily with the query_posts() function.
The best way to start is to copy one of your existing templates such as your page.php template or archives.php template. Copy the code from your chosen template and name the template something that makes sense to you e.g. archives-news.php or archives-list-1.php. The template name doesn’t really matter, it’s just for your own reference.
As per the query_posts() info page, the default usage of the plugin is:
<?php // The Query query_posts( $args ); // The Loop while ( have_posts() ) : the_post(); echo '<li>'; the_title(); echo '</li>'; endwhile; // Reset Query wp_reset_query(); ?>
The query_posts() function can be used in a number of different ways such as excluding categories from your home page and listing specific posts. The arguments we need to use for listing all the posts from one category is:
query_posts( array ( 'category_name' => 'The Category Name', 'posts_per_page' => -1 ) );
Putting these parameters into our default usage code we get:
<?php // The Query query_posts( array ( 'category_name' => 'The Category Name', 'posts_per_page' => -1 ) ); // The Loop while ( have_posts() ) : the_post(); echo '<li>'; the_title(); echo '</li>'; endwhile; // Reset Query wp_reset_query(); ?>
The WordPress documentation suggests you use the Category Name unless you want to query posts from a sub category.
They suggest that it is better to use this query instead:
if (is_category('category-slug')): query_posts(array('category_name' => 'category-slug', 'posts_per_page' => -1 )); endif;
After some testing, I realised that it’s best to just use the category slug all the time as the function query posts() doesn’t work correctly if the category slug is different from the name of the category.
For Example, the category slug for my ‘WordPress Themes’ category is simply ‘wordpress-themes’. The following function will work because WordPress simply replaces the space with a hyphen i.e. WordPress Themes = wordpress-themes.
query_posts( array ( 'category_name' => 'WordPress Themes', 'posts_per_page' => -1 ) );
My news category isn’t set up that way. The category is called ‘WordPress News’ however the slug is simply ‘news’. If I called the category using ‘WordPress News’, nothing would show. Therefore I need to call the category slug instead (as WordPress would change ‘WordPress News’ to ‘wordpress-news’, which isn’t the page slug of the category).
query_posts( array ( 'category_name' => 'news', 'posts_per_page' => -1 ) );
OK, back to our main piece of code. You may have noticed that the code we have used inside the loop lists all posts from one category, however it doesn’t link to the posts. Therefore we need to modify the code slightly and replace:
echo '<li>'; the_title(); echo '</li>';
echo '<li>';?> <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> <?php echo '</li>';
Our final code looks like this:
<ul> <?php // The Query query_posts( array ( 'category_name' => 'WordPress Themes', 'posts_per_page' => -1 ) ); // The Loop while ( have_posts() ) : the_post(); ?> <li> <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> </li> <?php endwhile; // Reset Query wp_reset_query(); ?> </ul>
Next you need to create the template for your category archive. The easiest way to do this is to copy your existing archives.php template and replace the archives.php code with the code above. Your archives.php template will look different from mine however to help you understand the steps I have taken, please reference the code below for my archives.php template and my archives-themes.php template. Note, since I modified archives.php in order to create archives-themes.php, the code is very similar.
WPMods Archives.php Template – The template that powers our Archives Page
<?php /* Template Name: Archives */ ?> <?php get_header(); ?> <div class="container main"> <div id="leftcolumn"> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <div class="title"> <h1> <?php the_title(); ?> </h1><?php edit_post_link(__('Edit This')); ?> <div class="clear"></div> </div> <div class="clear"></div> <div class="entry"> <?php the_content(); ?> <div class="clear"></div> </div> <strong>Search WP Mods</strong> <p><?php get_search_form(); ?></p> <table border="0" cellspacing="5" cellpadding="5"> <tr> <td valign="top" width="275"> <strong>Archives by Month:</strong> <ul> <?php wp_get_archives('type=monthly'); ?> </ul> </td> <td valign="top" width="275"> <p><strong>Archives by Category:</strong></p> <ul> <?php wp_list_categories('title_li='); ?> </ul> <p><strong>Archives by Category (list format):</strong></p> <ul> <li>WordPress News</li> <li>WordPress Plugins</li> <li>WordPress Resources</li> <li>WordPress Themes</li> <li>WordPress Tutorials</li> <li>WordPress Views</li> </ul> </td> </tr> </table> </div> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>
WPMods Archives-Themes.php Template – The template that powers our Theme Archives Page
<?php /* Template Name: Archives - Themes */ ?> <?php get_header(); ?> <div class="container main"> <div id="leftcolumn"> <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <div class="title"> <h1> <?php the_title(); ?> </h1><?php edit_post_link(__('Edit This')); ?> <div class="clear"></div> </div> <div class="clear"></div> <div class="entry"> <?php the_content(); ?> <div class="clear"></div> </div> <div id="amenu"> <ul> <li><strong>Archives</strong></li> <li>Themes</li> <li>Plugins</li> <li>News</li> <li>Views</li> <li>Tutorials</li> <li>Resources</li> </ul> </div> <div id="archivelist"> <ul> <?php // The Query query_posts( array ( 'category_name' => 'WordPress Themes', 'posts_per_page' => -1 ) ); // The Loop while ( have_posts() ) : the_post(); ?> <li> <em><?php the_time('M'); ?> <?php the_time('j'); ?> <?php the_time('Y'); ?></em> <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> </li> <?php endwhile; // Reset Query wp_reset_query(); ?> </ul> </div> </div> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>
As you can see, I added some things to the default code I discussed before:
- I floated a menu for the archives area at the top right hand side of the page.
- I have wrapped our query_posts() code inside a division called archivelist. This class removes the indent and the bullets from the list.
- I have added the date before each post link.
Note, any function that can be called inside the WordPress loop can be added in this area e.g. author, author link, avatar etc. Therefore you can be much more creative with what is displayed. For example, I could have added small thumbnails for each post and noted the author too. This wasn’t what I was looking for though. I wanted to keep the list as simple as possible, however I’m sure many of you will make your category archives much more advanced than mine :)
For WP Mods I created 6 templates in total: archives-themes.php, archives-plugins.php, archives-news.php, archives-views.php, archives-tutorials.php and archives-resources.php. Each template is identical apart from the template name at the top of the page (which is the name you will see in your post editor) and the category name that is called by query_posts().
After creating your templates, all you have to do is create a page for each category and make sure assign the correct template for your page. In my templates I called the function the_content() so that any text or images I added to my archive pages would show at the top of the template. I could have hard coded the text into my template (like I did with the menu) however I wanted the option of easily changing the content at the top of the page later without having to go back and change the template.
You can see a screenshot of the final image below. As you can see, the output is pretty basic. It’s simply a list of posts for each category on a page. A basic list of category posts in chronological order is all I wanted.
If you view the other archive pages, you will see that apart from the content, the pages are pretty much identical.
I hope that it was easy to follow this tutorial. If you are unsure about any part of this, please let me know and I’ll do my best to help you out.
Those of you who don’t like working with code might want to consider using a WordPress Plugin :)
Using A WordPress Plugin
Creating a template to use the query_posts() function is not the only route you can go down. There are a few plugins that make it easy for you to list posts from specific categories on posts and pages. Below you will see a brief review of 3 of the best :)
The ‘List category posts with pagination’ plugin allows you to easily insert an archive of posts from any category directly into any page or post on your website. Once installed, you can add a category archive by using the short code [ mycatlist cat=Category_ID ] (e.g. [ mycatlist cat=4 ]).
The plugin allows you to add category posts to a page or post in seconds. Unfortunately, there is no way to customise the output. By default the plugin will list the same number of posts as your archives. For example, on WP Mods I’m currently displaying 6 posts on the home page and on all archive pages. Due to this, the plugin lists 6 posts per page. This greatly reduces the usefulness of the plugin in my opinion.
Thankfully, it’s very easy to address this issue if you don’t mind editing the plugin itself. Open up the main plugin file list-category-posts-with-pagination.php. You can edit the file on your pc and upload it to /wp-content/plugins/list-category-posts-with-pagination/ or you can make the file writeable and edit it through the plugin editor in your admin area.
Search for the following line:
$postperpage = intval(get_option('posts_per_page'));
Simple set the value of that is greater than the number of posts in that category e.g. 1,000.
$postperpage = 1000;
Next thing you need to do is remove the page navigation. You simply have to remove this line from the file:
That’s all you have to do. Only two small edits are needed in order to make this plugin list all of your posts from one category. Fortunately, there is a plugin available that works right out the box called List category posts, which makes List category posts with pagination obsolete.
List category posts works in much the same way as List category posts with pagination. The only difference is it works much better. To display posts from a certain category you need to use the short code [catlist argument1=value1 argument2=value2].
The plugin is incredibly flexible. For example, to display 50 posts from category 1 all you need to do is add [ catlist id=1 numberposts=50 ] to your post or page. If you wanted to offset your list by 10 posts, you just need to use the offset parameter e.g. [ catlist id=1 offset=10 numberposts=50 ]. You can even list posts from 2 or more categories if you want.
The notes page for the plugin lists dozens of different parameters. You can sort posts by name, id, author, category, content, date, menu_order, mime_type, last modified date, parent id, password, status, title or type. Alternatively, you can just randomate results. All results can be sorted by ascending or descending order.
The plugin also allows you to style your lists using templates. One template is included with the plugin as an example though you can use any templates that are placed in the root folder of the theme that is being used. If you create a template called myamazinglist.php, you could use it to display your list using something like [ catlist id=1 template=myamazinglist ].
Last but not least, the plugin comes with its own widget. The widget makes it incredibly easy to list posts in your sidebar, footer or other widget area. You can choose which category to pull posts from, set the post limit and whether there is an offset number of posts, order by any parameter and exclude categories and posts from your list. You can also display thumbnails, the date, author, a link to the post category and the excerpt.
List category posts is an amazing plugin that is still updated regularly. It gives you great freedom over how your category posts are displayed and makes inserting category lists into posts, pages and widget areas a breeze.
Link: List category posts
Posts per Cat is a plugin that gives mixed results. It’s supposed to display category posts over two columns however it doesn’t do exactly what it promises. Unlike the previous two plugins, that add category posts using short codes, you need to insert the following code (outside the loop) into one of your page templates.
<?php do_action("ppc"); ?>
The plugin allows you to set which categories are featured in your boxes. You can select only top level categories and determine how categories are sorted. The category name can be linked to your archives too.
The number of headlines (posts) per category can be set and you can shorten the title of posts too to make things fit on your page more easily. Excerpts and thumbnails can also be displayed if you wish.
By default the plugin is supposed to show two columns of category posts. This doesn’t happen in practice.The default settings displays one column. The one column layout looks good though, so this isn’t a major problem for me.
At first I assumed that the columns were not displaying because my post titles were too long however even when they were shortened, only one column was displayed. Excerpts and thumbnails don’t display correctly either. When I tested it the second title was placed directly after the excerpt of the first post. Posts without excerpts display nothing rather than pulling content from the start of your post. It’s a nice addition to the plugin but it doesn’t seem to have been implemented well.
Posts per Cat has some great features like posts being displayed in columns, excerpts and thumbnails. Unfortunately, the features that set it apart from other solutions is where the plugin fails.
Link: Posts per Cat
Displaying all the posts from a category on a page or post is a useful way of helping visitors find your older content. Those of you who prefer to hard code solutions should use the query_posts() function and create a template for each category you want to list posts for. There are benefits to going down this route, particularly if you want to display information that can only be displayed within the loop.
Even though I manually coded the archive solutions for WP Mods, I do feel after trying List category posts out that it is the best solution for most WordPress users. It’s quick to install, easy to use and the dozens of parameters the plugin has allow you to display pretty much everything you would want to display using a hard coded solution. It can also use templates to display your lists. It really is a fantastic plugin and I recommend you try it out before trying a hard coded solution.
If there is any part of this tutorial that you are unsure of, please let me know and I’ll do my best to clarify my advice and help you resolve any problems you may have.