• 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

How to add custom.js script to in Genesis

Last Updated on May 14, 2020 Favorited: 1 times

Here is the simple guide on loading custom jquery or js script in your Genesis child theme.

Loading Custom JS script to Theme

Create a custom.js under a ‘js‘ folder of your child theme. Make sure you have similar file added if you are writing a custom js.

/**
 * Example function.
 */
( function ( $ ) {

	'use strict';

	// Place your custom scripts here.

} )( jQuery );

Or try this

jQuery(function ($) {
	// Place custom init scripts here.
});

OR

jQuery(function($){

	"use strict";

	/* Put Some function here.
	--------------------------------------------- */


});

once the file is ready, we need to call it to show on the site. Add this in functions.php

// Enqueue Custom JS script
add_action( 'wp_enqueue_scripts', 'enqueue_custom_script' );

function enqueue_custom_script() {
    wp_enqueue_script( 'custom', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ),  '1.0.0', true );
}

the above method is recommended or we can simply use this for load in header.

// Enqueue Custom JS script
wp_enqueue_script( 'custom', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), CHILD_THEME_VERSION, false );

to load in the footer

// Enqueue Custom JS script
wp_enqueue_script( 'custom', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), CHILD_THEME_VERSION, true );

You can create more files like global.js and enqueue it.

// Enqueue Global JS script
add_action( 'wp_enqueue_scripts', 'enqueue_global_script' );
function enqueue_global_script() {
    wp_enqueue_script( 'global', '/tmp/js/global.js', array( 'jquery' ), CHILD_THEME_VERSION );
}

Loading Custom JS script to Plugin

// Enqueue Custom JS script in Plugins
add_action( 'wp_enqueue_scripts', 'wpize_custom_plugin_script' );

function wpize_custom_plugin_script() {
	wp_register_script( 'custom-script', plugins_url( '/js/custom-script.js', __FILE__ ), array( 'jquery' ) );	
	wp_enqueue_script( 'custom-script' );
}

Loading Mulitple scripts

Enqueue Multiple Scripts from CDN URLs

//* Enqueue Multiple Scripts from CDN URLs
add_action( 'wp_enqueue_scripts', 'enqueue_scripts_cdn_urls' );
function enqueue_scripts_cdn_urls() {

	wp_enqueue_script('localScroll', '//cdnjs.cloudflare.com/ajax/libs/jquery-localScroll/1.4.0/jquery.localScroll.min.js');
	wp_enqueue_script('scrollTo', '//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js');

}

Enqueue Multiple Scripts from local files

//* Enqueue Multiple Scripts from local files
add_action( 'wp_enqueue_scripts', 'enqueue_scripts_local' );
function enqueue_scripts_local() {

	wp_enqueue_script( 'localScroll', get_stylesheet_directory_uri() . '/js/jquery.localScroll.min.js', array( 'localScroll' ), '1.4.0', true );
	wp_enqueue_script( 'scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.min.js', array( 'scrollTo' ), '2.1.2', true );
	
}

 

Genesis Framework: List of Theme and Location Constants

Source
Filename: genesis/lib/init.php

Lines: 179 to 251 of 384

add_action( 'genesis_init', 'genesis_constants' );
/**
 * This function defines the Genesis theme constants
 *
 * @since 1.6.0
 */
