Custom Admin CSS WordPress Plugin
Free! Like Speech.
It is so easy and useful that I thought I should pass it on.
This is the code that is in the file. Install this plugin like any other in your WordPress Administrator area.
- Navigate to Settings > Custom Admin CSS in the admin menu.
Features and Security
- Simple Interface: A straightforward textarea for CSS input.
- Admin-Only: The CSS only affects the backend, thanks to the admin_head hook.
- Secure: The wp_strip_all_tags function removes HTML tags from the input, ensuring no malicious code (like <script>) can be executed, while preserving CSS syntax.
- Permission Check: Only users with manage_options capability (typically administrators) can access the settings.
Notes
- The CSS applies globally to all admin pages. For specific pages, you’d need to add conditions using get_current_screen() (beyond this basic version).
- No preview is included, but you can test styles by saving and refreshing an admin page.
This plugin provides a simple, effective way to customize the WordPress admin area’s appearance with your own CSS!
<?php
/*
Plugin Name: Custom Admin CSS
Description: Allows adding custom CSS to the WordPress admin area.
Version: 1.0
Author: Your Name
*/
// Add settings page to the admin menu
function custom_admin_css_add_menu() {
add_options_page(
'Custom Admin CSS', // Page title
'Custom Admin CSS', // Menu title
'manage_options', // Capability required
'custom-admin-css', // Menu slug
'custom_admin_css_settings_page' // Callback function
);
}
add_action('admin_menu', 'custom_admin_css_add_menu');
// Render the settings page
function custom_admin_css_settings_page() {
?>
<div class="wrap">
<h1>Custom Admin CSS</h1>
<form method="post" action="options.php">
<?php
settings_fields('custom_admin_css_options');
do_settings_sections('custom-admin-css');
submit_button();
?>
</form>
</div>
<?php
}
// Register settings with sanitization
function custom_admin_css_register_settings() {
register_setting(
'custom_admin_css_options', // Option group
'custom_admin_css', // Option name
'custom_admin_css_sanitize' // Sanitization callback
);
add_settings_section(
'custom_admin_css_main', // Section ID
'Main Settings', // Section title
'custom_admin_css_section_text', // Callback for description
'custom-admin-css' // Page slug
);
add_settings_field(
'custom_admin_css_textarea', // Field ID
'Custom CSS', // Field title
'custom_admin_css_textarea', // Callback for field
'custom-admin-css', // Page slug
'custom_admin_css_main' // Section ID
);
}
add_action('admin_init', 'custom_admin_css_register_settings');
// Sanitize the CSS input
function custom_admin_css_sanitize($input) {
return wp_strip_all_tags($input); // Removes HTML tags, keeps CSS
}
// Section description
function custom_admin_css_section_text() {
echo '<p>Enter your custom CSS below to style the WordPress admin area:</p>';
}
// Textarea for CSS input
function custom_admin_css_textarea() {
$css = get_option('custom_admin_css', ''); // Load saved CSS or empty string
echo '<textarea name="custom_admin_css" rows="10" cols="50">' . esc_textarea($css) . '</textarea>';
}
// Output CSS in admin head
function custom_admin_css_admin_head() {
$css = get_option('custom_admin_css', '');
if (!empty($css)) {
echo '<style type="text/css">' . wp_strip_all_tags($css) . '</style>';
}
}
add_action('admin_head', 'custom_admin_css_admin_head');
?>