Easy Way to Add Custom Fields in WordPress Without Plugins

In the previous post, we have learned the basic concepts of custom fields and their applications. In this post, we will learn how to add custom fields to a WordPress site without coding or using a third-party plugin.

We have said in the latest post that WordPress has a default function that helps end-users manage custom fields in a simple way. You may add as many fields as you want with any names you like.

Let's get started to find them out!

How to Enable the Built-In Function of Custom Fields?

Step 1: Go to add a new post or edit a post, then click on Screen Options.

Step 2: Check the box "Custom Fields" if it has been ticked or not. If not, tick it.

Now you will see a box of Custom Fields under the editor area as below:

By default, this function works with Posts only. If you want it supports custom post types, you must declare it in option support when you register custom post types:

'supports' => array( 'title', 'editor', 'thumbnail', 'custom-fields' )

See the below video:

How to Create a Custom Field?

In the Custom Fields area, you’ll see the fields to fill data. This form is quite simple, as your thought, the meaning of columns are as below:

1. Name: it is an arbitrary name for the custom field. Use it as a key of the custom field.
2. Value: it is value in the simple text of the custom field.

Although it is a text field, it is quite flexible. It can save whatever data can be converted to text:

1. Simple text
2. HTML, XML, SVG
3. JSON
4. Data encoded in base64 of image, file, and so on.

This is an example of saving information about a product with Price and Type are text and image encoded in base64 of an SVG file:

Save Multiple Values in a Custom Field

After saving the post, you will see an additional box to choose a name for the custom fields instead of creating a new one. If you add data into an existing custom field, it will save both values.

This feature is also called cloning fields in Meta Box, or repeater fields in other plugins.

How to Display a Custom Field?

This part needs coding a little bit. If you have no idea about coding, you will grope in a half-day maybe. So you will consider that it is convenient to use? It is the trade-off. Handling by yourself a custom field from UI to data saving is much more complicated.

Two frequently used functions are:

• the_meta(): shows the list of custom fields in the front-end in an unordered list.
• get_post_meta( $post_id, $key, $single ): gets the value of a custom field.

In addition:

• get_post_custom(): gets all values of custom fields in a key/value array.
• get_post_custom_keys(): returns an array of all custom fields’ keys.
• get_post_custom_values( $key ): returns an array of all values of a custom field $key.

You have to call these functions in the loop.

You also need to change the code in your theme with 2 following options:

1. Edit theme directly:
   • - Advantage: Fast
   • - Disadvantage: Changes will be lost when you upgrade the theme.
2. Create a child theme:
   • - Advantage: Changes will NOT be lost when you upgrade the theme.
   • - Disadvantage: You need to take more time to learn about the child theme.

Because we are concentrating on custom fields only, I choose to edit the theme directly.

Here we go!

Display the List of Custom Fields

I use the theme Twenty Seventeen here. I want the list of custom fields displays right after the Post Title in both archive and single page, so I add the_meta() function into the file template-parts/post/content.php as below:

<?php
the_meta();
?>

Now our homepage will be like this:

In the post-Quiet, we added 2 values into the custom field Type, so these values are separated by a comma (,).

Video:

Display a Single Custom Field

You must get the value of each custom field and display them by yourself. Use the get_post_meta() function to get custom field value:

get_post_meta( $post_id, $key, $single );

In there:

1. $post_id: The ID of the post you want to get custom fields from.
2. $key: The key of the custom field, also is the value of column Name.
3. $single: Define the type of data, true to return a single value and false to return an array of all values

You can use get_the_ID() to get the ID of the current post if you are in the loop.

For example: Replace the the_meta() paragraph by the below code:

<ul class="post-meta">
    <li><span class="post-meta-key">Price:</span> <?php echo esc_html( get_post_meta( get_the_ID(), 'Price', true ) ); ?></li>
    <li><span class="post-meta-key">Image:</span> <?php echo esc_html( get_post_meta( get_the_ID(), 'Image', true ) ); ?></li>
    <li><span class="post-meta-key">Type:</span> <?php echo esc_html( get_post_meta( get_the_ID(), 'Type', true ) ); ?></li>
</ul>

The result will be like this:

In post Quite, because our parameter $single is true, custom field Type returns a first value ("Hard") only while it has 2 ones. To display the value Soft, we edit the code as below:

<ul class="post-meta">
    <li><span class="post-meta-key">Price:</span> <?php echo esc_html( get_post_meta( get_the_ID(), 'Price', true ) ); ?></li>
    <li><span class="post-meta-key">Image:</span> <?php echo esc_html( get_post_meta( get_the_ID(), 'Image', true ) ); ?></li>
    <li><span class="post-meta-key">Type:</span> <?php echo implode( ', ', array_map( 'esc_html', get_post_meta( get_the_ID(), 'Type', false ) ) ); ?></li>
</ul>

Result:

We need to encode the image in base64 for the image field because WordPress only handles text input. To do that, you may use the tool base64-image.de. Try to upload an image, you'll have a text paragraph, then copy it to the custom field Image.

In the previous example, I replaced code base64 with three dots (...) to help you imagine other fields easier. In reality, it has a look like this:

Now, if you want to show it in the image type, edit single.php as below:

<ul class="post-meta">
    <li><span class="post-meta-key">Price:</span> <?php echo esc_html( get_post_meta( get_the_ID(), 'Price', true ) ); ?></li>
    <li><span class="post-meta-key">Image:</span> <img src="<?php echo esc_html( get_post_meta( get_the_ID(), 'Image', true ) ); ?>"/></li>
    <li><span class="post-meta-key">Type:</span> <?php echo implode( ', ', array_map( 'esc_html', get_post_meta( get_the_ID(), 'Type', false ) ) ); ?></li>
</ul>

Result:

You also can do the same with other files such as audio, video, pdf, and so on.

However, this is for demonstration purposes only. Saving base64 data into the database may take the unnecessary weight. We will learn the way to create custom fields which allows uploading image in later posts.

Video:

Conclusion

Creating and saving custom fields by the default function of WordPress is quite simple. You need to click the buttons only, fill forms and use some simple functions to display the data in the frontend because WordPress helps you handle everything.

That is the spirit of WordPress, but it has limited also. This function allows the text field only. If you want to try more complicated field types, you must take the form fields, handle data submitted by users, and save it to the database by yourself. It is neither complicated nor simple at all. And, we will learn more about that in the next post. See you!