function genesis_constants() {

	// Define Theme Info Constants.
	// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedConstantFound
	define( 'PARENT_THEME_NAME', 'Genesis' );
	define( 'PARENT_THEME_VERSION', '2.6.1' );
	define( 'PARENT_THEME_BRANCH', '2.6' );
	define( 'PARENT_DB_VERSION', '2603' );
	define( 'PARENT_THEME_RELEASE_DATE', date_i18n( 'F j, Y', '1520985600' ) );

	// Define Parent and Child Directory Location and URL Constants.
	define( 'PARENT_DIR', get_template_directory() );
	define( 'CHILD_DIR', get_stylesheet_directory() );
	define( 'PARENT_URL', get_template_directory_uri() );
	define( 'CHILD_URL', get_stylesheet_directory_uri() );
	// phpcs:enable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedConstantFound

	// Define URL Location Constants.
	$lib_url = PARENT_URL . '/lib';
	if ( ! defined( 'GENESIS_IMAGES_URL' ) ) {
		define( 'GENESIS_IMAGES_URL', PARENT_URL . '/images' );
	}
	if ( ! defined( 'GENESIS_ADMIN_IMAGES_URL' ) ) {
		define( 'GENESIS_ADMIN_IMAGES_URL', $lib_url . '/admin/images' );
	}
	if ( ! defined( 'GENESIS_JS_URL' ) ) {
		define( 'GENESIS_JS_URL', $lib_url . '/js' );
	}
	if ( ! defined( 'GENESIS_CSS_URL' ) ) {
		define( 'GENESIS_CSS_URL', $lib_url . '/css' );
	}

	// Define directory locations constants.
	define( 'GENESIS_VIEWS_DIR', PARENT_DIR . '/lib/views' );
	define( 'GENESIS_CONFIG_DIR', PARENT_DIR . '/config' );

	// Define Settings Field Constants (for DB storage).
	define( 'GENESIS_SETTINGS_FIELD', (string) apply_filters( 'genesis_settings_field', 'genesis-settings' ) );
	define( 'GENESIS_SEO_SETTINGS_FIELD', (string) apply_filters( 'genesis_seo_settings_field', 'genesis-seo-settings' ) );
	define( 'GENESIS_CPT_ARCHIVE_SETTINGS_FIELD_PREFIX', (string) apply_filters( 'genesis_cpt_archive_settings_field_prefix', 'genesis-cpt-archive-settings-' ) );

	// Unused in Genesis, considered deprecated.
	if ( apply_filters( 'genesis_load_deprecated', true ) ) {
		// Directory Constants.
		$lib_dir = PARENT_DIR . '/lib';
		define( 'GENESIS_IMAGES_DIR', PARENT_DIR . '/images' );
		define( 'GENESIS_ADMIN_IMAGES_DIR', $lib_dir . '/admin/images' );
		define( 'GENESIS_TOOLS_DIR', $lib_dir . '/tools' );
		define( 'GENESIS_LIB_DIR', $lib_dir );
		define( 'GENESIS_ADMIN_DIR', $lib_dir . '/admin' );
		define( 'GENESIS_JS_DIR', $lib_dir . '/js' );
		define( 'GENESIS_CSS_DIR', $lib_dir . '/css' );
		define( 'GENESIS_FUNCTIONS_DIR', $lib_dir . '/functions' );
		define( 'GENESIS_SHORTCODES_DIR', $lib_dir . '/shortcodes' );
		define( 'GENESIS_STRUCTURE_DIR', $lib_dir . '/structure' );
		define( 'GENESIS_WIDGETS_DIR', $lib_dir . '/widgets' );

		// URL Constants.
		define( 'GENESIS_ADMIN_URL', $lib_url . '/admin' );
		define( 'GENESIS_LIB_URL', $lib_url );
		define( 'GENESIS_FUNCTIONS_URL', $lib_url . '/functions' );
		define( 'GENESIS_SHORTCODES_URL', $lib_url . '/shortcodes' );
		define( 'GENESIS_STRUCTURE_URL', $lib_url . '/structure' );
		define( 'GENESIS_WIDGETS_URL', $lib_url . '/widgets' );
	}

}

Reference:-

wp_enqueue_script()

Related Posts

  • Post list design showing featured image when hovered in Genesis
  • Transparent site header and fixed header on scroll in Genesis
  • Custom Navigation Menu Location in Genesis Sample
  • Custom Archive Page Template in Genesis
  • How to Create a Custom Page Template in Genesis

Categories: Free Content, Genesis Tutorials, WordPress Tutorials Tags: custom, jquery, 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