In a WordPress post, the meta description plays a major role in better CTR (Click-through-rate). Yoast provides a decent way to add it using its free plugin. This is visible in the source code of the page.

Related Post –

GeneratePress is a light-weight theme. Additional features can be added on installing the GP Premium plugin. Elements is one of these items. Just enable it to implement them.

But users cannot see the Yoast meta description in the front-end. Search engines may or may not display this information. But with the help of PHP code, you can easily add this info below the title post.

This makes sure, though not 100%, that it is visible in the search engines. Also, one of the Google guidelines is to display all meta info to the user and hide no information. You can also add styling to this meta description.

Related Post –

In this tutorial we are going to see how to display Yoast meta description below the post title using GeneratePress theme and elements.

How to Show Meta Description below Post Title in WordPress

In this section, you can learn the steps to display yoast meta description after post title in generatepress theme. This can be done using the hook element and php code. Decide the location on whether to show on posts or all singular items.

yoast meta description below title gp premium

Total Time Needed :



Required Tools:

– Laptop or Smartphone or PC

Things Needed?

– A WordPress Website, Yoast Plugin, GeneratePress Premium

The following are the steps.

Step 2

Install the GeneratePress theme and premium plugin.
Activate the Elements module.

Step 3

Add “New Element”.
Choose the “Hook” option.
Give a name to the element.

add hook element generatepress theme

Step 4

Copy the following code in the text box.
<?php echo get_post_meta(get_the_ID(), ‘_yoast_wpseo_metadesc’, true); ?>

Step 5

Under Hooks, select the Location as “generate_after_entry_title”
Under Display rules, select Location as “Post”. (Note: This will display only on posts. You can select “Singular” to display on page, categories, tags etc.

Step 6

To style the content with tag, you can use typical code like
<?php echo ‘<h3>’ . get_post_meta(get_the_ID(), ‘_yoast_wpseo_metadesc’, true) . ‘</h3>’; ?>

Step 7

If you want to add color to the text, make it italic, set background then you can create a class in style.css file.
A typical class file would look like this –

font-family: “Open Sans”,’Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
font-style: italic;
color: #00FFFF;
background-color: #333333;

Step 8

Then add the following or edit the code like this –
<?php echo “<p class=’yoast-meta-color’>” . get_post_meta(get_the_ID(), ‘_yoast_wpseo_metadesc’, true) . “</p>”; ?>
This will decorate the meta information displayed below the post title in WordPress.

You can also watch this video on how to show meta description to the WordPress post and display it to the visitor.

How to Show on Other Themes          

You can make changes to the above code based on your theme requirement.

Most likely you just have to add this PHP code with help of a plugin or using your theme functions.

Since the Yoast code is universal, it should work on other WordPress themes. Though there are new ways to implement the same, this is an easy and working method.

Related Post :   How to Lock Invalid Usernames from BruteForce Attacks in WordPress

Leave a Reply

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