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

Question

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".

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?

Jeffrey Carandang · Accepted Answer · 2014-02-23 09:17:28Z

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!

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related