[object Object]
WP Adminify

Add Custom CSS and JS in Dashboard?

WP Adminify offers a quick and efficient way to add custom CSS and JavaScript specifically for the WordPress Admin area. This can be extremely helpful for developers or site administrators looking to customize the appearance or functionality of the admin dashboard without affecting the frontend of the website. Here’s a guide on how to add custom CSS and JavaScript in the WordPress admin panel using WP Adminify.

1. Access the Code Snippets Feature in WP Adminify

To begin, log in to your WordPress dashboard:

  • Navigate to WP Adminify > Code Snippets.
  • Select the Admin Scripts tab under the Customizer settings to access the Custom CSS and Custom JavaScript areas.
Backend CSS and JS option

2. Add Custom CSS for Admin Panel

Under the Admin Scripts section, locate the Custom CSS editor box:

  • Here, you can add any custom CSS rules that will apply exclusively to the WordPress admin panel.
  • Avoid wrapping the code with <style></style> tags, as the editor automatically handles this.
Add Custom CSS and JS in WordPress Dashboard

3. Add Custom JavaScript for Admin Panel

Right below the Custom CSS editor, you will see the Custom JavaScript editor box:

  • You can add JavaScript code in this section that will only run within the WordPress admin area.
  • Make sure not to enclose your scripts with <script></script> tags.

4. Save Your Changes

Once you have added the custom CSS or JavaScript:

  • Scroll down and click on the Save Settings button to apply your custom code.

5. Verify Your Customizations

To ensure your changes have been successfully applied:

  • Refresh the admin dashboard and inspect the visual or functional changes depending on whether you added CSS or JavaScript.

Didn’t find what you were looking for? Get in touch!

Updated on December 2, 2024

Was this helpful to you?

Coupons
icon

Navigate on your Dashboard faster with WP Spotlight!

Try It Now