Yesterday, we released several improvements for Meta Box: the new version 5.2.0 with better performance for object fields, a new MB Core extension for Core Bundle, and a totally new settings page for Meta Box AIO. Let’s see what’s new in these improvements.
A quick summary:
- Meta Box 5.2.0 focuses on improving the performance for object fields (
user). If your website has thousands of posts or terms, the difference is significant and important.
- A new extension MB Core is available for all users who own a Core Bundle license. Similarly to the Meta Box AIO, this plugin contains all the extensions available in the Core Bundle in a single plugin.
- We completely redesigned the settings page of Meta Box AIO (and of course, the new MB Core).
Meta Box 5.2.0: Ajax Requests For Object Fields
Previously, the requests that fetch options for object fields are done via WordPress queries, such as
WP_Query for posts. And the default query parameters for it is:
array( 'post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => -1, ),
Did you notice the value of
posts_per_page? It’s set to
-1 to get all published posts. This is necessary to get all posts for the dropdown options.
However, this is a performance problem. If your website has thousands of posts, then the query might cause a high CPU load and break the execution or slow down the website very much.
To solve this problem, we changed the way we query posts from static to dynamic. So, instead of fetching all posts at once, we fetch only some posts via Ajax and implement some features:
- Infinite scrolling: when users scroll to the end of the dropdown list, more posts will be fetched via Ajax and appended to the list.
- Searching: if users type and characters in the search box, the requests will search only for items that match the search term.
- Caching: we cache all the queries to prevent extra Ajax requests for the same search term.
Please see the video below for a demonstration:
The speed of Ajax request is quite high, so you hardly see the infinite scrolling in the video. Please notice the change in the scrollbar in the dropdown. Normal users probably don’t see any change in the dropdown, and they might still think it’s a long list of options as before.
This is available for not only posts but also terms and users. They work in the same fashion.
And this featured is available for fields that set
select_advanced. And it is enabled by default for
user. We also have some extra parameters for you to disable or customize it. Let’s see how to do it.
Assuming you have a post field with the following parameters:
array( 'id' => 'project', 'title' => 'Project', 'type' => 'post', 'post_type' => 'project', ),
Enable/Disable Ajax Requests
To enable the Ajax requests, simply add
'ajax' => true to the field:
array( 'id' => 'project', 'title' => 'Project', 'type' => 'post', 'post_type' => 'project', 'ajax' => true, // THIS ),
Setting this parameter to
false will disable Ajax requests, making it work exactly the same as in previous versions.
This parameter is available for all
user field. And it’s set to
true by default.
Limit The Number of Posts for Pagination
Similar to the previous version, the number of posts for pagination is set via the
posts_per_page in the
array( 'id' => 'project', 'title' => 'Project', 'type' => 'post', 'post_type' => 'project', 'ajax' => true, 'query_args' => array( 'posts_per_page' => 10, // THIS ), ),
Unlike in previous versions, this number is used only for Ajax requests to fetch the next bunch of posts. The new fetched posts will be appended to the list of options in the dropdown, to make the infinite scroll effect.
It also doesn’t affect the initial load of the field. When the field is loaded, Meta Box only queries for saved posts (which is usually not many). So the initial query is very minimal and doesn’t cause any performance problem.
taxonomy_advanced field, the parameter name is different:
array( 'id' => 'project_cat', 'title' => 'Project Categories', 'type' => 'taxonomy_advanced', 'taxonomy' => 'project_cat', 'ajax' => true, 'query_args' => array( 'number' => 10, // THIS ), ),
user field, the parameter is:
array( 'id' => 'project_author', 'title' => 'Project Author', 'type' => 'user', 'ajax' => true, 'query_args' => array( 'number' => 10, // THIS ), ),
You probably don’t want to perform an Ajax request when open the dropdown at first. You might want to make Ajax requests only when users type something and search for that. To do that, you need to set the
minimumInputLengthfor the input, as below:
array( 'id' => 'project', 'title' => 'Project', 'type' => 'post', 'post_type' => 'project', 'ajax' => true, 'query_args' => array( 'posts_per_page' => 10, ), 'js_options' => array( 'minimumInputLength' => 1, // THIS ), ),
This parameter sets the minimum number of characters required to start a search. It may be good if you don’t want users to make too many Ajax requests that could harm your server.
New MB Core extension for Core Bundle
We realize that some of you don’t want to install too many plugins on your WordPress sites. Although the number of plugins doesn’t matter as much as their quality, it’s still a reasonable request to make the plugin list shorter.
In the past, we created Meta Box AIO for Developer Bundle and Lifetime Bundle. And our users love it. And now, we create a similar plugin for users who own a Core Bundle license.
The MB Core plugin is similar to Meta Box AIO, which contains all extensions in a single plugin. So, instead of installing 10 plugins, you might need just one. And please note that it contains only extensions available in the Core Bundle. If you want to have access to all extensions, please upgrade to Developer Bundle or Lifetime Bundle. We only charge for the difference in prices. Please see that in your My Account page.
Redesign of Meta Box AIO Settings Page
Based on a request in the support forum, we completely redesigned the settings page of Meta Box AIO to make it easier for users to access the documentation and support forum for each extension.
See the comparison image below:
The new UI is also available in the MB Core plugin as well. Along with the new UI, we also changed the menu name from All-In-One to Extensions to make it clearer.
We hope you like the new design! And if you have any feedback, please let us know. We always listen to you!