Using “the_meta” WordPress template tag *

I find that many times within a post or a page I need some sort of extra custom info that falls outside of the standard body text. Maybe it’s a Paypal button code, a short list of things, a link for tickets, etc. I don’t mind seeing a couple HTML tags here and there but they are better suited to be in the PHP template file.

There are many ways to add the custom code but not every situation calls for a custom meta box and tons of PHP coding. The quick and easy way is to use the WordPress template tag the_meta.

There are three steps to implementing this in your WordPress theme – the PHP code, any CSS styling, and adding the Custom Field content.

The PHP Code

<?php the_meta(); ?>

This code will go in the loop right before or after the content:
the_content(); or get_template_part( 'content', 'single' ); or similar.

The CSS

/* Inline Version: Label on the left, info on the right */

.post-meta-key {
	display: inline-block;
	font-weight: bold;
	text-align: right;
	width: 15%;
}
.post-meta {
	display: block;
	list-style: none;
	margin-left: 0;
}

/* or */

/* Block Version: Label above, info below */
.post-meta-key {
	display: block;
	font-weight: bold;
}
.post-meta {
	display: block;
	list-style: none;
	margin-left: 0;
}
.post-meta li {
	padding: 5px;
}
.post-meta li:nth-child(even) {
	background: #ededed;
}

Adding the Content

Here is where you add the content. Select “Screen Options” at the top of the post editing page if it’s not below the main content field.

Here is an example of what it will look like. [button link=”http://petedegraw.me/demos/the-meta/index.html” color=”yellow”]Demo[/button]