WP Post Thumbnail plugin adds an image upload, crop and save panel in ‘Write Post’ screen. It allows you to easily upload a .jpg image file. Once the image file is uploaded, you can crop it before saving it as your thumbnail. That’s it.

Spend less time messing around with Photoshop everytime you need to make a thumbnail (or two) for your post. Also, saves you time and trouble from manually copy-and-pasting uploaded image URLs into custom key value fields.

For theme developers, particularly magazine-style WordPress theme developers, you can configure up to 3 different thumbnails to be used in each post. For instance,

- a big 320px by 180px widescreen thumbnail for leading featured post to be displayed prominently on the front page.

- a square 125px by 125px thumbnail for recent posts.

Dimensions as varied as your theme requires can be easily configured in an XML file. Save the file as ‘wppt.xml‘ and put it in your theme’s folder (ideally, the main folder but any folder will do). WP Post Thumbnail will scan your theme folders, look for your theme’s ‘wppt.xml‘ file and read your theme’s thumbnail(s) configuration.

Screenshots

1. WP Post Thumbnail default thumbnail in use

2. WP Post Thumbnail panel in ‘Write Post’ screen

3. WP Post Thumbnail configured to handle 3 thumbnails with different dimensions in a WordPress theme

NOTE: For a video demo, click here.

Installation

1. Copy the `wp-post-thumbnail` folder into your ‘wp-content/plugins’ folder.
2. Activate the plugin through the ‘Plugins’ menu in WordPress. That’s it.

Note: This plugin requires your upload folder (default: wp-content/uploads/ ) to be writable. Make sure this folder is write access enabled.

The default thumbnail is 160px by 90px which floats to the top left corner of the content of your post.

If your WordPress blog uses a theme that comes with pre-configured set of thumbnail(s) to work with this plugin, the theme’s folder should contain an XML file called ‘wppt.xml‘ created by the theme developer. In this case, it will override the default thumbnail. For theme developers, more information on how to configure WP Post Thumbnail for your WordPress theme can be found in FAQ.

Frequently Asked Questions

Q: I am developing a WordPress theme. How do I configure WP Post Thumbnail to work specifically for my theme?

Theme developer’s flow illustration (250Kb).
Opens in new window.

A: This is the purpose of which WP Post Thumbnail is written for. The current version of this plugin assumes that you, as theme developer, have basic knowledge of writing a configuration file in XML format and calling/placing the thumbnails’ custom field value within your theme.

For the visually inclined, click the thumbnail on the right to open an image that illustrates basically how theme developers can use WP Post Thumbnail to handle thumbnail(s) in their WordPress themes.

I have included a sample XML configuration file in the plugin’s main folder called ‘wppt.xml‘:

wppt.xml:

<?xml version="1.0" encoding="UTF-8"?>
<wp-post-thumbnail>

	<pft_widescreen>
		<name>Widescreen</name>
		<desc>Recent posts</desc>
		<width>270</width>
		<height>110</height>
	</pft_widescreen>

	<pft_square>
		<name>Square</name>
		<desc>Category post and more</desc>
		<width>150</width>
		<height>150</height>
	</pft_square>

	<pft_rectangle>
		<name>Rectangle</name>
		<desc>Latest featured post</desc>
		<width>390</width>
		<height>270</height>
	</pft_rectangle>

</wp-post-thumbnail>

The above sample XML file configures 3 different thumbnails titled <pft_widescreen>, <pft_square> and <pft_rectangle>. The node titles are also used as custom field keys to call specific thumbnails to appear in your theme. For instance, to get the square thumbnail:

Say, in your WordPress theme’s single.php:

<img src="<?php get_post_meta($post->ID, 'pft_square', true); ?>" />

Each thumbnail has four properties:

<name> specifies a friendly name to appear in the thumbnail tab in ‘Write Post’ area.
<desc> a short description about the thumbnail
<width> thumbnail width in pixels
<height> thumbnail height in pixels

IMPORTANT: All fields are required!

Save your file as ‘wppt.xml‘ and put it in your theme’s folder (any folder will do). Blogs that uses your theme, and has WP Post Thumbnail plugin activated, will detect your ‘wppt.xml‘ configuration file.

Q: Where are all the cropped thumbnails stored?

