WordPress register scripts and enqueue automatically
I have an FYI for you, more for myself but if this info helps others, double-bonus.
I have recently started combining my love for AngularJS with my experience on ongoing work with WordPress. The thing about working with AngularJS is there are a lot of scripts needed for even a small project, goes with the territory. Before you start thinking “Why aren’t you combining and minifying your scripts?”, I know. It is on my list, Things I need to know more, understanding and using more tools like GULP and Grunt.
Until I find the answer to magically creating more time in my day and I know all there is to AngularJS, I need to enqueue all my scripts in WordPress. The latest project is creating a login page with AngularJS, connecting to an Office365 SharePoint list and pulling data back to WordPress. There is only a login page with the login form, and then the file display and client data is loaded and with that, there is six core AngularJS script files, five service scripts and two controllers. The goal here is only to load these when needed, no big deal right. Just use something like is_page() and load only what you need. My preferred process is the register everything and enqueue when you need them. I didn’t like the idea of registering and writing all that and started wondering if wp_register_script() would take an array of registered script handles to enqueue. I stumbled across the following in the codex. Function Reference/wp register script
Scripts that have been pre-registered using wp_register_script() do not need to be manually enqueued using wp_enqueue_script() if they are listed as a dependency of another script that is enqueued. WordPress will automatically include the registered script before it includes the enqueued script that lists the registered script’s handle as a dependency.
Awesome as script dependency is used all over AngularJS. The core file is the dependency for the other core files, all the services and modules are dependencies and included in your base module, usually referred to as “app”. Then the controllers depend on those, so you can register all your scripts and then enqueue 2 and they are all called. Here is my list and layout.
/**
* -------------------------------------------------------------------------
* Angular Modules
*/
wp_register_script( 'ng-core',
plugin_dir_url( __DIR__ ) . 'modules/angular/angular.min.js' );
wp_register_script( 'ng-route',
plugin_dir_url( __DIR__ ) . 'modules/angular-route/angular-route.min.js',
array( 'ng-core' ), $this->version, true );
wp_register_script( 'ng-cookies',
plugin_dir_url( __DIR__ ) . 'modules/angular-cookies/angular-cookies.min.js',
array( 'ng-core' ), $this->version, true );
wp_register_script( 'ng-local-storage',
plugin_dir_url( __DIR__ ) . 'modules/angular-local-storage/dist/angular-local-storage.min.js',
array( 'ng-core' ), $this->version, true );
wp_register_script( 'ng-animate',
plugin_dir_url( __DIR__ ) . 'modules/angular-animate/angular-animate.min.js',
array( 'ng-core' ), $this->version, true );
wp_register_script( 'ng-ui-bootstrap',
plugin_dir_url( __DIR__ ) . 'modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js',
array( 'ng-core' ), $this->version, true );
/**
* ----------------------------------------------------------------------------
* Custom angular services
*/
wp_register_script( 'ng-app',
plugin_dir_url( __DIR__ ) . 'shp_app/app.js',
array( 'ng-core', 'ng-route', 'ng-cookies', 'ng-local-storage', 'ng-animate', 'ng-ui-bootstrap' ),
$this->version, true );
wp_register_script( 'ng-auth-srvc',
plugin_dir_url( __DIR__ ) . 'shp_app/js/service/authentication.srvc.js', array( 'ng-app' ),
$this->version, true );
wp_register_script( 'ng-flash-srvc',
plugin_dir_url( __DIR__ ) . 'shp_app/js/service/flash.srvc.js', array( 'ng-app' ),
$this->version, true );
wp_register_script( 'ng-client-docs-srvc',
plugin_dir_url( __DIR__ ) . 'shp_app/js/service/clientDocs.srvc.js', array( 'ng-app' ),
$this->version, true );
wp_register_script( 'ng-local-storage-srvc',
plugin_dir_url( __DIR__ ) . 'shp_app/js/service/user.service.local-storage.js', array( 'ng-app' ),
$this->version, true );
/**
* -------------------------------------------------------------------------------
* angular custom controllers
*/
wp_register_script( 'ng-home-ctrl',
plugin_dir_url( __DIR__ ) . 'shp_app/js/controller/home.ctrl.js',
array( 'ng-app', 'ng-client-docs-srvc' ), $this->version, true);
wp_register_script( 'ng-login-ctrl',
plugin_dir_url( __DIR__ ) . 'shp_app/js/controller/login.ctrl.js',
array( 'ng-app', 'ng-auth-srvc', 'ng-flash-srvc', 'ng-local-storage-srvc' ), $this->version, true);
if(is_page('log-in')){
wp_enqueue_script('ng-login-ctrl');
wp_enqueue_script('ng-home-ctrl');
}
Technology has been in my blood for as long as I can remember. Started with Dick Smith kits when I was 10, I was making FM wireless bugs in high school. After several years working, Electronics Technician, Sound and Lighting Technical Director and then IT Sysadmin, I am going with the flow and leaving the hardware behind, mostly. I am now developing solutions for the cloud, focus on WordPress, SharePoint and Mobile devices. Learning more and more every day.
Good day! Do you use Twitter? I’d like to follow you if that would be ok.
I’m definitely enjoying your blog and look forward
to new updates.
My Twitter account is in the sidebar on every page, @mrwilde. Thanks, Corey.
Wow that was unusual. I just wrote an incredibly long comment but after I clicked submit my comment didn’t
show up. Grrrr… well I’m not writing all that over again.
Anyway, just wanted to say great blog!
No, not really, all my comments are vetted before being seen on the site. Just to make sure everyone is playing nice. I appreciate your comments, thanks for taking the time to post.
Hurrah, that’s the things i was looking for, what a
information! present at this website, thanks admin on this
site.
Thank’s great post.
Keep on working, great job!