• Hi,

    I’m building a local WordPress site on Xampp and have quite a few scripts that I want to load conditionally in the functions.php file. Here’s my current code for this:

    /**
     * Enqueue scripts and styles.
     */
    function tmcc_scripts() {
        wp_enqueue_style( 'tmcc-Museo-Font', get_template_directory_uri(). '/fonts/MyFontsWebfontsKit.css' );
    
        wp_enqueue_style( 'tmcc-Google-Fonts', 'https://fonts.googleapis.com/css?family=Lemonada|Open+Sans:400,400i,700,700i' );
    
        wp_enqueue_style( 'tmcc-Font-Awesome', get_template_directory_uri(). '/fonts/css/font-awesome.min.css' );
    
        wp_enqueue_style( 'tmcc-normalize.css', 'https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css' );
    
        wp_enqueue_style( 'tmcc-flexboxgrid', 'https://cdn.jsdelivr.net/flexboxgrid/6.3.0/flexboxgrid.min.css' );
    
    	wp_enqueue_style( 'tmcc-style', get_stylesheet_uri() );
    
        wp_enqueue_script( 'tmcc-modernizr', 'https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js', array('jquery'), '2.8.3', true );
    
    	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
    		wp_enqueue_script( 'comment-reply' );
    	}
    
        // Register Fullpage.js scripts
        wp_register_style( 'jquery.fullpage.min.css', get_template_directory_uri() . '/js/fullpage.js/dist/jquery.fullPage.min.css' );
        wp_register_script( 'jquery.fullpage.min.js', get_template_directory_uri() . '/js/fullpage.js/dist/jquery.fullPage.min.js', array('jquery', 'jquery.fullpage.min.css'), '2.8.1', true );
    
        // Regsiter Sharetastic scripts
        wp_register_style( 'sharetastic.min.css', get_template_directory_uri() . '/js/sharetastic/dist/sharetastic.min.css' );
        wp_register_script( 'sharetastic.js', get_template_directory_uri() . '/js/sharetastic/dist/sharetastic.js', array('sharetastic.min.css'), '1.2.4', true );
    }
    add_action( 'wp_enqueue_scripts', 'tmcc_scripts' );
    
    /**
    CUSTOM: Conditional scripts
    **/
    function conditional_scripts() {
        // Homepage scripts
        if ( is_front_page() ) {
            wp_enqueue_script( 'tmcc-homepage.js', get_template_directory_uri() . '/js/custom/homepage.js', array('jquery.fullpage.min.js'), '1', true);
        }
        // Custom Fullpage.js init and settigns for Digital Marketing and PR pages
        elseif ( is_page_template('tmcc-fullpage-template.php') ) {
            wp_enqueue_script( 'tmcc-dm-pr-fullpage.js', get_template_directory_uri() . '/js/custom/digitalmarketing-pr-fullpage.js', array('jquery.fullpage.min.js'), '1', true);
        }
        // Sharetastic init
        elseif ( is_singular() ); {
            wp_enqueue_script( 'tmcc-sharetastic-init.js', get_template_directory_uri() . '/js/custom/sharetastic-init.js', array('sharetastic.js'), '1.2.4', true );
        }
    }
    add_action( 'wp_enqueue_scripts', 'conditional_scripts' );

    None of the conditional scripts are running on their respective pages.

    Appreciate any help that can be offered on this.

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Try setting the priorities, to guarantee that the dependencies are registered first:

    add_action( 'wp_enqueue_scripts', 'tmcc_scripts', 10 );
    add_action( 'wp_enqueue_scripts', 'conditional_scripts', 20 );

    Thread Starter Mr-Silly-Bear

    (@mr-silly-bear)

    Hi Jacob,

    Thanks for responding.

    Just tried your suggestion with no luck I’m afraid.

    Thanks

    I think I see the issue. You have got a few scripts with CSS dependencies:

    wp_register_script( 'sharetastic.js', get_template_directory_uri() . '/js/sharetastic/dist/sharetastic.js', array('sharetastic.min.css'), '1.2.4', true );

    The dependencies argument for these functions only look for other scripts or stylesheets. Not both. So sharetastic.js isn’t loading because there’s no script called sharetastic.min.css.

    Thread Starter Mr-Silly-Bear

    (@mr-silly-bear)

    Hi Jacob,

    That’s done the trick. Thank a lot!

    That’s a shame that the dependencies can’t be CSS too, as I thought what I had was looking quite neat (even though it didn’t work!).

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Conditional enqueueing not working’ is closed to new replies.