Digging into WordPress » Design

Don’t fork your theme, flex it with “is_plugin_active” conditional

Peter Shackelford — Wed, 04 Apr 2012 17:49:08 +0000

Donkey Work

Donkey work is really the last thing I want to be doing. Piddly tasks that could have been avoided with a little thought and perspective. Below I explain how I worked my way away from becoming a donkey with a dozen child themes to manage and maintain, with just a little knowledge of a native wordpress function.

The details.

I am running a multisite that predominately uses a single child theme. Each site has it’s separate color scheme applied through a few lines of css. Where sites need unique functionality, functionality plugins are used. These contain custom post types, rss redirects, custom thumbnail sizes etc… This has worked really well for keeping our theme’s function.php file slim while giving us all the functionality we need, where we need it.

Each site uses a single identical footer, which is built into the theme. At the time, we did this knowing that we would be creating department sites as subdirectories. Content between the utility navigation and the footer was to be their turf but the utility nab and footer content are locked down. We built our universal footer using switch_to_blog function and a custom menu.

 'div',
			'menu'         => 'Footer',
			'container_id' => 'footer-links',
			'menu_class'   => 'menu', 
			'echo'         => true,
			'fallback_cb'  => 'wp_page_menu',
			'depth'        => 0
		);
		wp_nav_menu($args);
		restore_current_blog(); ?>

The above code registers a new menu area called Footer. To take advantage of this I need to create a menu in the wordpress menu area with that exact name. The bit of JQuery turns off the link in the first level of menu items. This with a little css is used to create the menu headers. Great! One identical footer that is used on every site that uses this child theme.

The Dilemma

Recently we offered to host/manage websites for regional offices in our organization. They would benefit from our existing infrastructure and consistent branding but all of the content and navigation would be their own. They would not need our built in footer, at least not as it is on all the other sites.

I considered having a separate theme that was modified just for regional offices, I also considered building a plugin that disabled and replaced the footer on the existing theme. The first option would not be sustainable in the long run, the second very complicated at the outset. To be honest I very much doubt I could have pulled it off. My solution was to take advantage of the fact that I had already created a functionality plugin that would be used on every regional site. Using the is_plugin_active conditional I was able to alter the theme to not switch_to_blog if the regional plugin was enabled.

if (is_plugin_active('regional-functionality-plugin.php')) {
	//plugin is activated! Look no switch_to_blog!!
	$args = array(
		'container'    => 'div',
		'menu'         => 'Footer',
		'container_id' => 'footer-links',
		'menu_class'   => 'menu', 
		'echo'         => true,
		'fallback_cb'  => 'wp_page_menu',
		'depth'        => 0
	);
	wp_nav_menu($args);
} else {
	global $blog_id;
	global $current_blog;
	switch_to_blog(45);
	$args = array(
		'container'    => 'div',
		'menu'         => 'Footer',
		'container_id' => 'footer-links',
		'menu_class'   => 'menu', 
		'echo'         => true,
		'fallback_cb'  => 'wp_page_menu',
		'depth'        => 0
	);
	wp_nav_menu($args);
	restore_current_blog();
} ?>

There we have it, 12 lines of code for the love of a single maintainable theme. So, if you want to earn your salt as a WordPress Developer, learn your functions and save your energy for the creative work.

About the Author

Peter builds web platforms based on WordPress. In his off time he is expounding on the wonders of WordPress among family, friends and strangers. He and his brother host a monthly WordPress meetup in Jackson Michigan.

HTML Formatting for Custom Menus

Jeff Starr — Mon, 28 Nov 2011 18:09:42 +0000

For some projects, it’s nice to output clean, well-formatted markup. Using theme template files enables great control over most of your (X)HTML formatting, but not so much for automated functionality involving stuff like widgets and custom menus. One of my current projects requires clean, semantic HTML markup for all web pages, but also takes advantage of WordPress’ custom-menu functionality to make things easy. In this DiW article, we’ll see how to enjoy both: WordPress custom menus and clean, well-formatted HTML markup.

Customizing HTML displayed with wp_nav_menu()

By default, WordPress custom menus are displayed in your theme template using the wp_nav_menu function, which by default outputs markup that looks like this:

