WordPress Theme Design Tutorial (Featured Image)

 WordPress theme design and development

WordPress theme design and development, a featured image always attract visitor’s attention. So, featured image is very important for a post or page. In WordPress how to show featured image in post or page? It’s simple a method of functions.php file. Now see image at the left side.

WordPress theme design (Featured Image)

While you design a new wordpress theme, you need to create some files. In the previous lessons we learn about that. Please read my previous lessons to learn more. Because, more information you can get there.

See the above image, here we see an option ‘Featured Image’ and link ‘Set featured image’. To create or get this option you need to edit your functions.php file.  Further more, to edit the functions file, open your functions.php file with a text editor and copy the below code and  paste to the functions.php file.

function mytutorialtheme_setup(){ 
add_theme_support('post-thumbnails'); 
add_image_size('small-thumbnail', 320, 200, true ); 
add_image_size('banner-image', 680, 210, true ); 
}
add_action ('after_setup_theme', 'mytutorialtheme_setup');

Just copy the above code and carefully paste to your functions.php file between <?php tag. How to do this watch the video:

After that you need to edit your index.php and single.php files to show the featured image.

Editing index.php

Open your index.php file with a text editor. Then find <?php the_excerpt(); ?> . And above this paste carefully the following code

<?php the_post_thumbnail('small-thumbnail'); ?>
Editing single.php

Open your single.php file with a text editor. Then find <?php the_content(); ?>  and above this paste carefully the following code

<?php the_post_thumbnail('banner-image'); ?>

Now you are all done. Post something with featured image and see your post same as below picture

If you have any questions please put a comment in the comments box. Please don’t hesitate to ask me by comments.  Free WordPress Theme.

ABOUT MY TUTORIAL

This is a step by step tutorial. To learn wordpress theme development tutorial series one after another. You can follow my YouTube  Channel.



Leave a Reply

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