Breadcrumb Content

Main Content

Adding A Thumbnail

April, 30, 2014 | PHP

Adding a thumbnail image to a post more often than not improves the experience of the visitor to any website.  There are a multitude of ways to add this feature on the WordPress platform. The easiest and most common way is with a plugin, or you can purchase a theme with this feature built in. My favorite and most preferred method is through the use of custom fields and adding a little of code to two or three pages.For those of you that do not mind editing a little bit of code, this approach will not be an issue. For others that are interested, but are  not experienced coders, just follow the instructions and this process will serve you well. After logging into your WordPress website, navigate to your add new post section.  If you cannot find the custom field area on the page, simply enable it by selecting “Screen Options” on the upper right hand corner of the page.  From there you will fill in the check box option for “Custom Fields”.

screenoptions

In the Custom fields section, you need to add a tag name (as shown below) such as “thumbnail” first and then you will add the direct path to the image you have uploaded and want to use as a thumbnail.

csfields

The following step I am about to discuss should actually be done first, but is not a required process. Open your preferred themes folder and navigate to your index.php file as shown below. The area that is circled is where you will apply the code.index

You can use any text editor or IDE to open the file and add this code.

<?php if (get_post_meta($post->ID, 'thumbnail', true)) { ?>
             	 <?php the_post_thumbnail(array( 250,125 ), array( 'class' => 'alignleft' )); ?>
            	 <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
              	 <img class="alignleft" src="<?php echo get_post_meta($post->ID, 'thumbnail', true); ?>"
             	 alt="Icon for Post #<?php the_ID(); ?>" /> </a>
             <?php } ?>

WordPress provides a set of default styling classes for images you can find at this -LINK-  or you can view them below.

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

If you are following this exercise, I will assume that you already have some level of understanding, when it comes to CSS and HTML. The style classes are self explanatory and you should use them however you choose.  You can also add this code to your single.php file and a custom home.php file as well.

 

Mr. Blox

I dream in code, find conformity repulsive and drink excessive amounts of coffee...

One Response to “Adding A Thumbnail”

  1. Ian Mbe

    June 7, 2014

    Easier source to understand, reading content from the codex can sometimes be very challenging.