You Are Here: Home -> Wordpress Tricks -> Move WordPress Featured Image below Post Title

Move WordPress Featured Image below Post Title

(Last Updated On: February 22, 2024)
Moving wordpress 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 wordpress themes.
So how to get this corrected?. This post is an answer to the question.

Steps on how to move WordPress Featured Image below Post Title:

Note : First and foremost 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. If you are new to blogging and find difficulty to find login page for your newly setup blog then this guide will help you.

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>

See also  Top 10 Conversion Rate Optimization Tools To Boost Traffic

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 for the wordpress featured image to look below post title.

<?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 wordpress featured image below post title. This is how you can set it for all your wordpress posts in the blog.
Looks good right?. Yeah. Image speaks a lot and it is more powerful than our words. So try to include it without a miss.
Hope you have implemented this trick in your wordpress site now to place wordpress featured image below post title.
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.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.