post_thumbnail_box2

Post thumbnails and default images

In my previous post about post thumbnails with posts excerpts I shared code to display the first image of your post as a thumbnail in your main page and it displayed a default image if the post didn’t have any images in it.

Now that WordPress 2.9 was released we can use new functions to display the post image as a thumbnail. This feature is only available if it is enabled specifically in the theme, so to enable it all you have to do is add this 2 lines to the functions.php file of your theme.

if ( function_exists(‘add_theme_support’) )
add_theme_support(‘post-thumbnails’);

This will enable the post thumbnail functionality and add a new box in your new post pages to set the post thumbnail

post_thumbnail_box

post_thumbnail_box2

To set an image as thumbnail you upload it like any other image or select it from your media library and at the bottom you will see the text “Use as thumbnail”, click on it and that’s it.

post_thumbnail_3

Now, to display the thumbnail in your theme you have to use the function the_post_thumbnail(),  the basic usage should be :


if ( current_theme_supports( 'post-thumbnails' ) )
the_post_thumbnail(array(100,100));

Which is pretty simple, and integrated  into the code we have from the previous post about thumbnails should look like this:


if ( function_exists('has_post_thumbnail') && has_post_thumbnail() ) {
the_post_thumbnail(array(100,100));
} else {
postimage(100,75,'image for: '.get_the_title(),'image');
}

WordPress 2.9 – Carmen

blue-mAfter a short beta testing WordPress 2.9 “Carmen” is out and available for download or you can use the automatic upgrade (Tools > Upgrade) .

This release is named in honor of the jazz vocalist Carmen McRae.

Some users have reported issues with this version and incompatibilities with some plugins (RSS, Cron and scheduled posts, pings). Is recommended that you do a full backup of your database before attempting the upgrade.

And if you find issues with your WordPress installation after uploading the files of this new version or with the automatic upgrade check this post at Semiologic that provides 3 patched files that solve some of the issues that most users are facing.

I think that WordPress to release version 2.9.1 in a few days to properly address this issues.

WordPress checklist before going live

Changing this site backend to WordPress made me think again the list of things to check before flipping the switch to “Live”. Some are obvious, some are

Templates

404.php
If your theme doesn’t have a 404.php template it will redirect to the main page, and the visitor will wonder why the page he was expecting to see is replaced with the main page of the site.

About page
Don’t forget to replace the default page text created by WordPress for the about page, you can find over a million pages with the exact same text.

CSS

Printer friendly pages or CSS
Try printing some pages of your site and verify that the result is readable. Consider creating an alternate CSS if necessary

WordPress Standard CSS classes
Don’t forget to include the standard CSS classes from WordPress (.alignleft, .alignright, .aligncenter, .wp‐caption, .cat‐item, .currentcat, etc…)

Browser compatibility
The goal is to give the visitor the best browsing experience possible, but we have to keep in mind that not all browsers are the same.  Test in different browsers, but remember that every browser has different grades of support for standards.

RSS

Verify that the RSS is reachable or redirects to Feedburner if you are going to use Feedburner.

robots.txt

Make sure robots.txt file is free from errors that can keep the search engines from indexing your site. And the pages that are not intended to be listed in search results should be disallowed in robots.txt. The easiest way to handle this without having to read a lot is with a plugin (for example: Robots.txt WordPress Plugin ).

Sitemap

Site maps are often neglected. Whenever pages are added or removed from your site make sure the site map gets updated as well. Again the easiest way to manage this is with a plugin (for example: Google XML Sitemaps)

Forms

If you provide a contact form that deliver messages to your email box, verify that you receive the email. Also if you use a form to gather email addresses to build a list for a newsletter don’t forget to verify that the email is sent and the information is saved to a database with the correct information from the form.

Site search

This is an important element of on-site usability. Verify that the search functionality works as expected and the template renders the results. If it doesn’t work it does more harm than good. You can use the search functionality build into WordPress or implement a 3rd party service like Google Custom Search.

Redirects

If you are migrating an old site or a site from another domain don’t forget to set redirects (using .htaccess or with a plugin) and verify that the redirects work by checking a couple pages or posts using the old URL and verifying that you end at the right (new) URL.

Statistics scripts

Check that the script needed to track visits is included on each page, is irritating when you lose statistics because you forgot to include the tracker script.

In the WordPress Codex about Theme Development Checklist are more things to consider before declaring a site ready to go live, please note that I didn’t finished, because you still need to check if the HTML code is valid, add tracking & statistics code, load times optimization, etc…

And I’m sure everyone has a similar list, please add a comment and share the things you check.

Query Debug Info plugin

query_debug_info_query

I wanted to have this plugin when I was beginning with WordPress and I did have to use multiple loops in one template.

This simple plugin adds some overlay tabs in the left side of the screen with information about the constants of the theme like (WP_CONTENT_DIR, WP_PLUGIN_DIR, TEMPLATEPATH, STYLESHEETPATH, etc..) and infomation useful to debug your loops like the of type you are currently viewing, the query results (post_count, found_posts), the query vars used and the query used (the raw SQL generated by WordPress.

How to use this plugin

After activating the plugin you can add the function call in your template to display information about the main query:

<?php if (function_exists(‘debuginfo’)) { debuginfo(“Main”); }?>

Add additional calls after creating a new WP_Query object, if you want to track a specific variable you can pass it to the function, example:

<?php $my_query = new WP_Query(“showposts=3&category_name=Featured&order=DESC”); ?>
<?php if (function_exists(‘debuginfo’)) { debuginfo(“Secondary”,2,$my_query); }?>

The information is only displayed if you are logged in as an administrator.

More screenshots of this plugin and the download link in the Query debug info page or you can download it from the Query debug info page in wordpress.org

bitly_share_links_options

Bitly shared links plugin

This will be the first plugin I will publish, so it will be a little simple and maybe unpolished.

I built this plugin because I see that all the links posted in twitter are shortened by bit.ly or a similar service. There are many plugins that insert at the bottom of the posts links to share the post in various services but the link sent is not shortened. By default a long URL sent to twitter is shortened using bit.ly but one of the useful features of bit.ly is that you can get statistics of how many clicks the shortened URL received, from where and when.

How to use it:

bitly_share_links_optionsOnce you have installed and activated the plugin you have to enter your login and bit.ly API key in the ‘Bit.ly Share Links Options’ page and select what short URL you want to use (bit.ly or j.mp) and if you want the links to open in a new window/tab.

Now when you publish a new post the plugin will send a request to bit.ly to generate the short URL and store it in the post meta. When a user goes to the post page at the bottom of the post the plugin will insert links to share your posts in the most popular social media sites (facebook, twitter, stumbleupon, etc..).

bitly_share_links_post_editIf you have the sociable plugin installed the plugin will not display a second set of links, instead it will hook into the sociable plugin and replace the long URL with the short url generated by bit.ly.

The plugin also retrieves the stats for the short URL, you can see the stats in the edit post page.

Download Bitly shared links

post_thumbnail_box2

Display the post image with your posts excerpts

You spent hours looking for that image that perfectly illustrates your post, but on the main blog page you only display the excerpt. All that work and the impact of the image is lost because the image is only displayed when the reader is viewing the full post.

You can add this function to your theme functions.php to display the thumbnail image of your post or a default image if the post does not have one.

function postimage($width,$height, $text, $class) {
$scriptpath = get_stylesheet_directory_uri();
$attachments = get_children(array(‘post_parent’ => get_the_ID(), ‘post_type’ => ‘attachment’, ‘post_mime_type’ => ‘image’, ‘orderby’ => ‘menu_order’));
if (!is_array($attachments)) {
$image = $scriptpath.”/images/default.jpg”;
echo ‘<img class=”‘.$class.’” title=”‘.$text.’” src=”‘.$scriptpath.’/scripts/timthumb.php?w=’.$width.’&h=’.$height.’&zc=1&q=100&src=’.$image.’” alt=”‘.$text.’” width=”‘.$width.’” height=”‘.$height.’” class=”‘.$class.’” />’;
} else {
$img = array_shift($attachments);
$imagelink = wp_get_attachment_image_src($img->ID,’full’);
$image = $imagelink[0];
echo ‘<img class=”‘.$class.’” title=”‘.$text.’” src=”‘.$scriptpath.’/scripts/timthumb.php?w=’.$width.’&h=’.$height.’&zc=1&q=100&src=’.$image.’” alt=”‘.$text.’” width=”‘.$width.’” height=”‘.$height.’” class=”‘.$class.’” />’;
}
}

How to use it:
In your template add the function before the call to the_excerpt.

<? postimage(100,75,”image for: “.get_the_title(),’image’)?>
<? the_excerpt(); ?>

The parameters are:
$width & $height – the purpose of these is obvious
“image for: “.get_the_title() – This will become the title and alt text of the image in the tag
image – this is the class for the tag, with this you can align/float the image to the left/right or apply any style you already defined for the images

This function uses the timthumb script to resize and crop the image automatically. after downloading the script, create a subdirectoy named ‘scripts’ in your theme directory and copy the timthumb.php file to it. Now create a ‘cache’ subdirectory in your theme directory and assign it write permissions, so the script can create the images in that directory and skip the creation of the image on every page request.

If your post does not have an image, the function will display a default image. to define the default image upload the image you want to be used by default to your theme in the images directory and name it ‘default.jpg’