WordPress admin style css

Apply Custom CSS to Admin Area

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

add_action('admin_head', 'my_custom_fonts'); function my_custom_fonts() < echo ''; >

Maybe it would be more practical. Thanks from France (sorry for my poor english) for your good ressources

Hello, where i put this code? function.php? but what function.php? please sendme the path of this file, Thanks

I agree with NicoGaudin It would be good to know whether this would work with an external stylesheet instead of embedded styles.

@Blaine. Use wp_enqueue_style() instead for stylesheets. The method above would work but you’d have less control over where it appeared in the HTML.

I just tried it with an external style sheet. I got it working with the below code in the functions.php file:

function registerCustomAdminCss() < $src = "URL/custom-admin-css.css"; $handle = "customAdminCss"; wp_register_script($handle, $src); wp_enqueue_style($handle, $src, array(), false, false); >add_action('admin_head', 'registerCustomAdminCss'); 

Excellent tidbit of code! Solved my problem immediately (I only needed a single line added to my admin CSS and didn’t want to monkey around with core files.) A friend wrote a nice blog article on customizing the editor if need more advanced control: How to Make the WordPress Editor Look Like the Web Site

Write this code in your functions.php file and create a new file with the name admin_section.css in your css folder and add rule to that file and Enjoy. All Done. function my_custom_fonts() <
wp_enqueue_style(‘admin_styles’ , get_template_directory_uri().’/css/admin_section.css’);
> add_action(‘admin_head’, ‘my_custom_fonts’);

function my_custom_fonts() <
wp_enqueue_style(‘admin_styles’ , get_template_directory_uri().’/css/style.css’);
> add_action(‘admin_head’, ‘my_custom_fonts’);

helllo…
tnx for this post. i creat a new diffrent custom dashbord admin page in wordpress with changing and edit sweet custom dashboard plugin, but this page is plain text only…
how write a external css and use for this page?
excuse me for my english…
Thank you

This would a much more efficient and standard way to add admin styles: if you want to use the functions.php do so:

function my_admin_theme_style() < wp_enqueue_style('my-admin-style', get_template_directory_uri() . '/path/to/admin/style.css'); >add_action('admin_enqueue_scripts', 'my_admin_theme_style'); 

function my_admin_theme_style() < wp_enqueue_style('my-admin-theme', plugins_url('wp-admin.css', __FILE__)); >add_action('admin_enqueue_scripts', 'my_admin_theme_style'); add_action('login_enqueue_scripts', 'my_admin_theme_style'); 

Remember to use get_stylesheet_directory_uri() rather than get_template_directory_uri() if it’s a childtheme.

get_template_directory_uri() won’t work incase of a childtheme you need to use get_stylesheet_directory_uri() instead

CaptainH’s example is great, but i thought I’d add a little more for those who’d like some extra details.

/** * Define a version number * This is optional but useful to circumvent caching issues * * There are more creative ways to get the version * eg: if you get the version of the current theme and use that * you'll never have to update the enque stuff manually * so long as you update your theme version (but the version * might be wrong if you're using a js or css library) * */ $ver = '1.1.1'; /** * Define the base url for the file * In the 'active example below, it's assumed the files are in * the child-theme folder * * Other examples: * * $base_url = get_template_directory_uri(); * If files are in the theme folder * * $base_url = plugin_dir_url( __FILE__ ); * If you're loading the files in a plguin * I dont recommend you mess with plugin folders unless * it's one you built yourself * */ $base_url = get_stylesheet_directory_uri(); // /** * Enqueue and register Admin JavaScript files here. * more at https://codex.wordpress.org/Function_Reference/wp_enqueue_script */ $js_dependancies = array( 'jquery' ); // OPTIONAL - jquery is just an example of an average js library you might need function register_admin_scripts() < wp_enqueue_script( 'solution-hotspots', $base_url . '/your-path/your-js-file.js', $js_dependancies, $ver ); >/** * Enqueue and register CSS files here. * more at https://codex.wordpress.org/Function_Reference/wp_enqueue_style */ $css_dependancies = array(); function register_admin_styles() < wp_enqueue_style( 'style-name', $base_url . '/your-path/your-css-file.css', $css_dependancies, $ver ); >/** * Make sure to spit it out! */ add_action( 'admin_enqueue_scripts', 'register_admin_scripts' ); add_action( 'admin_enqueue_scripts', 'register_admin_styles' );

