Skip to main content

Assets Manifest

docs-source

This manifest.json file is generated by Webpack, and is different from the rest of eightshift manifests described elsewhere in the documentation.

In the build process, Webpack creates all the static files from your assets folder and a manifest.json file inside the public folder. The manifest file contains a list of key/value pairs that we use to set the location of the assets dynamically.

This class provides the location of the manifest.json file and helpers to return the full path for a specific asset.

How to use it

First, install the manifest class using this command:

wp boilerplate create manifest

You will see a custom filter you can use to fetch an item from the public folder in your class. This is the custom filter:

/**
* Manifest item filter name constant.
*
* @var string
*/
public const MANIFEST_ITEM = 'manifest-item';

/**
* Register all hooks. Changed filter name to manifest.
*
* @return void
*/
public function register(): void
{
\add_filter(static::MANIFEST_ITEM, [ $this, 'getAssetsManifestItem' ]);
}

To use this filter to fetch asset URLs, add the following code and provide the correct name of your asset:

use CoolProject\Manifest\Manifest;

$logo = \apply_filters(Manifest::MANIFEST_ITEM, 'logo.svg');

And that's it. This filter will check the public folder for the manifest.json file, parse it, and return the value of the provided key.

If there is no manifest.json file or you provided the wrong asset name, there will be a descriptive message for you.

Important

If you are using multiple boilerplates in one project don't forget to change the filter name defined in the MANIFEST_ITEM constant.

Why not just fetch the asset the old-fashioned way?

By the old-fashioned way, we mean doing something like this:

$logo = get_template_directory_uri() . 'public/logo.svg';

You can definitely do this. However, using the manifest approach, if you want to change the public folder location or public folder name for some reason, you can change it in one place and you're done.

If you are using the old-fashioned way, you would need to search and replace the whole project and implement the change. There is always a chance you will miss something and somehow break the project.