How to Create a Custom Archives Page

It’s common practice in blogging to have a page on your site that can be helpful for both search engines as well as vistors to navigate to places they want to find.

In some cases they are called sitemaps, while others folks call them archive pages. Either one can look a number of ways, depending on what you want to display. If you want to create a custom archives page, follow the steps below.

(This tutorial assumes that you are using the Genesis Framework for your site.)

Set up Your Archives Page Template

The first step is to create a page template for your child theme – you can name the file archives.php. You can name it whatever you want, but I usually tend to keep the file names short and descriptive.

You’ll want to establish that this is going to be a page template, so at the very top of your file, place the following code:

<?php
/**
 * Template Name: Archives
 */

The code above will add “Archives” to the available Template options in the Page Attributes section on the edit page screen in your WordPress dashboard.

Unhook the Genesis Standard Loop

Every page (and post for that matter) runs the Standard Loop that is built into the Genesis Framework. This includes all that you enter in your text editor and commonly output as <?php the_content()?> in traditional WordPress themes.

Since you want to customize what is shown in the content area of your site, you’ll need to unhook the Genesis Loop. Add this to your archives.php file:

remove_action( 'genesis_loop', 'genesis_do_loop' );

Write Your Custom Archives Function

The last step is to establish your custom archives function, where you’ll place the code you want inside of it. Place the following code into your archives.php file:

add_action( 'genesis_loop', 'custom_archives' );
function custom_archives() {  ?>

The code you see above names the function custom_archives and then hooks the function to the genesis_loop hook. Pretty nifty, eh?

Next you’ll want to add some code – for example, you can show an unordered list for each of blog category.

Here’s a sample of code that you can use:

<h1 class="entry-title"><?php _e('Blog Archives', 'genesis'); ?></h1>
<div class="entry-content">
    <p><?php _e('Interested in what I have to say by category?  Well you can search below...', 'genesis'); ?></p>
    <h4><?php _e('Blogging', 'genesis'); ?></h4>
        <ul>
            <?php $recent = new WP_Query("cat=1&showposts=20"); while($recent->have_posts()) : $recent->the_post();?>
            <li><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a> | <?php the_date(); ?></li>
            <?php endwhile;?>
        </ul>
</div><!-- end .entry-content -->

To make things easier to read, this is a sample one block code for one category. You’ll see that the category ID is 1, that the list will show at most 20 posts.

Close out the Function and Archives File

Lastly, you want to place the following code into your archives.php file:

<?php
}
genesis();

This closes out the php code you placed, the custom_archives function you wrote and then runs the rest of the Genesis code. While it doesn’t seem like much, this code is essential inside your archives.php file.

Sample Custom Archives Code

To provide you a full snapshot of what I’m using, I’ve placed my entire archives.php file into a zip which you can download for your personal use.

Download the Custom Archives zip file

Email Newsletter

Like what you read here in this blog post?
Get more like it delivered to your inbox daily.

Comments

    • Brian Gardner says

      Thanks Lindsey – I’m hoping to write up more of these tutorials, as I’m asked quite often how I do things on my blog.

      • Mike says

        Wait?! You’re gonna show people how to consume your product by teaching them how to use it to a higher degree???

        That’s crazy, Brian! If you start doing that, more people are going to want to buy your product and you’ll make more money and then you’ll have tax problems!

        Don’t do it man! For goodness sake, think about what you’re doing!

        What if this type of subversive activity catches on?!

        I’m begging you, my friend, reconsider before it’s too late!!!

        Sheesh! The next thing we know, you’ll be teaching people how to mod your themes out big-time and then they’ll do that too ;-)

        • Brian Gardner says

          Heh, thanks for the laugh Mike… quite often I take for granted how easy it is for me to work my way through Genesis and make it do what I want. I’d like to do what I can to make that easier for other folks.

  1. says

    Hey Brian
    I actually understood that. LOL

    Appreciate the statement “In some cases they are called sitemaps, while others folks call them archive pages.” I didn’t realise that the two were the same.

    Looking forward to a few more easy tuts.

    • Brian Gardner says

      It’s funny, because they can be the same, or different. Either way, it’s a matter of how you want to display your site architecture for a) your visitors and b) search engines.

  2. says

    While I continue to be amazed at what you can do with Genesis+Child Theme in a fairly “stock” configuration, it is inevitable that you will want to proceed to more customizations as you continue to refine that site. The “you must be this tall to get on the ride” gatefor entry has previously been fairly high because the coding aspect can be fairly intimidating for a beginner/ advanced beginner and the tutorials themselves assume a fair amount of knowledge.
    Great job lowering the height of the “gate”. Makes me want to go try this! Any resource like this will much appreciated by your user base!

    • says

      You’re welcome Darryl – I find that I have so many instances of code snippets, custom files, etc that I’ve written over the past couple of years that it only makes sense to post them here for others to benefit.

  3. Alin Tiniuc says

    This code worked great. However I am having an issue with the sidebar being display underneath the full page template. I’ve tried everything to get rid of the sidebar but the php somehow keeps pulling it up.

    Is there a code I can add to get rid of the sidebar.

    Here is the website to see what I am talking about.
    http://www.biodynamichealing.com/article-archive/

  4. Alin Tiniuc says

    Any more thoughts on my issue with the sidebar showing up even on a full page template. I responded that I am using the official genesis customer sidebar generator plugin.

  5. says

    Hi Brian,
    In my previous post I asked about my problem with the Archives. Here is the update. My first mistake: I put it in my local folder. Once I realized I uploaded it to WP. Now I see it in the Editor. Next thing I realized is that it is a ‘template’ and not a widget. So, I created a page and used the template ‘archives’. Now I think I figured it out and need to do further configuration. Just wanted to let you know – I am still figuring it out Archives page file….. ;-)
    Thanks,
    Spencer

    • says

      HI Brian,
      It is done… I figured it out and now I have a Archive page, which I will add to the submenu. Thank you. You can now delete all my comments since I figured it out.

  6. Kevin Wood says

    Hey Brian,

    I love this post, definitely putting it to use. Got a question for you though. How can I edit the code to make it so the archive page can posts a thumbnail and a post excerpt as well?

  7. Sven says

    This is great coding. I like it… because I need it I guess, :)
    Because I didn’t know how to work this, I used joomla for bigger sites, to hide and show pages and stuff as I liked.
    This in combination with custom menus give a lot of possibilities.

    Bless ya.
    Hope to find out more on how to “manipulate” this coding on showing the catogery hierarchy and stuff.

  8. Martin says

    hi Brian.
    If i want to show list post (1 to 10) then i want list other (20-40) from category ID=1 which code will help me do that?

  9. says

    Hey Brian,

    First of all, thank you! I was finally able to get my custom template to show up using your method, modified a little bit. The problem I am having now is that the “content” is showing up before the menu instead of in the middle of the page or “blog” section. I am using the eleven40 theme, so I am just looking for the code to display the content AFTER the menu and such.. Do you know by chance what that would be?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>