WordPress – add custom JavaScript and CSS files to Admin Panel and/or other pages

A couple of days ago, right after I made some important changes to a couple of blogs I managed, I stumbled upon a mysterious problem: my administration panel could no longer load some of the asynchronous dynamic content it had, such as the Jetpack’s daily page visits & hits dashboard widget.

Instead of the expected bar chart, all I could see there was an endless loading wheel:

Wordpress - add custom JavaScript and CSS files to Admin Panel and/or other pages

By looking at the console log I was immediately able to see the reason:

admin-script.js?ver=1.0.0:17

Uncaught TypeError: jQuery(…).typeWatch is not a function

The Issue

Apparently, among the many different tasks that I performed there was one that removed the reference to the jquery.typewatch plugin (which, for the record, monitors the user keyboard activity within text fields) despite it being still required by the WordPress admin panel. Unfortunately, even after a reasonable amount of time spent trying to understand the reasons for the problem, I could not get a clue about that.

The Workaround

Eventually, I’ll be able to spend the required amount of time to restore a working backup of the site and backtrace the issue. Until then, I applied a workaround that allowed me to temporarily fix the problem. I just added a custom function to the functions.php file of my WordPress theme, which internally invokes the native wp_enqueue_script function to add a custom JavaScript resource to the requested page. In order to make this resource available throughout all the admin panel’s pages, I linked it as an event handler of the admin_enqueue_scripts Wordpress hook in the following way:

By adding these code lines to the functions.php file, the jquery.typewatch plugin will be loaded within any admin panel’s page: thanks to that, I managed to get rid of the problem. If you do not know how to edit the functions.php file, just go to Appearance> Editor from the WordPress Admin Panel: if you are using a child theme, what is highly recommended if you are making changes to your topic, I recommend you take a look at this other post for more useful instructions.

Adding CSS files

Although not strictly related to the above problem, it may be useful to know that the same technique as above can also be used to add CSS files. Just use the wp_enqueue_style function in addition to or in place of the wp_enqueue_script function, as follows:

Adding JS and/or CSS file in all WordPress pages

For those who don’t want to just add these resource files in the admin panel’s pages, the admin_enqueue_scripts hook can be replaced with the generic wp_enqueue_scripts hook, which gets fired during the rendering of all WordPress pages:

That’s it for now: happy coding!

 

RELATED POSTS

About Ryan

IT Project Manager, Web Interface Architect and Lead Developer for many high-traffic web sites & services hosted in Italy and Europe. Since 2010 it’s also a lead designer for many App and games for Android, iOS and Windows Phone mobile devices for a number of italian companies.

View all posts by Ryan