Best WordPress Plugin for Custom Fields & Meta Boxes
Series: Custom Fields
All about custom fields, from basic to advanced use, application, optimization, … help you use custom fields in WordPress more skillfully and effectively!
Custom fields is a way for WordPress to store arbitrary extra data for content (posts and custom post types), such as author name, published date for a book. To make custom fields flexible and compatible with different kinds of data, WordPress designs the meta tables (post meta, term meta, user meta, and comment meta) in the form of key-value. According to that, each custom field is stored as one row in the database. This approach allows developers to store unlimited data regardless of its structure. But, the downside is the rapid bloat of the database. Because the number of custom fields is usually very large. This article will present solutions to optimize the storage of custom fields in the database to help boost your website performance.
Custom Fields is an important and useful feature in WordPress and bring us a very high customization ability. So, let's find out the basics, relevant techniques, and excellent applications of Custom Fields in this series.
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.
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.
The Edit Post screen in WordPress
Step 2: Check the box "Custom Fields" if it has been ticked or not. If not, tick it.
Check the box "Custom Fields"
Now you will see a box of Custom Fields under the editor area as below:
The Custom Fields area
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:
Enable WordPress custom fields without plugins | Meta Box Tutorials
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:
Name: it is an arbitrary name for the custom field. Use it as a key of the custom field.
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:
Simple text
HTML, XML, SVG
JSON
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:
An example of saving the information about a product in custom fields
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 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:
Edit theme directly:
- Advantage: Fast
- Disadvantage: Changes will be lost when you upgrade the theme.
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:
Homepage after adding custom fields
In the post-Quiet, we added 2 values into the custom field Type, so these values are separated by a comma (,).
Video:
Create and Display WordPress custom fields | Meta Box Tutorials
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:
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:
Display Image custom field without base64
Now, if you want to show it in the image type, edit single.php as below:
Display Image custom field after encoding with base64
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:
Create and Display Image custom fields in WordPress | Meta Box Tutorials
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!
In the previous articles, we've known about what Custom Fields is and the application of custom fields which allows users to add arbitrary information into posts. But what do you do after that? In the recent post, you also learned how to add custom fields programmatically and display them in your theme. But you’ll see a shortcoming if there is no classification and searching. This post will guide you on how to get posts by custom fields in WordPress and we'll create an interesting application: advanced search.
As we know, custom fields is used to add more data to some objects in WordPress such as posts, pages, taxonomies, users, and comments. The two main purposes of custom fields are to describe and filter those objects. In this post, we'll learn what specific applications custom fields has in reality.
Until now, we’ve known what custom fields is and how to use the functions provided by WordPress to work with custom fields. You’ve prepared everything needed to develop practical applications. But wait, before embarking on doing something new, you had better dig a bit deeper to have thorough understand custom fields' nature. It’s time to find out an answer to the question: “What really happens with custom fields when I click Save post?”. The two coming posts will give you the answers.
Now, you know what custom fields is and in the previous post, we stopped in the step “WordPress calls the update_metadata function to store data from custom fields in the database”. In this post, we’ll follow up that flow to figure out how WordPress organizes the database.
The importance of meta box and custom fields in WordPress has been emphasized in the previous posts. Due to their significance, they are used a lot and frequently in the development process of a plugin or theme to satisfy the need of users.
In part 1 of this series, we learned about how to get posts by custom fields in WordPress with the WP_Query function. However, if we need to deal with databases, it’s better to find another faster, easier, and more convenient way. That method is joining wp_posts and wp_postmeta tables together, and then querying by SQL. In part 2 of the series “How to get posts by custom fields in WordPress”, we’ll use this way to add the advanced searching feature that allows users to search by keywords in posts / pages titles and custom fields content.