How to enqueue multiple css and js files on WordPress for different pages based on the is_page() conditional tag?

I’m pretty new to PHP/WordPress and what I’m trying to do here is to enqueue different css and js files on different pages by using the is_page() conditional.

Although I believe this is a widely discussed topic around here, I still haven’t found a neat approach to enqueue multiple files (css/js) altogether and then set the is_page() conditional so that some of these files can be enqueued on a per “different page basis”.

Read More

The following code works fine on my theme, however, I’m wondering if there’s a better way to accomplish it. I’d really appreciate some guidance regarding this issue. Txt.

// To register my css styles I use the function below:

function enqueue_extra_styles()
{
wp_register_style( 'custom-style', get_stylesheet_directory_uri() . '/css/custom-style.css', array(), '1', 'all' );
wp_register_style( 'second-custom-style', get_stylesheet_directory_uri() . '/css/second-custom-style.css', array(), '1', 'all' );
wp_register_style( 'third-custom-style', get_stylesheet_directory_uri() . '/css/niceforms/third-custom-style.css', array(), '1', 'all' );

if ( is_page('8')) { 
//bellow styles will be enqueued only on a page of id=8

    wp_enqueue_style('custom-style');
    wp_enqueue_style( 'second-custom-style' ); 
  }

//bellow style will be enqueued only on a page of id=2111 

if ( is_page('2111')){
    wp_enqueue_style('third-custom-style');
  }

}

add_action('wp_enqueue_scripts', 'enqueue_extra_styles');



// To register my js files I use the function below:

function my_extra_jscripts()
{
wp_register_script('custom-script', get_template_directory_uri().'/js/custom-script.js', array('jquery'), '', TRUE);

wp_register_script('second-custom-script', get_template_directory_uri().'/js/second-custom-script.js', array('jquery'), '', TRUE);

if ( is_page('8')){
   wp_enqueue_script('custom-script');
  }

if ( is_page('2111')){
   wp_enqueue_script('second-custom-script');
  }
}
add_action('wp_enqueue_scripts', 'my_extra_jscripts');

As other users suggest, there are a few ways to optimize the code above. I’ve seen this answer and I found it very promising regarding optimization, however, what I’d like to achieve is a better approach while writing the php “if conditional”…I mean, after optimizing the code as the user Jeffrey has also suggested, what to do next if I have more than 1 page I want to enqueue files for, let’s say for e.g: 4 pages? Should I keep writing the “if ( is_page(”)) {}” kind of looped structure ever and ever?

Related posts

Leave a Reply

1 comment

  1. You can actually make your script like this :

    <?php
    function custom_scripts_method() {
        wp_register_style( 'custom-style', get_stylesheet_directory_uri() . '/css/custom-style.css', array(), '1', 'all' );
        wp_register_style( 'second-custom-style', get_stylesheet_directory_uri() . '/css/second-custom-style.css', array(), '1', 'all' );
        wp_register_style( 'third-custom-style', get_stylesheet_directory_uri() . '/css/niceforms/third-custom-style.css', array(), '1', 'all' );
    
        wp_register_script('custom-script', get_template_directory_uri().'/js/custom-script.js', array('jquery'), '', TRUE);
        wp_register_script('second-custom-script', get_template_directory_uri().'/js/second-custom-script.js', array('jquery'), '', TRUE);
    
        if ( is_page('8')) {
            wp_enqueue_style('custom-style');
            wp_enqueue_style( 'second-custom-style' );
    
            wp_enqueue_script('custom-script');
        }
    }
    
    add_action( 'wp_enqueue_scripts', 'custom_scripts_method' );
    ?>
    

    wp_enqueue_scripts accepts both css and jquery enqueue.

    Cheers!