Move featured image below Post title

Admin

Robert is the founder of ShoutTips, shouting tips & tricks via this blog about SEO, Worpress, Blogging, Make money online, Technology etc.
Move featured image below post title is really required to make the post attractive. If your featured image looks above post title, it won’t look good but unfortunately this is the default setting in most of the word-press themes.
So how to get this corrected?. This post is an answer to the question.

Move featured image below Post title in WordPress:

Note : Ensure you take backup of Contents.php template before you start with the process.If by mistake code gets messed up then we need backup to set things correctly.

Step 1:

Login to your wordpress dashboard using your admin credentials.

Step 2:

After logging in, you can see the Appearance tab for your wordpress theme on the left hand side. Navigate to the Editor option under Appearance. Now click on the Editor. There all codings for the templates will be available

Step 3:

Go to Contents.php template and click on it to perform editing. Ensure similar kind of this code <?php template_name_post_image(); ?> comes below the header in the template for the title to show first and then featured image next.

Step 4:

By default this is the complete code available in Contents.php Template.
<?php $mh_joystick_lite_options = mh_joystick_lite_theme_options(); ?>
<article <?php post_class(‘content-list clearfix’); ?>>
<?php if (has_post_thumbnail()) { ?>
<div class=”content-list-thumb”>
<a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”>
<?php the_post_thumbnail(‘mh-joystick-lite-slider’); ?>
</a>
<?php if (has_category()) { ?>
<span class=”content-list-category”>
<?php $category = get_the_category(); echo $category[0]->cat_name; ?>
</span>
<?php } ?>
</div>
<?php } ?>
<header class=”content-list-header”>
<h2 class=”content-list-title”>
<a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>” rel=”bookmark”>
<?php the_title(); ?>
</a>
</h2>
</header>
<?php mh_joystick_lite_post_meta(); ?>

<div class=”content-list-excerpt”>
<?php the_excerpt(); ?>
</div>
<?php if ($mh_joystick_lite_options[‘read_more’] != ”) { ?>
<div class=”content-list-more”>
<a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>” rel=”bookmark”>
<span><?php echo esc_attr($mh_joystick_lite_options[‘read_more’]); ?></span>
</a>
</div>
<?php } ?>
</article>

Step 5:

You need to remove this piece of code from the Template.
<header class=”content-list-header”>
<h2 class=”content-list-title”>
<a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>” rel=”bookmark”>
<?php the_title(); ?>
</a>
</h2>
</header><?php mh_joystick_lite_post_meta(); ?>

Step 6:

Paste the removed code on the top of template just below the very first line in Content.php template.

<?php $mh_joystick_lite_options = mh_joystick_lite_theme_options(); ?>

Step 7:

After pasting removed code on the top, this will be the final order.

<?php $mh_joystick_lite_options = mh_joystick_lite_theme_options(); ?>

<header class=”content-list-header”>
<h2 class=”content-list-title”>
<a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>” rel=”bookmark”>
<?php the_title(); ?>
</a>
</h2>
</header>

<?php mh_joystick_lite_post_meta(); ?><article <?php post_class(‘content-list clearfix’); ?>>
<?php if (has_post_thumbnail()) { ?>
<div class=”content-list-thumb”>
<a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”>
<?php the_post_thumbnail(‘mh-joystick-lite-slider’); ?>
</a>
<?php if (has_category()) { ?>
<span class=”content-list-category”>
<?php $category = get_the_category(); echo $category[0]->cat_name; ?>
</span>
<?php } ?>
</div>
<?php } ?><div class=”content-list-excerpt”>
<?php the_excerpt(); ?>
</div>
<?php if ($mh_joystick_lite_options[‘read_more’] != ”) { ?>
<div class=”content-list-more”>
<a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>” rel=”bookmark”>
<span><?php echo esc_attr($mh_joystick_lite_options[‘read_more’]); ?></span>
</a>
</div>
<?php } ?>
</article>

Step 8:

Save it using the button on the left hand side below the content window.

Step 9:

Refresh the dashboard. Then click the option to view website on the top left hand side of dashboard or directly type the domain name in your browser address bar to see the changes.
As a result, you can see featured image looks below post title for all your wordpress posts in the blog.
Looks good right?. Thats it
Hope you have implemented this trick in your wordpress site now to place featured image below post title in wordpress.
Incase if you have encountered any issues while peforming above steps let me know. I will be glad to assist you anytime.
Feel free to leave your comments or suggestions. Will meet you in another post with another trick.

Follow ShoutTips on Social Media for Updates !

Leave a Reply

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