How to add Custom CSS and JS in Advanced Custom Fields Plugin

One of the plugin that I use most of the time during my Custom WordPress Development is Advanced Custom Fields Plugin. Most recently I got a hand on developer license for Advance Custom Fields Pro too.

The free version of the plugin itself is great and extensible. I hereby share some tips and tricks to add custom css and javascript within the admin panel that add some makeover and functionalities within wordpress admin dashboard.

WordPress actions below are to be added on functions.php of wordpress theme.

Code to add custom css and javascript for version 3.5.8.2 and below

function my_head_input()
{
	?>
	<style type="text/css">

		/* ... */

	</style>

	<script type="text/javascript">
	(function($){

		/* ... */

	})(jQuery);
	</script>
	<?php
}

add_action('acf_head-input', 'my_head_input');

Code to add custom css and javascript for version 4.0.0 and above

function my_acf_admin_head()
{
	?>
	<style type="text/css">

		/* ... */

	</style>

	<script type="text/javascript">
	(function($){

		/* ... */

	})(jQuery);
	</script>
	<?php
}

add_action('acf/input/admin_head', 'my_acf_admin_head');

Source Code references:

https://www.advancedcustomfields.com/resources/acf_head-input/

https://www.advancedcustomfields.com/resources/acfinputadmin_head/