View Demo

Step 1) Building the Dropdowns

The dropdowns are pretty easy to create. Here I’ll make a div wrapper for both of them, then include a dropdown for month/year, and for category:

<div id="archive-browser">
	<div>
		<h4>Month</h4>
		<select id="month-choice">
			<option val="no-choice"> &mdash; </option>
			<?php wp_get_archives(array(
			
				'type'    => 'monthly',
				'format'  => 'option'
			
			)); ?>
		</select>
	</div>
	<div>
		<h4>Category</h4>
		<?php 

			wp_dropdown_categories('show_option_none= -- ');
					
		?> 
	</div>
</div>

Note that the WordPress functions for the two dropdowns are a bit different. wp_get_archives requires you to bring your own select wrapper, which wp_dropdown_categories does not. For the former, you’ll also need to include your own “no-choice” option. I’m sure the WordPress gang has their reasons for this kind of thing, but I’d prefer to see it standardized over time.

Step 2) Let’s get ourselves a getter.php

We’re going to be dynamically grabbing our archives and plunking them on the screen. That means JavaScript, and as usual with me, that means jQuery. But jQuery can’t do a WordPress query all by itself. JavaScript is a client-side technology and database stuff is a server-side activity. So we’re going to need an intermediary. A URL that our JavaScript can call to return to us exactly what we need. That’s what I’m calling a getter.php file.

Since we’re working with WordPress here, a great way to do this is to create a template of what we need, then publish a page using that template. That gives us a nice URL we can hit. So in our active theme, I have greated a file called “archive-getter.php”, and this is that code:

<?php

    /*
        Template Name: Archives Getter
    */
    
    $year = htmlspecialchars(trim($_POST['digwp_y']));
    $month = htmlspecialchars(trim($_POST['digwp_m']));
    $cat = htmlspecialchars(trim($_POST['digwp_c']));
    
    $querystring = "year=$year&monthnum=$month&cat=$cat&posts_per_page=-1";
    
    query_posts($querystring); 
    
?>

<?php if (($year == '') && ($month == '') && ($cat == '-1')) { ?>

	<table id="archives-table"><tr><td style='text-align: center; font-size: 15px; padding: 5px;'>Please choose from above.</td></tr></table>
	
<?php } else { ?>

	<table id="archives-table">
	    <?php    
	        if (have_posts()) : while (have_posts()) : the_post(); ?>
	            <tr>
	            	<td><img src="<?php echo get_post_meta($post->ID, 'PostThumb', true); ?>" alt="" style="width: 35px;" /></td>
	            	<td><a href='<?php the_permalink(); ?>'><?php the_title(); ?></a></td>
	            	<td><?php comments_popup_link(' ', '1 Comment', '% Comments'); ?></td>
	            	<td><?php the_date('m/j/Y'); ?></td>
	            </tr>
	    <?php 
	        endwhile; else:
	        
	        	echo "<tr><td style='text-align: center; font-size: 15px; padding: 5px;'>Nothing found.</td></tr>";
	        
	        endif; 
	    ?>
	</table>

<?php } ?>

Let’s go through it top to bottom:

1. Special comment to tell WordPress this is an Template file
2. Set variables from three POST parameters. Clean them up in the process
3. Create a $query string in the format WordPress likes them in
4. Run a query_posts from that query string
5. If none of the variables are set, return a message telling the user to please select values.
6. If at least one variable is set…
7. Run “The Loop”
8. Output a table of the results, containing the post image, content, date, comments, etc.
9. If nothing is found, tell the user so

Step 3) Watching for Dropdown Menu Changes

We’re going to be using jQuery, so make sure jQuery is loaded in your theme. Then we’ll need a JavaScript file from which to work. So I’ve created a file called archives.js in the js folder of my theme. I similarly made a CSS file for styling this, and then conditionally load both of them in the header.php file:

<?php if (is_page_template("archives.php")) { ?>
   <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/archives.css" type="text/css" />
   <script src="<?php bloginfo('template_url'); ?>/js/archives.js" type="text/javascript"></script>
<?php } ?>

Now that we have a working JavaScript enviornment, we can watch those select dropdown menus we built for changes:

jQuery(function() {
  jQuery("#archive-browser select").change(function() {
     // dynamically load the archives
  });
});

Step 4) Dynamically Load New Archives

Using the great base we already have going here, let’s write out all the code we need to dynamically load in those archives. One thing we haven’t covered yet is, where on the page do we load in these said archives? We’ll need a target. We could append it with JavaScript, but what they hey, I just stuck it into the template itself instead:

The #archive-pot is where we’ll load in new markup as we get it. The wrapper is there because that way we can dynamically adjust the height and do it really nice and smoothly.

Now here’s the complete JavaScript:

jQuery(function() {

	jQuery("#archive-wrapper").height(jQuery("#archive-pot").height());

	jQuery("#archive-browser select").change(function() {
	
		jQuery("#archive-pot")
			.empty()
			.html("<div style='text-align: center; padding: 30px;'><img src='/wp-content/themes/DiggingIntoWordPress-2/images/ajax-loader.gif' /></div>");
	
		var dateArray = jQuery("#month-choice").val().split("/");
		var y = dateArray[3];
		var m = dateArray[4];
		var c = jQuery("#cat").val();
		
		jQuery.ajax({
		
			url: "/archives-getter/",
			dataType: "html",
			type: "POST",
			data: ({
				"digwp_y": y,
				"digwp_m" : m,
				"digwp_c" : c
			}),
			success: function(data) {
				jQuery("#archive-pot").html(data);
				
				jQuery("#archive-wrapper").animate({
					height: jQuery("#archives-table tr").length * 50
				});
			
			}
			
		});
			
	});

});

1. Set height of wrapper to height of inside. Seems weird, but now that the wrapper has a static height and hidden overflow, it won’t blast open when new content is added, we can animate it’s heigh accordingly.
2. Watch for dropdown changes
3. When a change happens, empty out the current showing archives and add an Ajax spinner graphic
4. Figure out the year and date that we need by tinkering with the default WordPress values in the <option>
5. Grab the selected category
6. Launch an Ajax request to our getter file, POSTING the values we just collected
7. Upon success, drop the markup into the #archive-pot
8. Animate the wrapper to the new height needed

Little Important Note

Notice how the data that we POST is prefixed with “digwp_”? I had a little brainbender on this, while I was trying to POST data as like “m” and “month” and things like that. Apparently WordPress doesn’t like that. It can 404 an otherwise perfectly good URL for you when you pass it parameters (GET or POST) in that format. Check it out. So anyway, using your own prefixed parameters will save you that headache.

Taking it further

This is by no means limited to what we have done here. All were are doing it passing a getter file parameters that we want built into a query string. We could make checkboxes so you could pick multiple categories. We could include authors. We could include tags. The sky is the limit really.

Demo

I just did it right on this site, so you can see our own archives.

© 2010 Digging into WordPress | Permalink | 23 comments | Add to del.icio.us | Post tags: archives, dropdown

1. Create a page template, publish a page

We need a totally unique page template to work with. So create a new one. You know, just make a file like grid-archives.php in your theme and put this PHP comment at the top and then WordPress will recognize it. Then create a new page, pick this template, and publish it. The name and content absolutely don’t matter, just put something there so you can recognize/find it later.

<?php
/*
Template Name: Thumb Archives - Grid
*/
?>

2. Loop it

This is pretty much the entire page. We’ll link out to an external stylesheet for styling. Then we run a Loop for 25 posts (in our demo, we also remove our link style posts). Each post is an anchor tag, and within, the post title, the post image thumbnail, and the excerpt.

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>Grid Archives | Digging Into WordPress</title>
	<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo("template_url"); ?>/css/gridarchives.css" />
