Custom fields normally have a default padding, color, border, font, etc. which may not fit your design in either backend or frontend. So you may want to change how they display, making them more eye-catching. That’s the moment you want to style them.

So do the custom fields created by Meta Box. You definitely can style every custom field created by Meta Box as you want. In this post, I will give you some way to use CSS to style the fields.

Before we go ahead, we need some custom fields first. For your quick reference, this is a post with in-depth instructions to create custom fields using Meta Box.

Now, let’s get started to style the custom fields.

Step 1: Create a CSS File

We usually create CSS files in the theme folder. But, in the event that you have more than 1 CSS file, you should create a folder to hold them all.

For me, I create a folder named CSS then create a file name style.css inside.

Create a folder to hold all the CSS file - Style Custom Fields
Create a folder to hold all the CSS file
Create a file named style.css
Create a file named style.css

This style.css file is using to write CSS for styling the Meta Box’s custom fields.

Step 2: Enqueue the Created CSS File

Add this code to the functions.php file of your theme to enqueue the CSS file:

add_action( 'rwmb_enqueue_scripts', function() {
    wp_enqueue_style( 'custom-meta-box-style', get_template_directory_uri(). '/css/style.css' );
} );

Step 3: Write Some CSS Codes

CSS Structure of Meta Box

To style the Meta Box’s custom fields using CSS, we should learn a little bit about which class and ID will be used with Meta Box. Here they are:

Class/ID Description
.rwmb-meta-box Class of the div tag which covers all a meta box
.rwmb-field Class of the div tag which covers each field“
.rwmb-{$field_type}-wrapper Class of the div tag which covers different fields
.rwmb-label Class of the div tag covers the field label
.rwmb-input Class of the div tag which covers the field’s input
.rwmb-clone Class of the div tag which covers each field’s clone if it is cloneable
.rwmb-{$field_type}-clone Class of the div tag which covers the field’s clone of different field types
.rwmb-{$field_type} Class for the field’s input, textarea, select tag of different field types
#{$field_id} ID for the field’s input, textarea, select tag. However, if the field is cloneable, it has no ID
.rwmb-button.add-clone Class for the “Add” button to clone field
.rwmb-button.remove-clone Class for the “Remove” button to delete a cloned field

Look at this:

The example of the CSS structure - Style Meta Box’s Custom Fields Using CSS

We’ll choose the appropriated class and ID to style the wanted custom fields. These below examples will give you a clearer view of the CSS structure.

Examples

Increase Fields’ Spacing

The tight space of fields may make it hard to read or input data. So, you can increase the spacing by adding this code to the style.css file:

.rwmb-field:not(:last-of-type) {
    margin-bottom: 25px;
}

The spacing before adding CSS:

The spacing before adding CSS

The spacing after adding CSS:

The spacing after adding CSS

Style the Select Field

Before styling, my Select field display as following:

The display of the field before styling.

Next, I add this code to the style.css file:

.rwmb-select.rwmb-select {
    padding: 10px;
    width: 200px;
    background: #f0f0f0;
    border-color: #ddd;
    border-radius: 0;
}

After that, my Select field display as following:

The display of the field after styling - Style Meta Box’s Custom Fields

Style the Text Field

The Text field of Meta Box has the default display as below:

the default display of Meta Box's text field

Now, I will use CSS to increase padding, add background color for this field which has the name is “name”. Add this code to style.css:

#name {
    padding: 5px 10px;
    width: 100%;
    background: #f0f0f0;
}

It shows this:

Add background color for the field - Style Custom Fields Using CSS

Final Words

You may apply this way of using CSS to all the other custom fields created by Meta Box. At the same time, this is the way to style fields in both the backend and the frontend as well. By styling the custom fields instead of letting it be as the default, I hope that your users will have a better experience in using and inputting data to custom fields.

Happy dealing with custom fields!

Leave a Reply

Your email address will not be published. Required fields are marked *

Newsletter

Subscribe to our newsletter to receive news and tutorials for Meta Box and WordPress.


grid gear info copy caret-up caret-down trash