More than half of all website traffic comes from mobile devices. If your navigation menu doesn’t work well on smartphone and tablets, then a big chunk of your audience may struggle to find their way around your site.

In this guide, we will show you how to create a mobile-ready responsive WordPress menu.

Why Create a Mobile-Ready Responsive WordPress Menu?

A well-designed navigation menu will help visitors find their way around your website. However, just because you menu looks great on desktop computers, doesn’t automatically mean it will look good on smartphones and tablets too.

Mobile users make up around 58% of all internet traffic. That said, if your menu doesn’t look good or work correctly on mobile devices, then you risk losing half your audience. This will make it difficult to achieve key goals such as growing your email list, getting sales, and growing your business.

With that being said, let’s see how you can create a mobile-ready responsive menu that will look great on smartphones and tablets. Simply use the quick links below to jump straight to the method you want to use.

Method 1: Create a Mobile-Ready Responsive Slide Panel Menu

A responsive slide panel is a navigation menu that slides onscreen when a visitor taps or clicks on a toggle.

In this way, the menu is always within easy reach but doesn’t take up any onscreen space by default. This is particularly important since smartphones and tablets have much smaller screens compared to desktop computers.

If the menu is constantly expanded, then a mobile user may trigger its links by accident using their device’s touchscreen. This makes slide panels a good choice for a mobile-responsive menu.

The easiest way to add a mobile-ready slide panel is by using Responsive Menu.

Note: There is a premium version of Responsive Menu with extra themes and additional features such as conditional logic. However, in this guide, we’ll use the free plugin since it has everything you need to create a mobile-ready menu.

The first thing you need to do is install and activate the Responsive Menu plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you can use the plugin to customize any WordPress menu you’ve previously created. If you need to create a new menu, then please see our guide on how to add a navigation menu in WordPress.

If your WordPress theme already has a built-in mobile menu, then you’ll need to know that menu’s CSS class so you can hide it. If you skip this step, then mobile users will see two overlapping menus on your website. For step-by-step instructions, please see our guide on how to hide a mobile menu in WordPress.

With that done, go to the Responsive Menu » Menus page and click on the ‘Create New Menu’ button.

You will now see a few different themes that you can use for your menu.

We’re using the ‘Default Theme’ in our images but you can use any theme you want. After making your decision, click on ‘Next.’

You can now type in a name for the menu. This is just for your reference so you can use anything you want.

With that done, click on ‘Link WordPress Menu’ and choose the menu that you want to use.

As already mentioned, if your theme already has a built-in mobile menu, then you’ll need to add its CSS class to the ‘Hide Theme Menu’ field.

If you upgrade to the premium plugin, then you’ll get a few additional settings. For example, Pro users can hide the menu on particular pages or devices.

When you’re happy with how the menu is set up, click on ‘Create Menu.’

You’ll now see a preview of your WordPress website on the right of the screen, and some settings on the left.

To see how your site looks on mobile, click on either the mobile or tablet icon towards the bottom left of the screen.

To customize how the menu looks and acts on mobile devices, select ‘Mobile Menu.’

Then, click on ‘Container.’

Here, you’ll find lots of different settings.

As you make changes, the live preview will often update automatically. With that in mind, it’s a good idea to expand the menu so you can monitor how your mobile menu will look. To do this, simply click on the menu toggle button.

By default, the plugin adds a title and some ‘Add more content…’ text.

You can replace this with your own messaging, or even remove the text completely. To edit the title, click to expand the ‘Title’ section.

You can now type your own messaging into the ‘Title Text’ field.

You can also add a link to the title, or add icon fonts and images.

To customize how the title looks, click on the ‘Styles’ tab.

Here, you can change the background color, the text color, the font size, and more.

If you don’t want to show any title text, then click to deactivate the toggle next to ‘Title.’

If the title isn’t essential, then removing it will create more space for the links and other content in your mobile navigation menu.

To replace the ‘Add more content here….’ text with your own messaging, click to expand the ‘Additional Content’ area.

You can now type in your own text, change the text color, change the text alignment, and more by using the settings in the left-hand menu.

To remove the text completely, simply click to deactivate the toggle.

Once again, this can create more room for the rest of the menu’s content. This is particularly useful on smartphones and tablets, which typically have smaller screens.

By default, Responsive Menu will show all your menu items as a single list. However, you may prefer to show these links in multiple columns. This can work well if your menu labels are shorter, as it allows you to show more items in a smaller amount of space without the menu looking cluttered.

