If you’ve used taxonomy field type, you will see it has an option to display options in a checkbox / select tree. When users select a parent item, it will show children item. It’s quite a nice feature for users. But how to do that with normal checkbox list or select field types?
The answer is simple: it’s already built-in the Meta Box plugin. And here is the sample code:
Sometimes you want to move the traditional editor for the post to another location, probably inside a meta box. It will keep everything more organized. For example, if you have an event post type, then you might have the following data:
Start date and time
End date and time
Then keeping the description (which can be the post content) along with other fields make users easier to fill in the data. While this is impossible to do that with the default WordPress editor, we can do that with the Meta Box plugin.
The steps to do that are describe below:
Remove the default editor (we don’t want to display it at the top)
To make Meta Box save the wysiwyg content to post content, we have to set it 'id' => 'content'. This id is used to tell WordPress to get the submitted value and save it to post content.
Because we use the WordPress’s id for the field, some WordPress style is applied and makes the field look weird. We have to use a custom_html field to output some CSS to fix it. Note that you might want to enqueue another stylesheet to do the same job. Here we use the custom_html for the quick fix, it just works.
The code above works for post. If you want to make it work for another post type, don’t forget to change the post type in the code above!
When you register a radio or a checkbox list field which have some options like “United States”, “France” (for countries, for example), you expect the value returned by the helper function rwmb_meta() is that text. But it doesn’t. Instead it returns only the value (like “us”, “fr”) of the option. So, how to make it work like you want?
custom_html is a very useful field in Meta Box, which helps you to output anything in the post edit screen. It can be a warning box or an instruction for users to help them enter the correct data. But do you know that you can use PHP to render the HTML for the field? Using PHP, you can query the database, get WordPress information and show it. There’s no limit with PHP. This guide helps you understand the field using a callback function to query the WordPress database and output the result.
For the demo purpose: I will setup a connection from a post to many pages (1 to many). And when editing a page, I need to know which posts refer to the current page.
So, creating a connection from a page to many posts is very simple with a field post like this:
Composer is a package dependency manager for PHP. It’s kind of TGM Activation class for WordPress, but works for any PHP package. Composer allows us to include other PHP libraries in our projects without conflict between them. Without Composer, if a project requires 2 libraries A and B, and both of them requires a library C, then C might be included twice. The scenario can get worse if A and B includes different version of C which can cause a conflict when loading the library. Composer helps us to avoid this issue.
Besides, there are more than 100K packages (libraries) for us to explore if we use Composer. They can be a framework like Laravel, Symphony or a package to handle the payment with Stripe or authenticate with social networks. That means lots of possibility to do something with less code by standing on shoulders of giants!
Fortunately, Meta Box is totally compatible with Composer and you can use it as a library for your projects. As Meta Box is a WordPress-specific package, the “project” term here means a WordPress website, plugin or theme. This tutorial will show you how to use it for a plugin. I will name the plugin MB Composer Example and its code is available on Github.
Please follow the very detailed guide on the Composer homepage to know how to install Composer on your system.
Composer requires a config file named composer.json where we defines all the dependencies. So, create it in the plugin folder and add the following content:
The first (and often only) thing you specify in composer.json is the require key. You’re simply telling Composer which packages your project depends on. The package name has the format author/package-name. In this case, it’s rilwis/meta-box.
The value is the version you want to use in your project. 4.* means the latest version 4. You can set a specific version 4.8.7 or using wildcard. For more info about the syntax of versioning, please follow the Composer documentation.
You can add more packages by adding more key-value pairs if your project uses other packages than Meta Box.
The 2nd step is telling Composer to pull the packages that your project depends on to the local folder. Simply cd to your project folder and run:
Make sure you install Composer globally. If you don’t know how to do that, please refer to the documentation in the Installing Composer section above.
After a minute, Composer will download Meta Box and put it in a local folder. Your folder structure after that will look like this:
To make Meta Box works, we need to include the plugin’s file in our plugin. Although we can hardcode that, Composer has an intelligent autoloading mechanism to load packages. Simply put the following line in the plugin’s main file:
Now go to Dashboard > Posts > Add New and we’ll see:
Bravo! We made it.
This tutorial is a very simple example of using Meta Box with Composer. You can learn more about Composer by reading its documentation and browser packages at packagist.org. Although this is not a traditional way to develop plugins for WordPress, using a modern PHP tool like Composer benefits us a lot because of 2 reasons:
Dependency management: it’s always a headache for managing dependencies in WordPress. There are some works around that like TGM Plugin Activation class and Plugin Dependency. But it’s still far from perfect. Not all plugins are be able to be included inside another plugin like Meta Box.
Vast amount of libraries: this is a huge advantage of using Composer. With these well-coded libraries, your development process will be easier, faster and thus, it saves you tons of time.
So, enjoy Composer and Meta Box! And share with us how you use them in your projects via the Contact form. We’d love to know that!
That might be confused as you don’t know which extension is the right choice for you. So the main difference between them is the following:
Meta Box Include Exclude hides meta boxes by PHP, meaning:
Meta boxes are removed completely from the editing screen, no HTML markup is outputted at all
Since meta boxes are removed completely, there are no inputs at all and thus, there are no meta values are saved at all
There is no way to show the meta boxes again unless reloading the page
The HTML of meta boxes are outputted, inputs are only hidden and the meta values are submitted when saving post and are saved in the database
You can show them without reloading the page
The Meta Box Conditional Logic differs from Show Hide: it has more advanced options which allows you to show/hide not only meta boxes but also fields and specific HTML elements. The Show/Hide extension can show/hide only meta boxes. Besides, the number of conditions in Conditional Logic are more than Show/Hide extension (greater, less than, not equal, etc.).
So we’ll wrap this field by a ID which same as this group’s ID.
'fields' => array(
'id' => 'standard',
'type' => 'group',
'clone' => true,
'sort_clone' => true,
'hidden' => array('post_format', 'aside'), // This will works
'before' => '<div id="standard">', // ID should same as this field id
'after' => '</div>',