MB Blocks

MB Blocks

Since version 5.0, the block editor (Gutenberg) has become the default editor in WordPress. This block editor allows you to write the content and live preview it in real-time. In other words, what you write is what you will see on the front end. Gutenberg supports a lot of blocks for content creation. But it’s never enough. WordPress developers still need to create custom Gutenberg blocks for their specific piece of content. And that’s where MB Blocks can help you speed up this process.

Create Gutenberg Blocks with Meta Box
A sample Gutenberg Block

How MB Blocks Can Help Creating Gutenberg Blocks?

Creating a custom Gutenberg block requires WordPress developers to use React with modern JavaScript toolings such as Webpack and Babel. The configuration and the build process for JavaScript are not easy to most WordPress developers, who have spent ages to learn PHP to do WordPress theming or make custom plugins. Learning a new thing is not always an option for them.

With the help of MB Blocks, WordPress developers can create custom Gutenberg blocks with only PHP! There’s no JavaScript configuration and no need to learn React. Everything is pure PHP, just like you create a custom meta box with our plugins.

What Are The Benefits Of Creating Gutenberg Blocks With PHP?

With most WordPress developers, who are more familiar with PHP than JavaScript, then using MB Blocks to create custom Gutenberg blocks have several benefits:

  • You only need to spend very little time to know how to create custom Gutenberg blocks in PHP. If you’re already a Meta Box users, then you just need to learn a few settings. Everything won’t take longer than 10 minutes!
  • You don’t have to learn a new JavaScript framework – React just to write a simple Gutenberg block.
  • And you don’t have to spend a whole day figuring out how to configure Webpack and Babel to make it compiles your JavaScript code.

Along with that, you can also:

  • Build complex Gutenberg blocks with various block settings, which is not always easy to do with JavaScript.
  • Inherit many settings and field types from Meta Box (more than 40 field types), which saves you a ton of time creating new blocks.

That says, you only need to focus on your block logic and presentation and leave all the heavy work of setting up the fields to the plugin.

Live Preview Blocks In Real-Time

Like creating Gutenberg blocks with JavaScript, creating Gutenberg blocks with MB Blocks give you full features from Gutenberg. You can edit the block settings and see the changes in real-time. Whenever you make a change in a block field, the block is re-rendered immediately with the new field value.

Besides, if your block requires some dynamic script (just like you want to instantiate a slider), you have full ability to do that.

Video Tutorial

To learn how to use the MB Blocks plugin to create custom Gutenberg block, please see this 15-minutes video:

Creating Gutenberg Blocks Visually

If you’re not familiar with coding, you still can get benefit from MB Blocks with the help from Meta Box Builder. The builder extension allows you to build Gutenberg blocks without touching a line of code. All you need is just select the settings for the blocks and done!

See the screenshot below:

Setup the block options in Meta Box Builder
Setup the block options in Meta Box Builder

See this video for how to do that:

Plugin Features

  • Use similar syntax as creating a meta box, so you don’t have to learn too much if you’re already familiar with Meta Box.
  • Supports all field types and features from Meta Box.
  • Ability to work with dynamic JavaScript if you want to run your custom JavaScript for the blocks.
  • Supports block alignment in Gutenberg
  • Supports custom CSS class
  • Supports custom anchor
mb user profile

MB User Profile

MB User Profile is an extension of the Meta Box plugin that allows you to create register, login and edit profile forms in the frontend. It works similar to MB Frontend Submission, but for the user profile. These forms can be embeded anywhere using shortcode and requires no custom code.

User profile form
User profile form

Custom fields for users, but in the frontend

The MB User Profile extension includes the MB User Meta extension, which allows you to add custom fields to user profile. The disadvantage of the MB User Meta is it works only in the admin area. With the help of MB User Profile, you can create user forms in the frontend where you can edit user information easier than before.

Note that if you use MB User Profile, you don’t need to install MB User Meta.

Unlimited forms, unlimited custom fields

