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.

Table of Contents

• How to Show Meta Description below Post Title in WordPress
  • • Total Time Needed :
    • Required Tools:
    • Things Needed?
    • The following are the steps.
    • Step 1 :
    • Step 2
    • Step 3
    • Step 4
    • Step 5
    • Step 6
    • Step 7
    • Step 8
• How to Show on Other Themes          

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 :

5

Minutes

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 –

.yoast-meta-color
{
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.