Источник

How to style the WordPress admin area via the theme

Did you know that you can customise the appearance of your WordPress admin area using CSS? I’ll show you how to create a stylesheet for your admin area and correctly enqueue it.

Did you know that you can customise the appearance of your WordPress admin area?

It’s true! You can add a stylesheet into your theme files that contain CSS specifically for styling the WordPress admin area. And it’s as simple as styling the front-end of your website.

In this post, I’m going to show you how to style the WordPress admin via the theme.

1 | Create a new stylesheet for your admin area

First things first you need to create a new stylesheet file for your admin CSS. This file should be placed within your theme directory and you can call it whatever you like as long as it ends in .css. I’m going to call mine admin.css.

You can create this new CSS file via FTP or the control panel that comes with your hosting account (e.g. cPanel).

2 | Enqueue your stylesheet

Now that you have created your admin stylesheet it’s time to enqueue it.

Enqueue means to add data that is awaiting processing into a queue. So with our admin stylesheet, we want to add it to a queue and then wait for the correct moment to use it. For more information about enqueuing in WordPress, check out this blog post I wrote.

Enquing your admin area stylesheet is very similar to enqueuing a normal stylesheet in WordPress. The only difference is the function we use.

To call in a stylesheet that is required on the front-end of a WordPress website we use the wp_enqueue_scripts action. However, to call in a stylesheet that is required for the WordPress admin area we used the admin_enqueue_scripts action.

You are going to create a new function and place this inside the functions.php file within your theme. So open up this file and create a new function. You can call this function whatever you like but try to make it relevant. I’m going to call mine theme_admin_styles.

function theme_admin_styles()

Then you need call a WordPress function called wp_enqueue_style. This is what we use to enqueue a CSS stylesheet, regardless of whether it’s for the front-end or back-end of WordPress.

function theme_admin_styles() < wp_enqueue_style(); >

Within this function you need to enter two parameters. The first parameter is the name of the stylesheet. I’m going to call mine theme_main_admin_style. You should place this in between the brackets and place this within single quotation marks.

function theme_admin_styles() < wp_enqueue_style('theme_main_admin_style'); >

For the second parameter, you need to use the WordPress function get_theme_file_uri. This function gets the URL of a file within the theme you are currently working on.

function theme_admin_styles() < wp_enqueue_style('theme_main_admin_style', get_theme_file_uri()); >

But this isn’t enough to call in the admin stylesheet! You need to put the file name of this stylesheet in between the brackets like so:

function theme_admin_styles() < wp_enqueue_style('theme_main_admin_style', get_theme_file_uri('admin.css')); >

If the stylesheet is in a folder within the theme files then you will need to include this folder name too. For example, your stylesheet might be in a folder called css, so this is how you would enqueue that file:

function theme_admin_styles() < wp_enqueue_style('theme_main_admin_style', get_theme_file_uri('css/admin.css')); >

So you’ve created your function, but it won’t run until it’s called. To call our function we will use the WordPress function add_action(). This is placed outside of the function you have just created:

function theme_admin_styles() < wp_enqueue_style('theme_main_admin_style', get_theme_file_uri('css/admin.css')); >add_action();

You need to use two parameters within this function. The first parameter is the admin_enqueue_scripts action that I mentioned before. Again, you need to place this within the brackets and within single quotation marks.

function theme_admin_styles() < wp_enqueue_style('theme_main_admin_style', get_theme_file_uri('css/admin.css')); >add_action('admin_enqueue_scripts');

The second parameter tells WordPress which function to call. So, add a comma after the previous parameter and in single quotation marks, type in the name of the function you have created to enqueue the stylesheet. For example, I called mine theme_admin_styles so it would look like this:

function theme_admin_styles() < wp_enqueue_style('theme_main_admin_style', get_theme_file_uri('css/admin.css')); >add_action('admin_enqueue_scripts', 'theme_admin_styles');

Now save and upload your functions.php file and you’re done!

3 | Check that it works!

Ok, so let’s check that you have enqueued your admin stylesheet correctly and that it actually works.

To test your admin stylesheet, I recommend adding in some CSS that will make a really obvious change to your WordPress admin area. For example, making the main content background red.

To do this, open up your admin stylesheet again and add in the following CSS:

Save and upload your admin stylesheet, and then check to see if the changes have pulled through on the admin area. You may need to clear your browser cache to see these changes.