</head>

<body>
	<div id="page-wrap">
		<?php query_posts('posts_per_page=25&cat=-52'); ?>
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			<a href="<?php the_permalink(); ?>" class="box col<?php echo rand(2,4); ?>">
				<span class="title"><?php the_title(); ?></span>
				<img src="<?php echo get_post_meta($post->ID, 'PostThumb', true); ?>" alt="" />
				<span class="ex"><?php the_excerpt(); ?></span>
			</a>
		<?php endwhile; endif; ?>
	</div>
</body>
	
</html>

3. Masonize

Notice in the HTML above we echo’d out a random number between 2 and 4 as part of a class name. The results classes will be: col-2, col-3, and col-4. These represent columns. So each link box is “randomized” based on this class name. Some post link boxes are 2 columns wide, others 3, others 4. Font sizing and thumbnail sizing also adjusts accordingly.

.box { margin: 10px; float: left; }
.box:hover { outline: 2px solid white; }
.box:hover .title { background: none; }
.box:hover .ex { background: none; color: white; }
.box:hover img { opacity: 0.4; }

.col2 { width: 180px; }
.col3 { width: 280px; }
.col4 { width: 380px; }

.col2 img { max-width: 80px; float: right; margin: 0 0 2px 10px; }
.col3 img { max-width: 100px; float: left; margin: 0 10px 2px 0; }
.col4 img { max-width: 120px; float: right; margin: 0 0 2px 10px; }

