Building an Angular WordPress theme

This article will take you through the first steps of generating an Angular app using the Angular CLI, and modifying the app to be a valid WordPress theme that can activated in WordPress.

Please note that this article assumes you have installed the Angular CLI, and that you have a webserver with a blank copy of WordPress installed.

Generate Angular app using Angular CLI

The Angular CLI command line interface is used throughout the entire development process of your angular app, to start with we will use it to generate a new Angular project.

In your favourite terminal change directory into your WordPress themes folder wp-content/themes, from here we will use the angular cli to generate a new App using the ng new command, in this exmple our new theme will be called angularwp.

ng new angularwp

You will be asked a few questions, press enter to accept the defaults when prompted, once finished to confirm the angular app is working go back in your terminal change directory into the newly generated project folder and run the app locally using the ng serve command.

cd angularwp
ng serve --open=true

This is the only time we will be using Angular CLI serve command, in the future we will be using ng build and viewing it from your local WordPress server. ng serve starts a local web server and the –open flag attempts to automatically load the url in your browser, if not there should be a url in the terminal where you can access the app, if all goes well you should see the angular boilerplate.

Making the angular app into a WordPress Theme

Now that we have a basic Angular app setup, we need to make a few required changes to covert it into a valid WordPress theme that can be activated in WordPress.

WordPress theme stylesheet: style.css

A WordPress theme is reqired to have a style.css file in the theme’s root, this file will tell wordpress information about your theme, We will however not be including this stylesheet in our themes output as Angular generates its own stylesheets.

/*
Theme Name: Angular WordPress Theme
Theme URI: https://www.jclabs.co.uk
Author: James Collings
Author URI: https://www.jclabs.co.uk
Description: Angular WordPress Theme
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

WordPress theme entrypoint: index.php

The will be the main entry point for your theme, we will copy the contents of Angular’s generated index.html file and remove the scripts and stylesheets as these will be loaded via a different method.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title><?php wp_title(); ?></title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <?php wp_head() ?>
</head>
<body>
    <app-root></app-root>
    <?php wp_footer(); ?>
</body>
</html>

WordPress theme function file: functions.php

The theme functions file is an optional file that allows you to write custom code. We will use this file to add back in the scripts and styles via the wp_enqueue_scripts action that were previously removed from the index.php file.

I have taken the presumption that with WP Debug mode enabled we will enqueue the development styles and scripts, and with WP Debug disabled we will enqueue the production styles and scripts.

Finally once the styles and scripts have been queued we will add a global config variable that will be accessible within Angular containing the WordPress REST nonce, and WordPress REST Url.

<?php
function jc_enqueue_scripts(){

    $version = time();

    if(true === WP_DEBUG) {
        // development scripts
        wp_enqueue_script('angular-runtime', get_stylesheet_directory_uri() . '/dist/angularwp/runtime.js', array(), $version, true);
        wp_enqueue_script('angular-es2015-polyfills', get_stylesheet_directory_uri() . '/dist/angularwp/es2015-polyfills.js', array(), $version, true);
        wp_enqueue_script('angular-polyfills', get_stylesheet_directory_uri() . '/dist/angularwp/polyfills.js', array(), $version, true);
        wp_enqueue_script('angular-styles', get_stylesheet_directory_uri() . '/dist/angularwp/styles.js', array(), $version, true);
        wp_enqueue_script('angular-vendor', get_stylesheet_directory_uri() . '/dist/angularwp/vendor.js', array(), $version, true);
        wp_enqueue_script('angular-main', get_stylesheet_directory_uri() . '/dist/angularwp/main.js', array(
            'angular-vendor', 'angular-styles', 'angular-polyfills', 'angular-es2015-polyfills', 'angular-runtime'
        ), $version, true);
    }else{
        wp_enqueue_style('angular-styles', get_stylesheet_directory_uri() . '/dist/live/styles.css');
        wp_enqueue_script('angular-runtime', get_stylesheet_directory_uri() . '/dist/live/runtime.js', array(), $version, true);
        wp_enqueue_script('angular-es2015-polyfills', get_stylesheet_directory_uri() . '/dist/live/es2015-polyfills.js', array(), $version, true);
        wp_enqueue_script('angular-polyfills', get_stylesheet_directory_uri() . '/dist/live/polyfills.js', array(), $version, true);
        wp_enqueue_script('angular-main', get_stylesheet_directory_uri() . '/dist/live/main.js', array(
            'angular-runtime', 'angular-es2015-polyfills', 'angular-polyfills',
        ), $version, true);
    }

    $config = array(
        'site_url' => site_url('/'),
        'rest_url' => rest_url(),
        'nonce' => wp_create_nonce('wp_rest'),
    );

    wp_localize_script('angular-main', 'wp_config', $config);
}
add_action('wp_enqueue_scripts', 'jc_enqueue_scripts');

With our basic theme setup you should be able to activate it within WordPress via Appearence > Themes, in its current state if you were to view the page you would get a few errors saying missing styles and scripts, this is because they have not been generated yet.

Angular Development Mode

We will be using development mode throughout the development of this theme, when running in development mode it automatically updates the generated styles and scripts that are output into the dist/angularwp folder when you make changes to your source files.

Development mode scripts will be loaded into your wordpress theme when you have WP_DEBUG set to true in your wp-config.php file.

Please note that the build command should be ran from the root of the theme folder.

ng build --watch

Angular Production Mode

Production mode takes longer to compile and outputs into the dist/live folder, we pass the outputHasing=none flag to make sure the filenames stay the same (otherwise Angular appends a hash onto each filename to make sure the browser doest load the cached version instead).

Production mode scripts will be loaded into your wordpress theme when you have WP_DEBUG set to false in your wp-config.php file.

Please note that the build command should be ran from the root of the theme folder.

ng build --prod --outputHashing=none --outputPath=dist/live

Conclusion

Now that we have a basic working angular app running as a WordPress theme which can be viewed via your local wordpress url, all that remains is to start fetching data from the WordPress REST API, which we will be covering in the next couple of aritcles in this series.