The MB User Profile extension includes 3 shortcodes for 3 types of form: login, register and edit user profile. In each shortcode, you can include any custom fields created by the Meta Box plugin. So, there is no limitation for number of forms or fields in those forms.

For example: you can create 2 login forms using the provided shortcode for a sidebar widget and for the header. You also can create 2 user profile forms: one for general information, one for back accounts.

You can use the shortcodes to display user forms anywhere on your website – whether inside a page content, text widget or within a custom PHP function (use do_shortcode). It’s flexible and user-friendly.

All field types are supported, including not only basic fields, but also advanced fields like wysiwyg, date time picker, slider, or file upload. You can use the MB User Profile to create a very complicated form if you want. Beside, the clone feature works!

Creating user profile form with drag and drop builder

With the help of the Meta Box Builder extension, you can create user profile form without touching a line of code. Simply go to Meta Boxes → Add New and add any fields you want to. Then go to the Settings tab and select “Show meta box for users”:

Please note that you need to purchase the Meta Box Builder first in order to use the builder for user profile. If you already purchased a bundle, then the builder is already in your account. You can just start using it for user profile.

Plugin Features

  • Creates user register, login and edit profile forms
  • Adds custom fields to register, login and edit profile forms
  • Support all custom field types provided by the Meta Box plugin
  • Embeded everywhere with shortcodes
Custom table for WordPress custom fields

MB Custom Table

MB Custom Table is an extension of Meta Box plugin that helps you to save data to custom table instead of the default post / user / term meta table. All meta values are saved in a single row, and each column will be a meta key. This reduces the number of rows in the database which can cause a performance issue when the data grows. And let you have all of your data in one place, so you can easily view, edit, import, export it.

Save custom fields in custom table
Save custom fields in custom table

Why custom table for custom fields?

By default, WordPress uses meta tables for storing the meta data (custom fields). In order to satisfy a wide range of needs, WordPress use a flexible database structure, where each custom field is stored as a row with 4 columns: meta_id, post_id, meta_key and meta_value. While it seems to be fine at first, when your data grows, the number of database rows increase very fast.

Let’s take an example: If you’re using WooCommerce, each order (a custom post type) requires more than 40 custom fields as follows:

Custom fields for WooCommerce orders
Custom fields for WooCommerce orders

Imagine if you run a flower shop, and have 20 orders per day, then WordPress will store 20 * 40 = 800 rows in your database. After 1 month, it will be 30 * 800 = 24.000 rows, for just 30 * 20 = 600 orders.

What if we can store all the custom fields in a single row? Something like in the first screenshot, where each custom field takes only 1 column in the database. Therefore, with the case of WooCommerce orders, you only have 600 rows in the database for 600 orders. Besides, all the information about a single post can be viewed at once.

What are the benefits of this method?

  • Your database size will reduce
  • As all the custom field data is on a same row, your query will be faster and simpler
  • You can view all the data at once using any database management tool
  • You can export all the data easier by exporting only one table

In order to achieve these goals, MB Custom Table extension is all you need.

MB Custom Table provides a simple API for you to create custom tables and store custom fields to custom tables. It works with all field types of Meta Box plugin as well as all meta types (post, user, term). The extension uses a simple syntax to define table and you won’t have to change your meta box definition.

See how to save WordPress custom fields in custom tables

Features

  • Uses WordPress recommended method to create custom tables, which allows you to upgrade table structure anytime.
  • Provides a simple API to define table structure.
  • Works with any meta types: post meta, user meta, term meta, comment meta.
  • Provides an easy way to integrate with your existing meta boxes.
track changes in wordpress custom fields with revision

MB Revision

MB Revision extension for Meta Box allows you to track changes of the custom fields for post revisions: saving, comparing and restoring data from revision. It supports all field types, including groups and provide an easy way to see the changes in each revision.

Compare custom fields on revision screen
Compare custom fields on revision screen

