What’s the simplest conditional for testing if a specific flex content layout is being used on a page? Do I have to loop through each layout to do that?
For example, I have a flex content field called “page blocks” with five different layouts. I need to know if one specific layout (“slider”) exists so that I can enqueue the appropriate JS in the template footer. What’s the best way to do this?
Thanks.
There are a couple of ways to do what you what. The first is to enqueue the script in the footer when you actually output the “slider”. This will work, and you’ll only get one instance of the script no matter how many times it’s called.
simple example:
while (have_rows('flex-field')) {
the_row();
if (get_row_layout()) == 'slider') {
// enqueue slider script with $in_footer set to true
}
}
Another way is to get the flex field using get_post_meta(). When you get the flex field this way it will return an array containing a list of layout names.
$layouts = get_post_meta($post_id, 'flex-field-name', true);
if (is_array($layouts) && in_array('slider', $layouts)) {
// enqueue slider script
}
Thanks for both those solutions John! It didn’t even occur to me that I could enqueue the script from within the loop itself.
@hube2 so I have a really silly question to your answer… How are you enqueuing the script inside the loop itself?
I’m actually trying to do this same thing. Drupal is nice in that I can attach libraries in any template I want and if I can figure out the same for WordPress that would be fantastic!
@lstreng – this is how I did it:
<?php // Loop through the repeater rows
if (have_rows('info_block')) :
wp_enqueue_script('slick-home'); // js triggers for slider
while ( have_rows('info_block') ) : the_row();
Hah, well that’s simple enough – never enqueue’d in any other file other than functions. Thanks 😛
When you use wp_register_script() set $in_footer to true.
Or alternately, just call wp_enqueue_script() with all of the arguments including $in_footer in your loop.
I’m using slick as well and in my template part for each layout I have something like this
wp_enqueue_script('slick', get_template_directory_uri().'/assets/vendor/slick/slick.min.js', array('jquery'), '1.8.1', true);
wp_enqueue_script('slick-init', get_template_directory_uri().'/js/slick-init.js', array('jquery', 'slick'), '1.0.0', true);
My slick init script actually is pretty complicated and I give each type of slider a different class and then initialize each class. This way I have just a single initialization script to load and it remains the same on all pages so that it can be cached by the browser and does not cause other caching issues.
Sorry to bring up an old thread. I’ve been recently doing this. I’m trying to figure out the performance hit of enqueuing a script / css via functions.php vs inside a component’s template. In the WordPress loading order, the component enqueue would be a bit later in time. Have you noticed a performance hit, or at least, a “flash” of something? I have once before with a charting library.
I didn’t notice any performance issues or a flash of unstyled html, but it probably depends on what your JS is doing. Mine was for a slider, and I believe I had all the slides but the first hidden via CSS until the script was fully loaded. So you may have to do something like that, style the element for before the script loads, then for after. Many scripts will add a class to the relevant element once the script is loaded, making it pretty easy to manage.
That could be it. I was loading HighCharts which is a large library. However, when I enqueued HighCharts in functions.php, I didn’t have the flash. Perhaps its the size that was causing the issue and that slight earlier load time, helped.
It was in the footer in both cases?
Now that I think about it, after js / css optimization, it’s then in the header… On my local, I don’t have optimizations on, so functions.php was header, component enqueue was in the footer but it probably wouldn’t have had the flash if I had the optimizations on… I don’t like to develop with optimization on. D’oh.
I think I gave up when I couldn’t get the component enqueued js to load earlier. I spent so much time trying all sorts of things to accomplish that. That was a good day or two of research. hah
Hi 🙂
What if in flex layout I have JS script that require library but enqueued before this script? If I enqueue this script in footer it will not work.
@damian-p – I ran into this as well. Also with Webpack. If I want to make the most efficient compiling, it would be nice to know what libraries are already loaded to prevent duplicates. I don’t think it’ll be possible to get the efficiency of React without building the site with React, or the like.
