How to Create WordPress Custom Fields Without Plugins

WordPress has made it easy for developers to customize WordPress in so many ways to meet their custom needs, including letting developers assign new meta-data within a post. That way developer can display additional outcomes within their themes or plugins on top of standard data like the post title, post content, and post author.

There are several methods to create custom meta, you can use a plugin or work on top of a framework, or you can do it from scratch. In this post, we’ll look into how to create custom meta from scratch (it isn’t as hard as you’d think) and use it to display a sponsored post message.

Adding a Custom Meta Data

First of all, go to the post editor. Usually you can find regular input fields like the title, the content, the category, and the tag box there. There are a few hidden fields as well, including a Custom Fields Editor, which we can use to add our custom meta.

To display it, click the Screen Options and tick the Custom Fields option.

The Custom Field box should now appear at the bottom of the post content editor. Now, we can add our custom meta-data.

A single meta-data is handled with key name/value pairs. Hence, as you can see below, the Custom Fields box consist of two input fields: name and value.

In this following example, I will specify a new meta-data for the post that I’m currently editing, with hello_world as the key and Hello World as the value.

Click the Add Custom Field to add them in the post. You can later update or delete this meta-data. Also, as you have entered a key name before, WordPress will store and list the name in a dropdown option, so that you can reuse the key without having to type it all over again.

Retrieving the Meta Data

Having the meta-data set, you can now display your theme single.php file, which is the file to display single post content. You can call out the value from hello_world key using the get_post_meta() function. like so.

<?php 
	$meta = get_post_meta( get_the_ID(), 'hello_world' );
	echo $meta;
?>
<?php the_content(); ?>

But keep in mind that this meta-data won’t be available in all post, so we will have to run this function within a conditional statement; in other words, we should call this function only when the meta-data is set in the post, otherwise it will return an error.

<?php 
	$meta = get_post_meta( get_the_ID(), 'hello_world' );
	if( !empty($meta) ) {
		echo $meta[0];
	}
?>

Given the above code snippet, you should see the Hello World! of the key value displayed above the post content.

Show “Sponsored Post” Box

Now let’s use it in a real world example. Assuming we are going to publish a sponsored post, and we want to show a disclaimer in a box above the post content, we can do this by creating the meta-data named is_sponsored_post and then setting the value field to Yes, like so.

We will display the box when the value of is_sponsored_post is set to Yes through the conditional statement, just like in the previous example.

<?php 
	$meta = get_post_meta( get_the_ID(), 'is_sponsored_post' );
	if( $meta[0] == 'Yes' ) { 
?>
	<div class="sponsored-post">
		<p>Disclosure: This is a sponsored post that contains affiliate links. End of post:  I received compensation in exchange for writing this review.</p>
	</div>
<?php }	?>

And this is what it looks like when the message is displayed.