Create a Custom Category Page

WordPress is a powerful tool to build a website. It makes it very easy for website owners to create the perfect page template for different sections of our site.

We can easily create a landing page that looks completely different than the rest of our site and manage it within WordPress. In today’s post I’m going to show you how to create a custom page template for a certain category of posts.

Tools Needed:

• FTP Client with your account credentials
• An idea of what you want your custom page to look like
• HTML knowledge
• (Optional) PHP Programming

While you don’t necessarily need to know extensive amounts HTML / PHP, knowing a little bit of PHP will make this much easier.

Make sure you make a backup of your site before you start making modifications.

In this example, we are going to create a custom page to display all of my podcast episodes.

Now by default, WordPress has the ability to show all of your posts in certain categories by going to:

yourwebsite.com/category/CATEGORY_NAME

And you can control this by modifying your archive page template.

But, what if you are looking to have your podcast (or other category) archive look different than the rest of your archive section.

For example, my podcast archive can be found at: http://yourwebsiteengineer.com/podcast-archive/ and I have specific items that show up on this page.

I have a header that let’s people know they can subscribe to my podcast through different methods. Each episode includes the name, the featured image, a player and when the podcast was published. Plus I’m displaying my most recent 20 posts insead of the standard 10.

Let’s take a look at how I did this.

#1 Make a copy of archive.php

Step one is to make a copy of archive.php. Take the copy of this file and rename it to archive-CATEGORY_NAME.php So for my example, it’s archive-podcast.php.

#2 Tell WordPress this is a template

Open up this new file in your favorite code editor and add this line of code to the very top:

<?php /* Template Name: Podcast Archive */ ?>

This will tell WordPress that this is a new template file and you will be able to select this page template for a WordPress page. You can substitute ‘Podcast’ for the name of your category.

Save this page and upload it to your server. It will go in the wp-content/themes/YOUR_THEME folder

#3 Create a new WordPress page

Next go into your WordPress dashboard and create a new page. You can name it whatever you like. Mine is called Podcast Archive.

Under the publish button, look for “Podcast Archive” template. Select that template and save the page. Now open up this page in a new browser window and take a look. You probably won’t see any differences because we haven’t made any yet.

#4 Modify Our New Template

Now come the time when you can become creative. You can dream up exactly what you want your archive page to look like.

a. Add Content Above the Posts

Sometimes you want to create static content on a page that never changes. In your template file, look for code that looks like:

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

Anything you want to display at the top needs to go before this code. Without getting into too many details, this is the WordPress loop and that’s how your posts and pages display properly.

b. Query the Correct Category

Next we want to make sure that we are only going to pull the correct category of posts from the database. This can be done by adding this code right above the WordPress loop.

<?php 
$args = array( 'post_type' =>   'post',                        
               'category_name' =>    'podcast',                    
               'posts_per_page' =>  20, 
               'paged' =>  $paged   );
query_posts( $args );
?>

The category_name will pull only the podcast tagged posts and the posts_per_page will display 20 posts per page.

Tweak the Current Code

This part is the hardest part to explain as everyone’s original archive.php page is different.

After the start of the loop and before the endwhile; statement, you can tweak / change / add whatever you like and that content will be displayed for each of the posts within WordPress.

Here are some key WordPress php commands that will help you display different items for each post:

the_titel();                =>  Displays the title of the post
the_permalink();            =>  The link to the specific post
the_excerpt();              =>  Displays the excerpt of the post
the_content();              =>  Displays the full text of the post
the_category();             =>  Displays the category
comments_number();          =>  Displays the number of comments
the_powerpress_content();   =>  Displays the player for my audio files

Here’s the code that I’m currently using on Podcast Archive

<?php $args = array( 'post_type' => 'post', 'cat' => '29', 'posts_per_page' =>  20, 'paged' =>  $paged   );
    query_posts( $args );
    if (have_posts()) : 
    while (have_posts()) : the_post(); ?>
<div class="featuredImg" style="margin-bottom:10px;">
    <a href="<?php echo get_permalink(); ?>" class="img">
    <?php echo $postImg['full']; ?></a>
</div>
<span style="font-size:18px; color:#000">
<a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></span>
<?php the_powerpress_content(); ?>
<div class="clear"></div>
<div class="blogDate">
    <span class="blogDate">Published on: '. get_the_time('d') .' 
    '. get_the_time('M') .'</span>';
    <?php echo ' | ';  the_category(', '); echo ' | ';  
    comments_number( 'no responses', 'one response', '% responses' ); ?>
</div>
<div class="clear"></div>
<?php endwhile; ?>

Save Your Code

Every time you make a change to your code, make sure you save it and upload it back to your server. Then you should be able to refresh your site and see the changes you have made.

Keep modifying and saving until you are happy with the way it looks.

Show off Your Page

Now that the hardwork’s done, you need to show off this page to the world. Create a new menu item or link to this page on twitter and direct people to your new page.

Call To Action

Do you have a custom page for a category archive? If so, post it below in the chat.