To try different column layouts, click to expand the ‘Menu’ section.

You can now open the ‘Menu container columns’ dropdown and choose the number of columns you want to use.

At this point, you may see some ‘Update Required’ text. If you see this message, then give it a click to update the live preview with your new column settings.

By default, Responsive Menu adds a search bar to your WordPress menu. This can help visitors find interesting content, but it can also take up precious onscreen space.

If you prefer, then you can remove the search bar for mobile users by deactivating the toggle next to ‘Search.’

There are lots more settings that you can configure, so you may want to spend some time looking through the other options. However, this is enough to create a well-designed mobile-ready menu.

When you’re happy with how the navigation menu is set up, click on ‘Update.’

Now, simply visit your WordPress blog using a mobile device, to see the new menu in action. You can also view the mobile version of your WordPress site from desktop.

Method 2. Create a Mobile-Ready Fullscreen Responsive Menu

Another option is to add a fullscreen responsive menu. This is a menu that automatically adjusts to different screen sizes, so the navigation menu will always look good no matter what device the visitor is using.

Since the menu takes up all the available space, it is easier to navigate on smartphones and tablets, no matter how small the screen.

The easiest way to create a fullscreen menu is by using FullScreen Menu – Mobile Friendly and Responsive. This plugin allows you to create a fullscreen menu for mobile devices only, or you can show the same menu across smartphones, tablets, and desktop computers, so all visitors have the same experience.

The first thing you need to do is install and activate the FullScreen Menu plugin. You can check our step-by-step guide on how to install a WordPress plugin for more details.

Upon activation, select Fullscreen Menu Options from the WordPress menu and check the following box: ‘Activate Animated Fullscreen Menu.’

We also recommend checking the ‘Show the menu only for Admin users’ box. This allows you to see the changes as you’re configuring the menu, but visitors won’t see the mobile menu until you make it live.

By default, the plugin will show the fullscreen menu on all devices. If you want to show the fullscreen menu on smartphones and tablets only, then check the box next to ‘Mobile only.’

With that done, you’re ready to fine-tune how the menu looks by clicking on the ‘Design / Appearance’ tab.

Here, you can choose the colors, font, and animation settings for the fullscreen menu.

When making these changes, just be aware that ‘Initial Background Menu’ is the menu’s toggle icon. Meanwhile, ‘Opened Background Menu’ is the color of the expanded, fullscreen mobile menu.

After choosing the menu colors, scroll to the ‘Menu Appearance’ section. Here you can change the menu’s font color, font family, and font size.

Just be aware that loading additional fonts could affect your WordPress site performance and speed. This isn’t always a good choice for mobile devices, which typically have less processing power compared to desktop computers. Some visitors may also have a poor mobile internet connection, which will make your site load even more slowly.

With that done, scroll to ‘Animation Settings.’.

To start, you can choose how the menu will expand when a visitor clicks the toggle icon. Simply open the ‘Animation Type’ dropdown menu and choose an option from the list, such as From Top to Bottom or From Left to Right.

When you’re happy with how the menu is set up, it’s time to add some content by clicking on the ‘Menu Content’ tab.

Here, go ahead and open the ‘Select Menu’ dropdown and choose the menu that you want to show fullscreen.

If you haven’t created a navigation menu yet, then check out our guide on how to add navigation menus in WordPress.

If you want to show additional content in the menu, then you can add it in the ‘Free HTML / Shortcodes’ box. This acts as a mini page editor so you can type in text, change the formatting, add bullet points and numbered lists, and more.

There’s also a checkbox that will add a link to your privacy policy page. 

Next, you might like to add social media icons to your WordPress menu. These icons will appear in a row at the bottom of the fullscreen menu.

To add these icons, simply click to expand the ‘Social Icon 1’ box.

You can now type in a title for the icon, such as ‘Facebook.’

After that, click on the arrow next to ‘Social Icon’ and choose the icon that you want to show to mobile visitors.

Finally, type the address you want to use into the ‘Social URL’ field.

To add more icons, simply click the ‘Add Another Icon’ button.

Finally, you may want to add a WordPress search bar to help visitors find what they’re looking for. To do this, simply check the box next to ‘Add Search Bar.’

By default, the plugin will show a ‘Search something…’ message. However, you can replace this with your own custom messaging by typing into the ‘Search input placeholder’ field.

For example, if you run a WooCommerce store then you may want to use text such as ‘Start shopping’ or ‘Search for products.’

