Styling admin dashboard via own stylesheet (CSS File)
- By
- John Doe
- Sept 17, 2024
- 7 min read
Short Intro:
Have you ever wonder how we can style the dashboard using CSS?
By default, there’s a file that given by own theme name style.css where we can add CSS to style our website but this can’t be applied in the dashboard. In this article we’ll add an style sheet and apply it in our dashboard.
Problem:
In Janseen, there’s a repeater that store all the municipality or post code. The problem is the more the municipality or post code, the longer you will scroll down to the page. Aside from this problem, if you wanted to style also dashboard like the buttons, widths, and other stuff you can achieve by doing 3 steps.
Solution:
First step. Add css file in theme using WP File Manager or via FTP. The name is up to you, the important thing is do not forget to put “.css” after the name.
Second step. Go to functions.php and load your style using the hook “admin_enqueue_script” and function named wp_enqueue_styles. See screenshot below.
Codes explanation :
add_action(‘admin_enqueue_script’, ‘function_name’) or directly anonymous function just like what we did above (‘admin_enqueue_script’, function(){ enqueue here}). You can separate the function name if you want to.
Once admin_enqueue_script is called, the function (‘second parameter’) will be executed which is you’re telling wordpress to enqueue/load the stylingsheet that you’ve created. This will be loaded only in admin. The opposite of this is “wp_enqueue_script” where you can see style.css loaded in the main site.
wp_enqueue_style is the responsible of loading your styling sheet. Now we’ll talk about its parameter. The first parameter is like a variable, you can name it whatever you want to name. The second parameter is your file location. As you can see, we call a wordpress function named get_stylesheet_directory_uri() and the equivalent of this function is the file path of your child theme so you don’t have to manually typing the directory anymore. The next string of it is the name of the css file we added via ftp/wp file manager. If you’re wondering why it was written get_stylesheet_directory_uri().’/filename.css’, it is called concatenation or combining the result of the latter function and the string ‘/filename.css’ which will now seen by wordpress as “www.website.com/wp-content/themes/yourthemechild/filename.css”.
Whole code :
add_action(‘admin_enqueue_scripts’, function(){
wp_enqueue_style(‘admin-postchecker-style’, get_stylesheet_directory_uri().’/post_checker_admin.css’);
});
or
add_action(‘admin_enqueue_scripts’, ‘add_my_custom_css’);
function add_my_custom_css(){
wp_enqueue_style(‘admin-postchecker-style’, get_stylesheet_directory_uri().’/post_checker_admin.css’);
};
Once you’re done, hit save button. So how do we know if it is loaded in the dashboard?
If you’re familiar with inspect element, you can check it via NETWORK and click the tab CSS. (See screenshot below)
Note: If you’re not seeing anything in NETWORK, kindly refresh the page.
Once you’ve seen it loaded in network, it means you can now put styling in the CSS file that you’ve uploaded in your theme.
Contact Details
More solutions
by ilias
You’re using JetFormBuilder and want to make sure users are at least 18 years old based on their birthday input.
by ilias
Roweij Specerijen wanted to have a filter that can choose number of products display per pagination
by ilias
This article will show you how to add dynamic code to your templates using the Elementor Shortcode widget and custom PHP code.



