Years ago, two branches of WordPress theme customisation began: there was the custom CSS approach, where you used a custom CSS file to override styles in style.css and localise your changes, and there were child themes. As far as I can tell these were both in development around the same time: people realised there needed to be a better way to customise themes, and as that progressed we got theme frameworks and so on.

Now theme frameworks are abundant and we’re all trying to find the most efficient way to customise them. I’ve been using the custom CSS and functions file method for a while; first with the Copyblogger theme and then with Thesis. I like it; I find it to be a quick and simple way of doing things. However, recently I’ve been seeing the advantages of child themes over custom files, particularly when using WordPress Networks (previously known as WPMU, sometimes now referred to as WPMS).

I’ve used child themes briefly with the Hybrid theme and others. Recently I started working on a BuddyPress child theme for Thesis (needs a DIYthemes login to access the forum thread). The BuddyPress theme compatibility plugin is pretty great, but for really smooth integration and to avoid pain when upgrading Thesis, a child theme is really the only way to go. That got me thinking that child themes would be a much simpler way of using Thesis across multiple networked sites with different customisations, without having to edit Thesis as I’ve done before. Instead of creating a new custom folder for each site, you create a new child theme and activate the child theme instead of Thesis.

You can check out the WordPress Codex for the basics of child theme development, but there are a couple of things to note when making child themes for Thesis:

