Per page assets

Hello guys, glad to be here.

I am giving Beans a try and I am courious about the conditional assets per page loading mentioned on the Homepage of this website http://www.getbeans.io/ "Moreover, assets are combined into one file which is minified and cached on a per page basis if need be".

How can I load specific styles or javascript on individual pages/posts?

I look forward to hearing from you.

Best

Hello Euclides,

Welcome to Beans, This is a great framework and i'm sure you'll enjoy it. You can use this code to load specific styles or js to individual pages/posts. This is a example to load the styles only on the home page.

function beans_child_enqueue_assets() {
if ( is_home() ) { 
        wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'beans_child_enqueue_assets' );

Happy coding hours ahead. 🙂

Hi Anupam and thank you for your reply.

I assume I should add this snippet to the functions.php file?

Two quick questions:

1. If I use a child theme, where should I add it?
2. Your code is for the homepage, how do I know what if condition should I use for other pages or posts other than Homepage?

Thank you very much for your help!

Ans to the 1st question:- Create a functions.php file in your child theme or download Beans Starter Child Theme it comes with functions.php. Then copy paste the code in the functions.php file.

Ans to the 2nd question:- To load the css or js only on a specific post or page set the id.

function beans_child_enqueue_assets() {
   if (is_single()) {
       global $post;
       if($post->ID=="the post id"){ // add the post id for whhich you want to load the js/.css/.less
            wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
       }
   }
}
add_action( 'wp_enqueue_scripts', 'beans_child_enqueue_assets' );

Awesome Anupam! I will test this out and let you know how it goes.

Thanks!

Hey Euclides and welcome to Beans community,

I would just like to add a note. As Anupam showed, you can enqueue a script/style on certain pages which is a standard WordPress thing and all you have to worry about. Beans comes into play when you enable compiling options in Appearance->setting, it will take all the scripts enqueued, compile it and cache it on a per page basis. I suggest to read this article which explains exactly what it does.

It is also good to know that you can enqueue UIkit components globally or a a per page basis just like you would do with your scripts in the example above. Here is the article which shows how to work with UIkit components.

If you don't understand everything 100% right away, don't sweat it, we are here to help and it will come over time 🙂

Happy coding,

Hey Thierry. that's great, I believe you are filling a gap that most CMS have out there, this is really great for performance. Good job!

One question, do you have a donation's page or something? I am not rich but maybe I can buy you a beer or coffee? 🙂

Hey Euclides,

Yes here is the link (it is in Beans website and forum footer, very small I agree 🙂 ). Any donation is much appreciate and will go into Beans groth.

Thanks,

Done my friend, I just sent a small donation. Keep uo the good work!

You rock Euclides, thanks a lot for your contribution 🙂