Home
Demos
Downloads
Documentation

That’s a mess of class and id attributes, plus an extra

container to boot. Fortunately, the wp_nav_menu() provides some useful parameters for customizing the display of your custom navigation menus. Here is a list of the default parameters:

 ,
  'menu'            => , 
  'container'       => 'div', 
  'container_class' => 'menu-{menu slug}-container', 
  'container_id'    => ,
  'menu_class'      => 'menu', 
  'menu_id'         => ,
  'echo'            => true,
  'fallback_cb'     => 'wp_page_menu',
  'before'          => ,
  'after'           => ,
  'link_before'     => ,
  'link_after'      => ,
  'items_wrap'      => '%3$s',
  'depth'           => 0,
  'walker'          => );
?>

Of these parameters, $container lets you specify how to wrap the

'div'

'nav'

false

$container

container. The wp_nav_menu function also provides two more optional parameters for customizing menu markup:

$items_wrap – “Whatever to wrap the items with an ul, and how to wrap them with” (source: WP Codex)
$walker – “Custom walker object to use (Note: You must pass an actual object to use, not a string)” (source: WP Codex)

These sound useful, but I haven’t had much luck with either. The $items_wrap didn’t seem to do anything, but there are plenty of custom walker scripts available for further experimentation and customization. If you can get them to work properly, a custom walker provides complete control over custom-menu markup displayed with the wp_nav_menu tag. Unfortunately, I was unable to get very far with any of them, so I sought an alternate method..

An alternative approach for custom markup

After fiddling with a few of the various custom walkers, I decided to find an easier way to customize and format WordPress nav/menu markup. The walkers are fairly extensive and complex, and just seem like overkill for building a simple list of custom menu items. After some digging through the WordPress Codex, I found the perfect function for crafting squeaky-clean WordPress menus: wp_get_nav_menu_items. As the name implies, wp_get_nav_menu_items returns the items from your custom navigation menus (as created in the WP Admin → Appearance → Menus panel). Thus, you can use this function to mark up your custom menus however you want. For my particular project, the desired format looks like this:


	
		Home
		Demos
		Downloads
		Documentation

Trying to do this with the commonly used wp_nav_menu function and a custom walker is possible, but it’s much easier building the menu structure from scratch, using only what’s required to make it happen. So alternately we use wp_get_nav_menu_items and begin with the example function provided at the Codex. After wrapping it in a function and customizing the output, we have the clean_custom_menus() function, ready for copy/paste into your theme’s functions.php file:

// custom menu example @ http://digwp.com/2011/11/html-formatting-custom-menus/
function clean_custom_menus() {
	$menu_name = 'nav-primary'; // specify custom menu slug
	if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {
		$menu = wp_get_nav_menu_object($locations[$menu_name]);
		$menu_items = wp_get_nav_menu_items($menu->term_id);

		$menu_list = '' ."\n";
		$menu_list .= "\t\t\t\t". '' ."\n";
		foreach ((array) $menu_items as $key => $menu_item) {
			$title = $menu_item->title;
			$url = $menu_item->url;
			$menu_list .= "\t\t\t\t\t". ''. $title .'' ."\n";
		}
		$menu_list .= "\t\t\t\t". '' ."\n";
		$menu_list .= "\t\t\t". '' ."\n";
	} else {
		// $menu_list = '';
	}
	echo $menu_list;
}

After placing in your functions.php file, you can call the function and display your custom menus anywhere in your theme by calling it directly:

Then, you can customize the clean_custom_menus() function as follows:

Line 3: specify your custom-menu slug
Lines 8 thru 15: customize markup, tabs, and line breaks as needed
Line 17: uncomment else condition and customize if needed

For lines 8-15, anything is possible – you can include whatever list items, markup, and attributes required. Additionally, you can tab and indent markup to line up with page markup using \n for a new line and \t for a tab space. The fastest, easiest way to use this function is to copy/paste into your theme and then check out your list markup. For example, if the nav list is too far to the left, add some more tabs. You can also add class and id attributes, include custom items, and even manipulate which list items are displayed ($url, $title, etc.). After a little fine-tuning, the wp_get_nav_menu_items() function enables clean, well-formatted markup for your custom menus.