.title { background: #237abe; color: white; display: block; padding: 10px; overflow: hidden; }
.col2 .title { font-size: 16px; }
.col3 .title { font-size: 18px; }
.col4 .title { font-size: 20px; }

.ex { background: white; color: #222; display: block; padding: 10px; }
.col2 .ex { font-size: 11px; }
.col3 .ex { font-size: 12px; }
.col4 .ex { font-size: 13px; }

So each of those post link boxes is just floated to the left. That’s going to make a pretty ragged and nasty layout all by itself, because each box will be a different height depending on the length of the title and excerpt. No problem though, we’re going to rearrange the boxes using the jQuery Masonry plugin by David DeSandro. We’ll just call jQuery, the plugin, and the write a quick script to call it. This can go pretty much anywhere on the page. Typically jQuery is run on DOM ready, but in this case we are waiting for the window’s load event, because we want to wait for the thumbnails to load before masonizing.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script src='<?php bloginfo("template_url"); ?>/js/jquery.masonry.min.js'></script>
<script>
 $(window).load(function() {
   $("#page-wrap").masonry({
      columnWidth: 100, 
      animate: true, 
      animationOptions: {
          duration: 300,
          queue: false
      }
  });
 });
</script>

Enjoy!

Here is ours. Let us know if you play with this on your own site at all.

© 2010 Digging into WordPress | Permalink | 17 comments | Add to del.icio.us | Post tags: archives, grid, jquery

The biggest reason we decided to attach post thumbnails from the beginning was that it is just an interesting bit of data to have available for every single post. It means that we could do something like display random thumbnails in the sidebar, or display thumbnails next to search results. We don’t do either of those things in this current design, but it’s always a possibility and possibilities are awesome.

Another thing that is a cool thing to build with thumbnails is unique archive views. I’ve built one for us here on Digging Into WordPress and I have some ideas for several more. Check it out:

Read on for the “how”…

1. Created a special page template

This page will be totally unique, no standard header or footer, so I made a template just for it.

<?php
/*
  Template Name: Thumb Archives - Horz
*/
?>

2. Creating a horizontal row of thumbs

One of the best ways to create long horizontal row (that breaks the width of the browser window width) is to use a table with a single row of cells. This way we don’t have to manually set the width of anything, and also don’t have to worry about things wrapping as we would if the thumbnails were inline elements or floated.

So we’ll set up a loop querying for every single post on the site (that isn’t a link-post) and spit out a table cell for each. Within that table cell, there will be an anchor link pointing to the post which contains a title, the image, and an excerpt.

<table id="archives-table">
	<tr>
		<?php query_posts('posts_per_page=-1&cat=-52'); ?>
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<td>
			<a href="<?php the_permalink(); ?>" class="article-block">
				<span class="title"><?php the_title(); ?></span>
				<img src="<?php echo get_post_meta($post->ID, 'PostThumb', true); ?>" alt="" />
				<span class="ex"><?php the_excerpt(); ?></span>
			</a>
		</td>
		<?php endwhile; endif; ?>
	</tr>
</table>

3. Dependencies

We’re going to need a unique CSS file to use for this. Since this template is completely one-off and we aren’t using the standard header, the <head> element will be right in this template. We’ll link out to our own custom CSS file, load in jQuery, and load in some plugins that will facilitate the idea I’m trying to accomplish (hoverflow and mousewheel), as well as finally our own custom JavaScript file.

<head>
  <meta charset="UTF-8" />
  <title>Thumbnail Archives | Digging Into WordPress</title>
  <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo("template_url"); ?>/css/archives-horz.css" />
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
  <script src='<?php bloginfo("template_url"); ?>/js/jquery.hoverflow.min.js'></script>
  <script src='<?php bloginfo("template_url"); ?>/js/jquery.mousewheel.min.js'></script>
  <script src='<?php bloginfo("template_url"); ?>/js/weirdarchives.js'></script>
</head>

If this page was anything more than a one-off page, we should be enqueuing scripts and providing proper hooks in the header and such. I’ve specifically not done that here because this page is it’s own unique thing that I don’t want anything else intruding upon.

4. Style

The styling for page is very simple, just a repeating background image and resets. Notice on the page though that the titles and excerpts are hidden until the mouse hovers over the thumbnails. We’ll do the “hiding” by setting the opacity of the thumbnails down to zero in the CSS. We’ll also position them inset into the thumbnail a bit so they have a bit more dramatic “reveal” upon mouse hover, as they slide out and into place.

.title { bottom: 50%; }
.ex { top: 50%; font: 11px Georgia, Serif; color: #555; }
.title, .ex { background: white; width: 130px; padding: 10px; display: block; overflow: hidden; position: absolute; opacity: 0; }

5. Horizontal scrolling

With the mousewheel plugin in place, we can force the window to scroll horizontally instead of vertically with mouse scrollwheels with this:

$("body").mousewheel(function(event, delta) {
    this.scrollLeft -= (delta * 30);
    event.preventDefault();
});

6. Animation

When a thumbnail is hovered over, the title and except will show themselves and slide down. To do that, I’m using jQuery’s hover function which accepts a function to run on mouseenter and a function to run on mouseleave. For the former, an animation begins which moves the position, height, and opacity. The latter, those values are returned to how they started.

$blocks.hover(function(e) {
    var $el    = $(this),
        $title = $el.find(".title"),
        $ex    = $el.find(".ex");
    
    $title.hoverFlow(e.type, { bottom: "99%", opacity: 1, height: $title.data("origHeight") })
    $ex.hoverFlow(e.type, { top: "95.5%", opacity: 1, height: $ex.data("origHeight") });
    
}, function(e) {
    $(this)
        .find(".title").hoverFlow(e.type, { bottom: "50%", opacity: 0, height: 0 })
        .end()
        .find(".ex").hoverFlow(e.type, { top: "50%", opacity: 0, height: 0 });
});

There is a bit more to the JavaScript (but not much), feel free to poke your way around to it from the demo page to see it all.

7. More

The point of all this was to create a unique archive browsing experience based around our thumbnails. This isn’t the only way to do it. In fact I have a few other ideas I’m going to work on in time. Are they super practical? Maybe not, but they are fun!

© 2010 Digging into WordPress | Permalink | 15 comments | Add to del.icio.us | Post tags: archives, loop