WordPress Tutorial: How to add a custom style to WordPress Admin?

Tutorials No Comments

In this tutorial, I will show you how to add a custom style to WordPress admin. In our example, we will add a different background color to the Post list view. If you are interested in how to create WP List Table view, which is the same as used in posts, pages and other views you can check this tutorial: How to create custom WordPress List table.

Let’s first create WordPress plugin in which we will use a style for our tutorial.

I will name our plugin: pmc-custom-admin-style and our main file will be pmc-custom-admin-style.php

We will also need CSS file in which we will add our custom style for post list on odd rows. We will name that file pmc-admin.css.

Our directory structure will look like:

Iside CSS folder is  pmc-admin.css file and in the root of our structure is pmc-custom-admin-style.php.

Let’s create a plugin:

I will not go into the details about the plugin structure, only how to include custom style.

In construct function of our class, we need to include our CSS to WordPress admin pages. As you can see we are calling a function pmc_register_admin_script().

In function pmc_register_admin_script() we need to enqueue our css file.

Now that we have enqueued the style we only need to add the code to pmc-admin.css.

And that’s it. Now every odd row in post list view has a blue color for the background.

It’s a pretty simple plugin, but very useful if you need to change some style in the WordPress admin panel. In the next tutorial, I will show you how to change style only on some admin pages and how to change style via a custom admin page. This way you won’t need to edit the file and upload it via FTP every time you wish to change the styling of the admin.

The entire plugin code

Thank you for reading the tutorial.

Other Tutorials:

WordPress Tutorial: How To Extend WP List Table (create grid view in admin)

 

We really appreciate you for visiting PremiumCoding and reading this article! Now you might also want to check out our Themes here.