How To Easily Make A Glorious WordPress Homepage Complete With Thumbnail Post Images

How To Easily Make A Glorious WordPress Homepage Complete With Thumbnail Post Images

May 26

Good morning!

Brief, pithy and to the point…

Have you ever seen sites like mine that has snippets of the most current posts along with gloriously exciting pictures and images?

Ever wonder how that was achieved?

I sure did!

See, it all happened like this.

I was happily building up my Success Tactics of the Mama Bear site, when I noticed that my homepage was approximately….382 miles long.

Great content, mind you, but still…

382 miles long.

So!

Having not a clue as to how my glorious designer James managed to get that to work on my site, I sat down, poured 16 cups of coffee and dove right into it.

And guess what…it's really simple to make a WordPress home page that has both your post images and also your snippets!

Here's how.

NOTE!  If you need bunches of WordPress tutorials for beginners, check out WordPress Video Tutorials – extremely comprehensive!!

---

Before You Begin

Need some help with understanding WordPress files?  Check out these great tutorials:

Next,

---

Step 1). Your theme needs to support the WordPress function "post_thumbnail".

The latest versions of WordPress have this ability built into it (all together now, yay!).

It's enabled by the following line:

add_theme_support( 'post-thumbnails' );

into your functions.php file.

Honestly, that's all that's required to make your theme post-thumbnail ready!

Need more help? Go to your WordPress theme directory, make a backup copy of your functions.php (perhaps call it functions.sav), and then open your functions.php file and add in this line:

add_theme_support( 'post-thumbnails' );

That adds the functionality to your WP theme…but now you have to actually display the thumbnails on your site!

---

Step 2.) Open your WordPress index.php file and place the following within it.

Your index.php is displays your home page.

First, of course, make a backup copy of your index.php – call it index.sav.

Find where in the_loop (that's where your WordPress loops through the default number of posts – if you display the entire content, your homepage too can be 283 miles long as well!  For more information, check out The Loop Explained and The Loop Explained For WordPress Beginners) you want to display the snippets and images.

Normally, you'll see a line that looks like:

 <p> <?php the_content(); ?>

Change that to:

<?php the_post_thumbnail(array(175,175), array('class' => 'alignright')); ?>
<?php the_excerpt('Read the rest of this entry &raquo;'); ?>

That should add the latest snippets and images to your homepage (NOTE! You have to first go to each post and set the Featured Image so WordPress *has* an image to call. It's very easy to do, btw – you should see the option "Featured Image" on the right side of your edit pane now).

Now it's time to tackle the actual displaying of that featured image in your single posts.

---

Step 3.) Open your WordPress single.php and add the following.

First of course, make a backup copy of your single.php – call it single.sav .

Next, look for the line:

 <?php the_content(); ?>

If you want your thumbnail image to be aligned right, add the following right above it:

<p><?php the_post_thumbnail(array(200,200), array('class' => 'alignright')); ?>

Thus, your code would look something like:

                        <div class="entry"><br>
<?php the_post_thumbnail(array(200,200), array('class' => 'alignright')); ?>
 <?php the_content(); ?>