2

I recently installed a NPM Package, Masonry, to my WordPress project. I would like to use it, but I am not sure where I should add the script.

I was thinking of adding it via functions.php where I will enqueue it and find it in my node_modules folder using

get_template_directory_uri() . /node_modules/masonry-layout/dist/masonry.pkgd.min.js

But I feel there should be a simpler/better way.

I have bootstrap installed, and in my local js file, I have

require('bootstrap');

I then have a webpack mix that takes mixes all the js files I have and adds it to my /dist

Is there a similar way to add it to my package without having to use functions.php enqueue it? I would love to only have one js script enqueued rather than having several one. (Unless you think that is bad practice).

Something similar to:

require('masonry');

Additionally, please don't try to persuade me to use the CDN instead.

Here is the package: https://www.npmjs.com/package/masonry-layout

0

1 Answer 1

5

There's no single correct way, but I guess something approaching the normal way would be:

  1. Have a package.json file in your theme (or plugin).
  2. Install whatever packages you want with npm install, which will install the package into node_modules/ inside your theme.
  3. Inside your main script/entrypoint, include that script with require() or import.
  4. Configure your build process so that you have a single JS file that you can enqueue with WordPress from functions.php.

You'll notice that pretty much none of this has anything to do with WordPress. The only thing you want for WordPress is to have your build process produce a single file that can be enqueued with wp_enqueue_script(), since you don't want to have to enqueue a large number of files. How to do that is entirely dependent on the tools you're using, and is unrelated to WordPress.

However, FWIW, WordPress already bundles the Masonry script, so you shouldn't need to bundle it yourself at all. Just declare it as a dependency when enqueueing your script with wp_enqueue_script():

wp_enqueue_script( 'my-handle', '/path/to/my/script.js', [ 'masonry' ] );
4
  • Depending on the current configuration of the site, masonry may just be registered rather than enqueued as well, so it's possible that wp_enqueue_script( 'masonry' ) is also needed.
    – Sephsekla
    Apr 23, 2021 at 10:44
  • 1
    Incorrect. If you set it as the dependency of an enqueued script then it will be enqueued. That’s the purpose of setting it as a dependency. Apr 23, 2021 at 10:48
  • You're absolutely correct, I need more tea this morning. I would argue that it's not the only purpose, since it also manages the order of enqueued scripts somewhat.
    – Sephsekla
    Apr 23, 2021 at 10:52
  • I apologize for taking the time to give this the correct answer. All of the things you've listed worked, the answer I was looking for was number 3. You can add require('masonry-layout') in your local JS file to use the grid system given in masonry-layout
    – Steve
    Apr 26, 2021 at 19:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.