1. If you leave the custom-sample folder in tact when installing Thesis (instead of changing its name to “custom”) it will act as a fallback custom folder. If custom.css and layout.css are not found in a custom folder in your child theme there will be errors because the files won’t be found, but with custom-sample as a fallback, there won’t be. You can duplicate custom-sample and have both a custom and custom-sample folders in your main Thesis folder if needed.
2. Copy a duplicate of the custom-sample folder to your child theme folder and name it “custom”. I don’t think it’s essential to keep using the custom folder structure in your child theme, but I highly recommend it, because you’ll have a unique copy of layout.css for each site for the Design Options to be written to, and a cache folder for that site’s thumbnails.
3. You need to specify a template for your child theme (in style.css, e.g., Template: thesis and the template name is the folder name of the parent theme. So to avoid having to change the template name every time you upgrade Thesis you may want to name your thesis folder something generic rather than keeping the version number in the folder name.
4. You need to import Thesis’ style.css to use in the child theme you can do that in one of two ways
   • add this to the top of style.css (note that the Thesis folder name is important here as well)

     @import url(../thesis/style.css);

   • or by add the following to the child theme’s functions.php

     if(!is_admin())
     	wp_enqueue_style( 'thesis-css', get_bloginfo('template_url') . '/style.css', '', false, 'screen,projection' );

5. It’s important to notice that the child theme’s functions.php is loaded before the parent theme’s. This impacts interaction with Thesis in a few ways. The first I noticed was that constants such as THESIS_CUSTOM_FOLDER are not defined yet, so if you’re in the habit of locating images in the custom folder using that constant (as I am) it won’t work. Also Thesis classes (i.e., PHP classes, such as those that control the loop API) are not loaded yet, so if you are writing custom loops with the loop API you need to address this. There are multiple ways to go about it:
   • The simplest way I found was to add this line to the top of functions.php

     include_once(TEMPLATEPATH.'/functions.php');

     I don’t know if there are any caveats to doing it this way, but I haven’t come across any problems with it so far.

   • Use custom/custom_functions.php instead of functions.php: if it exists, custom/custom_functions.php should be included by the Thesis functions.php file when it is run.
   • Wrap all of the code you want to use that interacts with Thesis into a function that hooks into after_setup_theme, which is run by WordPress right after the child and parent theme functions.php files have been loaded.

Beyond that my use of child themes with Thesis has been pretty smooth sailing.

Let me know if you use them and what some of your tips are!

Thesis 1.8 has lots of great new features, but one of the less publicised ones is the range of filters that has been extended. These filters make it possible to customise even more of Thesis’ output without modifying core files.

Previously, squeeze pages or landing pages that varied significantly from the rest of your site’s layout might have needed a custom template, a whole new page template, or a bit of a fudge by hiding parts of the page with CSS. Now, it’s really easy to selectively remove the header, sidebars and footer.

Squeeze Page

To get the simplest squeeze page possible: no header, sidebars or footer. Paste the following PHP in custom_functions.php. This code is a modification of code found in the DIYthemes forum.

function custom_remove_defaults($content) {
        return false;
}

function apply_custom_filters() {
    if (is_page('Squeeze Page')) {
		add_filter('thesis_show_header', 'custom_remove_defaults');
		add_filter('thesis_show_sidebars', 'custom_remove_defaults');
		add_filter('thesis_show_footer', 'custom_remove_defaults');
	}
}
add_action('template_redirect','apply_custom_filters');

The first function is the filter that returns “false” instead of returning the content that would normal be there (in the header, or footer, or sidebar). Read more about filters in the Thesis user manual.

The second function selects the page on which to apply the filter and then applies the filter to the header, sidebars and footer, just before Thesis loads on that page. Change “Squeeze Page” in if (is_page('Squeeze Page')) to the title of your squeeze page. If you want to filter multiple pages you can add their names as an array. E.g., if (is_page(array('Squeeze Page','Second Squeeze Page','Magical Landing Page'))).

Easily assign many squeeze pages

To more easily assign pages as squeeze pages, when you’re creating the page you can add a custom field to the page and have your custom function detect it. Change the code in custom_functions.php to the following.

function custom_remove_defaults($content) {
        return false;
}

function apply_custom_filters() {
	global $wp_query;
	$squeeze = get_post_meta($wp_query->post->ID, 'squeeze-page', true);
	if ($squeeze) {
		add_filter('thesis_show_header', 'custom_remove_defaults');
		add_filter('thesis_show_sidebars', 'custom_remove_defaults');
		add_filter('thesis_show_footer', 'custom_remove_defaults');
	}
}
add_action('template_redirect','apply_custom_filters');

Then when creating or editing your squeeze page add a custom field with the name “squeeze-page” and any value (it doesn’t matter what the value is because we only use the name).

Using this set up, every page with this custom field will have the header, footer and sidebars removed.

These pages can be styled individually by using the page name body class, or styled together using a body class filter. See Using Custom CSS Classes for Posts and Pages and the body class filter in the landing page code below.

Landing pages with different sidebars

To present a different sidebar on squeeze or landing pages you could use the Widget Logic or Dynamic Widgets plugins to designate which pages widgets should be displayed on, but if you have many landing pages, or many widgets, that could be labour intensive. So, you can create a whole new sidebar that gets displayed according to the page name or custom field assignment, like the squeeze page filters above. Widgets in these sidebars will only be displayed on your landing pages.

The following code for a landing page — without header, original sidebars and footer and with new sidebars added — goes in custom_functions.php. Note: I’m using different variables and custom field names than in the code above, so pay attention if trying to mix and match the code.

Update 25^th October 2010: Added id parameter to register_sidebars() and changed IDs in thesis_default_widget() to avoid confusion with other registered widget areas with sequentially numbered IDs.
Update 3^rd November 2011: Edited the ‘name’ parameter in register_sidebars to fix disappearing widgets problem.

function custom_body_classes($classes) {
	$classes[] = "landing-page";

	return $classes;
}

function custom_remove_defaults($content) {
        return false;
}

register_sidebars(2,
    array(
        'name' => sprintf(__('Landing Page %d'), $i ),
        'id' => 'landing-page-$i',
        'before_widget' => '<li class="widget %2$s" id="%1$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    )
);

function landing_page_sidebar() {
?>
</div> <!-- custom end #content -->
<div id="sidebars">
	<div id="sidebar_1" class="sidebar">
		<ul class="sidebar_list">
			<?php thesis_default_widget('landing-page-1'); ?>
		</ul>
	</div>
	<div id="sidebar_2" class="sidebar">
		<ul class="sidebar_list">
			<?php thesis_default_widget('landing-page-2'); ?>
		</ul>
	</div>
</div>
<div> <!-- balance out #content divs -->
<?php
}

function apply_custom_filters() {
	global $wp_query;
	$landing = get_post_meta($wp_query->post->ID, 'landing-page', true);
	if ($landing) {
		// remove unwanted sections
		add_filter('thesis_show_header', 'custom_remove_defaults');
		add_filter('thesis_show_sidebars', 'custom_remove_defaults');
		add_filter('thesis_show_footer', 'custom_remove_defaults');
		//add custom body class
		add_filter('thesis_body_classes','custom_body_classes');
		// add new sidebars
		add_action('thesis_hook_after_content','landing_page_sidebar');
	}
}
add_action('template_redirect','apply_custom_filters');

This code does the following to pages with a custom field named “landing-page”.

• adds a body class of “landing-page”
• removes the header, sidebars, and footer
• registers 2 new sidebars called Landing Page 1 and Lading Page 2
• builds the code for the new sidebars (note that an extra </div> and <div> are added because there’s no hook in between the end of #content and the end of #content_box)
• then implements all of the above before Thesis loads

Editing the sidebars

If you only have one sidebar, you can remove the HTML for the second sidebar by deleting

	<div id="sidebar_2" class="sidebar">
		<ul class="sidebar_list">
			<?php thesis_default_widget('landing-page-2'); ?>
		</ul>
	</div>

If you want a sidebar | content | sidebar arrangement, you’ll need different markup. Ask in the comments.

Landing page CSS

When you implement the above you will find that the new sidebars are below the content. This is because removing the original sidebars activates the No Sidebar template and makes the content full-width. To fix this we need to find out what the width of #content in your Thesis layout was. Use Firebug in Firefox or Webkit Inspector in Safari or Chrome to find that width by right clicking in the content area and selecting “Inspect Element”.

Then add the width back into custom.css.

.landing-page .no_sidebars #content {width:51.3em;}

Except for adding your content and styling the page, that’s about it. Content is added as per usual, by editing the page in the WordPress dashboard.

When I redesigned kristarella.com I implemented a contents menu that you can see in top right corner of some posts and pages; mainly tutorial posts. This was part of my effort to make the site more navigable.

I’ve had a couple of questions about how I did that, so I’m going to answer them today. The menu itself is generated via jQuery. I chose to use javascript to implement the menu because that way the menu would only be generated when it is suitable to do so, and the variety of selectors in jQuery makes it simple to select the content needed.

I thought hard about using javascript in this way, since I generally agree that if it can be done in another language, a server-side language, then it should be. I considered that perhaps a PHP filter on the post contents might be more suitable, and then the menu would be available to those without javascript too. However, in the end I went with javascript because I couldn’t quite conceptualise how I would do it with PHP, and because I thought this feature is an optional extra, not crucial for the navigation of the site, so it is acceptable to do it in javascript.

Pre-requisites for the menu to function

Headings with IDs

The main pre-req for this menu is that the post or page contain headings with IDs assigned to them. I already had this for quite a few tutorials so that I could link to certain sections of tutorials when I wanted to.

You can cause a browser to jump to a certain ID by adding #id-name to the end of the URL. This applies to any element on the page, not just headings. For example, if I wanted to send you to the footer of my site I could use a link that looks like <a href="#footer">Link to footer</a>.

Load jQuery library

You also need to have the jQuery library loaded on the page. This can be done in the <head> of the webpage, or before the </body> tag at the end of the webpage.

For instructions on how to do this in WordPress see Including jQuery in WordPress (the right way) and Use Google-hosted javascript libraries (… still the right way). If you’re using Thesis, there are options under the Page Options to include various javascript libraries, as well as options for each post or page (on their editing page) to include the libraries. Selecting a library to be included on the home page under Page Options will cause it to be included on all pages.

The code

This code should be included on the webpage, after the jQuery library has been loaded (either in the <head> or at the end of the page, as long as the jQuery library is loaded first). It can be added directly to the page if wrapped in <script type="text/javascript"> and </script> tags, or in an external javascript file with a reference such as <script type="text/javascript" src="menu.js"></script> (recommended).

jQuery(function() {
	var headings = ".format_text h3[id], .format_text h4[id], .format_text h5[id], .format_text h6[id]";
	if (jQuery(headings).length > 0)
		jQuery(".single-post .post_box .format_text, .thesography .post_box .format_text").prepend('<ul id="toc"><h3>Contents</h3></ul>');

	jQuery(headings).each(function() {
		var id = jQuery(this).attr("id");
		var title = jQuery(this).text();
		jQuery(".single-post ul#toc, .thesography ul#toc").append('<li><a href="#' + id + '">' + title + '</a></li>');
	});
});

The code explained

The first line of code opens the function and will run the function when the whole page has loaded.

var headings creates a variable with a comma separated list of the headings the menu might use — that is, any h3, h4, h5 or h6 headings inside the div with class .format_text (a div containing the main post content in Thesis), and that have IDs (using the jQuery attribute selector).

The next step of the function is subject to a conditional clause, that it should only run if there are some headings with IDs, i.e., if the headings variable contains something. When there are headings with IDs in the post an unordered list with ID toc and a heading of “Contents” is created at the top of the post. In my case, only on pages with a body class of “single-post” or “thesography” (see the code for adding body classes).

For each heading the code collects the ID and the text within that heading, and appends — to the previously created contents list — a list item containing a link to that heading.

Further info

That’s really about it. I hope you’ll be able to bend the code to suit your site if you need to, since this is something I came up with that suits my own blog and posting habits.

I think the biggest things in understanding this chunk of code is getting your head around CSS selectors and jQuery syntax. So, for more info on those check out the jQuery official documentation and HTML Dog or tizag.com CSS tutorials.

With the recent launch of WordPress 3.0 there are loads of sweet new features to dig into. Digging into WordPress has a nice summary of many of the new features.

My favourite new features include the custom post types and custom taxonomies (which have been available for a while, but the dashboard management capability has been fully implemented now). I guess those are slightly more advanced features, I think most users may be more excited by backgrounds, header and menus. As such, Matt Hodder already has a great post about enabling WP 3.0 menus, backgrounds and headers in Thesis.

Also, there is an issue with the Thesis Custom File Editor in the dashboard, so if you use that a lot definitely check out the fix for the use_codepress() error.

Today I’m going to cover my favourite new WP 3.0 features.

Custom Taxonomies

Taxonomies are ways to classify posts and custom post types. WordPress has had two taxonomies for a long time: categories and tags. You’ve been able to register custom taxonomies in WordPress for quite a long time and since version 2.7 registering a non-hierarchical taxonomy (similar to tags) has provided a new input box in the post editing screen to assign your custom tag type to posts, but there was no menu item to edit that taxonomy and there was no input support for hierarchical taxonomies (like categories).

Now, registering a new taxonomy provides the input box on post editing pages and a dashboard menu item to edit the whole taxonomy.

Say you were building a website to document the spread of an infectious zombie-creating disease and wanted to profile and categorise individual zombies… You could create a custom post type for zombies (covered below) and assign location and infection taxonomies to make it easy to categorise and query where the zombies were sighted, or originated from, and which strain of the infection they have.

The following code would be posted into functions.php, or custom_functions.php for Thesis.

// === CUSTOM TAXONOMIES === //
function my_custom_taxonomies() {
	register_taxonomy(
		'location',		// internal name = machine-readable taxonomy name
		'zombie',		// object type = post, page, link, or custom post-type
		array(
			'hierarchical' => true,
			'label' => 'Location',	// the human-readable taxonomy name
			'query_var' => true,	// enable taxonomy-specific querying
			'rewrite' => array( 'slug' => 'location' ),	// pretty permalinks for your taxonomy?
		)
	);
	register_taxonomy(
		'infection',
		'post',
		array(
			'hierarchical' => false,
			'label' => 'Infection',
			'query_var' => true,
			'rewrite' => array( 'slug' => 'infection' ),
		)
	);

}
add_action('init', 'my_custom_taxonomies', 0);

The lines in the first registration are commented to explain them a bit, and another post by Justin Tadlock has some more details about custom taxonomies.

Notice that I made the Location taxonomy hierarchical, since I figured I could hone down the location as much as I want, and organise it in a hierarchy of country, state, city, suburb, etc. Also I only enabled it on “zombie” objects, that is, my Zombie post type. However, for the Infections tag I enabled it on posts because I figured I may write posts about the different strains and their evolution. I can enable the Infections taxonomy on Zombie post types within the post type registration below.

Custom Post Types

Custom post types are new in WP 3.0. They are like posts and pages, but are handled separately within the WordPress dashboard and by the regular post query — like pages, they don’t show up on the posts page or in the feed.

When creating custom post types you can call them whatever name you like and you can mix some of the features of posts and pages. For example, you can create a custom post type that is hierarchical (like pages, allowing child pages) and that uses categories, tags or custom taxonomies (like posts already do).

Justin Tadlock has an amazing post with the details of custom post types and how to make them. Refer to that post for all the parameters related to creating custom post types.

In Thesis, creating custom post types is not very different to any other theme. The main difference is that instead of adding the registration code to functions.php you add it to custom_functions.php.

// === CUSTOM POST TYPES === //
function create_my_post_types() {
	register_post_type( 'zombie',
		array(
			'labels' => array(
				'name' => __( 'Zombies' ),
				'singular_name' => __( 'Zombie' ),
				'add_new_item' => 'Add New Zombie',
				'edit_item' => 'Edit Zombie',
				'new_item' => 'New Zombie',
				'search_items' => 'Search Zombies',
				'not_found' => 'No zombies found',
				'not_found_in_trash' => 'No zombies found in trash',
			),
			'_builtin' => false,
			'public' => true,
			'hierarchical' => false,
			'taxonomies' => array( 'location', 'infection'),
			'supports' => array(
				'title',
				'editor',
				'excerpt'
			),
			'rewrite' => array( 'slug' => 'zombie', 'with_front' => false )
		)
	);
}
add_action( 'init', 'create_my_post_types' );

There are loads more parameters that you could use. I found that these were the ones I needed to create a pretty simple post type with a smooth experience (i.e., all the terms in the admin call the posts “zombie” or “zombies” appropriately, rather than “posts” or “pages”).

Worth noting is that even though the default slug (bit of the URL) will be the label (in this case “zombie”), I had to specifically state it in the registration code, otherwise I got a 404 error on my post. Also, you need to visit the permalink settings page after registering the post type to flush the rewrite rules so the new slugs work (just visit the page, you don’t have to re-save the options).

Thesis SEO & image metadata for custom post types

You might have noticed that the last line of my custom post type registration, //'register_meta_box_cb'=>'add_meta_boxes',, is commented out. Don’t uncomment it because it won’t work! To add meta boxes to the custom post type editing page, you need to provide a callback function and state the function name in the registration code. Thesis doesn’t support this yet, which is why I have custom fields enabled on the editing page. You can still use the Thesis SEO and image fields, but it will be a bit more manual until the callback is supported. I’ve left the line in the code to remind myself to add the callback in when it’s ready and I’ll edit this post to include it when it is.

If you’ve been using the Thesis fields then the keys will probably be available for you in a select box when adding a new custom field. Some of the values you will know what to do with, such as thesis_post_image and thesis_thumb just take an image URL, but if you’re not sure what values to use take a look at the custom fields on one of your older posts already using the Thesis meta to see what should be entered as the value for the field.

To add the Thesis meta boxes to your custom post editing page add the following to custom functions. Courtesy farinspace.com.

function custom_thesis_meta_boxes() {
	$post_options = new thesis_post_options;
	$post_options->meta_boxes();
	foreach ($post_options->meta_boxes as $meta_name => $meta_box) {
		add_meta_box($meta_box['id'], $meta_box['title'], array('thesis_post_options', 'output_' . $meta_name . '_box'), 'zombie', 'normal', 'high');
	}
	add_action('save_post', array('thesis_post_options', 'save_meta'));
}
add_action('admin_menu','custom_thesis_meta_boxes');

Be sure to change the “zombie” in bold to the name of your custom post type. To add to more than one custom post type, try the following function, adding your custom post types to the array $post_types.

function custom_thesis_meta_boxes() {
	$post_options = new thesis_post_options;
	$post_options->meta_boxes();
	$post_types = array('zombie','other_post_type');
	foreach ($post_types as $post_type) {
		foreach ($post_options->meta_boxes as $meta_name => $meta_box) {
			add_meta_box($meta_box['id'], $meta_box['title'], array('thesis_post_options', 'output_' . $meta_name . '_box'), $post_type, 'normal', 'high');
		}
		add_action('save_post', array('thesis_post_options', 'save_meta'));
	}
}
add_action('admin_menu','custom_thesis_meta_boxes');

More to come

There’s a lot more to WordPress 3.0, but I think this post is long enough. I’m sure I and others will have more exciting things to come!

I’ve been asked this several times, so I figured it’s high time to write a tutorial on it: how to position your Thesis navigation next to your site title.

Essentially this tutorial is about the CSS position property more than anything else.

position:absolute;

The cool thing about the position property is that browsers generally interpret it the same way! There’s none of the screwiness that comes with trying to get floats, margins, padding and borders to be the same in IE as they are everywhere else.

The values for the position property are:

• static: the default behaviour of an element; you’ll rarely need to set it
• fixed: causes the element to stay in a fixed position, relative to the browser window — this one is an exception to what I said about IE, at least in IE6 and 7, fixed position elements were fine on the left, but weird on the right, not sure about IE8 or 9
• relative: the element is positioned exactly as it would be in the normal flow of the webpage and can be offset from there using the top and left properties
• absolute: causes and element to be positioned exactly where you tell it with the top, right, bottom and left properties; the position is absolute to the body of the web page, unless it’s inside a positioned element, in which case it is absolute relative to the positioned parent element

The values that we are concerned with for the navigation are relative and absolute.

Move the nav inside the header

Before putting the nav next to the title, we should put it inside the same element as the title. Paste the following into custom_functions.php.

remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_after_title','thesis_nav_menu');

This moves the nav from above #header to inside it, after the title and tagline. You may also use thesis_hook_before_title if you want to put the nav before the title in the header; it doesn’t matter for the purposes of positioning it.

Position the nav next to the title

To position the nav next to the title add the following to custom.css.

.custom #header {position:relative;}
	.custom ul.menu {position:absolute; top:2.2em; right:1.1em; width:auto;}
		.custom ul.menu li.rss {float:left;}

The first line is necessary for the nav to be positioned relative to the header rather than the whole page. The second line positions the nav 2.2em from the top and 1.1em from the right of #header.

width:auto; is added for the sake of IE6 and 7 so that the nav is only as wide as it needs to be to accomodate its contents (other browsers automatically do this when using position:absolute;, or float). The subscribe tab is floated to the left, along with the other tabs, also for the sake of IE because IE will stretch the nav to the full width of the header if there are both left and right floated elements.

Title or nav too wide?

If your title or tagline is very long or your nav has too many tabs they will overlap. To prevent this you can specify widths for these elements by replacing the above CSS with the following.

.custom #header {position:relative;}
	.custom #header #logo, .custom #header #tagline {width:50%;}
	.custom ul.menu {position:absolute; top:2.2em; right:1.1em; width:50%;}
		.custom ul.menu li.rss {float:left;}

This will make the title, tagline or nav wrap when it needs more than half the width of the header. You may adjust the 50% values to suit your design. Note that if your nav is not wider than half the header and you use 50% instead of auto, the nav will start in the middle of the header and leave extra space on the right. To overcome this you may use width:auto; max-width:50%; instead, keeping in mind that max-width is not supported by IE6.

Related Content

Please ask related questions in the comments!

You may also be interested in my drop-up navigation tutorial or the DIYthemes Answers blog posts on nav menus.

WPMU media locations

WPMU implements a URL rewrite for uploaded media so that the location of an uploaded file is given as http://www.example.com/files/2009/01/image.jpg, but the actual URL of the file is http://www.example.com/wp-content/blogs.dir/BLOG_ID/files/2009/01/image.jpg (where BLOG_ID is the ID of the blog in question).

TimThumb problem

The easiest way to specify the URL for a post image (whether you’re using Thesis post images, or custom fields to add a post thumbnail, or something else) is to copy the URL that WordPress inserts into the post. However, this URL doesn’t work with the TimThumb script (which Thesis and other themes use to generate thumbnails from larger images). Essentially TimThumb looks for the image file at the URL you specify, but the image file doesn’t exist there and the redirect that allows you to see the image in the browser doesn’t work for the script.

Overcoming the TimThumb problem

There’s two ways that I can see to get TimThumb working on your site: modify your behaviour, or modify the script’s behaviour.

Modify your behaviour

You could simply edit the URL that you copy from WordPress and add wp-content/blogs.dir/BLOG_ID/ into the image URL you want to use.

I don’t like this because it won’t fix any posts that have already been written and it’s extra work for the user every time they write a post. It also might not be easy for some users to remember that they need to change the URL, or in what way they need to change it.

Modify TimThumb’s behaviour

I came across a TimThumb hack for Thesis, but it didn’t work for me at all. I suspect it had something to do with my image URLs not being relative, but I’m not sure.

I was able to use the first part of the information in that post to make the blog IDs available in the TimThumb script and then using PHP replace the /files/ part of the URL with /wp-content/blogs.dir/BLOG_ID/files/.

In the Thesis theme (version 1.7 at the time of writing) the TimThumb script is located at thesis_17/lib/scripts/thumb.php.

Update 5^th Nov 2010: Changed line 448 below to fix a problem with this on blogs within a site network. Also, these edits still work the same with Thesis 1.8.

• At line 23 (after the end of the file comments section) I added

  require_once('../../../../../wp-blog-header.php');

  to make the blog IDs available.

• After line 447, which says $src = preg_replace("/\.\.+\//", "", $src);
  To line 448 (initially an empty line) I added

  global $current_site; global $current_blog; $src = str_replace($current_blog->path.'files/', $current_site->path.'wp-content/blogs.dir/'.$current_blog->blog_id.'/files/', $src);

  to replace the section of the image URL we need to change.

That’s all.

Further comments

Other themes may use their own version of the TimThumb script, or they might use the one included with WPMU. These modifications should work with them, but the line numbers might be slightly different.

In theory this modification could be present in regular WordPress installations and in WordPress 3.0 with networks turned on or off (assuming WP3.0 directory structure is the same) without affecting the existing behaviour of the script. If “/files/” is not found in the image URL, it won’t be replaced and the image URL will remain the same.

In the long run it might be better to use the thumbnails built into WordPress. However, the caveat there is you will need to regenerate the different image sizes after setting up theme support for thumbnails, whereas TimThumb generates thumbnails on the fly and then caches them: changing image sizes is not a big deal with TimThumb.

A normal category page

I don’t know if you’ve noticed: on a WordPress category archive page, posts from that category and all its child categories are displayed. I don’t know why. It’s not the behaviour I would have expected, and although it’s not necessarily a bad thing, I can understand that some people wouldn’t want it that way.

“Solutions”

I used to have a nice little function that used the pre_get_posts filter to exclude all the child categories, but for some reason that function stopped working somewhere between WordPress 2.7 and 2.8 and I couldn’t for the life of me get it to work again, at least not the way I wanted.

Furthermore, a simple custom query like the one in my loop tutorial doesn’t work quite right; often it modifies the query so that it thinks it’s on a normal home/blog page (very noticeable if you use only titles, or excerpts on archive pages and not the home page).

category__in

For those in-the-know, you might be thinking, just use category__in: it gets the posts from that category ID and not the child categories. However, when I tried it, I didn’t like the results.

It turned out that the reason the results were a little funky is because setting category__in obliterates the cat query variable. Two specific impacts of that are that the single_cat_title() template tag doesn’t work (because it uses get_query_var('cat') to get the category title) and any plugin using get_query_var('cat') (including Yoast Breadcrumbs) won’t work.

I tried setting the cat variable along with category__in, but cat seemed to override such that the child categories were no longer excluded and adding category__not_in didn’t help either.

The real solution

The only real solution I could come up with was to use category__in before the loop and then reset the cat variable after the loop to allow plugins and widgets to use it.

Before your category archive loop

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$current_cat = get_query_var('cat');
$args=array(
	'category__in' => array($current_cat),
	'paged' => $paged
);
query_posts($args);

Note that the $paged bit is essential for maintaining pagination. I usually prefer to use $query_string in custom queries for that, but it doesn’t work in this case.

After the category page loop

Assuming the $current_cat variable is still in tact from before the loop:

set_query_var("cat",$current_cat);

Otherwise use category__in to figure out what category you’re in:

$cat = get_query_var('category__in');
set_query_var("cat",$cat[0]);

Note that category__in returns an array, so we need to use $cat[0] to get the first array value, which is the ID of the current category.

Now the cat query variable will be available for use before and after your loop. It won’t be available inside the loop, but after two days on the topic, I couldn’t find a way around that — if you do, let me know!

Modifying your Thesis category archive pages

If you would like to use this method in Thesis you need to insert the code before and after the loop with PHP via custom_functions.php.

Before Thesis content

This method presents another issue, because Thesis uses single_cat_title() in the archive info. So, when we set category__in the category name in the archive info will be blank. The following code initiates the custom query, removes the default archive info and adds a working archive info back in.

function remove_child_cats() {
if (is_category()) :
	$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
	$current_cat = get_query_var('cat');

	$args=array(
		'category__in' => array($current_cat),
		'paged' => $paged
	);

	query_posts($args);

	remove_action('thesis_hook_archive_info', 'thesis_default_archive_info');
		echo '			<div id="archive_info">' . "\n";
?>
				<p><?php _e('From the category archives:', 'thesis'); ?></p>
				<h1><?php echo get_cat_name($current_cat); ?></h1>
<?php
		echo '			</div>' . "\n";
endif;
}
add_action('thesis_hook_before_content','remove_child_cats');

After Thesis loop

function reset_cat_var() {
	$cat = get_query_var('category__in');
	set_query_var("cat",$cat[0]);
}
add_action('thesis_hook_after_content','reset_cat_var',1);

That’s it: a way to exclude child categories from category archive pages without breaking (too much) stuff.

Please feel free to ask (related) questions!

What’s a loop?

When using WordPress, “The Loop” refers to the code in your template files that displays posts. Usually there is only one main loop per page, but you can have secondary custom loops to show special content. These can include recent posts and related posts.

The loop depends on queries

A query is related to the loop in that it determines what should be shown in the loop. For example, the default home query will contain all posts, 10 per page (or whatever number is set in Settings > Reading), from all categories; a single post query contains only information for the post or page you are viewing; archive loops will have posts according to the kind of archive page you are on (category, tag, month etc).

Default and custom queries

The main query for a WordPress page is determined automatically by the type of page you are viewing (it’s all handled by WordPress). You can create a custom query out of the default query by using the following PHP code somewhere before the start of your main loop code.

global $query_string;
query_posts($query_string . '&cat=-5');

The above code gathers the variable $query_string, which contains all the default query information and then uses query_posts() to create a query with all of the features of the default query, except the attributes that you change. In the example I have excluded the category with an ID of 5 from the query.

The benefit of using $query_string in this way is that you don’t destroy page pagination on the home and archive pages, which will happen when using query_posts() by itself.

The Loop code

The main loop code generally starts with something like <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>. Where have_posts() is a WordPress function that determines whether the current query has any posts in it. while ( have_posts() ) says “as long as there are posts in the query, do the following things”, and this repeats for each post until there are no more. In this case “the following things” are to execute the function the_post(), which fetches the post data from the database and makes it accessible for use via Template Tags, some of which are only available inside the loop.

Creating a custom loop

If you which to access other posts (to create a recent, related, popular or featured post list, for example) while keeping the main loop in tact you need to create a secondary custom loop. The best way to do this is to create a new query, using the WP_Query() function, which will be completely separate from the main query. Then you may loop over the posts in your new query.

New query for the custom loop

WP_Query() accepts the same parameters as query_posts(), so have a look at that Codex page to find out what parameters you need.

For this example, let’s query 5 random posts from a category called “Featured”.

$custom_loop = new WP_Query('showposts=5&category_name=Featured&orderby=rand');

Custom loop code

Now we have to loop over the posts in the new query. Since the original page query still exists and our new query is stored in the variable $custom_loop we can’t use the same code as the main loop, but it is similar. This loop is basically the same as the main loop code, but it checks our custom query variable $custom_loop for the posts.

if ( $custom_loop->have_posts() ) :
	while ( $custom_loop->have_posts() ) : $custom_loop->the_post();

		// this is where we put the code to show what we want for each post

	endwhile;
endif;

Content for the custom loop

Unless we replace // this is where we put the code to show what we want for each post with something, nothing will actually show up when we run this code.

One of the simplest (and useful) things we could do is create a list of linked post titles.

if ( $custom_loop->have_posts() ) :
	echo '<ul>';
	while ( $custom_loop->have_posts() ) : $custom_loop->the_post();

		echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';

	endwhile;
	echo '</ul>';
endif;

Note that because the code between while and endwhile gets repeated for every post, <ul> and </ul> (which start and end the unordered list) need to go outside of that part, i.e. outside of the loop.

Putting it all together

The complete code for a custom query and custom loop producing an unordered list of random featured post title link is:

$custom_loop = new WP_Query('showposts=5&category_name=Featured&orderby=rand');
if ( $custom_loop->have_posts() ) :
	echo '<ul>';
	while ( $custom_loop->have_posts() ) : $custom_loop->the_post();

		echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';

	endwhile;
	wp_reset_query();
	echo '</ul>';
endif;

This is all PHP code, so make sure that you are in a PHP environment, i.e., this code should be somewhere after <?php and before ?>. If these bits aren’t in your file where you want the custom loop to go, you can wrap the code in them.

Towards the end I’ve added wp_reset_query(), which — as the name suggests — resets the query. For some reason, when using new WP_Query(), endwhile ends the loop, but not the custom query. There’s another method on The Loop codex page, but it hasn’t always worked for me.

Sometimes I find that wp_reset_query() doesn’t quite work the way I want it to, I don’t get back to the original query. If you have that problem try if ( have_posts() ) { while ( have_posts() ) { the_post; } };. That usually works for me to reinitiate the original loop, but I’ve seen it create a recursive post loop too, so be careful.

Using the custom loop in Thesis

Using the custom loop in Thesis is pretty simple (once you have a grasp on the less simple stuff above): all you have to do is wrap the above code in a function and hook it in. If you need more info on basic function syntax check out What are hooks and how do you use them? and The basic anatomy of a custom function on the Tech for Luddites blog.

function custom_featured_posts() {
	$custom_loop = new WP_Query('showposts=5&category_name=Featured&orderby=rand');
	if ( $custom_loop->have_posts() ) :
		echo '<ul>';
		while ( $custom_loop->have_posts() ) : $custom_loop->the_post();

			echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';

		endwhile;
		wp_reset_query();
		echo '</ul>';
	endif;
}
add_action('thesis_hook_after_post','custom_featured_posts');

That code pasted into custom_functions.php will add a list of 5 random posts from a category called “Featured” to the bottom of every post.

If you only wanted to show it on single post pages you would use a conditional tag by adding if ( is_single() ) : after the first line that opens the function, and endif; before the last curly bracket that ends the function.

Add it to the sidebar

If you want to add it to the sidebar to look like your other sidebar widgets you can use the following function.

function widget_featured_posts() {
	$custom_loop = new WP_Query('showposts=5&category_name=Featured&orderby=rand');
	if ( $custom_loop->have_posts() ) :
		echo '<li class="widget widget_featured_posts">';
		echo '<h3>Featured Posts</h3>';
		echo '<ul>';
		while ( $custom_loop->have_posts() ) : $custom_loop->the_post();

			echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';

		endwhile;
		wp_reset_query();
		echo '</ul>';
		echo '</li>';
	endif;
}
add_action('thesis_hook_before_sidebar_1','widget_featured_posts');

The function has the widget code and a heading added to match the HTML format of widgets in Thesis.

How about using thumbnails instead of post titles?

Using thumbnails is a bit more attractive and intriguing than a list of post titles (not that a good post title can’t pull people in). If you use Thesis you should know about Post Images and Thumbnails; if you don’t please watch the in-post options video!

There’s a nice little snippet of code that you can use (inside the loop) to fetch the thesis post image or thumbnail:

$post_image = thesis_post_image_info('thumb');
echo $post_image['output'];

Use this in your custom loop like so.

function custom_featured_posts() {
	$custom_loop = new WP_Query('showposts=5&category_name=Featured&orderby=rand');
	if ( $custom_loop->have_posts() ) :
		echo '<strong>Featured Posts</strong>';
		echo '<ul class="featured_posts">';
		while ( $custom_loop->have_posts() ) : $custom_loop->the_post();

			$post_image = thesis_post_image_info('thumb');
			echo '<li>' . $post_image['output'] . '</li>';

		endwhile;
		wp_reset_query();
		echo '</ul>';
	endif;
}
add_action('thesis_hook_after_post','custom_featured_posts');

$post_image['output'] has the whole linked image markup with classes etc. If you just want to fetch the thumbnail URL to add your own HTML around it, use $post_image['url'].

The following CSS (to be placed in custom.css) will cause the thumbnails to be displayed horizontally next to each other.

ul.featured_posts {list-style:none;}
	ul.featured_posts li {float:left;}

A related posts query

There are several ways to determine if a post is related to another post, without getting too crazy with it, the simplest and most obvious attributes to use are categories and tags. If you haven’t been using categories and tags on your blog I would say to find a plugin that uses other means to determine relatedness, and don’t try to write your own related posts query (if you’re able to write one not based on categories and tags you probably don’t need this tutorial anyway!).

function custom_related_posts() {
global $post;
if ( is_single() ) :
	//stores the original post data
	$original_post = $post;

	//get the post category
	$category = get_the_category();
	$cat = $category[0]->cat_ID;

	//gather a list of tags
	$tags = wp_get_post_tags($post->ID);
		$taglist = '';
		if ($tags) {
			foreach ($tags as $tag) {
				$taglist .= $tag->term_id . ',';
			}
			//start loop and query stuff
			$args = array(
				'cat' => $cat,
				'tag__in' => array($taglist),
				'post__not_in' => array($post->ID),
				'showposts'=> 5,
				'caller_get_posts'=> 1
			);
			$related_posts = new WP_Query($args);
			if ( $related_posts->have_posts() ) :
				echo '<ul class="related_posts">';
				while ( $related_posts->have_posts() ) : $related_posts->the_post();

					$post_image = thesis_post_image_info('thumb');
					echo '<li><a class="post_image_link" href="' . get_permalink() . '" title="Permanent link to ' . get_the_title() . '">' . $post_image['output'] . '</a></li>';

				endwhile;
				wp_reset_query();
				echo '</ul>';
			else :
				echo '<p>Sorry, no posts found</p>';
			endif;
		}
endif;
}
add_action('thesis_hook_after_post','custom_related_posts');

This adds a list of linked thumbnails of related posts to the bottom of a single post page. I’ve added a couple of comments in there to indicate what’s happening in the code.

The $args = array(... syntax is just another way of writing out the parameters to use in WP_Query(). It can be a bit easier for humans to read when using more than a few parameters to put them into an array like that.

The tag__in parameter indicates that the related post should be tagged with any (but not necessarily all) of the same tags as the current post. post__not_in is used here to exclude the current post from the query. caller_get_posts, when set to “1″, means that sticky posts are excluded.

You may notice that I’ve added a link around $post_image['output'] because the whole function will only be shown on a single page, but $post_image['output'] doesn’t output a link on single posts and pages.

Questions?

If you are not sure which WordPress tags to use in your loop or parameters in your query, please check the WordPress codex before asking here:

• Template Tags
• query_posts()
• Conditional Tags

If you need clarification on a particular bit of the code or it doesn’t work in a particular situation, please let me know and be specific. Thanks!

Yes, drop-up is a bit of an oxymoron. Technically you pull something up and drop something down, but since we talk about drop-downs so much, and the effect of what I’m about to show you happens with the same amount of “gravity”, and I’m not an language pedant (all of the time)… it’s okay.

I was asked how one might create a menu to go in the footer and I thought, hey why not show my blog a bit of love? So, what I’m going to do here is make a drop-up menu listing archives, categories and recent posts, using built in WordPress template tags and Thesis menu classes.

This has been tested in Safari and Firefox on Mac and IE6, IE7 and IE8 on Windows. There may be some z-index issues for sub-sub-menus in IE7 and IE8, sub-sub-menus don’t really work at all in IE6 because they’re not wrapped with tables, and position of the drop-up was not perfect in IE6. I wasn’t able to solve these issues. In many cases these bugs might not be visible at all (e.g., if you don’t have any sub-sub-menus), or acceptable sacrifices if you don’t care much about IE6, which I don’t.

The lovely thing about menus in Thesis 1.6 is that all the hard work of CSS dropdowns are done for you, and since the navigation has a class of “menu” (rather than an ID of “tabs”), it’s perfectly okay to reuse this class elsewhere.

The menu code

This code needs to go in custom_functions.php (which is now conveniently accessible via the built in ‘Custom File Editor’).

function custom_footer_nav() {
?>
<ul id="footer_nav" class="menu">
	<li><a href="">Archives<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="submenu">
			<?php wp_get_archives(); ?>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="">Categories<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="submenu">
			<?php wp_list_categories('title_li='); ?>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="">Recent Posts<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="submenu">
			<?php wp_get_archives('type=postbypost&limit=5'); ?>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
</ul>
<?php
}
add_action('thesis_hook_after_footer','custom_footer_nav');

What the code does

The code is wrapped in a PHP function so that we may insert it below the footer using the thesis_hook_after_footer hook.
The HTML that builds the menu is an unordered list, with each list item containing another unordered list. Each sub-list is populated with list items from the template tags wp_get_archives and wp_list_categories, which retrieve links to archives (monthly, daily, post by post, whatever you specify) and categories and present them as list items.

It’s essential that the first unordered list have class="menu" so that it inherits all the built-in dropdown function of the Thesis navigation menu.

Before and after each sub-list is

<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->

and

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

Those are there to tell Internet Explorer not to finish the parent link before the sub-list (because IE6 only allows the :hover selector on links) and for IE6 to wrap the sub-list in a table (for positioning).

A bit of javascript for positioning

The above code will give a functional dropdown menu, but we were after a drop-up menu. To achieve that we need to position the submenus above the parent links by the same number of pixels as their height. This is not currently possible in CSS for dynamic elements (with automatically created height). You could give them a fixed height, but I’m going to use a bit of jQuery to detect the height and then position the submenu.

This should also go in custom_functions.php

if ( !is_admin() ) {
	wp_deregister_script('jquery');
	wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2');
	wp_enqueue_script('jquery');
}

function add_to_head() {
?>
<script type="text/javascript">
	$(function() {
		$("#footer_nav ul.submenu").each(function() {
			var listHeight = $(this).height();
			$(this).css("top", "-" + listHeight + "px");
		});
		$("#footer_nav > li").click(function() {
			return false;
		});
	});
</script>
<?php
}
add_action('wp_head','add_to_head');

What the javascript does

The first bit with deregister, register and enqueue script adds a Google hosted jQuery library to the pages on your blog (but not the admin pages in the dashboard).

The function add_to_head() adds some jQuery to the head of your site. It finds the submenu in our footer navigation (#footer_nav ul.submenu) and detects its height in pixels ($(this).height()) then applies CSS of top:-height; so that the submenu is positioned by its full height above the menu.

$("#footer_nav > li").click(function() {
	return false;
});

That just makes sure that nothing happens when you click on the top-level links of the footer menu because in this example they don’t go anywhere. You can remove this if you intended to link the top links to real pages.

A bit of CSS to wrap up

This goes in custom.css. All it does is rearrange some of the borders and margins that makes the dropdown navigation lists line up properly, so our drop-up lists line up better. If you have navigation borders set to 0 in the Design Options, you probably don’t need this CSS at all.

.custom #footer_nav {border-bottom:0; border-top:1px solid #ddd;}
	.custom #footer_nav li {margin-bottom:0; margin-top:-0.1em;}
		.custom #footer_nav li ul {border-bottom:0; margin-top:0;}
			.custom #footer_nav ul.children {margin-top:0.1em;}

If you need further info on the syntax of PHP, XHTML or CSS to understand the info above, please check out Tizag tutorials and W3 Schools.

I received a request to make Thesography display EXIF upon hover over an image instead of just displaying as more text in the post. While I won’t include that kind of function in the plugin at this time (because I’m not sure how best to do it while maintaining a good amount of flexibility), I can show you how to implement it to suit your posting style.

EXIF via the title attribute

A very simple (though arguably non-semantic) way of doing this could be to display a tooltip via the title attribute.

EXIF displayed in a tooltip by Thesography

When you insert your image into your WordPress post you can insert the Thesography shortcode into the title attribute via the HTML view.

<img src="http://www.example.com/wp-content/uploads/2009/10/lily.jpg" alt="lily" title="[exif id="18" show="all"]" width="800" height="529" class="aligncenter size-full wp-image-18" />

For this to work you must not have any HTML in the Thesography HTML display options. You should change the HTML options from the default to something like the following screenshot.

Thesography HTML options for tooltip display

Fancy EXIF display with javascript

The first step to making a javascript EXIF display is to use CSS to style the EXIF block the way you want it.

Default Thesography style: list with a class of "exif"

The CSS makes it look cool

EXIF displayed by Thesography with custom CSS

Using the following CSS (in your theme’s CSS file or custom.css when using the Thesis theme), along with a black 85% opacity background image, you can get a slightly transparent black sidebar over the left of your page.

You don’t have to use this particular CSS; it’s an example of the sort of thing you can do without having to recode your EXIF HTML. The javascript will apply to a range of different styles.

N.B. IE6 does not support position:fixed;, the list will appear below the image (where it was before) instead of overlayed on the page.

ul.exif {
	position:fixed;
	left:-2em;
	top:0;
	z-index:100;
	height:100%;
	width:16em;
	padding:10em 2em 2em;
	background:url(images/black-85.png) repeat;
	color:#fff;
	list-style-position:inside;
}

The javascript makes it act cool

To start, we need to add display:none; to the CSS so that ul.exif is hidden when the page loads.

The following PHP code can go in functions.php in the main directory of your theme, or in custom_functions.php if you’re using Thesis. If your theme doesn’t have a functions.php you can make one by creating a new file with that name (in a plain text editor, not MS Word or a rich text editor); add <?php at the start and paste this code after that.

if ( !is_admin() ) {
	wp_deregister_script('jquery');
	wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2');
	wp_enqueue_script('jquery');
}

function exif_popout() {
	if (is_single()) {
?>
<script type="text/javascript">
	$(function() {

		var hovered = 0;

		var maybeFadeOut = function() {
			if (hovered == 0) {
				$("ul.exif").fadeOut();
			}
		};

		var hoverOn = function() {
			$(this).parent().next("ul.exif").fadeIn();
			hovered++;
		};
		var hoverOff = function() {
			hovered--;
			setTimeout(maybeFadeOut, 0);
		};

		$(".post img").hover(hoverOn, hoverOff);
		$("ul.exif").hover(hoverOn, hoverOff);
	});
</script>
<?php
	}
}
add_action('wp_head','exif_popout');

The first chunk of code is from Digging into WordPress and it loads the latest (at time of writing) jQuery library, hosted by Google. Using externally hosted libraries can be good because you have easy access to the latest files and because they can load asynchronously (i.e., while something from your server is loading, this can load too because it’s on another server, things from your server only load one at a time).

The second chunk of code inserts javascript into the head of our HTML WordPress page.

exif_popout() step by step

If you need more info about basic PHP syntax try the Tizag PHP tutorial. On Tizag.com you can also find HTML and CSS tutorials.

The function exif_popout() is designed to load only on single post pages (if (is_single()) determines that). It is also designed to be useful when there are multiple images on the page, each with their own EXIF that comes right after the image in the post.

$(function() { ... }); instructs jQuery to run our function when the webpage has completed loading.

var hovered = 0; is a variable that acts as a counter getting increased or decreased as we move our mouse over and off the image or the EXIF block. It helps determine how the movement of the mouse indicates whether the EXIF should be visible or not.

maybeFadeOut is a function that when called says, if hovered is equal to zero all EXIF blocks should be hidden (with a fade out effect).

hoverOn is a function that when called takes the element it acts upon ($(this), in this case it’s the image), then it finds that element’s parent element (using parent(), which in WordPress posts will be a paragraph, because images on their own line get wrapped in a paragraph). It then finds the ul.class that is next to that paragraph (next("ul.exif")) and displays it with a fade in effect. The hovered counter is also increased.

hoverOff is a function that when called decreases the hovered counter and activates the maybeFadeOut function. maybeFadeOut is wrapped with setTimeout, which adds a delay (of zero milliseconds) to the execution of maybeFadeOut and moves it to the end of the current action queue; allowing the rest of the javascript to execute before it. This allows us to move our mouse off the image and onto the EXIF block, or off the block onto the image, without the EXIF fading out and back in again (i.e., the fade out is delayed until we really want it to disappear — when we’re not hovering on the image or the EXIF).

$(".post img").hover(hoverOn, hoverOff);
$("ul.exif").hover(hoverOn, hoverOff);
Those two lines activate hoverOn and hoverOff when you hover your mouse on and off .post img and ul.exif.

.post is a class assigned to the element containing your image. If your theme uses a different class for your posts you need to change that in the javascript. Also, ul.exif is an unordered list with a class of “exif”, which is the default display for Thesography. If you have changed the way that Thesography displays, you will need to change ul.exif to whatever element your EXIF is presented with.

What if I’m using auto-insertion in Thesis

If you’re using Thesography auto-insertion with Thesis and you have some text in between the image and the EXIF the javascript won’t work as written because ul.exif won’t be the next thing after the image paragraph, there will be another paragraph (or more) in between. However, if you’re using auto-insertion it means you’ve only got one lot of EXIF on the page and you can change $(this).parent().next("ul.exif").fadeIn(); to $("ul.exif").fadeIn();.

What if this doesn’t work with my post layout?

There are so many different ways that your images and EXIF could be laid out in a post; it’s impossible for me to predict them all.

If you want to wrap your image and EXIF in a div together, that might simplify things for you and you could look into using the siblings selector instead of parent().next("ul.exif"), or perhaps parent().children("ul.exif").

Alternatively, while writing your post you could wrap each image and its related EXIF in paragraphs or divs with a unique class for each pair, and then use the class attribute as a variable to identify which EXIF should be displayed.

For more info on how to identify and navigate elements with jQuery, check the jQuery documentation; particularly Selectors and Traversing.

If you have trouble making the javascript fit your posting style and ask for help, please be very specific with the way your posts are displayed. A link to a direct example or the source code of an example (perhaps copied into Pastebin) is preferable.