I bet there’s a plugin for that.

The Image Editor was introduced in WordPress 2.9, and was a pretty awesome feature. It still is, but I have one complaint: it’s not extendable. At least not in any way that I’ve been able to find from reviewing the source code. It’s actually a shame, really. It’s like the Image Editor was just dropped in and forgotten. A part of that complaint, is that unlike the Scissors plugin (which — from I remember reading at the time — the Image Editor was based on) which allows you to edit any of the available thumbnail sizes, the Image Editor gives you an all-or-nothing option.

Being able to tweak each thumbnail individually is an important feature and it’s too bad that it was left out. Sure, I could use Scissors but I really don’t like Scissors’ interface. There is already a post on WordPress.org’s Extend/Ideas forum on this very subject, though it was last updated about 4 months ago.

That being said, with development on 3.4 currently starting, it might be worthwhile to see if modifications to the Image Editor can be made to allow it to be extended. The next question would be what parts can be extended, and what can’t be extended. Hey, all it takes are a few well-placed hooks!

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

<?php
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!

• WordPress hook directory page_css_class
• WordPress Classes.php Source Reference
• WordPress Support: Add Link with Class to Page Menu

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 <head> 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" . '<script type="text/javascript">tb_pathToImage = "' . get_option('siteurl') . '/wp-includes/js/thickbox/loadingAnimation.gif";tb_closeImage = "' . get_option('siteurl') . '/wp-includes/js/thickbox/tb-close.png";</script>'. "\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:

1. Add the code below to your <head> section:

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

2. Then add this code to your functions.php file:

   1 2 3 4 5 6 7 8

   <?php   add_action('wp_footer', 'load_tb_fix');   function load_tb_fix() { echo "\n" . '<script type="text/javascript">tb_pathToImage = "' . get_option('siteurl') . '/wp-includes/js/thickbox/loadingAnimation.gif";tb_closeImage = "' . get_option('siteurl') . '/wp-includes/js/thickbox/tb-close.png";</script>'. "\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

1. Just unzip into your WordPress plugins directory
2. Open the WordPress plugins page
3. Activate the YaECP plugin
4. Look for the new page called “Exclude Categories” in the Posts section.
5. Finally, select which categories you wish to exclude from the front page.

I whipped this plugin up on the spur-of-the-moment to deal with some issues that I found in the beta version of Manga+Press 2.5 having to do with it’s new exclude comic categories from the front page option. Apparently, if you want to exclude another category as well as the comic category, you can’t call query_posts() again because it will reset the Manga+Press query.

The plugin was tested on WordPress 2.8 so I’m not so sure how it’ll work with versions older than 2.8. I am also not so sure how the plugin will work with specialized themes that have multiple loops, such as magazine-style WordPress themes. Either way, hope someone gets some use out of it.

How to use LightGallery? First off, start by inserting this code at the top of any page you’d like to display your gallery:

Followed by:

$path = '/path/to/my/images/folder';
$thmb_size = 'thumb-height thumb-width';
 
$gallery = new Gallery($path, $thmb_size);
$gallery->Output();

$path is obviously the full path pointing to the directory where your images reside. Replace thumb-height and thumb-width with the desired height and width of your thumbnail. The beauty of LightGallery is that it is one PHP Class that can be used as many times as need be. If you need to create a new gallery, all you have to do is create a new directory, upload your images to that directory and create a new Gallery object with $path set to that path.

Some limitations include:
The gallery directory has to be one level below the root directory where gallery.php resides. Another limitation is that LightGallery uses jQuery and ThickBox and ThickBox is hard-coded into LightGallery, though I plan to change that at a later date.

Tips:
If you want your thumbnails to display tool-tips and have captions in ThickBox, edit the album.xml file that is created in the directory where your images reside. Specifically edit the and tags so that they contain your desired title and description. Another planned edition to LightGallery is a single-user backend to allow easy editing of titles, descriptions and possibly deletion of images.

$xmldoc = new DOMDocument(); // create a new DOMDocument object.

Yep, it’s that simple. Now here comes the fun part. This scenario is going to assume that we’re just creating a new XML object.

$xmldoc->formatOutput = true; //Nicely formats output with indentation and extra space.
 
$root = $xmldoc->createElement( 'xml' ); //create a root element for your XML output
$xmldoc->appendChild( $root );
 
// Now, we're going to create a few child elements to go with it
$child1 = $xmldoc->createElement( 'child_one', 'Child One' );
$root->appendChild( $child1 );
 
$child2 = $xmldoc->createElement( 'child_two', 'Child Two' );
$root->appendChild( $child2 );
 
echo $xmldoc->saveXML(); //output to screen...

Pretty simple and straightforward. Now, if we want to save to a file, we do this:

$xmldoc->save( 'my-xml-file.xml' );

If we want to open and write to a file:

$xmldoc = new DOMDocument(); // create a new DOMDocument object.
$xmldoc->load( 'my-xml-file.xml' );
$xmldoc->formatOutput = true;
$root = $xmldoc->documentElement; // Conviently allows direct access to the root element.
 
$b = $xmldoc->createElement( 'another_one', 'another child' );
$root->appendChild( $b );
 
$xmldoc->save( 'my-xml-file.xml' );

Very quick and straightforward. I hope this helps anyone who was wondering how to use XML and PHP together.

For more information see:

• PHP Manual: XML Manipulation
• Kirupa.com: PHP and XML
• IBM.com: XML for PHP Developers, Part 1 (three-part series)
• DynamicDrive Forums: Read and Write XML with PHP (forum-post, this is what got me started)