A: They are stored in ‘wp-post-thumbnail‘ folder inside your WordPress default upload path. Eg. '/wp-content/uploads/wp-post-thumbnail' by default.

Doing away with manual custom fields

I’m capturing the steps to upload and crop various formats of thumbnails for WordPress entries. It is one of the main features I’m building for use in my free WordPress theme. Previously, my solution for assigning thumbnails to WordPress entries was via “custom fields“. After a while of using custom fields, it began to feel tedious and I looked for a better way to handle thumbnails.

On top of that, one of my themes in development allows the use of up to 3 thumbnail formats (widescreen, square and rectangle) for every WordPress entries. Can you imagine every time you write a post, you have to fire up Photoshop to create three thumbnails. Each of them in different dimensions and aspect ratios. Uploading them to your blog. And finally copy-and-paste their URLs to custom keys. It certainly needs a more streamlined and convenient way of handling thumbnails. Manually doing it the custom field way just won’t cut it in the long run.

On-the-fly upload, resize and crop thumbnails

As you can see from the video clip, bloggers can upload a jpg image file, crop it and save it as a thumbnail. Once the blogger clicks ‘Save’ thumbnail, the URL is automatically assigned to a designated custom field behind the scene. Hence, the process of entering the thumbnail’s URL into a custom field has been automated.

On top of that, if you’re an experienced theme developer, you can configure more than one thumbnail to be used for each post. In the video clip, I’ve configured up to three thumbnails for each post.

I hope to wrap up this feature soon and implement it into my WordPress theme. Do drop by again. Instead of building this into my themes, I’m going to develop it as a WordPress plugin. I’ll be hosting the plugin at WordPress official plugin directory and the more information can be found in my next post: WP Post Thumbnail - WordPress Plugin

Note: Bear with the lacklustre video clip quality as this is my first time recording and producing an embedded flash video using Camtasia Studio 5. There’s still a slight learning curve despite it already being very user-friendly. I hope to be able to zoom-and-pan smoother, add narratives and find the best settings to produce Youtube High Definition clips soon.

As I look back the past few weeks of testing 2.6 on several blogs, I’m delighted to say it’s been a wonderfully smooth experience. Unlike the upgrade to WordPress 2.5, my sites did not experience much trouble when using WordPress 2.6. I deployed 2.6 on several websites and found it was a breeze to work with. It played well with my themes too. Plugins did not break down. Tonight I’ll be upgrading all my sites running WordPress to 2.6.1 and I hope I won’t run into any problems.

The aim of this short tutorial is help you build a simple multi-level drop-down menu in your WordPress theme using jQuery’s JavaScript library to ensure cross-browser compatibility.

When I first started to design WordPress themes, I went the pure-CSS way. I found a variety of cross-browser CSS-only drop-down menus at Stu Nicholls CSS Play and implemented his solutions into my themes. Some people do not like the way Stu hacked CSS to ensure cross-browser compatibility. It may be ugly but it works. And you can’t really use WordPress wp_list_pages() tag with Stu Nicholl’s CSS because the tag’s parameters could not reproduce the CSS hacks needed to make it work.

Later on, as I started to embrace more JavaScript in my WordPress themes, I decided to built my drop-down menu with a bit of jQuery Javascript help. It saved a lot of effort. No more unnecessary CSS hacks. Plays nice with WordPress wp_list_pages() tag. And WordPress installation already comes with jQuery library included. This is one of the main reasons why I chose jQuery among other Javascript libraries.

Anyway, I’m not here to convince you to use JavaScript for your WordPress drop-down menus. To those of you who are would like to use jQuery for your multi-level WordPress drop-down menu, I hope you’ll find the short tutorial below helpful.

Add this bit of JavaScript between the <head></head> HTML tags in your WordPress theme’s header.php (thanks to kriesi.at):

// enqueue WordPress own jquery library
<?php wp_enqueue_script('jquery'); ?>

<script type='text/javascript'>
jQuery(" #dropmenu ul ").css({display: "none"}); // Opera Fix
jQuery(" #dropmenu li").hover(function(){
		jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(268);
		},function(){
		jQuery(this).find('ul:first').css({visibility: "hidden"});
		});
</script>

The HTML. We will list the pages using WordPress default wp_list_pages() tag. I used it in header.php:

