WordPress has two hooks you can use to add CSS and or JS to the Admin Area of your CSS those being ‘wp_enqueue_style’ and ‘wp_enqueue_script’.
In this article Ill show you how to use these to admin CSS and or Javascript to your WordPress Admin Area.
Table of Contents
- ‘Admin Styles’ vs ‘Front end’ styles
- How to add CSS to the CMS area of WordPress
- ‘Admin Scripts’ vs ‘Front end’ scripts
- How to add Javascript (jQuery) to the CMS area of WordPress
- Add both CSS and Javascript to the Admin Area
- Learn WordPress customization throughly with an online course at Udemy
‘Admin Styles’ vs ‘Front end’ styles
In WordPress you usually add CSS to the public facing front end of the site for your users to enjoy so to speak however sometimes you want to add CSS only the the Admin Area of the CMS.
In my experience this is to hide various buttons and actions from the CMS so the various Admin Users can’t take certain actions when the WordPress User Roles still allows them to.
How to add CSS to the CMS area of WordPress
You will need to edit your functions.php file at https://yoursite.com/wp-content/themes/yourtheme/functions.php
Add a CSS file to https://yoursite.com/wp-content/themes/yourtheme/admin.css. This file is where you can add the actual CSS you’d like to run in the Admin Area.
Add the below code to your functions.php,
<?php
function admin_style() {
wp_enqueue_style('admin-styles', get_stylesheet_directory_uri() . '/admin.css');
}
add_action('admin_enqueue_scripts', 'admin_style');To explain what is going on in the code above,
- WordPress has a native hook called admin_enqueue_scripts which we can add some CSS to.
- So we create a function admin_style() and within this function we queue up our CSS file to be loaded in the CMS area with another Native WordPress Function called wp_enqueue_style()
- You can add whatever CSS you would like in admin.css .
- Read more about wp_enqueue_style() as it has other parameters you may want to know about.
‘Admin Scripts’ vs ‘Front end’ scripts
The same dynamic exists as with CSS for Javascript and you can add Javascript to the Admin Area exclusively as well. I have used this before when I wanted to alter some input field attributes from read only to editable instead of extending the plugin itself.
How to add Javascript (jQuery) to the CMS area of WordPress
NOTE: If you have already added some CSS as above then you can just add the wp_enqueue_script() line and your new JS file to the existing hook function admin_style().
You will need to edit your functions.php file at https://yoursite.com/wp-content/themes/yourtheme/functions.php
Add a JS file to https://yoursite.com/wp-content/themes/yourtheme/admin.js. This file is where you can add the actual JS you’d like to run in the Admin Area.
Add the below code to your functions.php,
function admin_style() {
wp_enqueue_script( 'admin-js', get_template_directory_uri() . '/admin.js', array('jquery'), '1.0', false );
}
add_action('admin_enqueue_scripts', 'admin_style');This code is doing exactly the same as the CSS version of this but instead takes advantage of wp_enqueue_script() instead of wp_enqueue_style().
You can read the full documentation for wp_enqueue_script() here. This Hook has various other parameters which you may want to read about.
Add both CSS and Javascript to the Admin Area:
Add both the admin.css and admin.js file to your theme at https://yoursite.com/wp-content/themes/yourtheme/
Then add the below to your functions.php
<?php
// existing functions.php
function admin_style() {
wp_enqueue_style('admin-styles', get_stylesheet_directory_uri() . '/admin.css');
wp_enqueue_script('admin-js', get_template_directory_uri() . '/admin.js', array('jquery'), '1.0', false );
}
add_action('admin_enqueue_scripts', 'admin_style');Learn WordPress customization throughly with an online course at Udemy
If you are having difficulty understanding this tutorial and then I suggest you start from scratch with WordPress in general. The best way to learn is with a better all around general understanding of WordPress. Check out some of the courses on Udemy related to WordPress. They cover developer level courses and more non-dev CMS editor type tutorials as well.
