the graphic design blog that speaks the truth

This post will describe the easy method of nesting your wordpress archives in a dropdown list using jQuery and some simple CSS.

The default function

The default options that WordPress offers in displaying your blogs archives are rather rigid, in that you can only display them in one way. Using the wordpress wp_get_archives function we can set the following options:

<?php wp_get_archives('type=daily'); ?>

To display a list of archives grouped by date.

<?php wp_get_archives('type=weekly'); ?>

To display a list of archives grouped by week.

<?php wp_get_archives('type=monthly'); ?>

To display a list of archives grouped by month.

<?php wp_get_archives('type=yearly'); ?>

To display a list of archives grouped by year.

All are very handy functions to use. Depending on the amount of blog posts you have, you use the necessary function. I.e, if you had 2000 posts on your blog, you are unlikely to choose the daily option as it would take up a huge amount of space on your site. This is not a foolproof solution though. What if you wanted to display a list of archives grouped by year, and then display the corresponding months in a handy dropdown menu?

Extending the function

The following simple code snippet will set up an archive list grouped by year, and place any child months of each year in a sub menu:

<div class="blog-list-archive">

<?php
/**/
$years = $wpdb->get_col("SELECT DISTINCT YEAR(post_date)
FROM $wpdb->posts WHERE post_status = 'publish'
AND post_type = 'post' ORDER BY post_date DESC");
foreach($years as $year) :
?>
<li><a href="JavaScript:void()"><?php echo $year; ?></a>

    <ul class="archive-sub-menu">
        <?    $months = $wpdb->get_col("SELECT DISTINCT MONTH(post_date)
        FROM $wpdb->posts WHERE post_status = 'publish' AND post_type = 'post'
        AND YEAR(post_date) = '".$year."' ORDER BY post_date DESC");
        foreach($months as $month) :
        ?>
            <li><a href="<?php echo get_month_link($year, $month); ?>">

                <?php echo date( 'F', mktime(0, 0, 0, $month) );?></a>

            </li>

        <?php endforeach;?>

    </ul>

</li>

<?php endforeach; ?>

</div>

As you can see, the code does exactly what you would expect. It selects a yearly archive from your WordPress database, and then selects the child months of said year and places them in a sub menu named ‘archive-sub-menu’, looping through for every year your blog archive contains. Don’t worry about the div named ‘blog-list-archive’, this is simply added so we can reference a container in the jQuery code later on. We now have a unordered list of archives (both yearly and monthly) that we can turn into a dropdown list.

Creating the dropdown

Firstly, we need to hide the sub menus, so that they only display when the yearly titles are clicked.

.archive-sub-menu {

display:none;

}

achieves this. Next, we simply add a very simple snippet of jQuery code that will display each years corresponding monthly drop-down archive when clicked.

<script type="text/javascript">

$(document).ready(function() {

    $('.blog-list-archive li ul').hide();
    $('.blog-list-archive li a').click(function(){
        $(this).parent().addClass('selected');
        $(this).parent().children('ul').slideDown(250);
        $(this).parent().siblings().children('ul').slideUp(250);
        $(this).parent().siblings().removeClass('selected');
    });
});

</script>

NOTE: The lines ‘$(this).parent().addClass(‘selected’);’ and ‘$(this).parent().siblings().removeClass(‘selected’);’ simply enable you to style the title of the currently selected archive.

That’s all there is to it! Please feel free to download the full code.