• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

Conditional Tags to Load custom.js script

Last Updated on June 29, 2019 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:

  • Add Custom js Script in Genesis
  • Register and Enqueue Scripts
  • Conditional Tags in WordPress

Related Posts

  • Conditional Tag is_front_page() v/s is_home(). What to use?
  • Add Custom Body Class in Genesis
  • Conditional site footer in Genesis
  • Replace site footer widget area conditionally in Genesis
  • Customize Post Meta conditionally in Genesis

Categories: Free Content, Genesis Tutorials, WordPress Tutorials Tags: conditional tags, enqueue, script, scripts

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service