What is a revision?

As WordPress Codex states:

The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision – what was added, what remained unchanged, and what was removed. Lines added or removed are highlighted, and individual character changes get additional highlighting. Click the ‘Restore This Revision’ button to restore a revision.

By default, WordPress tracks the changes only for post title and post content. The MB Revision enables the tracking for custom fields as well. If you store a lot of data in the custom fields, and want to see the changes that your users made, this is the extension for you.

Why tracking revisions for custom fields is important?

Because your data is not only post title and post content! For a large websites, creating pages such as landing pages, project pages requires custom data, which are stored in the custom fields. They’re very important that modifying them carelessly might cause a big decrements of leads or sales. So you need to make sure every time you edit, you do it right.

Another situation is when you website has many users that can edit the content. What if someone changes a field while he’s sleepy or distracted? How do you know who did that when it happens?

For those reasons, to prevent unexpected changes in the website content, you need to track revisions for all kind of content you might have.

How does the extension work?

The plugin does 3 things:

  1. Automatically copies the values of the custom fields from the parent post to the new revision when the parent post is updated.
  2. Shows the changes on the revision comparison screen. You will see the changes of custom fields below the post title and post content. If the value is an array (cloneable, group field), you will see JSON-encoded of the array. We think JSON is quite good for human reading. Because we can see not only the structure, but also the real data.
  3. Restores the values of the custom fields from a revision to the parent post when users restore from a revision.

To enable revision support, all you need to do is adding 'revision' => true to meta box configuration. The extension will handle the rest.

submit posts in the frontend

MB Frontend Submission

MB Frontend Submission is a Meta Box extension which lets developers create custom forms so users can submit posts on the front end of a website.

The extension supports both traditional post fields and custom fields, and you can also embed forms anywhere on your site using shortcodes — with no extra coding required.

meta box frontend submission

Front-End Forms Made Easy

No matter if you’re the website owner or if you’re the user submitting content: everyone gets to breathe a little easier with Frontend Submission.

Create seamless custom forms for easy post submission.
Create seamless custom forms for easy post submission.

Your Fairy Godmother Has Arrived

When you have multiple people submitting content to a website, managing editor accounts and user permissions can be a huge hassle. Having custom details and posts submitted from the front end is a quicker and cleaner solution.

When users contribute their content via a front-end form, the submission can be reviewed from a single location before publication similar to how comments work in WordPress core.

Your contributors’ post submissions will be neatly organized for fast and fearless publication in a way that even the most finicky stickler can appreciate.

It’s all the magic with no wand needed.

Skip the Set-Up

Before MB Frontend Submission, you would have to use extensive custom code to display the form on the front end, and manually control how and where it saves vast amounts of variable data.

Now who has time for that?

With MB Frontend Submission, everything is handled: no extra redirection code.

Just insert the shortcode to add the form and let the extension do the rest.

You can use Frontend Submission to create a flawless, user-generated content system. You’ll be able to relax while details, data and documents roll right in from the front end of your site.

Down to the Last Detail

There are endless ways you can customize your forms to collect all the details you need with a light amount of effort.

Below are just a few ways you can use Frontend Submission to get organized without missing a beat.

Choose the Place and Time

Use Front End Submission to let users submit properties for rent, sale or whatever your business specializes in.

The Map, Image and Video field types are all great ways to show off some real estate – all from a single page.

Let your clients do the work for you and have them submit their property on your site.
Let your clients do the work for you and have them submit their property on your site.

A Penny for Your Thoughts

Leverage crowdsourcing since it’s a great way to compile content, especially when everyone has an opinion. Use FrontEnd Submission to have users submit individual book, movie, album or other kinds of reviews that are displayed with an overall rating.

Use the Slider field type or a number system as well as a Text Area to let your users rate, rant and rave!

Users can click, hold and slide the marker to adjust the value of the field.
Users can click, hold and slide the marker to adjust the value of the field.

Craigslist Who?