When you’re happy with how the menu is set up, click on the ‘Save Changes’ button.

Now, simply visit your website using a mobile device to see the fullscreen menu in action.

You can also preview the mobile version of your website using the WordPress theme customizer.

Bonus: How to Add a Mobile-Responsive Menu to Landing Pages

If you’re creating a landing page or sales page, then you’ll want the design to look just as good on mobile devices as it does on desktop.

With that in mind, we recommend creating the page using SeedProd. SeedProd is the best page builder plugin and comes with more than 180 professionally-designed templates.

After creating a design using SeedProd, you can add a mobile-responsive menu to the page using SeedProd’s ready-made Nav Menu block. This block allows you to create separate menus for both menu devices and desktop.

In this way, you can use a different layout and even show different links depending on the user’s device.

To learn more, please see our guide on how to add custom navigation menus in WordPress.

After adding the Nav block to your design, simply click on the ‘Advanced’ tab.

Here, click to expand the ‘Device Visibility’ section.

After that, click on the ‘Hide on Desktop’ toggle to activate it. Now, this menu will only appear on mobile devices.

You can now add links and change the menu’s layout using the settings in the left-hand menu.

We hope this article helped you learn how to create a mobile-ready responsive WordPress menu. You may also want to see our guide on how to increase your blog traffic, or see our expert pick of the best analytics solutions for WordPress users.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a Mobile-Ready Responsive WordPress Menu first appeared on WPBeginner.

A lot of the time, you will want to show the same sidebar across your entire website or blog. However, sometimes you may need to show different sidebar content on some of your posts and pages.

In this article, we will show you how to create and display different sidebars for each post and page in WordPress.

When Would You Need Different Sidebars in WordPress?

Many WordPress themes have a sidebar where you can add useful widgets and content. For example, many sites add a search bar to the sidebar or show a list of recent posts.

If your WordPress theme has a sidebar, then by default, it will look the same on all your posts, pages, categories, and archive pages.

However, you may want to display different sidebar widgets on certain posts and pages.

For example, you might show different content in the sidebar of your most popular posts or display ads that are more relevant to a particular page.

You could even use different contact forms depending on the page’s content.

Having said that, let’s see how to create and display a different sidebar for each post and page in WordPress. Simply use the quick links below to jump straight to the method you want to use:

Method 1: Displaying Different Sidebars for Each Post and Page in WordPress (Easy)

If your theme supports sidebar widgets, then you can easily create multiple sidebars using Lightweight Sidebar Manager. This plugin lets you build as many custom sidebars as you want and then assign them to different posts and pages. You can also add them to custom post types or assign a sidebar to all the pages or posts that have a specific category.

The first thing you need to do is install and activate the Lightweight Sidebar Manager plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to go to Appearance » Sidebars. To create the first sidebar, click on the ‘Add New’ button.

You can now type in a title for the sidebar. This is just for your reference, so you can use anything you want.

With that done, open the ‘Sidebar To Replace’ dropdown menu and choose the location where you want to show the sidebar. The options you see may vary depending on your WordPress theme. 

Now, you can control where the sidebar appears by creating inclusion or exclusion rules. 

To create an inclusion rule, just open the ‘Display On’ dropdown and choose the pages, posts, custom post types, or categories where you want to use the sidebar. 

For example, you might add the sidebar to a specific page, such as your 404 error page or the author archive.

Another option is using the sidebar for a particular page, post, or category by selecting ‘Specific Pages/Posts/Taxonomies.’

This adds a box where you can type in the page, post, or category.

To create more inclusion rules, simply click on the ‘Add Display’ Rule button.

This adds a section where you can create the new inclusion rule.

If you prefer, then you can create exclusion rules instead. For example, you may want to show the sidebar on every page except the homepage. 

You can also combine inclusion and exclusion rules to control exactly where the sidebar appears on your WordPress website.

To create an exclusion rule, just click on the ‘Add Exclusion Rule’ button.

In the new ‘Do Not Display On’ section, open the dropdown menu and select the page or post that shouldn’t use this sidebar. 

You can also exclude the sidebar from pages that have a specific category by following the same process described above.

After deciding where the sidebar will appear on your WordPress blog, you may want to show different content to different users.

For example, if you have a membership site, then you might use a different sidebar for visitors compared to logged-in members. 

To do this, open the ‘User’ dropdown and choose a role from the dropdown menu. Now, only people with this specific user role will see the sidebar. 

