Bricks: How to load Animate On Scroll library properly in Builder

2 min read / Bricks Builder, Uncategorized / Share on: Twitter, LinkedIn, Facebook

Post summary: If you use the AOS scripts and you want them to load in Bricks Builder, you must use the functions.php.

When building websites in WordPress with Bricks Builder, you might want to load custom scripts like Animate on Scroll. This can be easily managed by Bricks-child template.

Use wp_enqueue to enqueue the scripts

Go to your Bricks-child template and open the Functions.php. There should be wp_enqueue_style and wp_enqueue_script functions pre-made.

These functions allow WordPress to properly handle the loading of resources and avoid conflicts. You must use this in functions.php file inside Bricks-Child template. I also add add_action to run the script properly.

Here’s mine PHP code with wp_enqueue. I have my aos.css and aos.js located in: bricks-child/scripts/aos/.

<?php

add_action('wp_enqueue_scripts', function () {
  // Enqueue your files on the canvas & frontend, not the builder panel. Otherwise custom CSS/JS might affect builder.
  if (! bricks_is_builder_main()) {
    // Enqueue custom styles
    wp_enqueue_style('bricks-child', get_stylesheet_uri(), ['bricks-frontend'], filemtime(get_stylesheet_directory() . '/style.css'));

    // Enqueue AOS CSS from local file with filemtime for cache-busting
    wp_enqueue_style('aos-css', get_stylesheet_directory_uri() . '/scripts/aos/aos.css', [], filemtime(get_stylesheet_directory() . '/scripts/aos/aos.css'));

    // Enqueue AOS JS from local file with filemtime for cache-busting
    wp_enqueue_script('aos-js', get_stylesheet_directory_uri() . '/scripts/aos/aos.js', [], filemtime(get_stylesheet_directory() . '/scripts/aos/aos.js'), true);
  }
});

add_action('wp_footer', function () {
  if (! bricks_is_builder_main()) {
    echo '<script>
          AOS.init({
              duration: 500,
          });
      </script>';
  }
}, 20);

Why wp_enqueue ?

Using wp_enqueue has several benefits over directly outputting scripts and styles with echo:

1. Efficiency: WordPress handles all scripts and styles in a queue, ensuring that they are only loaded when needed. This reduces the risk of conflicts with other themes or plugins.
2. Positioning: The last parameter of wp_enqueue_script (true) ensures that your script is loaded in the footer rather than the header, which can improve page load performance.
3. Compatibility: By using the WordPress enqueue system, your scripts are less likely to cause issues with caching, plugins, or themes.

Conclusion

If you’re working with custom scripts, especially in a builder like Bricks, it’s important to make sure they load. You should enqueue all the scripts with functions.php inside the Bricks Child.

0 comments