Add custom JavaScript to the WordPress Header with functions.php – How to properly enqeue css styles and scripts (inline and file)

To add a tiny simple JavaScript, for instance  a test for some jQuery functionality, to your WordPress head in the frontend simply add this to your themes functinos.php. Be aware that the jQuery included with WordPress runs in NoConflict Mode, meaning that there is no $, but instead jQuery.

Inline CSS in WordPress Backend AND Frontend

// customize admin bar css
function override_admin_bar_css() { 

   if ( is_admin_bar_showing() ) { ?>


      <style type="text/css">
         /* add your style here */
      </style>

   <?php }

}

// on backend area
add_action( 'admin_head', 'override_admin_bar_css' );

// on frontend area
add_action( 'wp_head', 'override_admin_bar_css' );

Load JS in the frontend in the Header

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

Load JS in the frontend in 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 );

If you want to add something to the backend use this:

Add CSS to Backend

// Add inline CSS in the admin head with the style tag
function my_custom_admin_head() {
 echo '<style>[for="wp_welcome_panel-hide"] {display: none !important;}</style>';
}
add_action( 'admin_head', 'my_custom_admin_head' );

Add Inline JS or JQuery go the WordPress backend V1

// Add inline JS in the admin head with the <script> tag

function my_custom_admin_head() {
 echo '<script type=""text/javascript">console.log('admin script')</script>';
}
add_action( 'admin_head', 'my_custom_admin_head' );

Another example that makes it easier to format the code:

Add Inline JS or JQuery go the WordPress backend V2

Read more:

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