As a theme or plugin developer, there can be a chance where you want to add css styles to your custom metabox.
Here I will show you the two ways to add CSS styling to custom WordPress Metabox. But before that let’s first create a custom metabox and add it to the posts.
Copy the code below and add it to theme’s functions.php file or in your plugin-specific file.
// Add CSS Styling to Custom WordPress Metabox
//==================================================
function diwp_metabox_with_styling(){
add_meta_box(
'diwp-metabox-style',
'Metabox With CSS Styling',
'diwp_metabox_with_styling_callback',
'post'
);
}
add_action( 'add_meta_boxes', 'diwp_metabox_with_styling' );
function diwp_metabox_with_styling_callback(){
?>
<div class="row">
<div class="heading">Hello I am Metabox with Custom Styling</div>
<div class="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
<?
}
The Above code will add a custom metabox with dummy text in it to the posts as shown in the image below. Now let’s add styling in this metabox.
Add Styling to Custom WordPress Metabox
To style up your metabox, first you have to find out the ID of the metabox, so for that just use inspect element and find the ID of that metabox. As shown in the image.
Then in the next step, you can write all your css styles by targeting this metabox as parent wrapper, so your css classes will not conflict with other elements in WordPress admin.
Now you can add styling for your metabox within two ways: Inline, External
Add Inline Style in WordPress Metabox
To add inline CSS styles for our metabox, I will add the css classes inside the metabox’s callback function.
I will add css classes into the function diwp_metabox_with_styling_callback as given in the code below.
function diwp_metabox_with_styling_callback(){
?>
<style type="text/css">
#diwp-metabox-style{
background: #01baf0;
color: #fff;
border:none;
padding: 0px 10px 10px;
}
#diwp-metabox-style h2{
font-size: 25px;
font-weight: bold;
color: #fff;
}
#diwp-metabox-style .heading{
font-size: 20px;
font-weight: bold;
margin: 15px 0px;
}
#diwp-metabox-style .desc{
font-size: 16px;
}
</style>
<div class="row">
<div class="heading">Hello I am Metabox with Custom Styling</div>
<div class="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</div>
<?
}
After adding css styling into the metabox’s callback function, you will see an styled up version of metabox with css applied on it. As shown in image
Add External Style in WordPress Metabox
If you want to keep your css styles for metabox separately in a file, then you can create a new css file inside wp-conten/themes/your-theme/ folder.
Then you can write css styles for your metabox in it and enqueue that css file into the WordPress admin.
In the below code, I just created a separate css file for metabox inside my theme folder and then enqueued it into the WordPress admin. As shown in the code.
function diwp_enqueue_metabox_styling(){
wp_enqueue_style('diwp-metabox-stylesheet', get_template_directory_uri().'/css/diwp-metabox.css' );
}
add_action('admin_enqueue_scripts', 'diwp_enqueue_metabox_styling');
This method will add your external CSS file for metabox into the WordPress admin and you can style up your metabox through this file separately.