Quick Summary

In this article, we explain two ways to clean up and customize WordPress’ custom-menu markup. Either of these methods will take your code from this:

Home
Demos
Downloads
Documentation

..to this:


	
		Home
		Demos
		Downloads
		Documentation

..or whatever HTML structure that’s required. You can achieve this with either of these methods:

Combine wp_nav_menu() with a custom walker class
Combine wp_get_nav_menu_items() with the clean_custom_menus() function

As usual, if you know of better ways of doing something, please share in the comments! Thanks for reading Digging into WordPress :)

How to Redirect Logged-In Users

Jeff Starr — Mon, 08 Aug 2011 17:18:38 +0000

WordPress provides a variety of ways to redirect logged-in users. In this DiW post, we explain each of these methods along with some useful tips and tricks along the way. These techniques enable you to redirect logged-in users to internal pages, external pages, and even return them to the current page.

wp_redirect

The wp_redirect function is for redirecting all users to any absolute URI. Absolute URIs are basically full URLs and look like this:

http://digwp.com/book/
http://digwp.com/wp-content/blog-images/redirecting-users.jpg
ftp://example.com/transfer/

To redirect users with wp_redirect, place the following PHP snippet in your theme file:

The parameters for wp_redirect are two in number:

$location = The absolute URI to which the user will be redirected. No default.
$status = The status code to use. For example, 301, 302, etc. The default is 302.

You can use template tags for the $location parameter, for example:

To use a status code other than the default 302, specify it like so:

That code will send the user to example.com along with status code 301 (Moved Permanently). The default 302 should be used for temporary redirects. Learn more about status codes.

auth_redirect

Next up, we have auth_redirect, which is a “simple function that requires that the user be logged in before they can access a page.” So for example, let’s say you have a “downloads” page that’s meant for logged-in users only. To prevent unauthorized access, we would add the following code to the top of the downloads page template:

This extremely useful function checks whether or not the current user is logged in, and redirects them to the Login Page if not. By default, the user will be redirected back to the page from whence they came (e.g., the downloads page). Currently this function accepts no parameters, but having something like $location would make it even more awesome ;)

wp_logout_url

The wp_logout_url function returns the URL of your site’s Logout Page. But it can also redirect the user to any URL using the $redirect parameter, like so:

$redirect parameter is a string containing the redirect URL. Here are some examples:


Logout


Logout


Logout

The automatic logout link is great, but the subsequent redirect is a super-useful tool that we use in our custom login/register tutorial.

is_user_logged_in

Lastly we have the is_user_logged_in function, which technically doesn’t do any redirecting, but enables you to check if the user is logged in. Here is a simple example that should work in any theme template file:

The is_user_logged_in function returns TRUE or FALSE, depending on the user’s status. So to display custom content to logged in users, you could do something like this:



	Welcome, registered user!



	Welcome, visitor!

And you can mix-n-match is_user_logged_in with other template tags and PHP snippets to return more refined results. For example, we can serve custom content based on logged status and location:

This example demonstrates the flexibility of WordPress conditional tags and how is_user_logged_in throws another layer of control to the mix.

Note about auth_redirect and is_user_logged_in

As discussed here, auth_redirect currently seems to be acting kinda weird, where the post-login redirect isn’t working. Instead of returning the user to the current page after login, the user always ends up back at the Login Page. It looks like the auth_redirect function isn’t recognizing the new “logged-in” user status, and so it just keeps sending the user back to login.php.

So until this is fixed, there is a simple workaround which involves combining auth_redirect with is_user_logged_in to do what auth_redirect should be doing. All that’s required is the following snippet of code placed at the top of your theme template:

With this technique, auth_redirect executes only if the user is NOT logged in. So yeah it’s a hack, but it works great and should continue working if/when auth_redirect is fixed.

Tumblr Links with Post Formats

Jeff Starr — Tue, 05 Apr 2011 17:49:20 +0000

