We know that WordPress developers struggle to create meta boxes with custom fields. We know the Codex does not have enough information. We also know that advanced developers don’t like to use plugins with tons of unnecessary code, just to add a simple meta boxes. Same applies for heavy external metabox libraries.
Believe us, we know all that, we had the same issues in our projects. This is why we spent months improving our systems to build the Meta Box Generator – an easy to use tool that helps you to create custom meta boxes for your needs. Providing you minimal code without all the unnecessary overhead.
Meta Boxes and Custom Fields
This is where custom fields come in handy. WordPress allows us to add new administrative interface called “Meta Boxes” that contain those custom fields.
Our Meta Box Generator
We built our generator to create one meta box each time with multiple custom fields.
First, we ask you to enter general information like class name, prefix (for the DB) and text-domain. We added optional security, authentication and permissions checks, that we strongly recommend to use.
Next is the meta box container. We need to set an ID, Title, to which post type assign the metabox, on page location and other stuff.
Finally, we need to add custom fields to the meta box. We offer 13 different field types and many more type will be presented as we grow.
We are going to create a WordPress site for a car dealership. Naturally we will register a “Car” post type, and few taxonomies like “Color”, “Model” and “Transmission” with pre-defined terms. We would also like to add few custom fields, specific for each car, fields like “Price”, “Mileage”, “Seller Name” and maybe few others.
Let’s try to implement this example using our generators. I will start from the end – showing you the final result – and then we will see how to re-create this:
Creating a post type is supper easy, just navigate to the Post Type Generator and enter all the data related to the new car. Beside the obvious car labels, the post type will be non-hierarchical type accepting only title, content editor and thumbnail.
We will also assign four taxonomies for the car – model, transmission, doors, color. Using the Taxonomy Generator it will take 30 seconds for each taxonomy.
Car Model Taxonomy
Car Transmission Taxonomy
Car Doors Taxonomy
Car Color Taxonomy
Now let’s create the three meta-boxes, one metabox with “Car Info” custom fields, the other for “Car Price” fields, and the last one for the “Seller Information”.
The car info meta box has five parameters: Year, Mileage, Cruise Control, Power Windows and Sunroof. The first two fields are number type fields and the last three fields are true/false fields – they are basically checkboxes.
Car Info Meta Box
Two text fields for the year and the mileage. And three true/false checkboxes for cruise-control, power-windows and the sunroof.
Car Price Meta Box
A number-type field for the car-price. And a select box for the price currencies with five default values for USD, EUR, GBP, JPY and CNY.
Car Seller Meta Box
Three text fields for the seller name, phone and address. And a select box to indicate if it’s a private car or from a dealer.
Now copy the code to your project files. That’s it! In less then 10 minutes we created a custom back-end for our car dealership.