Change Admin Button Styles and Shapes in WordPress

Change Admin Button Styles and Shapes in WordPress

If you want to customize the admin backend, a good way to mark your brand is to create a unique interface so that it’s immediately recognizable. For example, you can change admin button styles. Change the color, or the shape. You can even make them circular if you want! In this article, I’ll show you how to configure WordPress so that you can modify the admin area with any kind of custom CSS styles – without impacting the front end in any way.

Why Not Simply Change the CSS Stylesheet?

The easy way out would be to simply change the CSS globally – either via your theme’s style.css, or through a dedicated plugin allowing you to create custom CSS rules that don’t get overwritten when your theme updates or changes. But while this works, it has disadvantages. Changing style.css or its equivalent would mean that your custom CSS rules will be applied on every page load, and not just the backend admin area. While it might be just a few lines, it breaks the key principle of only using what is necessary for every page load.

If you use a global stylesheet to apply rules that only apply to a few pages, you’re making your page loads more inefficient. It’s bad coding practice. So what do we do? How do we ensure that our admin styles are only downloaded when the backend is loaded? Answer – we use a an “action” specifically tailored for this purpose!

Step 1: Create an Admin Stylesheet

The approach we’re going to take is to create a separate admin stylesheet that is only loaded when the WordPress backend is being displayed. This way, we can change admin button styles without worrying about how it’s affecting the rest of the site. The file is a regular CSS file with the extension “.css”. In this example, I’m going to change the shape and color of the “Publish” button in WordPress. For that, I paste the following code into my new file which I call “adminstyles.css”:

/* Admin styles */
#publish {
    color: white;
    background-color: #f4670c;
    text-shadow: none;
    border: none;
    box-shadow: none;
    border-radius: 48%;
    height: 59px;
}

Step 2: Choose the Location of the Stylesheet

For the location of this file, I choose to use the /wp-content/ directory. I don’t use the theme’s folder because I want these changes to persist even after the theme updates or changes entirely. Even though I might be using a child theme, these CSS styles have nothing to do with the front facing theme. So it needs to be in a separate location. If you’re using a custom plugin for PHP code, then you can place your admin stylesheet into that plugin’s folder.

Wherever you place this file, you should know how to access it via code. If I put it in the wp-content directory, I can access it via:

content_url() . '/adminstyles.css', false

If I place it in a plugin, I can reach it with:

plugins_url( 'adminstyles.css', __FILE__ )

Step 3: Add PHP Code

If the file is in the base folder of the plugin. Open up your functions.php file or plugin for custom PHP code and paste the following into it:

function insert_admin_stylesheet() {
        wp_register_style( 'admin_style', content_url() . '/adminstyles.css', false, '1.0.0' );
        wp_enqueue_style( 'admin_style' );
}
add_action( 'admin_enqueue_scripts', 'insert_admin_stylesheet' );

This uses the action “admin_enqueue_scripts” that is called only when the backend is being displayed. We register our new admin stylesheet via the “wp_register_style” function, and then enqueue it in the next statement. After you save your custom PHP code and load the WordPress editor, we should see the publish button become like this:

change admin button styles

The actual CSS for accomplishing this is pretty basic. We use the “border-radius” property and set the height of the button accordingly. Then we change the background and remove the pre-defined styles for the box and text shadow, and the border. Voilà – we now have a unique and distinctive admin button! You can see how these rules are applied via the Google Chrome developer tools pane:

styles applied

The procedure to change admin button styles can be generalized for any admin specific CSS changes. Instead of adding the rules to a global CSS stylesheet, we create a separate one only for the admin backend and enqueue it via the “admin_enqueue_scripts” action.

Leave a Reply

This Website is Hosted by

Powered by RamNode

Disclosure: We receive a compensation from some of the companies whose products or services are presented on our website.