How to Add Featured Images to a Static HTML WordPress Theme

WordPress

WordPress doesn’t make much use of the static HTML that was the most basic form of code made famous by the ghastly websites we had in the early 2000s. You can turn your static HTML into a fully functioning WordPress theme, though.
One area you’ll have to address is featured images. This is something you generally don’t find with static HTML, so it does require working with code.

Let’s take a look at how you can begin adding featured images to a static HTML WordPress theme and all your existing blog posts.

Step 1 – Adding Featured Image Support

You need to support the images before you can actually access the featured images box on the editing screen. Begin by opening up the functions.php file. Make sure the following code appears before the closing tag:

function wptutsplus_theme_support() {

add_theme_support( ‘post-thumbnails’ );

}

add_action( ‘after_setup_theme’, ‘wptutsplus_theme_support’ );

Save the file and try to open the editing screen for a post. You should see the metabox for featured images. If you have an existing website, you need to go through each blog post and add a featured image. Don’t worry about specifying size at this stage.

Step 2 – Adding Featured Images to the Archive Template

To do this, you need to do it within The Loop. Open up your archive.php file and look for the below line:

<img class="size-thumbnail" alt="" src="images/featured-image.jph" />

Replace that line with the below chunk of code:

<?php if ( has_post_thumbnail() ) { ?>

<a href=”<?php the_permalink(); ?>”>

<?php the_post_thumbnail( ‘medium’, array( ‘class’ => ‘left’,

‘alt’   => trim( strip_tags( $wp_postmeta->_wp_attachment_image_alt ) )

) ); ?>

</a>

<?php } ?>

This code does a number of things, including:

  • Checking the post for the featured image. If it can’t do this, the image will not show.
  • Enclosing the image in a post permalink so that people can click it.
  • Displaying the featured image in the right way in the blog directory.

Step 3 – Add Styling

Save the archive.php file and visit any archive page on your site to check all is okay. Go to the style.css file and plug in the following:

.archive #content article,

.blog #content article {

margin-top: 10px;

overflow: auto;

}

Step 4 – Add Featured Images to the Index File

At this stage, you have an archive template with working support for featured images. This is not the end of the procedure, though. You now have to take all this code and add it to the index.php file.

Go into the archive.php file and find the code you added. Take it and replace the same code in the archive file from step 3. Go to the main blog page and you’ll see that the featured image is displayed for every post.

Conclusion

Featured images are a vital part of your blog, and you shouldn’t avoid them so that you don’t have to go through the hassle of adding them. They’re a strong visual aid that will make your site more appealing.

As always, make sure you save a master copy of each file before making any adjustments. Replacing the wrong piece of code could have unfortunate consequences.

Share it!Share on FacebookTweet about this on TwitterShare on Google+Email this to someone

Our Recommended Wordpress Web Hosting Provider

WordPress

WHC.CA
Get a 50% Discount by using our link.

WHC.ca

Reliable host, with excellent customer service and an easy one-click Wordpress installation. Our recommendation to host a Wordpress blog.

Leave a Reply

Your email address will not be published. Required fields are marked *