Best practice for including JS (with PHP) in a WordPress function file

Question

I am creating a custom WordPress theme and ask a quick question regarding WordPress and features. Php

I have 500 jQuery lines that run for part of my admin admin panel. The jQuery code is inside my functions.php file, which is called when the admin user menu page is displayed.

Ideally, I would like to move the JavaScript from the functions.php file and use wp_register_script + wp_enqueue_script, but I also have php code mixed with the script. See below:

 //Function that Provides Options within the Menu Page function quz_custom_theme_options(){ global $quz_default_colors, $quz_default_fonts; ?> <style type="text/css">'; <?php include('admin-style.php'); ?> </style>'; <script type="text/javascript"> function asf_toggle_box(element) { if (jQuery(element).next('.expandable').is(':visible') ) { jQuery(element).next('.expandable').fadeOut('slow', function(){ jQuery(element).val('+ Settings'); jQuery(element).next('.expandable').find('.indicator').val(''); }); } else { jQuery(element).next('.expandable').fadeIn('slow', function(){ jQuery(element).val('- Settings'); jQuery(element).next('.expandable').find('.indicator').val('visible'); }); } } 

PHP example inside js

 function quz_reset_colors(t) { var theme_name = jQuery(t).attr('id').substr(6); var color_fields = jQuery(t).parent().find('div.color_admin_area').find('.color-input-wrap > input[type="text"]'); // jQuery(color_fields).css('border', '1px solid red'); // console.log(color_fields); var colors = new Array(); <?php foreach ($quz_default_colors as $key => $value) { echo 'var ary = new Array(\'' . implode('\',\'', $value) . '\');' . "\r\n"; echo 'colors[\'' . $key . '\'] = ary;' . "\r\n"; } ?> jQuery(color_fields).each(function(index, elem){ jQuery(elem).val(colors[theme_name][index]); }); 

What is the best way to handle this? Should I just put all the JS in a separate php file and use include('my_script.php'); How did I do with CSS in the above statement?

I have several ways to make this work, but I want to do it in the BEST way. Thoughts?

Answer 1

I am doing a little trick to do this in my Easy Retweet WordPress Plugin .

 // Enqueue the script add_action('template_redirect', 'add_script'); function add_script() { wp_enqueue_script('retweet', get_option('home') . '/?retweetjs'); } add_action('init', 'deliver_js'); function deliver_js() { if ( array_key_exists('retweetjs', $_GET) ) { header('Content-Type: text/javascript'); print_retweet_js($options); // die after printing js die(); } } function print_retweet_js($options) { include_once('path/to/your/js/script.php'); } 

I hope this is useful to you

Answer 2

 function theme_script() { ?> < script type="text / javascript" > here is your script < /script > <?php wp_enqueue_script( 'theme_script_id', get_bloginfo('template_directory').'/js/theme_script.js', array( 'jquery' ) ); } add_action( 'wp_print_scripts', 'theme_script' );