How to Display Meta Description in WordPress using Yoast and GeneratePress

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.

Total Time Needed :



Related Post :   GeneratePress Review - Improve Load Time by 385%

Required Tools:

– Laptop or Smartphone or PC

Things Needed?

– A WordPress Website, Yoast Plugin, GeneratePress Premium

The following are the steps.

Step 1 :

Add the Meta description to your post using Yoast plugin features.

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.

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.

Related Post :   GeneratePress Review - Improve Load Time by 385%

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.

[su_note note_color="#FFFF66" text_color="#333333" radius="3" class="" id=""] Disclaimer - FYI Only . This post may contain affiliate links using another form of urls. These are present in product reviews in buttons, links and rich text. Not all such elements are the same. We earn small commission through these affiliate sales. No Extra Cost. No Extra Fees. Sometimes, you may get discounts also. For more information read our disclaimer here. [/su_note]

Leave a Comment