Aleš Sýkora / September 20, 2024 / 0 comments
Bricks: How to load Animate On Scroll library properly in Builder
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
:
- 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.
- 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. - 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.
Fuel my passion for writing with a beer🍺
Your support not only makes me drunk but also greatly motivates me to continue creating content that helps. Cheers to more discoveries and shared success. 🍻