With WordPress 3.1’s new Post Format functionality, it’s easier than ever to create your own Tumblr-style Link posts. We do this right here at DigWP.com using our own hand-rolled method. Scroll through a page or two of the site’s most recent posts, and you’ll see that Link posts are formatted and styled differently than regular posts (see screenshot below). In this tutorial, you’ll learn how to use WordPress’ new Post Formats to setup your own Tumblr-style Links in 3 easy steps.

Link posts are meant for quick links to external resources. Ideally, they’re styled for easy recognition without breaking the flow of post content. Link posts look like link posts, Asides look like asides, Galleries look like galleries, and so on. Here’s a chart showing the differences between regular posts and Link posts:

Notice the key difference between the two types of posts: regular post titles link to the single-view of the post, but Link post titles link to the URL of an external resource (i.e., whatever awesome thing you’re sharing with your visitors). This makes it super-easy to share links via true “Tumblr-style” Link posts. And with WordPress 3.1’s new Post Formats functionality, it’s easier than ever to do.

Easy, 3-Step Tutorial

Here’s an overview of the tutorial:

Enable Post Formats via functions.php
Include the conditional template tags in your theme files
Style with some CSS via style.css (optional)
Usage and notes

Even if you don’t implement this technique, the tutorial provides a great example of how Post Formats can be used to add variety and depth to any WordPress-powered site.

Step 1: Enable Post Formats

First, make sure you have the latest version of WordPress (3.1 or better), and then enable Post Formats by adding this snippet to your theme’s functions.php file:

// Enable Post Formats for WP 3.1+
add_theme_support('post-formats',array('aside','chat','gallery','image','link','quote','status','video','audio'));

With that in place, all nine (+1 default) Post Formats will be enabled on your site. Next time you write or edit a post, you should see a Post Formats panel with options for each of these different formats. If you know you won’t be needing some of them, feel free to edit the parameter list in the code snippet. Otherwise, it’s totally fine to leave them all enabled – it doesn’t hurt anything – it’s just a matter of preference.

Step 2: Customize your theme files

Next, in your theme’s template file(s), replace the markup/tags used to generate your post titles (located in the loop) with the following conditional code:

ID, 'LinkFormatURL', true)) : ?>

The first line tests each post using has_post_format and get_post_meta. IF the post is a Link post (has “link” post format) AND has an alternate URL (via “LinkFormatURL” custom field), the post title will be Tumblr-style as specified in the second line of code. If both of those conditions fail, the post title will be the regular/default, as specified in the fourth line of code. You may use any PHP/markup needed to customize your Link posts to suit your design.

Update: Matt Wiebe makes this step even easier. Instead of messing with your theme files, just add this snippet to your theme’s functions.php:

// filter post title for tumblr links
function sd_link_filter($link, $post) {
     if (has_post_format('link', $post) && get_post_meta($post->ID, 'LinkFormatURL', true)) {
          $link = get_post_meta($post->ID, 'LinkFormatURL', true);
     }
     return $link;
}
add_filter('post_link', 'sd_link_filter', 10, 2);

This script filters the post_link and returns the correct URL based on the same conditions as before. Just plug-n-play – no other theme modifications required. Thanks to Matt Wiebe for sharing this more elegant method.

Step 3: Style with CSS

Lastly and optionally, you are encouraged to customize the appearance of your custom Post Formats. Referring back to the opening screenshot, notice how Link posts stand out as distinct and easy to recognize as such. To style your Link posts with CSS, make sure your theme includes the post_class() tag in the outer

(or whatever) for each post. The post_class() function will then output the Post-Format name as a class attribute for each post. This provides a nice hook for hanging your custom CSS. Here is a simple example using our code from Step 2:

.format-standard { width: 100%; }
.format-link     { width: 75%; }

.format-standard h2 { font-size: 24px; }
.format-link h2     { font-size: 16px; }

