A few days ago we had another meeting of WordPress enthusiasts – developers in Košice . We met in Halmi caffe , this time also with the topic “Custom meta boxes”.
We looked at three ways to create your own input fields in the WP administration and added some of our own experiences, types and generators during the discussion. We started with the use of classic WordPress functions and a description in the documentation, we continued with demonstrations based on the Advanced Custom Fields and CMB2 plugins. A few source codes at the end of the article;)
These input fields can be used for special values that we want to process and display on the page, in the article, profile, product, etc.
According to WordPress documentation
At its core, WordPress has great features that allow us to customize it to our liking. One of them is add_meta_box () , which we use to create our own input field.
According to the entered parameters, we can specify in which part of the post editing the input field should be located and also for which type of the post it will be used (article, page, profile ..). However, the function will only create a field for us. You still need to save its value each time you save the post and load it when you try to edit it. We were inspired by the comprehensive solution, which we found in the comments below the documentation.
The value of this input field is stored in the database in the table postmeta (or usermeta , etc., depending on the type of post) in a row together with the post ID and meta key (used to distinguish several types of values for one post).
For further processing or direct display of the value on the page, we retrieve this value from the database using the get_post_meta () function.
Specifically, for example, as follows:
<?php echo get_post_meta( get_the_ID(), '_my_meta_value_key', true ); ?>
Sample result per page:
Using the Advanced Custom Fields plugin
This plugin has the advantage that it is possible to literally click the input fields in its interface.
Another advantage is the extensive documentation and without the need for lengthy programming we can create input fields for the gallery, map, date and time, etc.
However, it exaggerates a bit in the database. By first defining the input fields in it, it saves them as posts (in the posts table) and then stores the values (for example, the position of the input field in the edit) in the postsmeta . When saving page edits, it saved us two more rows in the database for one input field. When the revision was automatically saved, there were two more.
We then do not use the classic WP function (get_post_meta) to display the value, but the plugin function, for example:
<?php the_field('acf1'); ?>
According to the documentation, we can also use shortcode and display values in the text of the article.
Using the CMB2 plugin
This plugin no longer has “click” settings as we are used to.
It contains pre-built classes and objects that can be used to create custom input fields that make writing much easier. We find extensive documentation for it, and like ACF, it makes it easier to create fields for different types of values (date, time, color, etc.).
I would like to draw attention to the possibility of adding another text editor in combination with a repeater (group), so we can distinguish parts of the text on the page, later change their order and the like. Other freely available extensions for this plugin are also available.
It stores values in the database using one line and uses the classic WP function for their processing (example):
<?php echo get_post_meta( get_the_ID(), '_yourprefix_text', true ); ?>
Generators
These are some of the generators mentioned at the meeting. They generate code that works with basic WP functions, without additional plugins.
- WordPress Meta Box Generator v2 Beta
- Hasty generator (coming in July 2017)
- GenerateWP (available in an expanded version)
Code sample used for meetupe
Packages include:
- plugin, in which there are examples of classic WP functions and use of CMB2 (for correct functionality it needs activated CMB2 plugin)
- just activate the plugin and the new input fields will appear in the page editing
- “test” theme, which is a derived Twentyfifteen theme (for proper operation it is necessary to have the Twentyfifteen theme installed)
- contains page šablóny with codes for displaying stored values
Was this article helpful for you? Support me by sharing, please. 👍