The internet is such an amazing way to promote connection, and help facilitate trades and shares: why not create a platform that helps people do both?

Use FrontEnd Submission to let folks post their belongings, giveaways, and even their time or resources so you can help more people connect and get what they need.

From simple to complex meta boxes and custom fields, Frontend Submission does it all.
From simple to complex meta boxes and custom fields, Frontend Submission does it all.

Award for Supporting Role in Post Management

Although it’s built for custom fields and custom meta boxes, MB Frontend Submission fully supports post creation and management as well.

Use MB Frontend Submission to create or edit posts without any limitations.

It’s a blockbuster solution for post submission.

The extension also supports these post fields:

  • ID (in case you want to update an existing one)
  • Status (if you want to auto-publish submitted posts or put them in the review queue)
  • Title
  • Content (using a WYSIWYG editor)
  • Excerpt
  • Date (with a date/time picker)
  • Thumbnail

Need categories and tags? Post taxonomies can be handled by custom fields in the core Meta Box plugin with the taxonomy field type.

To Infinity and Beyond

All field types are supported in MB Frontend Submission.

That includes advanced fields like a WYSIWYG editor, date and time picker, slider or file upload. Even the cloning feature works like a charm.

Flaunt It ‘Cause You’ve Got It

MB Frontend Submission gives you a shortcode that you can use to display your forms anywhere on your website.

Use a handy shortcode to display everything you want without countless hours of coding.
Use a handy shortcode to display everything you want without countless hours of coding.

Whether it’s inside page content, a text widget or within a custom PHP function (by using the do_shortcode), it’s both flexible and user-friendly.

Top Features:

  • Create forms with any fields you want for a tailored fit.
  • Make forms with advanced fields like a WYSIWYG editor.
  • Users can submit the forms you create from the front end.
  • Form submissions are collected in the back end for seamless organization.
  • Users can submit content with an instant status of publish, draft or review.
  • Users can have the ability to create new posts or edit existing ones.
  • Post fields such as title, content, excerpt, thumbnail and more are supported.
  • Meta Box custom field types are fully supported.
  • Forms can be embedded everywhere using shortcodes.

What’s up, Doc?

Have any questions about using Meta Box to help create your online masterpiece?

We’ve got extensive online documentation to help you out with that: everything from examples of code to detailed tutorials.

If you’re looking for a little bit more one-on-one time, our support team will make it happen for you over in the Supports forums. Let us know how we can help you!

custom fields for users in WordPress

MB User Meta

MB User Meta is an extension for the Meta Box plugin which allows you to add custom fields to user profile like user address, user billing info or custom avatar.

user-meta-1

User Profile Made Easy:

WordPress by default offers us a very limited information of user name, email, bio. For a large website with complex data, that is not enough. For example, if you have a real estate website, then you might need more information about brokers:

  • Contact info: mobile phone, work phone
  • Testimonials
  • Real images
  • Projects that they completed

If you run an e-commerce website, the information about sellers is critical. It includes but not limited to:

  • Verification status from the website owner
  • Location: address, city, state
  • Contact info: hotline, mobile phone

Without a tool to handle user meta, developers have to spend a lot of time writing custom code to add/edit user meta. MB User Meta will help you save your time on coding and maintenance the code, keeping you focused on the logic.

Features:

  • Uses native user meta API of WordPress, which means you can query, get or edit it with other code as well.
  • Uses the same UI from WordPress
  • Lightweight
  • Uses a wide range of available fields for users with a vast amount of options.
  • Uses the same syntax of Meta Box when working with user fields. No more learning curve!

Screenshots:

geolocation for custom fields in WordPress

Meta Box Geolocation

Meta Box Geolocation is an extension of the WordPress Meta Box plugin which interacts with Google Maps Geocoding API and automatically populates location data into your fields such as postcode, state, country.

meta-box-geolocation

No more manual enter location info