<ul id="dropmenu">
<?php wp_list_pages('sort_column=menu_order&amp;amp;title_li='); ?>
</ul>

Now here’s the CSS:

#dropmenu, #dropmenu ul {margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; z-index:300; width:100%; background:#fff; font-weight:bold;}
#dropmenu a {display:block; padding:0.25em 8px; color:#686868; border-right:1px solid #c8c8c8; text-decoration:none; background:#fff;}
#dropmenu a:hover {background:#888; color:#fff;}
#dropmenu li {float:left; position:relative;}
#dropmenu li.logo a {border:none; border-top:4px solid #ffbe10; background:#f85c00; color:#ffbe10; font-size:1.68em; line-height:1.48em; font-weight:bold; padding:0 0.68em 1px 0.68em; margin:-8px 0 0 -1px; -moz-border-radius:0 0 7px 7px; -webkit-border-radius:0 0 7px 7px;}
#dropmenu ul {position:absolute; display:none; width:12em; top:1.9em;}
#dropmenu ul a {border-left:1px solid #c8c8c8;}
#dropmenu li ul {border-top:1px solid #c8c8c8; width:13.7em;}
#dropmenu li ul a {width:12em; height:auto; float:left;  border-bottom:1px solid #c8c8c8;}
#dropmenu ul ul {top:auto;}
#dropmenu li ul ul {left:12em; margin:0px 0 0 10px;}
#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {display:none;}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {display:block;}

The CSS styling provided is similar to the demo site. You can view a demo of WordPress jQuery Multi-Level Drop-Down Menu in action here.

… or perhaps entries posted in the last 48 hours? Ever wanted to put a small image label next to your post telling readers “Hey, this post is barely 2 days old. It’s new!”

Of course, putting a new post label is nothing new. But again, this tiny feature does not come with default WordPress. Luckily with just one or two lines of PHP code, you can modify your WordPress theme to label your new entries automatically.

The following code sample shows how you can label your posts with a tiny image ‘new.gif’ if your post is less than 2 days old. Within your latest entries Loop, we’ll put the ‘new.gif’ image label right new to your post title:

...
...
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php if ( (time()-get_the_time('U')) <= (2*86400) ) { ?>
<img class="new_entry_label" src="<?php bloginfo('template_directory'); ?>/images/new.gif" alt="(New Entry)" title="(New Entry)" />
<?php } ?>
...
...

That’s it. Click here to see it in action on one of my WordPress theme demos. Notice how the newer posts’ title are labelled with a new.gif image.

Now for some explanation on the code used …

PHP time() function returns the current time in Unix Epoch format which looks like this:

12217984786

The function get_the_time('U') returns the entry posted time in Unix Epoch format. Now that both current time ( time() ) and entry posted time ( get_the_time(’U') ) is in Unix Epoch format, we can easily calculate the time difference by substracting current time with entry posted time;

time()-get_the_time('U')

Finally, we evaluate if the difference is less than 2 days (again converted to Unix Epoch format by multiplying with 86400 ), the condition is true and the tag is executed which puts “new.gif” image label next to your post title.

<?php if ( (time()-get_the_time('U')) <= (2*86400) ) { ?>
	<img class="new_entry_label" src="<?php bloginfo('template_directory'); ?>/images/new.gif" alt="(New Entry)" title="(New Entry)" />
<?php } ?>

If you want to label 7-day old posts as new instead, just change (2*86400) to (7*86400). That’s it.

WordPress Release Candidate 1 has just been released two days ago so I really doubt they’ll make it today. Of course, I’d be glad to be proven wrong this time.

I’ve got 4 blogs currently using WordPress 2.5.1 and I’ve yet to test any beta releases or RC1 of WordPress 2.6 on any of my blogs. When 2.6 hit the mirrors, be it tonight or at a later date, I’ll try it out in one of my blogs to see if I should upgrade the rest to 2.6.

For me, the new features in WordPress 2.6 worth checking out is image captioning, theme preview and an improved media uploader.

What we’re going to do here is for every top-level categories, we will:

1. display the category title in bold and the category description.
2. list the latest post title prominently displayed as the first entry and short excerpt.
3. list is followed by four or five post titles sorted by date.
4. finally all children/subcategories of the category listed at the bottom.

Something like what we have here on the right illustration. Using WordPress, I’ve always wanted to replicate the myriad of ways most news and magazine-style websites present its contents.

If you are familiar with wp_list_categories(), which is the one of main category tags that handles how categories are formatted and displayed, you’ll realise wp_list_categories() alone is not enough. We’ll also use get_categories(), get_cat_ID()and a wpdb query direct into WordPress’s database.

Also, I think the coding in this article is more suited for WordPress themers who prefer to hard-code it into their themes. The solution is a very straightforward sequential code where you can just copy and paste it into your sidebar.php (or wherever you wish) for instance.

Let’s get down to the source codes …

CSS stylesheet

ul.category_list {width:300px; list-style:none; padding:0; margin:0;}
.category_title {background:#333; color:#fff; padding:0.2em 0.5em; font-size:1em; margin:0; text-transform:uppercase;}
.category_box {background:#f8f8f8; border:1px solid #333; border-width:0 1px 1px 1px; margin:0 0 2em 0;}
.category_description {background:#aaa; border-bottom:3px solid #ccc; color:#eee; font-style:italic; display:block; padding:0.5em; font-size:0.9em; font-weight:bold;}
ul.category_posts {list-style:none; margin:0 1em; padding:0; font-size:0.8em;}
ul.category_posts li {border-bottom:1px dotted #bbb; padding:0.75em 0;}
ul.category_posts li.last {border:none; padding:0.5em 0; margin:0 0 1em 0;}
ul.category_posts li a {color:#333;}
ul.category_posts li a.more_articles {text-decoration:underline; font-weight:bold;}
ul.subcategory_list {color:#aaa; padding:1em; margin:0; background:#eee; border-top:1px solid #ccc; font-size:0.8em; font-weight:bold;}
ul.subcategory_list li {display:inline; margin:0 0 0 0.75em;}
ul.subcategory_list li a {color:#333;}
.first_post {font-size:1.2em; font-weight:bold;}
.first_post_excerpt {color:#888; font-weight:normal; font-style:italic;}

PHP and HTML markup

<?php // get category IDs of Featured, Uncategorized and Personal for exclusion
$categories_to_exclude = get_cat_ID('featured').','.get_cat_ID('uncategorized').','.get_cat_ID('personal');

// get category IDs for all subcategories (categories where parent is not 0) for exclusion
$subcats = $wpdb->get_results("SELECT term_id FROM $wpdb->term_taxonomy WHERE taxonomy='Category' AND parent>0");
foreach ((array)$subcats as $subcat) { $categories_to_exclude .= ','.$subcat->term_id; }

// get all categories minus excluded categories
$cats = get_categories('exclude='.$categories_to_exclude.'&amp;orderyby=name&amp;hide_empty=0'); ?>

<h3>CATEGORIES</h3>

<ul class="category_list">

<?php foreach ((array)$categories as $category) { ?>
	<li class="category_box"><h5 class="category_title">• <?php echo $category->cat_name; ?></h5>
			<div class="category_description">“<?php echo $category->category_description; ?>” </div>

			<?php $the_query = new WP_Query('cat='.$category->cat_ID.'&amp;showposts=5&amp;orderby=post_date');
			$first = true; ?>

			<ul class="category_posts">
			<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>

				<?php if ($first) { ?>
					<li class="first_post"><a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title(); ?>" ><?php the_title(); ?></a><br />
					<small class="first_post_excerpt"><?php echo strip_tags(get_the_excerpt(), '<a><strong>'); ?></small>
				<?php $first = false;
				} else { ?>
					<li><a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title(); ?>" ><?php the_title(); ?></a>
				<?php } ?>
				</li>
			<?php endwhile; ?>
			<li class="last"><a class="more_articles" href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title(); ?>" >More articles in <?php echo $category->cat_name; ?> »</a></li>
			</ul>

		<?php $sub_categories =  wp_list_categories('echo=0&amp;orderby=name&amp;title_li=&amp;hierarchical=0&amp;child_of='.$category->cat_ID);
		if ($sub_categories != "<li>No categories</li>") { ?>
			<ul class="subcategory_list">See Also: <?php echo $sub_categories; ?></ul>
		<?php } ?>
	</li>
<?php } ?>
</ul>

I hope you find this short tutorial useful. Thanks for reading!