Custom Admin CSS

Add your own CSS styles to the WordPress admin area. Modify colors, layouts, fonts, spacing, or hide elements to create a customized admin experience that matches your brand or improves usability.

Use Cases#

• Increase font sizes and adjust contrast for team members with visual needs
• Apply your client’s brand fonts and colors throughout the admin
• Fix poorly-styled third-party plugin interfaces that clash with your workflow

How It Works#

1. Enter your CSS code in the module settings
2. Your styles are loaded on every admin page via the admin_head hook
3. CSS persists through theme updates since it’s stored in the database
4. Use browser dev tools to find the right selectors

Settings#

Common Customizations#

Increase Base Font Size#

#wpcontent,
#wpbody-content {
    font-size: 15px;
}

Custom Font Family#

body,
#wpcontent,
.wrap h1 {
    font-family: 'Inter', -apple-system, sans-serif;
}

Hide Specific Elements#

/* Hide the "Thank you for creating with WordPress" footer */
#wpfooter {
    display: none;
}

/* Hide Screen Options tab */
#screen-options-link-wrap {
    display: none;
}

Wider Content Area#

.wrap {
    max-width: 1400px;
}

Custom Post Editor Width#

#post-body-content {
    max-width: 900px;
}

Highlight Required Fields#

.form-required label {
    color: #d63638;
    font-weight: 600;
}

Compact Dashboard Widgets#

.postbox .inside {
    padding: 8px 12px;
}

.postbox .hndle {
    padding: 8px 12px;
}

Finding CSS Selectors#

To customize specific elements:

1. Right-click the element you want to style
2. Select Inspect or Inspect Element
3. Find the element’s class or ID in the developer tools
4. Write CSS targeting that selector

Useful Admin Selectors#

Verification#

After adding your CSS:

1. Save the module settings
2. Navigate to any admin page
3. Verify your styles are applied
4. Check multiple admin pages to ensure consistency

FAQ#

Advanced Example: Dark Mode Admin#

/* Dark admin background */
#wpcontent,
#wpbody-content,
.wrap {
    background: #1e1e1e;
    color: #e0e0e0;
}

/* Dark postboxes */
.postbox {
    background: #2d2d2d;
    border-color: #404040;
}

.postbox .hndle {
    color: #e0e0e0;
}

/* Dark tables */
.widefat {
    background: #2d2d2d;
    border-color: #404040;
}

.widefat th,
.widefat td {
    color: #e0e0e0;
    border-color: #404040;
}