.format-standard a { color: #000; }
.format-link a     { color: #777; }

Using the .format-{whatever} class attribute, it’s easy to style each of your Post Formats with a distinct appearance that’s easy to recognize.

Usage and Notes

Once you get everything setup, posting Links is as easy as 1-2-3..

Write your Link post
Choose the “Link” format type from the Format radio-button menu (located under the Publish panel)
Add the Link URL (external resource) to a custom field named “LinkFormatURL” (see screenshot below)

And that’s all there is to it! After posting a new Link, it will be displayed using the format and styles that you’ve applied. A few notes:

CSS hooks for post-formats are available via post_class()
When customizing your theme as per Step 2, don’t forget about archive.php, category.php, and any other template files that use the loop
This tutorial sets up Tumblr-style Links for your blog only, but you can check this post to setup the Tumblr Links for feeds as well

If you have any questions about setting this up on your site, leave a comment and we’ll try to help. Also, see the “Possibly Related Posts” below for related content on this topic.

List of WordPress Developers & Designers

Jeff Starr — Thu, 27 Jan 2011 17:33:39 +0000

Looking for WordPress developers and designers? So are many people. Time is scarce these days, and we get quite a few folks asking about where to go for help with their WordPress site. Most of the WP peeps that we know are just as busy as we are, so it would be helpful to have a nice, healthy list of WordPress designers and developers all in one place that people could check out and find some good candidates.

So, if you’re a WordPress professional, available for hire, and would like to be included in our list of designers & developers, just leave a comment with a quick summary of how you can help clients with WordPress. Include as much or as little information as you would like, but please don’t get carried away with an entire resume or anything. Some essential things to include:

Name / Business Name
Contact Information (Twitter, Facebook, Skype, whatever)
What you do
Relevant experience
Link to portfolio or company page

Why do this? Because it will be great to have a resource for our WordPress-hungry visitors to check out. We’ve got an amazing readership & audience here at DigWP.com, and plenty of traffic, so hopefully this DiW List of WordPress Designers & Developers will reach many people and help everyone find exactly what/who they are looking for. It’s a win-win-win! :)

Thanks for your help!

Custom Message After the Comments

Chris Coyier — Mon, 06 Dec 2010 18:14:27 +0000

Have you ever wanted to close a comment thread, but leave a note to communicate why the thread is closed? Many blogs will just update the content of the blog post to say that comments are closed and why. That’s better than nothing, but that puts the message in a bit of an awkward place. The ideal place for that custom messaging is after the comment thread, where the comment form would normally be.

One example situation is the contest we just ran. Like many blog-based comments, it was comment-to-win. That means it’s best to close the comments when the contest is over, so people clearly understand that it’s over. We do close comments after a few months on this site to avoid spam and questions that come in way after the fact and will probably never be answered, but this is a case where we close comments much sooner than a few months. When we closed the contest, we actually put the winners of it as a custom message beneath the comment thread.

To accomplish this in a very easy-to-use manner, we’ll create a custom meta box inside the Post Editor itself.

Functions.php

We need to hook into two actions for this. We’ll use the ‘admin_menu’ and ‘add_meta_box’ to create the meta box. Then we’ll tap into ‘save_post’ and use ‘update_post_meta’ to actually save the value entered.

// After Comments Message

add_action('admin_menu', 'custom_comments_message_hooks');
add_action('save_post', 'save_custom_comments_message');

function custom_comments_message_hooks() {
	add_meta_box('custom_comments_message', 'Custom Comments Message', 'custom_comments_message_input', 'post', 'normal', 'high');
}
function custom_comments_message_input() {
	global $post;
	echo '
';
	echo ''.get_post_meta($post->ID,'_custom_comments_message',true).'';
}
function save_custom_comments_message($post_id) {
	if (!wp_verify_nonce($_POST['custom_comments_message_noncename'], 'custom_comments_message')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_comments_message = $_POST['custom_comments_message'];
	update_post_meta($post_id, '_custom_comments_message', $custom_comments_message);
}

That is the entire UI for creating this functional data-saving meta box. Now we just need to actually use that value.

Comments.php

There is some logic in the comments.php file which tests if comments are open or not. If they are, the comment form is output, if they are not, some kind of “comments closed” message is output. We’ll be tinkering around in the “if they are not” section (the “else” code below) and adding a check for our special custom field value. If it’s present, output that, if not, output the default.

ID, '_custom_comments_message', true);
		
	if ($custom_message != '') {
		
		echo '';
		echo $custom_message;
		echo "";
		
	} else {
	
		echo 'Comments are closed. If you have something really important to add, contact us. Thank you!';
	
	} ?>

That’s all there is to it! Now you have a fancy custom box right in your Post Editor where, should you choose, you can close comments and write a custom message to display after the existing comments.

Randomized Grid of Posts

Chris Coyier — Mon, 16 Aug 2010 15:31:11 +0000

I’m all about tinkering with different ideas to display posts with WordPress. After all, it’s just a bunch of data at our fingertips! WordPress makes it easy to output whatever we need. Not long ago we experimented with making a Thumbnail Based Archives. Now let’s build a Randomized Grid Archives.

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.

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.





	
	Grid Archives | Digging Into WordPress
	/css/gridarchives.css" />



	
		
		
			
				
				ID, 'PostThumb', true); ?>" alt="" />

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.

