PopWP

WordPress and Genesis Tutorials

Conditional Tags to Load custom.js script

Last Updated on Favorited: 0 times

Recently I have written about adding stylesheet conditionally in Genesis and today we are going to learn about adding the script (.js) conditionally using WordPress conditional tag.

Using Scripts conditionally helps to maximize the site speed and performance as the js file will load on that particular post or page. If we are not on that particular post or page, no additional file be loaded.

Note:- It is recommended to do the following work before adding snippets in functions.php

  1. Filename – Create file name according to the code like custom.js mentioned in the first snippet but is different on others. or if you have already created one. Change it accordingly.
  2. Make sure the file is in the correct path. The most popular path is default ‘child-theme’ folder or a specific ‘js’ folder.
    /child-theme/custom.js
    /child-theme/js/custom.js

Loading Script Conditionally in Genesis

The snippet should be added to your functions.php of the child theme or can be included in a mu-plugins if you have any special functions.php file.

1. Loading Custom Script Globally

//* Load custom script
add_action( 'wp_enqueue_scripts', 'load_custom_script' );
function load_custom_script() {
	wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/custom.js', array('jquery'), '1.0.0' );
}

2. Loading Script on Front Page

//* Load script on Front Page
add_action( 'wp_enqueue_scripts', 'load_frontpage_custom_script' );
function load_frontpage_custom_script() {
    if( is_front_page() ) {
    wp_enqueue_script( 'front-page-script', get_stylesheet_directory_uri() . '/front-page-script.js', array('jquery'), '1.0.0' );
    }
}

3. Loading Script on Home Page (Post Page)

//* Load script on Post Page
add_action( 'wp_enqueue_scripts', 'load_home_custom_script' );
function load_home_custom_script() {
    if( is_home() ) {
    wp_enqueue_script( 'home-script', get_stylesheet_directory_uri() . '/home-script.js', array('jquery'), '1.0.0' );
    }
}

4. Loading Script on Both FrontPage and HomePage

//* Load script on Both Front Page and Post Page
add_action( 'wp_enqueue_scripts', 'load_frontpage_home_custom_script' );
function load_frontpage_home_custom_script() {
    if(is_front_page() || is_home() && ! is_paged() ) {
    wp_enqueue_script( 'front-home-script', get_stylesheet_directory_uri() . '/front-home-script.js', array('jquery'), '1.0.0' );
    }
}

5. Loading Script on Single Post and Page

//* Load script on Single Post and Page
add_action( 'wp_enqueue_scripts', 'load_post_page_custom_script' );
function load_post_page_custom_script() {
    if ( is_singular() ) {
    wp_enqueue_script( 'single-script', get_stylesheet_directory_uri() . '/single-script.js', array('jquery'), '1.0.0' );
    }
}

can be used with array for multiple post type.

is_singular( array ('post','page') )

6. Loading Script on Custom Post Type Archive

//* Load script on Custom Post Type Archive
add_action( 'wp_enqueue_scripts', 'load_custom_post_type_custom_script' );
function load_custom_post_type_custom_script() {
    if ( is_post_type_archive ('custom_post_type') ) {
    wp_enqueue_script( 'custom-post-type-script', get_stylesheet_directory_uri() . '/custom-post-type-script.js', array('jquery'), '1.0.0' );
    }
}

Example: Let’s suppose if we want to show js file-name ‘member-script.js’ on Members archive list page. Here ‘Member’ is custom Post Type registered using a Plugin like Pods or ACF or manually.

Here what we will need to use. Add this in functions.php

//* Load script on Custom Member Post Type Archive
add_action( 'wp_enqueue_scripts', 'load_custom_post_type_custom_script' );
function load_custom_post_type_custom_script() {
    if ( is_post_type_archive ('Member') ) {
    wp_enqueue_script( 'member-post-type-script', get_stylesheet_directory_uri() . '/member-script.js', array('jquery'), '1.0.0' );
    }
}

Reference:

Related Posts

Reader Interactions