There is not only a way to embellish your custom metaboxes and custom fields created by Meta Box plugin by adjusting size, space, color, … as in the previous post, but also adding icons into their title. Instead of using only text for the meta box’s title or field name, we can use icons for addition or alternative. It is quite simple to do, let’s see how.

Step 1: Enqueue CSS and Fonts of the Icon Library to Your Theme

As you know, there are several icon libraries. You must enqueue your wanted library to the theme before using it.

If you use FontAwesome, Elusive, or Genericons, you must follow these executions:

  1. Download the library to your computer
  2. Copy the CSS and font files and paste them to the theme’s folder
  3. Add this code to the functions.php file
function your_prefix_enqueue_admin_style() {
    wp_enqueue_style( 'admin_css', get_stylesheet_directory_uri() . 'css_file_direction_in_the_theme_folder' );
}
add_action( 'admin_enqueue_scripts', 'your_prefix_enqueue_admin_style' );

Otherwise, you can totally skip this step if you use Dashicons. This library is developed by WordPress so you can use it without enqueuing.

It’s much easier when I use Dashicons so I will use it in this post.

Step 2: Add Icons into Title of the Custom Meta Boxes and Custom Fields

There are two ways to insert icons into the title of meta box or field name which are using code or UI. However, the UI is available only when you have Meta Box Builder, a premium extension of Meta Box, or use free Online Generator.

I have a meta box with 3 custom fields inside as below:

Add Icon into Title of the Custom Meta Boxes and Custom Fields

I will add icons to this meta box and its custom fields.

Firstly, go to the Dashicons page and get the HTML of the icons.

the Dashicons page and get the HTML of the icons.

Next, choose one of these ways.

1. Use Code to Add Icons

Add the HTML to the title attribute of the meta box or the name attribute of the field.

For example, here is the original code of a meta box created by Meta Box plugin:

Use Code to Add Icon

I added the HTMLs of the icons to these positions:

add the HTMLs of the icons to positions

Save the code and back to the edit page of any post, my fields show this:

Save the code and back to the edit page

2. Use UI to Add Icons

For this way, you must install Meta Box Builder. It is a premium extension of Meta Box plugin so you need to buy it.

After installing the Meta Box Builder, you will have an intuitive UI to create and configure custom fields in the admin dashboard.

Use UI to Add Icon

Now, we add the HTML of the icon to the Title of Meta Box or Label of fields.

add the HTML of icon to the Title of Meta Box or Label of fields

Finally, press the Update button to save all the changes, then you will see the fields display the same with icons as the 1st way.

And if your fields are set to show in the frontend, the icons also display well.

the fields display the icons

Final Words

Although Dashicons library is easy to use, you have not many options with this library because it has a few icons. If you want more icons, you should use another library. All the icons display well in the meta box and fields created by Meta Box plugin no matter which library is used.

One more thing, to make your fields display in a perfect way, let’s try CSS to style them in addition. Happy dealing with custom fields!

Leave a Reply

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