Wordpress - How To Modify The Loop in archives.php To Have 11 Posts Per Page and CSS Styling

First, for layout and CSS styling, I would recommend creating template files for the contexts you want to customize; i.e. create a category.php and a tag.php for the category and tag index archive pages, respectively. In either case, copy archive.php (or, if it doesn't exist, copy index.php), and rename the copy as category.php. Then, modify the markup as necessary.

For CSS, ensure that you're using body_class() in your Theme, and then you can use the *category and tag-based CSS classes applied to the <body> tag.

The next step is customizing the query to output 10 posts per page, instead of 10, for category/tag archive index pages. For that, use the pre_get_posts filter. Add the following callback and add_filter() call to functions.php:

function wpse63424_filter_pre_get_posts( $query ) {
    if ( ! is_main_query() ) {
        return $query;
    } else {
        if ( is_category() || is_tag() ) {
            $query->set( 'posts_per_page',11 );
        }
        return $query;
    }
}
add_filter( 'pre_get_posts', 'wpse63424_filter_pre_get_posts' );

This callback tells WordPress:

  1. If the query isn't the main query, then return it without modifying it. (This prevents, e.g., Recent Posts widget query, or navigation menus from being impacted.)
  2. If the current page is either a category archive index or a tag archive index, change the 'posts_per_page' query variable to 11, then return the query.

Tags:

Categories

Archives

Query Posts

Recent Posts