Reply To: jQuery wpv-filter-form select

You can see what is loaded via Firebug for Firefox or Chrome Dev. Tools. See "Net" tab in Firebug or "Network" in Chrome. Even IE can show this. Also where JS errors will show up – "console" tab.

Hmm to the JS pane underneath. I think idea is to add jQuery snippets and not load full files – but I am not sure. What is important is main jQuery file from your script is loaded BEFORE you initialize with a few lines of code. If not you might get JS error and nothing will work.

Same with the jquery.document.ready vs. even more ready. Both methods do not work for everything. For example even more ready loaded in head will not be cool as what it is supposed to work on is not ready yet. I just use the even more ready because it kicks in a little bit sooner and so minimize the time between native select box and the one from script.

Below is what I use on a test site. Before this Selectitbox JS and CSS is loaded already. I actually put this code in to a custom field which is then added to page. Kind of a custom JS and custom custom CSS box. This means I can force it load late, later than any jQuery script from plugins – and so never get problem.

<script>
// This is the fast way, to load asap but still in footer - a little diffence to jQuery(document).ready(function ($) {xxxx });
// Whatever works is ok.
(function($) {

	$(".wpv-filter-form select").selectBoxIt(); ({
                downArrowIcon: "icon-hand-down",
                showEffect: "fadeIn",
                showEffectSpeed: 400,
                hideEffect: "fadeOut",
                hideEffectSpeed: 400
        });

// Change upon selection, no submit button needed
	$(".wpv-filter-form select").change(function() {
		this.form.submit();
	});

// Adds an "X" to delete input, more fancy than useful
        $('a#reset').click(function() {
        $('input#wpv_control_textfield_wpv_post_search').val(''); 
        });

// Pageslide script
        $(".second").pageslide({ direction: "left", modal: true });
})(jQuery);

// Disable Twitter Bootstrap tooltips and MUST be in document.ready or it get in too early = wont work.
jQuery(document).ready(function ($) {
        $("a[target='_blank']").tooltip('disable');
});
</script>

There are plugins for this per page/post load. I think even one where you can enque files correctly. Is easy once you get it.

However if you want to 100% correct according to WordPress you should load files like this:

add_action( 'wp_enqueue_scripts', 'links_load' );
function links_load() {
	if ( is_page( 'links' ) ) {
		wp_enqueue_style ( 'selectboxit-CSS', get_stylesheet_directory_uri() . '/assets/scripts/jquery.selectBoxIt/stylesheets/jquery.selectBoxIt.css', array(), NULL );
		wp_enqueue_script ( 'selectboxit-JS', get_stylesheet_directory_uri() . '/assets/scripts/jquery.selectBoxIt/javascripts/jquery.selectBoxIt.min.js', array( 'jquery-ui-widget' ), NULL, TRUE );
		wp_enqueue_script ( 'pageslide', get_stylesheet_directory_uri() . '/assets/scripts/jquery-pageslide/jquery.pageslide.min.js', array(), NULL, TRUE );
	}
}

Code can go in to a plugin or in themes functions.php file. The is_page line see to files are only loaded on that ONE page where they are needed, here a page with slug "links". See conditional tags, https://codex.wordpress.org/Conditional_Tags is a big deal with WordPress.

I could also just have loaded files directly from my custom JS/CSS boxes. In fact I do that with other things.

Since you use T&V may be you should get these boxes?

Well, 2 fields with "Multiple lines field". They are 1 group. Set them to show up for posts/pages or what you have need for.

I call mine for "JS for Footer" and "JS-CSS for Head" but names dont matter.

How to output is the question. I do it like this

// 9999 means code from fields will be loaded very late, after anything else.

add_action( 'wp_head', 'wp_head_custom_field', 9999 );
function wp_head_custom_field() {
	if ( is_singular() ) {
		$post_id = get_the_ID();
		$jscss = get_post_meta( $post_id, 'wpcf-js-css-head', TRUE );
		if( !empty( $jscss ) ) {
			echo $jscss;
		}
	}
}

add_action( 'wp_footer', 'wp_footer_custom_field', 9999 );
function wp_footer_custom_field() {
	if ( is_singular() ) {
		$post_id = get_the_ID();
		$js = get_post_meta( $post_id, 'wpcf-js-footer', TRUE );
		if ( !empty( $js ) ) {
			echo $js;
		}	
	}
}

If you add/fill out required plugin headers for this little project, check this http://codex.wordpress.org/File_Header ,you have a plugin and can use it

/*
Plugin Name: Something from T&V forum
Plugin URI: http://xxxx.xxx
Description: Misc... 
Version: 1.0
Author: T&V
Author URI: http://xxxx.xxx
*/ 

Insert code below this header, save as something_name.php in a folder under /wp-content/plugins and you are done.

You are likely to screw up though You dont use a code editor with syntax highlighting I bet? Guarantee of tears but not so difficult really. Just get on top of things regarding load – is crucial info to have. Many plugins and themes mess up big time, causing conflicts, slow performance. Also if you like to race around for jQuery scripts to add that dev. might not have a clue about WordPress so you will copy and paste away. Not always smart as WordPress already loads and handles much jQuery stuff. Focus on files, details

Notice "array( 'jquery-ui-widget' )" in the code I use for selectboxit. WordPress already comes with that jQuery UI module so I can tell it to load – and done. However Selectboxit dev. have no clue of this and will suggest I load file directly. Now I have told WordPress to always load jquery-ui-widget before selectboxit, is a dependency. jquery-ui-widget is a handle/nickname for a file already registered. WordPress know where it is located. Need to move slowly when copy/pasting