Skip to content

Instantly share code, notes, and snippets.

@Alipio123

Alipio123/additionaljs_theme.php

Created April 12, 2020 08:01
Show Gist options
  • Save Alipio123/856b546b86c513d4c445f064dfd5346b to your computer and use it in GitHub Desktop.
Save Alipio123/856b546b86c513d4c445f064dfd5346b to your computer and use it in GitHub Desktop.
Download ZIP
Add Additional Javascript on any Theme. Located under Theme Customization
Raw
additionaljs_theme.php
<?php
// File Security Check
if ( ! defined( 'ABSPATH' ) ) { exit; }
add_action( 'customize_register' , array( 'AdditionalJS_Customize' , 'register' ) );
//echoing the scripts.
add_action( 'wp_head' , array( 'AdditionalJS_Customize' , 'header_output' ) );
add_action( 'wp_body_open' , array( 'AdditionalJS_Customize' , 'bodyopen_output' ) );
add_action( 'wp_footer' , array( 'AdditionalJS_Customize' , 'footer_output' ) );
class AdditionalJS_Customize {
public static function register ( $wp_customize ) {
//Adding New Setting Section in Theme Customizer Name: Additional Javascript
$wp_customize->add_section( 'theme_javascript',
array(
'title' => __( 'Additional Javascript', 'hellobabychild' ),
'priority' => 9999,
'description' => __('Allows you to add additional Javascript in the Theme. Please include &lt;script&gt;&lt;/script&gt;`', 'hellobabychild'),
)
);
//Additional Javascript List of settings
//JS inside head, before closing of body tag and below body tag
$wp_customize->add_setting( 'js_head',
array(
'default' => '',
)
);
$wp_customize->add_setting( 'js_bodyopen',
array(
'default' => '',
)
);
$wp_customize->add_setting( 'js_footer',
array(
'default' => '',
)
);
//creating controls for Additional Javascript
$wp_customize->add_control( new WP_Customize_Code_Editor_Control( $wp_customize, 'theme_js_head',
array(
'label' => __( 'Javascript inside <head> tag', 'hellobabychild' ),
'description' => __( 'You can place your Google Analytic code here.', 'hellobabychild' ),
'settings' => 'js_head',
'section' => 'theme_javascript',
)
));
$wp_customize->add_control( new WP_Customize_Code_Editor_Control( $wp_customize, 'theme_js_bodyopen',
array(
'label' => __( 'Javascript after the opening <body> tag', 'hellobabychild' ),
'description' => __( 'You can place your facebook pixel code here.', 'hellobabychild' ),
'settings' => 'js_bodyopen',
'section' => 'theme_javascript',
)
));
$wp_customize->add_control( new WP_Customize_Code_Editor_Control( $wp_customize, 'theme_js_footer',
array(
'label' => __( 'Javascript before the closing </body> tag', 'hellobabychild' ),
'description' => __( 'You can place your custom javascript code here.', 'hellobabychild' ),
'settings' => 'js_footer',
'section' => 'theme_javascript',
)
));
}
public static function header_output() {
$headjs = get_theme_mod( 'js_head' );
if( ''===$headjs ) {
return;
}
echo $headjs;
}
public static function bodyopen_output() {
$after_body_js = get_theme_mod( 'js_bodyopen' );
if( ''=== $after_body_js ) {
return;
}
echo $after_body_js;
}
public static function footer_output() {
$footerjs = get_theme_mod( 'js_footer' );
if( ''=== $footerjs ) {
return;
}
echo $footerjs;
}
}
@Alipio123
Copy link
Author

This Code allows you to add Additional Javascript under theme customization.
It has 3 options. Javascript inside head tag, after the body opening, before closing body tag.

I prefer using this one rather than installing a plugin.

This code was base on Wordpress API. You can place this code under functions.php

@seothemes
Copy link

seothemes commented Jul 1, 2020 •
edited
Loading

Cool, here's how I would write that class:

/**
 * Class Additional_JS_Customizr_Settings
 */
class Additional_JS_Customizer_Settings {

	/**
	 * @var string
	 */
	private $section_id;

	/**
	 * @var array
	 */
	private $fields;

	/**
	 * Additional_JS_Customizer_Settings constructor.
	 */
	public function __construct() {
		$this->section_id = 'additional_js';

		$this->fields = [
			'js_head'      => [
				'location'    => 'wp_head',
				'label'       => __( 'Javascript inside <head> tag', 'textdomain' ),
				'description' => __( 'You can place your Google Analytic code here.', 'textdomain' ),
			],
			'js_body_open' => [
				'location'    => 'wp_body_open',
				'label'       => __( 'Javascript after the opening <body> tag', 'textdomain' ),
				'description' => __( 'You can place your facebook pixel code here.', 'textdomain' ),
			],
			'js_footer'    => [
				'location'    => 'wp_footer',
				'label'       => __( 'Javascript before the closing </body> tag', 'textdomain' ),
				'description' => __( 'You can place your custom javascript code here.', 'textdomain' ),
			],
		];
	}

	/**
	 * Description of expected behavior.
	 *
	 * @since 1.0.0
	 *
	 * @return void
	 */
	public function add_hooks() {
		add_action( 'customize_register', [ $this, 'add_section' ] );
		add_action( 'customize_register', [ $this, 'add_fields' ] );
		add_action( 'wp_head', [ $this, 'output_js' ] );
		add_action( 'wp_body_open', [ $this, 'output_js' ] );
		add_action( 'wp_footer', [ $this, 'output_js' ] );
	}

	/**
	 * Register Additional JS section with WordPress Customizer.
	 *
	 * @since 1.0.0
	 *
	 * @param WP_Customize_Manager $wp_customize The WP_Customize_Manager object.
	 *
	 * @return void
	 */
	public function add_section( $wp_customize ) {
		$wp_customize->add_section(
			$this->section_id,
			[
				'title'       => __( 'Additional Javascript', 'textdomain' ),
				'description' => __( 'Allows you to add additional Javascript in the Theme.', 'textdomain' ),
				'priority'    => 9999,
			]
		);
	}

	/**
	 * Register our Additional JS settings with WordPress Customizer.
	 *
	 * @since 1.0.0
	 *
	 * @param WP_Customize_Manager $wp_customize The WP_Customize_Manager object.
	 *
	 * @return void
	 */
	public function add_fields( $wp_customize ) {
		foreach ( $this->fields as $id => $field ) {
			$wp_customize->add_setting( $id );
			$wp_customize->add_control(
				new WP_Customize_Code_Editor_Control(
					$wp_customize,
					$id,
					[
						'label'       => $field['label'],
						'description' => $field['description'],
						'settings'    => $id,
						'section'     => $this->section_id,
					]
				)
			);
		}
	}

	/**
	 * Outputs Additional JS to wp_head, wp_body_open and wp_footer.
	 *
	 * @since 1.0.0
	 *
	 * @return void
	 */
	public function output_js() {
		$location = current_filter();
		$field    = str_replace( 'wp', 'js', $location );
		$js       = get_theme_mod( $field );

		if ( $js ) {
			printf( '<script>%s</script>', $js );
		}
	}
}

And then add this somewhere in the theme to run it:

$additional_js = new Additional_JS_Customizer_Settings();
$additional_js->add_hooks();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment