Web Dev Blog

Creating blog posts is extremely easy in Wordpress, but adding simple thumbnails to your posts is not. I’m not talking about adding images within the post content, but adding them to your theme so they display in a standardized way in your blog loop, and on individual post pages.

The problem is that though Wordpress allows inserting images within posts, there is no way to “attach” these images to the post, so that theme designers can pull standardized images out for display. By making a few changes to your Wordpress configuration and your theme templates, and by using the Post Thumbnails plugin that I have written, you will be able to add thumbnails to your site in an intelligent way.

Wordpress Configuration

First step is to login to your Wordpress admin dashboard and navigate to the Settings -> Miscellaneous page. Here you will need to change:

- Uncheck the “Organize my uploads into month- and year-based folders.”

- Change the Wordpress thumbnail size to your desired size. This is important! Take careful thought when making this decision – you will break old post’s thumbnails if you chose to change this value later. I recommend 50×50 pixels.

Plugin Installation

Download the Post Thumbnail plugin using this link. Unzip it and place the file within your wp-content/plugins/ directory. Navigate to the Plugins menu within the Wordpress admin dashboard and activate this plugin.

You’re going to need a default post thumbnail to be used when no image is associated with a post. Upload an image that is the same size as the thumbnail size you chose above to the wp-admin/uploads folder, or the same folder you have chosen for uploads if you’re using a custom location. On most installations that folder would be wp-content/uploads/.

After you’ve uploaded the image, paste the name into the first line of code in the plugin PHP file:

define('DEFAULT_POST_THUMBNAIL', 'default_thumbnail_file.jpg');

Change the above default_thumbnail_file.jpg to whatever your image was called.

Plugin Usage

After the plugin has been activated, you will notice a new box titled Post Thumbnail on the Wordpress Write and Edit screens. To get a thumbnail attached to your post, upload an image using Wordpress’ default image uploading mechanism, which is a button next to the Add Media label near the top of those screens. This opens up a popup window for uploading images. Upload your image, but you don’t need to insert it into the post. Instead copy the file name (ex. myimage.jpg) and then click on the X to close the window.

Next, paste the file name into the Source Image input field in the Post Thumbnail box and click save. After saving, you will notice that an image name will be displayed in the Generated Thumbnail box. This is the thumbnail version of your source image, that Wordpress resized for you when you initially uploaded the image.

Adding the Thumbnail to Your Theme

Now that thumbnails are being attached to posts, we need to modify our theme to display them. It’s up to you to decide where you want to place them, but I would recommend adding the thumbnail to your template wherever you use the Wordpress loop. Below is a code snippet that inserts a thumbnail into the Default Wordpress theme’s index.php file, so thumbnails will show up on the main page of your site. Only one new line needs to be added.

<?php while (have_posts()) : the_post(); ?>
  <div class="post" id="post-<?php the_ID(); ?>">
    <h2>
    <!-- Begin New Code-->
    <div style="float:left; margin:5px;">
      <?php echo get_post_thumbnail(get_the_ID()); ?>
    </div>
    <!-- End New Code-->
    <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to 
    <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    <small>
      <?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> -->
    </small>
 
    <div class="entry">
      <?php the_content('Read the rest of this entry &raquo;'); ?>
    </div>
 
    <p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> 
    Posted in <?php the_category(', ') ?> | 
    <?php edit_post_link('Edit', '', ' | '); ?>  
    <?php comments_popup_link('No Comments &#187;', 
    '1 Comment &#187;', '% Comments &#187;'); ?>
    </p>
  </div>
<?php endwhile; ?>

Here’s what my above post looked like with the above template code:

Other templates like single.php and archive.php in the Default theme have very similar code where you can also insert the thumbnail. Your theme may differ, but usage is very simple. Just call the following function in your template wherever you want to display the thumbnail:

<?php echo get_post_thumbnail(get_the_ID()); ?>

There has been much discussion about a recent bug/issue with Wordpress that prevents scheduled posts from working properly. The problem is somewhat unrelated to Wordpress itself, and is primarily a hosting setup issue. Scheduled posts are published via the use of a cron script. Wordpress attempts to call the cron script with an fsockopen() function call. Many popular hosts disable the use of fopen() in their PHP configuration, which also disables the fsockopen() function, preventing your cron from firing which prevents your scheduled posts from being published.

A more robust way of programming this part of the code would be to try other functions like curl on failure of the original fsockopen() call. If curl is unavailable, then the calling script should just execute the code contained within the wp-cron.php file itself, instead of trying to make an http request to execute it.

I’ve put together a simple fix for sites that cannot use the fsockopen() function. It’s a simple addition, and just requires attention when upgrading. Steps for upgrading are detailed below the fix.

Open up your wp-cron.php file and copy the contents following the “if ( $_GET['check'] != wp_hash(’187425′) ) exit;” line.

Now you are going to have to paste these lines at the very end of the spawn_cron() function in wp-includes/cron.php. After pasting them in you are going to have to change the “if ( $argyle )” clause to be an if/else clause. This will cause the else clause to execute when fsockopen() fails.

In Wordpress 2.6.3, the spawn_cron() function within the wp-includes/cron.php file will now look like this:

function spawn_cron() {
  $crons = _get_cron_array();
 
  if ( !is_array($crons) )
    return;
 
  $keys = array_keys( $crons );
  if ( array_shift( $keys ) > time() )
    return;
 
  $cron_url = get_option( 'siteurl' ) . '/wp-cron.php';
  $parts = parse_url( $cron_url );
 
  if ($parts['scheme'] == 'https') {
    // support for SSL was added in 4.3.0
    if (version_compare(phpversion(), '4.3.0', '>=') && function_exists('openssl_open')) {
      $port = isset($parts['port']) ? $parts['port'] : 443;
      $argyle = @fsockopen('ssl://' . $parts['host'], $port, $errno, $errstr, 0.01);
    } else {
      return false;
    }
  } else {
    $port = isset($parts['port']) ? $parts['port'] : 80;
    $argyle = @ fsockopen( $parts['host'], $port, $errno, $errstr, 0.01 );
  }
 
  if ( $argyle ) {
    fputs( $argyle, 
      "GET {$parts['path']}?check=" . wp_hash('187425') . " HTTP/1.0\r\n"
      . "Host: {$_SERVER['HTTP_HOST']}\r\n\r\n"
    );
  }
  else {
    //BEGIN COPIED wp-cron.php CONTENTS
    if ( get_option('doing_cron') > time() )
      exit;
 
    update_option('doing_cron', time() + 30);
 
    $crons = _get_cron_array();
    $keys = array_keys($crons);
    if (!is_array($crons) || $keys[0] > time())
      return;
 
    foreach ($crons as $timestamp => $cronhooks) {
      if ($timestamp > time()) break;
      foreach ($cronhooks as $hook => $keys) {
        foreach ($keys as $key => $args) {
          $schedule = $args['schedule'];
          if ($schedule != false) {
            $new_args = array($timestamp, $schedule, $hook, $args['args']);
            call_user_func_array('wp_reschedule_event', $new_args);
          }
          wp_unschedule_event($timestamp, $hook, $args['args']);
          do_action_ref_array($hook, $args['args']);
        }
      }
    }
 
    update_option('doing_cron', 0);
    //END COPIED wp-cron.php CONTENTS
  }
}

Upgrading

It is very important to remember that you’ll have to take special precautions when upgrading. When upgrading, you are going to have to perform the same copy/paste and alter within the wp-includes/cron.php file. Take whatever the contents of the wp-cron.php file are and copy them after the above mentioned hash check line.