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.
- Optimizing Database for Custom Fields in WordPress
- What is Custom Fields in WordPress?
- Easy Way to Add Custom Fields in WordPress Without Plugins
- How to Create Custom Meta Boxes & Custom Fields in WordPress?
- Get Posts by Custom Fields in WordPress - Part 1
- Applications of Custom Fields in WordPress
- How does WordPress Store Custom Fields? #1: Data flow
- How does WordPress Store Custom Fields? #2 Database
- What is Meta Box Plugin? How to Use It to Create Custom Fields in WordPress?
- Get Posts by Custom Fields in WordPress - Part 2
- How to Add Star Rating Fields to Meta Box
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.
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:
- 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
- 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.
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.
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
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:
In the post-Quiet, we added 2 values into the custom field Type, so these values are separated by a comma (,).
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 );
$post_id: The ID of the post you want to get custom fields from.
$key: The key of the custom field, also is the value of column Name.
$single: Define the type of data,
trueto return a single value and
falseto 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>
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>
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.
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!
The default custom fields functionality in WordPress is to help end-users customize their websites fast and easily. However, it is limited to only text fields and thus, is not enough in most cases. In this post, we will learn how to take control of custom fields by creating our own new field types.
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_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.