Front End Assets ​

There are three ways of including front end assets like js and css, either via a remote url/cdn, statically from your project, or via webpack.

The assets directory ​

The first thing to mention is that you should not use your theme's /style.css at all in Forme projects. The only thing that needs to go in there is your theme metadata to show in the WP admin panel, which is a slightly bizarre historical quirk of WordPress.

All your assets files should live either in /assets/src or in /assets/static

Remote url/cdn ​

For remote url/cdn dependencies, you can include them within the relevant queue registry, either public or admin. For example, here we are removing WordPress's version of JQuery and replacing it with the latest version

wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.6.1.min.js"', [], false, true);

Static Assets ​

Static assets live in assets/static. Again you can include them using the relevant queue registry. You can leverage the Assets helper class to generate the uri and to add a cache busting timestamp.

wp_enqueue_style('my-aweome-plugin-styles', Assets::uri('app.css'), [], Assets::time('app.css'));
wp_enqueue_script('my-awesome-plugin-scripts', Assets::uri('app.js'), ['jquery'], Assets::time('app.js'), true);

Webpack ​

If you want to use a build tool, stick your source files in assets/src.

Forme assumes the entry point will be assets/src/js/app.js out of the box, but you can configure things for your own needs in webpack.config.js. Forme uses Webpack Encore under the hood - see also our section on Frontend Frameworks for more tips.

Queuing these up works exactly the same as for static files. The Assets helper will figure out the correct dist file names via the Webpack generated manifest, so you can just include the original entrypoint file name as it appears in your src directory.

wp_enqueue_style('my-awesome-plugin-styles', Assets::uri('app.css'), [], Assets::time('app.css'));
wp_enqueue_script('my-awesome-plugin-scripts', Assets::uri('app.js'), ['jquery'], Assets::time('app.js'), true);

wp_enqueue_style('my-awesome-vue-styles', Assets::uri('vue.css'), [], Assets::time('vue.css'));
wp_enqueue_script('my-awesome-vue-app', Assets::uri('vue.js'), [], Assets::time('vue.js'), true);

npm run dev (development build), npm run build (production build) and npm run serve (development hot reload) should work as you would expect.

If you need to run multiple instances of npm run serve - for example one in a theme and another in a plugin - you will need to manually set ports so they don't conflict.

# first instance in e.g. /foo-bar-theme - this will run on standard localhost:8080 port
npm run serve

# second instance in e.g. /foo-bar-plugin - you will need to set a port manually or it will fail
npm run serve -- --port=8081