skip to Main Content

Add custom JavaScript to the WordPress Header with functions.php

To add a tiny simple JavaScript, for instance  a test for some jQuery functionality, to your wordpress head int he frontend simply add this to your themes functinos.php.

function my_header_script(){
 ?>

 <script>alert( 'This is a header test' ); </script>

 <?php
}

add_action( 'wp_head', 'my_header_script' );

You can also add something to the footer

function my_footer_script(){
 ?>
 <script>alert( 'This is a footer test' ); </script>
 <?php
}
add_action( 'wp_footer', 'my_footer_script' );

Or via

add_action( 'wp_footer', function() { ?>

	<script>

		( function( $ ) {

			'use strict';

			$( document ).ready( function() {

				// change "open-vc-row-pricing" to be the class used in the module you want to click to open the hidden row
				var $trigger = $( '.open-vc-row-pricing' );

				// change "vc-row-pricing" to be the class used in the hidden row
				var $hiddenRow = $( '.vc-row-pricing' );

				if ( $hiddenRow.length ) {
					$trigger.click( function() {
						$hiddenRow.toggle();
						return false;
					} );
				}

			} );

		} ( jQuery ) );

	</script>

<?php }, 99 );

Read more:

  • https://calderaforms.com/2016/11/how-to-load-custom-javascript-in-wordpress/
  • https://wpexplorer-themes.com/total/snippets/showhide-row-click/

Back To Top