As the world of Blogging growing day by day with growing population of new blogs, its most important to choose the theme that makes your blog comfortable. But there are many themes in WordPress which have a great look but lacks the thumbnail for each posts in home pages to enhance their blog design. The tutorial will show you to generate thumbnails for each posts and these images can be shown on the front page, archives, search pages, etc – but appear outside of the content, giving you full control of their placement and style.
What Are Custom Fields?
If you never heard about the Custom Fields, then you should check something about Custom Fields inorder of using them. You can check what wordpress tells about Custom Fields.All Custom Field allows you to add extra pieces of data to individual WordPress posts that otherwise aren’t there by default. In other words, along with things like the Post Title, Entry, and Categories, you could add Thumbnails, Lead Images, Surce Links etc. But in this tutorials, we are going to use Custom Fields to add thumbnails in posts in different pages. They allow you to add as many additional fields as you like, all of which can be used anyway you want to use them.
Creating Thumbnails For Posts
By creating thumbnails manually and integrate this function in your theme, it is easy way to display thumbnails to make your blog posts attractive and personalized.Its very easy to place thumbnails using Custom Fields.Now, just open your WordPress Theme directory and find a file named functions.php or if it does not present in your theme directory, then create one file with actual name functions.php .Check the code below, this code will help to locate the thumbs.
<?php while (have_posts()) : the_post(); ?> <?php endwhile; ?>
The code between these lines is the output for each individual entry shown on the front page of your Blog. So, let’s say you limit your blog to 10 posts per page, this is the code the repeats 10 times to display those 10 posts.
<img src="<?php echo get_post_meta($post->ID, "Thumbnail", true);?>" />
This outputs an image, using the Value of the Key, Thumbnail, which we’ve inserted into our post.In spite of using keyword, you can use your desired keyword.It can be inserted anywhere within the while loop, allowing you to float it to the left or right of the header and entry, display it above an entry, below, whatever you want. The overall code will look like this :
<?php if($Thumbnail !== '')
{ ?>
<!-- Insert Code For Advanced Image Styling -->
<img src="<?php echo $Thumbnail;?>" />
<?php } ?>
The main purpose of this code is to check to see if the Thumbnail variable is empty or not. If it isn’t empty, the code will output the thumbnail image. After you’re finished customizing your code, save, and test to make sure thumbnails are being displayed properly.
About SmashinGeek
