External Libraries

From time to time you may need to include a Javascript library or standalone PHP tool to enhance the website build. Adding these to your WordPress theme is usually straighforward.

To keep everything consistent and predictable we've created a /lib folder inside of the root of our theme.

As an example, you'll notice that the Bootstrap library is already included inside of the /lib folder. This should be the latest version of Bootstrap and it includes all of the files in the CSS and JS bundle download found here. To pull the files we need into the site we'll enqueue them using the already existing wp_enqueue_scripts hook in our functions.php file, like so:

wp_enqueue_style( 'thegrove-bootstrap-css', get_template_directory_uri() . '/lib/bootstrap/css/bootstrap.min.css', array(), '5.2' ); wp_enqueue_script( 'thegrove-bootstrap-js', get_template_directory_uri() . '/lib/bootstrap/js/bootstrap.min.js', array('jquery'), '5.2', true );

If you need to use the popper library with Bootstrap you can simply enqueue the CDN link like so:

wp_enqueue_script( 'thegrove-bootstrap-popper', 'https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js', array('jquery'), '2.11.6', true );

You'll follow this same pattern for any other external libraries you need to include:

• Download the library you need

• Upload the library into the /lib folder

• Enqueue any required scripts and css in the functions.php file inside of the wp_enqueue_scripts hook.

Regardless if the the library is a single file or multiple files you should always place them inside of a folder within the /lib directory.