• 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

Adds an Additional JS control to the WordPress Customizer

Last Updated on July 19, 2018 Favorited: 1 times

While working with the different tutorials for adding control in the customizer, I found that particles js in Genesis also deserve a place in the customizer.

The idea was to make the particles js customization easy for everyone and for that it was needed to add the settings in customizer for custom jquery code to init the particles-js function.

So, I thought to give a section for additional jquery similar to additional CSS in default WordPress Customizer but having no luck, Posted in GenesisWP slack group and within a hr Lee Anthony came with a perfect snippet with syntax highlighting as an added bonus.

Customizer Section:-

  

Source code:-

Result:-

This tutorial provides the steps to Adds an Additional JS control to the Customizer to output jQuery snippet directly to the site footer in Genesis using the snippet from Lee Anthony@SEOthemes.com

This tutorial will be useful in many cases when you have to init some functions having different customizations.

STEP 1

The first thing we need to do is to register an action using customize_register and create a function to output the custom section, setting, and option mentioned in the article Working with the WordPress Customizer.

Add the following in functions.php

<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.

/**
 * Additional JS Customizer Control
 *
 * @author    Lee Anthony
 * @link      https://seothemes.com
 * @copyright Copyright © 2018 SEO Themes
 * @license   GPL-2.0-or-later
 */
add_action( 'customize_register', 'prefix_customize_register' );
/**
 * Adds an Additional JS setting to the Customizer.
 *
 * @since  1.0.0
 *
 * @param  $wp_customize
 *
 * @return void
 */
function prefix_customize_register( $wp_customize ) {
	$wp_customize->add_section( 'custom_js', array(
		'title'    => __( 'Additional JS', 'textdomain' ),
		'priority' => 190,
	) );
	$wp_customize->add_setting( 'custom_js', array(
		'type' => 'option',
	) );
	$wp_customize->add_control( new WP_Customize_Code_Editor_Control( $wp_customize, 'custom_html', array(
		'label'     => 'Additional JS',
		'code_type' => 'javascript',
		'settings'  => 'custom_js',
		'section'   => 'custom_js',
	) ) );
}

‘OR’

You can also paste the snippet into your file name similar to customize.php in your child theme having an action already registered like this in genesis-sample/lib/customize.php

add_action( 'customize_register', 'genesis_sample_customizer_register' );

before closing } the function registered with ‘customize_register’ action. Paste this.

	$wp_customize->add_section( 'custom_js', array(
		'title'    => __( 'Additional JS', 'textdomain' ),
		'priority' => 190,
	) );
	$wp_customize->add_setting( 'custom_js', array(
		'type' => 'option',
	) );
	$wp_customize->add_control( new WP_Customize_Code_Editor_Control( $wp_customize, 'custom_html', array(
		'label'     => 'Additional JS',
		'code_type' => 'javascript',
		'settings'  => 'custom_js',
		'section'   => 'custom_js',
	) ) );

Use only one option.

STEP 2

Once the section has been registered, we need to output the value on the site. You can choose any location but preferred recommended in the footer.

We will hook the function into wp_footer and output the value having script tag wrapped in a jQuery function based on the condition. Here what we have to put in functions.php

add_action( 'wp_footer', 'prefix_customize_output' );
/**
 * Outputs Additional JS to site footer.
 *
 * @since  1.0.0
 *
 * @return void
 */
function prefix_customize_output() {
	$js = get_option( 'custom_js', '' );
	if ( '' === $js ) {
		return;
	}
	?>
	<script type="text/javascript">
		jQuery(function ($) {
			"use strict";
			<?php echo $js . "\n"; ?>
		});
	</script>
	<?php
}

Or, this

add_action( 'wp_footer', 'prefix_customize_output' );
/**
 * Outputs Additional JS to site footer.
 *
 * @since  1.0.0
 *
 * @return void
 */
function prefix_customize_output() {
	$js = get_option( 'custom_js', '' );
	if ( '' === $js ) {
		return;
	}
	?>
	<script type="text/javascript">
        ( function ( $ ) {
			"use strict";
			<?php echo $js . "\n"; ?>
		} )( jQuery );
	</script>
	<?php
}

Use only one as sometimes one custom js will not work.

We can also target the function to be only executed on a specific page using conditional tags.

We can use something like this for executing functions.php (return early)

if ( ! is_front_page() || '' === $js ) {
   return;
}

Where to use and Why?

This could be useful in various cases. Like

  • When you want to add some jquery script using customizer.
  • When you want to show a script only on a specific page mostly front page.
  • When you have to test some jquery codes quickly.

Where am I going to use it?

I will use this in upcoming tutorials as already mentioned at the beginning of the article.nHere are the tutorials where this snippet made a recognizable presence.

Source:-
https://seothemes.com/creating-a-js-code-editor-control-in-the-customizer/

Related Posts

  • Video Background Section in Monochrome Pro
  • Add js and no-js class to body in Genesis
  • Typing effect using Typed.js in Genesis
  • Infinite Scroll in Genesis
  • Masonry in Genesis

Categories: Free Content, Genesis Tutorials Tags: Customizer, javascript, js

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