AngularJS in your Child Theme


You can add AngularJS “library” to your WordPress child theme to make it available for all of your pages and posts in your website. You can then go ahead and use AngularJS in your WordPress website’s posts and pages.

There is a plugin for this task, but I found that some of my Angular code did not work! For example, the ng-init did not work, along with data-ng-init.

CDN in header.php

I got it working by using the CDN for AngularJS and putting that into the header.php file that I copied to the appropriate directory that contains my child theme files. First, I copied the header.php file in the theme of the website. Then I edited that file by adding the script line:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

Google Hosted Libraries has several CDN libraries that you can add to your web site. AngularJS is one of them. Just as a reminder, be very careful as to the version of AngularJS you are using. In the above line of code the Angular version 1.4.8. If you find that your code is not working you may need to use a different version of AngularJS, either newer or older.

The Customizr theme that I currently use for this site makes extensive use of WordPress hooks. In the header.php file of the Customize theme you don’t see any regular HTML code. There is a lot of php code. I inserted the above script near the top of the file, before the main php code begins. I have not yet tried to put that code at the end of the header.php file to see if it works.

Leave a comment

Your email address will not be published. Required fields are marked *