If it has worked, you should have an admin area that looks like this:

Yes, it looks awful, but it’s just a temporary change to test that everything is working! You can now go in and customise the appearance of your WordPress admin area.

Hot off the Word Press!

Join my FREE email community today to receive helpful tips and advice on building and maintaining your website directly in your inbox every other Friday. Just pop in your name and email address.

Источник

Add Custom CSS to WordPress Admin

Believe it or not, I spend an awful lot of time going through my blog’s comments and correcting spelling issues, code formatting, etc.; yes, even the comments from way back to 2007. It’s mostly for quality control purposes and ease of reading for my readers, especially the code comments.

One gripe I have with WordPress’ admin section is that it’s difficult to spot tag contents, especially code samples that are only one line. It made me think: «wouldn’t it be awesome if I could add my own styles to the WordPress admin interface?» If it’s awesome, I want to do it, so here’s how you can add your own custom styles to WordPress admin!

Step 1: Create Your CSS File

You can place the CSS file wherever you’d like; I’ve chosen to place the CSS file within my theme. My admin CSS file looks like:

.wp-admin .comment pre < background: pink; /* they forgot the language! */ padding: 6px 10px; font-size: 16px; border: 1px solid #ccc; >.wp-admin .comment pre[class] < background: #fff; /* language (likely) there */ >

The CSS above makes tags more visible. It also will make any PRE element without a class more apparent, teling me I need to fix it by adding the language as a className .

Step 2: Add Your CSS to WordPress Admin in functions.php

WordPress uses an add_action type of admin_enqueue_scripts for adding stylesheets anywhere within WordPress:

// Update CSS within in Admin function admin_style() < wp_enqueue_style('admin-styles', get_template_directory_uri().'/admin.css'); >add_action('admin_enqueue_scripts', 'admin_style');

get_template_directory_uri provides the path to your current theme, you simply need to add the filename to the end of the path.

If you get annoyed with WordPress Admin styles like myself, feel free to jump in and change them. My update was very simple; if you want to completely overhaul the WordPress theme so your clients think they’re getting a completely customized system, feel free to do so!

Источник

adding custom stylesheet to wp-admin

im having troubles getting my custom stylesheet work on WP-ADMIN area. plugins_url(‘style.css’, __FILE__) ); do i have to create folder in my plugins named css or do i just copy my .css to the wp-admin/css directory? i tried both it doesnt seem to work for me. and what values should be replaced to __FILE__ ? sorry im kinda new to these stuff.

/*ADDS STYLESHEET ON WP-ADMIN*/ add_action( 'admin_enqueue_scripts', 'safely_add_stylesheet_to_admin' ); function safely_add_stylesheet_to_admin() < wp_enqueue_style( 'prefix-style', plugins_url('style.css', __FILE__) ); >/*ADDS MY CUSTOM NAVIGATION BAR ON WP-ADMIN*/ add_action('admin_head', 'custom_nav'); function custom_nav()

3 Answers 3

According to WordPress Codex (here):

admin_enqueue_scripts is the first action hooked into the admin scripts actions.

Loading a CSS or JS files for all admin area:

//from functions.php //First solution : one file //If you're using a child theme you could use: // get_stylesheet_directory_uri() instead of get_template_directory_uri() add_action( 'admin_enqueue_scripts', 'load_admin_style' ); function load_admin_style() < wp_register_style( 'admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' ); //OR wp_enqueue_style( 'admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' ); >//Second solution : two or more files. //If you're using a child theme you could use: // get_stylesheet_directory_uri() instead of get_template_directory_uri() add_action( 'admin_enqueue_scripts', 'load_admin_styles' ); function load_admin_styles() < wp_enqueue_style( 'admin_css_foo', get_template_directory_uri() . '/admin-style-foo.css', false, '1.0.0' ); wp_enqueue_style( 'admin_css_bar', get_template_directory_uri() . '/admin-style-bar.css', false, '1.0.0' ); >

do i have to create folder in my plugins named css or do i just copy my .css to the wp-admin/css directory?

No, put your CSS file together with the other, in your theme directory, then specify the path with:

get_template_directory_uri() . '/PATH_TO_YOUR_FILE' 

For ex my file name is admin-style.css and i put it in a folder named css my path will looks like:

get_template_directory_uri() . '/css/admin-style.css' 

Источник