Finally, you may want to type in an optional description. This will only appear in the WordPress dashboard, so it’s a good way to share information with other admins or users on a multi-author WordPress blog. 

If you are going to create lots of sidebars, then you can also use this field to leave yourself notes and helpful reminders.

When you are happy with the information you have entered, simply click on ‘Publish.’

With that done, go to Appearance » Widgets. You will now see all the widget-ready areas that your theme supports by default, plus the new sidebar you created in the previous step.

You can now go ahead and add widgets to the sidebar, just like any other widget-ready area. 

For step-by-step instructions, please see our guide on how to add and use widgets. 

When you are happy with how the sidebar is set up, click on ‘Update.’

Now, if you visit your WordPress blog, you will see the new sidebar live.

To create more custom sidebars, simply keep repeating these steps. 

Method 2: Creating a Different Sidebar With a Page Builder Plugin (Works With Any WordPress Theme)

If your theme doesn’t support sidebars, then you can still create different sidebars using a drag and drop page builder plugin.

SeedProd is the best landing page builder plugin for WordPress. With this plugin, you can create any type of custom page without writing any code. It also has dozens of professional site kits and templates that you can easily edit and fine-tune using the drag-and-drop builder.

When designing a custom page, you can choose a layout that has a sidebar.

You then simply find the blocks you want to show in that sidebar and add them using drag and drop.

SeedProd has all the blocks and features you’d expect from a powerful page builder, such as optin forms, social profiles, countdown timers, contact forms, buttons, various content blocks, and more. This makes it easy to create powerful and unique sidebars for your WordPress blog.

To learn how to use the SeedProd page builder plugin on your website, you can see our guide on how to create a custom page in WordPress.

We hope this article helped you learn how to add different sidebars to each post or page in WordPress. You may also want to learn how to create a custom Instagram feed in WordPress or see our expert picks for the best block themes for full site editing.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Display Different Sidebar for Each Post and Page in WordPress first appeared on WPBeginner.

Meta data includes important information about your posts, such as the publication date, the author’s name, and the tags. Sometimes, visitors may need to know this information.

In this article, we will show you how to display post meta data in WordPress posts easily.

Why Display Blog Post Meta Data on Your WordPress Website?

Blog post meta data is information about a post that’s not part of the actual content. It includes things like the publication date, the name of the author if you are running a multi-author WordPress blog, categories and tags, custom taxonomies, and more.

This meta data can appear in lots of different locations, depending on your WordPress theme.

Wherever it appears, meta data can help visitors learn more about your content. It can also help them discover other interesting posts. For example, they may look for more blogs written by the same author.

In this way, post meta data can improve the user experience and may even increase pageviews. Just be careful about displaying too much post meta data, as it can make your site look messy and confusing.

With that being said, let’s see how you can display post meta data in WordPress themes. Simply use the quick links below to jump straight to the method you want to use:

Method 1: Using the WordPress Theme Customizer (Easy)

Some themes allow you to customize the post meta data without writing any code.

To check whether this is the case for your theme, just go to Appearance » Customize, which opens the WordPress theme customizer.

You can now look for any settings that allow you to customize your blog pages. These will typically be labeled ‘blog,’ ‘blog settings,’ ‘posts’ or similar.

For example, if you are using the Astra WordPress theme, then you can simply select ‘Blog’ from the left-hand menu.

After that, click on ‘Blog / Archive.’

Simply scroll to the ‘Meta’ section to see all the different data that you can add or remove.

To add meta data to your site, just click on its ‘show’ icon, which looks like an eye.

To remove a piece of meta data, click on the icon again.

You can also change the order that WordPress shows this meta data to visitors using drag and drop.

As you make changes in the theme customizer, the live preview will update automatically, so you can try different settings to see what looks the best for your WordPress website.

When you are happy with how the post meta data looks, don’t forget to click on ‘Publish’ to make your changes live.

Even if you don’t see any post meta data settings in the WordPress customizer, there may still be a way to add this information without writing code.

With that in mind, we recommend looking at the theme’s documentation. You can also reach out to the theme’s developer for help.

For lots of useful tips, please see our guide on how to properly ask for WordPress support and get it.

Method 2: Using the Full-Site Editor (Block Themes Only)

If you are using a block-based theme like Hestia Pro, then you can display post meta data anywhere on your website using the Post Meta block.

To get started, just go to Themes » Editor in the WordPress dashboard.