Enjoy!

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

Using Menus in WordPress 3.0

Chris Coyier — Mon, 02 Aug 2010 15:12:37 +0000

The menu system in WordPress 3.0 was hotly anticipated. But perhaps unbeknownst to many average WordPress users, actually using this feature takes some coding work. In fact, even enabling the features take a bit of code.

Below we’ll go through the steps for inserting a custom menu into your theme. Note that many themes will have menu functionality built-in. This is for Do-It-Yourself folks who are trying to add it to their existing theme.

1. Register menus in functions.php file

if ( function_exists( 'register_nav_menus' ) ) {
  	register_nav_menus(
  		array(
  		  'foot_menu' => 'My Custom Footer Menu',
  		  'sidebar_menu' => 'Super Sidebar Menu'
  		)
  	);
}

2. Create menu in Admin

Now that the feature is enabled, go to Appearance > Menus and build and save a custom menu.

3. Attach custom menu to your “declared” menu

Now that you’ve declared a menu (in functions.php) and built a menu (in the admin), you’ll need to connect them to each other.

4. Insert the menu into the theme

Now anywhere in your theme you want to display that menu, use:

 'Footer Menu' )); ?>

Change the name of the menu in the code above to match whatever you named the menu in the admin. This very site uses a WordPress 3.0 menu in the footer. The output HTML looks like this:

Contact
About Site
Advertising
Archives

5. Rejoice

Now any time this menu needs to be updated, we can do it from the comfort of the WordPress admin area.

Thumbnail Based Archives

Chris Coyier — Mon, 26 Jul 2010 13:36:44 +0000

Here at Digging Into WordPress, we’ve attached thumbnail images to every single (non-link-style) post since day one. We started before WordPress 3.0 had the specific feature for thumbnails. We did it just by attaching a file path to the thumbnail image as a custom field. We clearly display each of those thumbnails in the design of the homepage and other various pages where it makes sense.

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.

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.


	
		
		
		
			
				
				ID, 'PostThumb', true); ?>" alt="" />

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 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.


  
  Thumbnail Archives | Digging Into WordPress
  /css/archives-horz.css" />

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!

Poll: HTML or XHTML for Markup?

Jeff Starr — Fri, 30 Apr 2010 16:38:31 +0000

HTML5 is rapidly gaining popularity, but how many people are actually using it? If not HTML5, then what? When creating websites, designers have a variety of options for markup:

HTML5 (Not quiite official yet)
HTML 4.01 (Strict, Transitional, Frameset)
XHTML 1.0 (Strict, Transitional, Frameset, & Basic)
XHTML 1.1 (+ Basic XHTML 1.1)

You can build beautiful websites using any of these languages, but each comes with its own pros and cons. For example, you get some great new features with HTML5, but JavaScript is required to ensure cross-browser compatibility. XHTML 1.0 is cool, but Internet Explorer doesn’t really get it. Likewise, XHTML 1.1 is clean and flexible, but a little more persnickety about the details. And whatever happened to XHTML 2?

In a cage match, which markup language would dominate? Cast your vote!

Note: There is a poll embedded within this post, please visit the site to participate in this post's poll.

Bonus question: How many of us will be around for HTML6? ;)

Note: If you are reading via feed, visit the DiW site to take the poll (located in the sidebar).