The Best Way to Hard Code Featured Images Into Static WordPress Pages

As WordPress is becoming a mainstream CMS rather than just a blog software, developers are constantly looking for novel ways to improve themes. Because I am personally a big fan of full width header images on websites, I have found a great way to define featured images in my theme files, saving my clients a lot of time.

The reality is that the average Westerner is too lazy to read, so if you don’t engage them immediately with images they are going to go look at kittens and Harry Potter memes on Tumblr instead.

For those familiar the WordPress Codex, the WordPress developers have provided us with tons of useful shortcuts for use in theme development. One of the best is the Featured Image. Each page and post can have a featured image which is defined on the right sidebar of the Post Editor screen using the media browser to upload an image. Previously we had to use custom fields for this but now there is a great “happy clicky” interface.

Defining Featured Images

To insert the featured image into a theme file, one must first define the featured image in the functions.php file.

This can be done as follows:
{code type=php}
add_theme_support( ‘post-thumbnails’ );
{/code}

Where ‘post-thumbnails’ can be any name that you want. This is especially useful because you can declare different sizes of the same featured image. For example, for use on your index.php, single.php and category.php pages.

{code type=php}
add_image_size(‘name’,width,height, true);
{/code}

For example:
{code type=php}
add_image_size(‘michael-is-awesome’,600,400, true);
{/code}

You can also choose to define a featured image for only certain taxonomies such as “post” or “page” or “category” as follows:

{code type=php}
add_theme_support(‘post-thumbnails’, array(‘page’));
{/code}

Using Featured Images in Templates

Now that the featured images have been declared, we can call them in the theme file. The following sizes can be declared within Settings > Media within WordPress and then used within the theme files:

Large

{code type=php}
<?php the_post_thumbnail(‘large’);?>
{/code}

Medium

{code type=php}
<?php the_post_thumbnail(‘medium’);?>
{/code}

Thumbnail

{code type=php}
<?php the_post_thumbnail(‘thumbnail’);?>
{/code}

If you defined custom sizes within the functions.php file you can call custom sizes as follows:

Custom Defined

{code type=php}
<?php the_post_thumbnail(‘michael-is-awesome’);?>
{/code}

The advantage of using these pre-defined sizes is that WordPress automatically generates them when the image is uploaded. This protects you from the security vulnerabilities of the Tim Thumbs script by eliminating it from the equation. It also causes the website to load faster and decreases bandwidth consumption by loading an optimized version of the image that is exactly the correct size.

The featured image can also be called in the template dynamically using the following script:

Custom Size

{code type=php}
<?php the_post_thumbnail( array (width,height) );?>
{/code}

For example:
{code type=php}
<?php the_post_thumbnail( array (250,150) );?>
{/code}

The disadvantage of this is that the image must be dynamically resized every time the page loads, causing increased load on the server, decreased page load time and increased bandwidth consumption. If you are on a shared host and get a lot of traffic, this can be the difference of being shut down or not. In other words, don’t do it.

Styling Featured Images with CSS

Use CSS to format the Thumbnail with a border, etc:
{code type=css}
.entry-content #post-thumbnail {
float: right;
border: 1px solid black;
margin: 0 0 10px 10px;
}
{/code}

Call the thumbnail within the theme file:
{code type=php}

{/code}