I had set up an Archive page on my personal blog a while ago for folks to Explore the site with. My original intent was to give users a variety of ways, in one place, to locate content which might interest them. My secondary goal was to cut down on widgets in my sidebar. I wanted to put up some cool widgets, but also wanted to list categories, archives by date, etc. Having that all in the sidebar takes a lot of space. I thought an archive page was great way to cut down on sidebar clutter. Here’s my thought process, and some cool tips!
First thing is first, come up with a plan! What do you want to put on the page? How should people be able to find content? What should the page look like? I wanted Date based archives, I wanted popularity to be highlighted, and I wanted three columns! Later on, I added in the requirement that I should be easily able to recreate the archive page after a theme switch.
So first up comes the functional planning. How to get these archives I want. The first obvious choice is using wp_get_archives. This tag is great for getting ourselves a date based listing, so I can guide users by day, week, month, year, etc. Personally, I want to give users monthly posts for the past year, and then yearly beyond that. No particular reason, it just made sense to me! So it looks like this:
<div id="col1">
<h6><?php _e( 'Archives for the last Year', 'voodoo_lion' ); ?></h6>
<ul>
<?php wp_get_archives('type=monthly&limit=12&show_post_count=1'); ?>
</ul>
<br class="clear" />
<h6><?php _e( 'Archives from Beyond', 'voodoo_lion' ); ?></h6>
<ul>
<?php wp_get_archives('type=yearly&show_post_count=1'); ?>
</ul>
</div>
You can check out all the variables on the wp_get_archives page, but basically I call up the type of listing I want (yearly, monthly), establish my parameter if necessary (limit=12 for 12 months), and with show_post_count I can show how many posts exist in each of those listings. So with that bit of code, we have links to monthly and yearly archives. We could go crazy if we wanted here, but that did what I needed.
Up next are some taxonomy listings. Now that I moved my shop away from my personal site, I only use the standard categories and tags here. You could take the opportunity to do various listings here with your categories and tags and custom taxonomies. I just want to list my categories, and my most used tags. Categories is super simple, we have wp_list_categories for that purpose:
<h6><?php _e( 'Archives by Category', 'voodoo_lion' ); ?></h6>
<ul>
<?php wp_list_categories('title_li=&show_count=1'); ?>
</ul>
Again, you can set a variety of variables here. I kept mine simple. I didn’t want a title output, and I did want the number of posts per category displayed. This just gets me a list of all categories that have posts, nothing too crazy or fancy. Next we want popular tags. There are a couple of ways you can approach this, here’s what I went with:
<h6><?php _e( 'Popular Tags', 'voodoo_lion' ); ?></h6>
<ul>
<?php
$tags = get_tags();
foreach ($tags as $tag){
if ($tag->count < 21) continue;
$tag_link = get_tag_link($tag->term_id);
$html .= "<li><a href='{$tag_link}/' title='{$tag->name} Tag' >{$tag->name}</a>($tag->count)</li>";
}
echo $html;
?>
</ul>
This will loop through and link to an archive page for each tag, listing any tag that I’ve used more than 20 times. You’ll see we make use of get_tag and get_tag_link here to loop through all our tags, see how much it’s used, then output the tag with a link to its archive page.
That’s a good start, this has gotten me a few ways to find posts, and also gotten rid of the need for several widgets in my sidebar. But I want more! For the last 2 sections on my Explore page, I needed plugins. You can cruise around the plugin repo and find plugins that offer a variety of ways to gather your posts. Many of these have tags you can use directly to output various info. The 2 that had what I wanted were WordPress.com Popular Posts and Most Commented Widget. These got me the functionality I was looking for. You may find others that suit your needs better. The premis is the same.
<div id="col3">
<?php
if( function_exists('WPPP_show_popular_posts') )
WPPP_show_popular_posts( "magic_number=10&title=<h6>Posts by Popularity</h6>&number=10&format=<a href='%post_permalink%' title='%post_title_attribute%'>%post_title% (%post_views% views)</a>" );
?>
<br class="clear" />
<?php if( function_exists('mdv_most_commented') ) : ?>
<h6><?php _e( 'Most Commented Posts', 'voodoo_lion' ); ?></h6>
<ul>
<?php mdv_most_commented(10); ?>
</ul>
<?php endif; ?>
</div>
<div class="clear"></div>
For each plugin, determine the appropriate code to call your desired info. I have mine above for you to see. The important concept to take away here is to wrap the code in a function_exists call. This is important when calling directly to plugin features. This way, if the plugin gets deactivated, your site doesn’t blow up. It’s always important to make sure the function is there before we call to it! So this adds an ability to display my most popular posts by views, and by comments.
For my purposes, I’m done. You can add all sorts of features you feel are necessary. Just think about what will add the most value for your users, and help them find your content. Now comes my styling. I need 3 columns! The stuff we added above can be kept in fairly narrow columns, why not maximize the real estate! I made 3 divs, wrapped the sections in those divs, and floated them. You could just add the css to your style.css:
#col1, #col2, #col3 {
float: left;
}
#col1, #col2 {
width: 25%;
}
#col3 {
width: 50%;
}
Like that, the first 2 columns are narrow, and the 3rd is wider, so I set the widths and float them all! You can see it in action on my archive page. But, I don’t put my style into my stylesheet, here’s why – let’s expand on what we just did a bit. I need my archive page to be a bit modular. I include it on many sites first off. And I keep changing themes on my personal site. So I just keep my archive page in my functionality plugin. This is a bit of a personal choice here – this is definitely a theme feature. As such, it would normally be kept in the theme. But, it was just easier for me to have in a plugin. So that is why I do it this way. Here’s my full code, then I’ll show how I do the css:
// ARCHIVE PAGE CONTENT
function voodoo_archive() { ?>
<div id="col1">
<h6><?php _e( 'Archives for the last Year', 'voodoo_lion' ); ?></h6>
<ul>
<?php wp_get_archives('type=monthly&limit=12&show_post_count=1'); ?>
</ul>
<br class="clear" />
<h6><?php _e( 'Archives from Beyond', 'voodoo_lion' ); ?></h6>
<ul>
<?php wp_get_archives('type=yearly&show_post_count=1'); ?>
</ul>
</div>
<div id="col2">
<h6><?php _e( 'Archives by Category', 'voodoo_lion' ); ?></h6>
<ul>
<?php wp_list_categories('title_li=&show_count=1'); ?>
</ul>
<br class="clear" />
<h6><?php _e( 'Popular Tags', 'voodoo_lion' ); ?></h6>
<ul>
<?php
$tags = get_tags();
foreach ($tags as $tag){
if ($tag->count < 21) continue;
$tag_link = get_tag_link($tag->term_id);
$html .= "<li><a href='{$tag_link}/' title='{$tag->name} Tag' >{$tag->name}</a>($tag->count)</li>";
}
echo $html;
?>
</ul>
</div>
<div id="col3">
<?php
if( function_exists('WPPP_show_popular_posts') )
WPPP_show_popular_posts( "magic_number=10&title=<h6>Posts by Popularity</h6>&number=10&format=<a href='%post_permalink%' title='%post_title_attribute%'>%post_title% (%post_views% views)</a>" );
?>
<br class="clear" />
<?php if( function_exists('mdv_most_commented') ) : ?>
<h6><?php _e( 'Most Commented Posts', 'voodoo_lion' ); ?></h6>
<ul>
<?php mdv_most_commented(10); ?>
</ul>
<?php endif; ?>
</div>
<div class="clear"></div>
<?php }
There is my full code in my functionality plugin. It would also work in functions.php, but that wouldn’t make any sense. If you are editing the theme anyway, you might as well just make this a template! With the above in place I can now simply call my archive in a template. I normally make a page template with no sidebar, and directly under the call to the_content I can call voodoo_archive. An even easier method would probably be to turn this into a shortcode, which I may do and revisit this article, then no template edits would be necessary.
So if the above is done within the plugin, it wouldn’t make sense to have to add in the css to style.css each time this is used. That’s why I include a stylesheet within my functionality plugin. I simply make a file in the plugin named voodoo.css and load it up!
// SET OUR PLUGIN CONSTANTS
define( 'RV_URL', plugin_dir_url(__FILE__) );
define( 'RV_PATH', plugin_dir_path(__FILE__) );
// LOAD UP OUR PLUGIN STYLES
// LOAD IN OUR WIDGET STYLES
function voodoo_style() {
$rvStyleUrl = RV_URL . 'voodoo.css';
$rvStyleFile = RV_PATH . 'voodoo.css';
if ( file_exists($rvStyleFile) ) {
wp_register_style('VoodooStyle', $rvStyleUrl);
wp_enqueue_style( 'VoodooStyle');
}
}
add_action('wp_print_styles', 'voodoo_style');
The majority of this was just the way I happened to set things up. I define some constants within my plugin, to point to the plugin path and link. Mostly to make coding everything simple. What I really wanted to show here was to register and enqueue your stylesheet within the plugin to be able to include your css.
So there we have a bit of a mishmash of tips. I showed my thought process in making my archive page. This wasn’t intended to be a step by step, just a collection of tips and techniques if you are considering doing something similar.
Do you have any sort of archive or explore page? How do you set it up, and what content do you guide readers towards?