By default, the full-site editor will show your theme’s home template.

To add the meta data to your WordPress blog posts, go ahead and click on ‘Templates’ in the left-hand menu.

The editor will now show a list of all the templates that make up your WordPress theme.

Simply click on the Single template, which controls the layout of your blog posts.

WordPress will now show a preview of the Single page template.

To edit this template, go ahead and click on the small pencil icon.

With that done, click on the blue ‘+’ icon in the top left corner.

In the search bar that appears, type in ‘Post Meta.’

When the right block appears, drag and drop it onto your blog layout.

By default, this block will show the post’s categories, author, and tags.

You may want to edit this meta data. For example, you might delete the tags or change the static text that WordPress shows before the meta data.

The following image shows an example of how the default Post Meta block will look on your WordPress blog.

To change this block, simply click to select it in the full site editor. You can then click on any block within the Post Meta block and make your changes.

Just pay careful attention to whether you are editing the static text that WordPress shows in front of the meta data or the dynamic text that WordPress will replace with real values.

For example, in the following image, we have added some static text to the Post Author section.

However, we haven’t changed the ‘Post Author’ dynamic text.

In the following image, you can see how this will look on your WordPress blog.

You may also want to add more meta data to the Post Meta block.

For example, the full site editor has blocks, such as Post Date and Post Author Biography, that you can easily add to the Post Meta block using drag and drop.

Simply click on the blue ‘+’ button and then find the block that you want to use. You can then drag and drop it onto the Post Meta block.

If you add more blocks to the Post Meta block, then you may need to change its layout.

To do this, simply click on the Post Meta block and then select the ‘Block’ tab.

You can now use these settings to arrange the content in a nice layout. For example, you might change the number of columns or add margins and padding.

When you are happy with how the Single template looks, click on the ‘Save’ button.

Now if you visit your website, you will see the post meta data in action.

After that, you may want to add post meta data to other areas of your website, such as your custom archive page.

To do this, simply open the full site editor by following the same process described above.

You can then select ‘Templates’ from the left-hand menu and choose the template you want to edit.

After that, you can add post meta data following the same process described above.

Method 3: Creating a Custom WordPress Theme (Fully Customizable)

Another option is to create a custom WordPress theme. This is a more advanced method, but it will give you complete control over where the post meta data appears on your website.

In the past, you would need to follow complicated WordPress tutorials and write code to build a custom WordPress theme. However, it’s now possible to create your own themes without writing a single line of code using SeedProd.

SeedProd is the best drag and drop WordPress page builder and also comes with a theme builder. This allows you to design your own themes using a simple drag and drop editor.

For step-by-step instructions, please see our guide on how to create a custom WordPress theme (without any code).

After that, you can add post meta data to any part of your WordPress website. Simply find the ‘Post Info’ block in SeedProd’s left-hand menu.

Now, drag and drop the block onto your page layout.

After that, click to select the Post Info block. By default, this block shows the author, date, time, and comments meta data.

However, you can also show the modified date, modified terms, and terms meta data.

To add more information to the block, simply go ahead and click on ‘Add Item.’

This adds a new placeholder item.

Now, go ahead and click on the item to see all its settings.

Now, open the ‘Type’ dropdown and choose the type of meta data you want to display.

Depending on the option you choose, you will get access to some additional settings. For example, if you selected ‘Modified Time’, then you can choose the time format.

You can also change the icon that SeedProd uses for the meta data item. Simply open the ‘Icon’ dropdown and then choose ‘Custom.’

You can then go ahead and click on ‘Choose Icon.’

This brings up the icon library with hundreds of icons to choose from. You can use the search bar to look for a specific icon or browse through the entire list.

When you find an image you want to use, simply hover over it and then click the ‘Plus’ button to add it to your page.

Do you want to remove a meta data item instead?

Then simply hover your mouse over it and then click on the trash can icon when it appears.

Finally, you can change the order of the meta data items using drag and drop.

When you are happy with how the Post Info box is set up, you may want to change how it looks by selecting the ‘Advanced’ tab.

Here, you can change the spacing, add a border, and even add CSS animation effects.

When you are happy with how the page looks, just click the ‘Save’ button and then choose ‘Publish’ to make it live.

Method 4: Editing Your Theme Files (Advanced)

You can also add meta data using code. This method is more advanced, but it allows you to control exactly what meta data WordPress shows to visitors and where that information appears on your site.

If you haven’t added code to your site before, then check out our step-by-step guide on how to copy and paste code in WordPress.

