Jes.Gs v2.0 » Recommended

WP Plugin: Thumbnail Updater

Jess G. — Tue, 31 Aug 2010 02:48:38 +0000

WordPress 2.9 came with a number of nice new features, specifically the ability to assign thumbnails to posts, and to specify the size of those thumbnails by using functions like add_image_size() in your theme’s functions.php file. Unfortunately, add_image_size() isn’t backwards compatible, meaning that any images that were uploaded before the new sizes were created will not have a corresponding thumbnail. Instead, WordPress will grab the size that most closely matches the post thumbnail size, which is not always ideal.

I created a plugin called Thumbnail Updater to address this problem. Thumbnail Updater adds a button to the Edit Media page for each image that says “Update Image Sizes.” Just click the button to update your thumbnails—it can take a while depending on the size of the images and the server speed.

*new* Download: Thumbnail Updater 1.0

Download: Thumbnail Updater 0.1-beta

WordPress: Using page_css_class

Jess G. — Sat, 27 Feb 2010 04:30:58 +0000

I’m pretty sure that I’m not the only person who is somewhat annoyed by the way WordPress handles the page-item classes for Page lists. Particularly if you’re like me and you use WordPress as a CMS. It would be a lot easier to deal with page-item-pagename than page-item-1. For one, page-item-pagename is easier to remember. Well, I bet you didn’t know that you can change that! Yep, that’s right. You can, and it’s all because of a relatively unknown hook that was introduced in WordPress 2.8 called page_css_class, and here is very quick and dirty way of changing the page item classes to match the pagename and not the page ID.

Open or create a functions.php file in your theme directory.
Then paste the code below into your functions.php file:


add_filter('page_css_class', 'custom_page_css_class', 10, 2);
/**
 *	custom_page_css_class()
 *	Hooks into page_css_class and modifies the page item class so that
 *	it uses the name of the page instead of the id.
 *
 *	@global int $id.		The ID of the page being viewed. Needed to set current_page_item.
 *	@param array $class.	The page css class being modified, passed as an array from Walker_Page
 *	@param object $page.	The page object passed from Walker_Page
 *	@return array			Returns the new page css class.
 */
function custom_page_css_class($class, $page) {
	global $id;
 
	if ($page->ID == $id)
		/* checks if the page ID matches the current page and if it does,
		    adds the current_page_item class
		*/
		$t = array( 'page_item', 'page-item-'.$page->post_name, 'current_page_item');
	else
		$t = array( 'page_item', 'page-item-'.$page->post_name);
 
	return $t;
 
}
?>

There you go! Yes, it’s that easy.

What the example does is it duplicates what’s happening in the WordPress source code but instead of using $page->ID, it’s using $page->post_name. It assembles the classes into an array and then returns it to be echo-ed out when the pagenav is generated. Note that $class isn’t used but it is necessary to have it as one of the parameters because WordPress passes it to the hook by default and we need the $page object in order to make the example work.

Happy coding!

Fixing ThickBox in WordPress 2.8

Jess G. — Sat, 12 Sep 2009 20:45:49 +0000

If you’re using ThickBox then you’ve probably noticed that ThickBox is technically broken in WordPress 2.8. After trial-and-error, I’ve tracked down the problems and this is what’s happening and here is how to fix it.

Edit: February 27th, 2009. Finally had to time to check but the missing ThickBox CSS is still a problem in WordPress 2.9. My guess is that it might not be an actual bug but a feature to accommodate designers creating their own custom ThickBox designs.

WordPress 2.8 requires themes to have wp_footer()

WP 2.8 introduced a new option when using wp_enqueue_script() to load JavaScript files. It allows you the option of having the scripts load in the footer, which is why WordPress themes now require wp_footer() to work properly. However, that wasn’t my problem since I’d always added wp_head(), wp_meta() and wp_footer() as a matter of course when designing themes. So if the absence or presence of wp_footer() wasn’t the problem, then what was really going on?

What’s with ThickBox anyway?

Now, for the problem with ThickBox. So we know that it is being loaded, just in the footer. What I have found is that WordPress is not loading all of the files that ThickBox needs to work. jQuery is being loaded, so that can be ruled out. What isn’t being loaded is the CSS file that ThickBox needs to format its popup window. Also, another part of the problem is the ThickBox.js file itself has the paths to the images it needs set to relative paths.

How we fix it

Starting off, if you haven’t added the code to load ThickBox, go ahead and add wp_enqueue_script( 'jquery' ) and wp_enqueue_script( 'thickbox' ) to your header. Now what we do is we add wp_enqueue_style(‘thickbox’) to our section. I’ve seen people asking for wp_enqueue_css and “lamenting” the fact there isn’t such a function but there actually is, it is wp_enqueue_style(). The second part requires adding to an existing functions.php file or creating a functions.php if it doesn’t exist with your current theme. In your functions.php file, copy and paste this code:

add_action('wp_footer', 'load_tb_fix');
 
function load_tb_fix() {
	echo "\n" . ''. "\n";
}

This fixes those first few lines of the ThickBox.js file that calls the images that ThickBox uses, and it is inserted in the footer after the call that inserts the reference to ThickBox.js.

So now, ThickBox functionality should be restored. Quick recap:

Add the code below to your section:


wp_enqueue_script( 'jquery' );
wp_enqueue_style( 'thickbox' );
wp_enqueue_script( 'thickbox' );
?>

Then add this code to your functions.php file:


 
add_action('wp_footer', 'load_tb_fix');
 
function load_tb_fix() {
	echo "\n" . ''. "\n";
}
?>

Conclusion

Had do some research to figure out what was going on besides just looking at my own source code. The first reference to this issue I found was at this link: ThickBox and jQuery in WordPress 2.8, then I figured out how to fix the ThickBox dependency image loading issues by looking at the code for the NextGen Gallery plugin.

Good luck! And enjoy your restored ThickBox functionality