Adds an Additional JS control to the WordPress Customizer

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/

STEP 1

STEP 2

Where to use and Why?

Where am I going to use it?

Related Posts

Reader Interactions