You can modify the individual theme files directly, but this makes it difficult to update your WordPress theme without losing customization. For this reason, we recommend overriding the theme files by creating a child theme.

If you are creating a custom theme, then you can add or modify the code in your existing theme files.

There are lots of ways to display post meta data in a WordPress theme. Some themes will have simple code that’s located below the post title, as you can see in the following example:

By <?php the_author_posts_link(); ?> on <?php the_time('F jS, Y'); ?>  in <?php the_category(', '); ?> <?php edit_post_link(__('{Edit}'), ''); ?>

The code above simply displays the author’s name, post date, and categories.

Other themes may use their own template tags, functions, and classes to show meta data. Then, the theme files that are responsible for displaying posts can use these functions.

Usually, you will find post meta data code in your theme’s index.php, single.php, archive.php, and individual content templates such as single-layout.php.

If you are unsure where to look, then please see our beginner’s guide to WordPress template hierarchy.

Now we have covered that, let’s take a look at some examples of how to display different post meta data in your WordPress blog.

How to Display or Hide Post Date in WordPress

To display the post’s publication date, you need to add the following PHP code to your theme:

<p>This article was published on: <?php the_time('m/j/y g:i A') ?></p>

This code simply shows the time and date when you published the post.

Pay special attention to the characters inside the_time function. These are called format characters, and they tell PHP how to format the date and time.

If you want to hide the date meta data at any point, then simply find the code with the_time or the_date functions in your theme files and delete those lines.

How to Display the Last Update Date for WordPress Posts

By updating old articles, you can keep your website fresh and interesting and improve your WordPress SEO.

If you regularly update old content, then you may want to show the date when a post was last updated. This can make your content seem more relevant and interesting to visitors, who may not be interested in posts that were published years ago.

Luckily, it’s super easy to display the last update date for WordPress posts using WPCode. It is the best code snippets plugin that allows you to edit your theme files without writing code.

For detailed instructions, please see our complete guide on how to display the last update date of your posts in WordPress.

How to Show or Hide Author Name in WordPress

To display the author name, you need to add the following code to your theme files:

<p>This article was written by <?php the_author(); ?></p>

This code uses the_author tag, which shows the author name only:

Sometimes, visitors may want to read more posts by their favorite author. With that in mind, you can link to the author’s page by replacingthe_author tag with the the_author_posts_link, as shown in the code below:

<p>View all articles by <?php the_author_posts_link(); ?></p>

If you want to hide the author’s name at any point, then simply find the the_author or the_author_posts_link tags in your theme files and delete them.

How to Show or Hide Categories in WordPress Posts

Categories can help readers find related content, which will improve the user experience and keep them on your website for longer.

You can show the categories meta data using the following code:

<p>This post was filed under: <?php the_category(', ') ?></p>

In the following image, you can see how the categories will look to your readers:

As you can see, the code shows all the post’s categories separated by a comma. You can replace the comma with any character you want to use by editing the code snippet above.

If you want to remove category meta data from your WordPress posts, then just find the line with the_category tag in your theme files and delete it.

How to Show or Hide Tags in WordPress Posts

Similar to categories, tags can help visitors find more content they are interested in reading.

To show the tags post meta data, simply add the following code to your theme files:

<p>Tags: <?php the_tags(); ?></p>

This code will show all the post’s tags separated by a comma.

You can replace the comma with any character you want. For example, here, we are showing tags separated by a slash.

	<?php the_tags( 'Tags: '/ ', ', '<br />' ); ?>

As you can see, the_tags function accepts three different values, known as parameters.

the_tags($before, $separator, $after)

You can use the before and after parameters to add any text or code that you want to show next to the tags. This allows you to add CSS classes and then use them to change how the tags look on your website.

Let’s take a look at an example:

<?php the_tags('<div class="wpb-tags">Tags: ', '  ', '</div>');

If you want to hide the tags from your readers at any point, then find the line with the_tags() code in your theme files, and delete it.

If you are comfortable adding custom code to your WordPress website, then you can show a lot more meta data to your visitors.

For example, you can use custom fields to add your own meta data to WordPress posts. Another option is to create custom meta boxes to display the custom fields.

We hope this article helped you learn how to display blog post meta data in your WordPress themes. You may also want to see our guide on how to create a landing page with WordPress or see our expert picks for the best landing page plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Display Blog Post Meta Data in Your WordPress Themes first appeared on WPBeginner.