When developers have to enter the information for a shop or a restaurant, there must have much information like address, state, suburb, post code, latitude, longitude, etc. It is a slow and time-consuming work. Meta Box Geolocation provides a better way to enter these data automatically and properly.

With Meta Box Geolocation, no more complex work with Google Maps API. The only work you should do is just registering your desired fields (address, postal code, country, etc.) as normal fields in Meta Box. Whenever users enter an address, all the information for that location will be pulled from Google Geolocation and filled in other fields automatically.

And due to the google large database, it will be the exactly correct.

Features:

  • Auto populate all location fields when user enter an address
  • No location database required
  • Not fast, it’s INSTANT
  • Powerful binding template: Sometimes, you want to save complex data into 1 field. For example: state + country. With binding template, you can do that easily.
  • Easy to use
  • Less time require
show custom fields in admin columns

MB Admin Columns

MB Admin Columns is an extension for the Meta Box plugin, which allows developers to show custom fields in the posts, terms and users lists in the WordPress admin area. You can set the column position, column title, make it sortable and/or searchable.

Sample admin columns for Books
Sample admin columns for Books

When develop WordPress themes, plugins or customizing a website, adding custom columns to the admin screens for entire posts or custom post types is one of the common tasks. The custom admin columns allow users to have a better overview of the content. For example: if we have a custom post type Book, then should need to show Book Author, Publisher, Number of Pages, Category in columns in the All Books screen (as shown in the screenshot above). By default, WordPress only displays a very limited content (title, date) on that screen and that’s not enough.

With MB Admin Columns, the task is resolved quickly. You just need to specify which custom field is displayed and leave the rest to the plugin. You can also change the column title, set its position and make it sortable or searchable.

Supports posts, terms and user

Since version 1.1.1, the MB Admin Columns supports not only post meta, but also term meta and user meta. You can use the plugin to display additional information for terms and users in the term list table and user list table.

Note that to add meta to terms and users, you need MB Term Meta and MB User Meta extensions.

Filter posts by taxonomies

Since version 1.2, MB Admin Columns allows you to filter posts by custom taxonomies. Simply set the taxonomy filterable and the rest is cared by the plugin.

Note: If you want to use this functionality as a standalone plugin, please try Admin Taxonomy Filter.

Features:

  • Be able to set custom position for columns, supports before/after/replacing existing column. And can order them as well.
  • Can customize the output and column title.
  • Supports every standard type of custom fields
  • Can show custom HTML before and after column content
  • Supports columns sorting
  • Supports searching for custom fields data
  • Automatically adds styles to match WordPress UI
  • Supports post, term, user meta (since version 1.1.1)
  • LESS code: needs only 1 parameter
  • Is optimized for Meta Box users
  • Lightweight

Screenshots:

add custom fields to terms in wordpress

MB Term Meta

MB Term Meta is an extension for Meta Box plugin which allows you to add custom fields to taxonomy terms like categories or tags. The plugin supports all field types from Meta Box and uses the same UI as WordPress admin area.

Term meta screenshot

Adding metadata (custom fields) for taxonomy terms is important since it allows us to add more data to term objects. These data allow us to add a more visual description to the term objects beyond the default description which can help us designing in the front end.

There are a lot of info that can be useful for terms. This is just an extremely small sampling of ideas:

  • Term featured image.
  • Custom color for each category to differentiate them in a magazine website.
  • Storing the meta title, meta description via an SEO plugin.
  • Category templates that can be re-used (like page templates).
  • Attach an icon to a term.
  • Theme sidebar position.
  • Privatize posts that are in a specific category in a membership plugin.

MB Term Meta simplifies the process of adding custom fields to terms by using the same syntax in Meta Box for posts. No more learning curve when using this extension.

Besides, it supports all the features from Meta Box such as all field types, cloning and validation.

Features:

  • Uses native term meta API
  • Uses same syntax as Meta Box
  • Uses the same UI from WordPress
  • Lightweight

Screenshots: