This example should explain it.

// on admin area enqueue the scripts
add_action( 'admin_enqueue_scripts', 'fb_admin_enqueue_scripts' );
function fb_admin_enqueue_scripts( $where ) {
	// separation in dev and live
	$suffix = defined('SCRIPT_DEBUG') && SCRIPT_DEBUG ? '.dev' : '';

	// enqueue of script, identifikation on the string-ID
	wp_enqueue_script(
		'example_script_id',
		plugins_url( '/js/my-example-script' . $suffix. '.js', __FILE__ ),
		array( 'jquery' ),
		'',
		TRUE
	);

	// data via Array
	// array with data; also possible via get_option( 'my_option_string' )
	$data = array(
		'some_string' => __( 'Some string to translate' ),
		'a_value' => '10'
	);
	// localize the data, identifier via script-ID and create object for JS
	wp_localize_script( 'example_script_id', 'js_object_name', $data );
}

With this little example everything is done on the PHP-side; the content of the array are known now as object js_object_name and can be use via the name-string js_object_name in JS.

Now some hints, which should help, if it comes to problems or which link to solutions via JSON directly.
The function wp_localize_script() decodes HTML Entities, which is kind of important, but not always the perfect solution. The function uses json_encode(), which can let to problems in multi-dimensional arrays in connection with the decoding of entities. As soon as the array has more than one dimension, I recommend JSON without the WP Core solution via wp_localize_script().

With WordPress 3.4 it will get better and the function will be more useful - let's see. I currently use on multiple dimensions rather JSON directly. The solution from the core would be nice, I like the handling and it would be clearly and comprehensively utilizable.

A similar problem arises when the source of the scripts is not just written in the footer area of WordPress, but outsourced to a file and via wp_enqueue_script() included. Only then WordPress can manage, compromises and optimizes these scripts for delivery. Therefore I would like to show two examples, how to pass data from PHP to JS.

The first snippet uses the pass of values ​​via JSON to get the values ​​from the database with the current resources in PHP and the script stores directly in the header of the page the values ​​as an object.

add_action( 'admin_enqueue_scripts', 'fb_print_scripts' );

function fb_print_scripts() {
	global $current_screen;

	if ( isset( $current_screen -> id ) && ! in_array( $current_screen -> id, array( 'post', 'page' ) ) )
		return;

	if ( is_plugin_active_for_network( plugin_basename( __FILE__ ) ) )
		$options = get_site_option( 'my_options_id' );
	else
		$options = get_option( 'my_options_id' );

	if ( ! $options )
		return;
	?>
	<script type="text/javascript">
		var my_json_object = <?php echo json_encode( $options ); ?>;
	</script>
	<?php
}

The above function gives the values ​​from the database as a JSON object in the head of the backend, as the page was requested in the first step of the function. Via $current_screen it will be checked so it will be only delivered if you are on one of the defined pages (post, page).

The next step is common practice and best solution to include scripts in WordPress. Thereby I will include the JS file, which then has accesses to the JSON object.

add_action( 'admin_enqueue_scripts', 'fb_admin_enqueue_scripts' );

function fb_admin_enqueue_scripts( $where ) {

	if ( ! in_array( $where, array( 'post.php', 'post-new.php', ) )
		return;

	$suffix = defined('SCRIPT_DEBUG') && SCRIPT_DEBUG ? '.dev' : '';

	wp_enqueue_script(
		self :: get_textdomain() . '_script',
		plugins_url( '/js/my_script' . $suffix. '.js', __FILE__ ),
		array( 'jquery', 'my_other_script' ),
		'',
		TRUE
	);

}

The script accesses directly the object that is processed.

jQuery( document ).ready( function( $ ) {

	if ( typeof my_json_object == 'undefined' )
		return;

// debug in console of Browser
console.dir( my_json_object ); 

});

Another solution will be presented in the following post at this series.

It would be nice to have this feature for WordPress comments too. Or any text field, for that matter. It can be done with the following piece of JavaScript:

jQuery(function($) {
	// configure
	var comment_input = $( '#commentform textarea' );
	var submit_button = $( '#commentform .form-submit' );
	var comment_limit_chars = 1000;
	// stop editing here

	// display how many characters are left
	$( '<div class="comment_limit_info"><span>' + comment_limit_chars + '</span> characters left</div>' ).insertAfter( comment_input );

	comment_input.bind( 'keyup', function() {
		// calculate characters left
		var comment_length = $(this).val().length;
		var chars_left = comment_limit_chars - comment_length;

		// display characters left
		$( '.comment_limit_info span' ).html( chars_left );

		// hide submit button if too many chars were used
		if (submit_button)
			( chars_left < 0 ) ? submit_button.hide() : submit_button.show();
	});
});

https://gist.github.com/1422754

The first three vars below the // configure comment can be edited.
comment_input is the DOM element of the text field.
submit_button is the DOM element for the button to submit the form.
Finally, comment_limit_chars is the amount of characters allowed.

This snippet automatically inserts a div tag below the text field and updates the character count when the user types. The submit_button is optional. Set the var to null if you don't want it to be grayed out.

Please keep in mind that this only validates the input on the client side. If you have to rely on the maximum text length, like Twitter does, you need to check the length on the back end side with PHP too.

But in my opinion the editor has an usability issue.
Every time you save a post the scroll position of the editor will be on top again. If you want to continue writing the post you have first to find he old position again. This can be time-consuming.

Save editor scroll position on saving

To avoid this behavior I have written a snippet which I want to share now with you.

<?php
/**
 * The class will help you to recover the old scoll position in your Editor.
 * Either HTML or visuel editor.
 */
final class Preserve_Editor_Scroll_Position {
	/**
	 * Init
	 */
	public static function init() {
		add_filter( 'redirect_post_location', array( __CLASS__, 'add_query_arg' ) );
		add_action( 'edit_form_advanced', array( __CLASS__, 'add_input_field' ) );
		add_action( 'edit_page_form', array( __CLASS__, 'add_input_field' ) );
		add_filter( 'tiny_mce_before_init', array( __CLASS__, 'extend_tiny_mce' ) );
	}

	/**
	 * Adds a hidden input field for scrolltop value
	 */
	public static function add_input_field() {
		$position = ! empty( $_GET['scrollto'] ) ? $_GET['scrollto'] : 0;

		printf( '<input type="hidden" id="scrollto" name="scrollto" value="%d"/>', esc_attr( $position ) );

		// Print Javascript data
		add_action( 'admin_print_footer_scripts', array( __CLASS__, 'print_js' ), 55 ); // Print after Editor JS.
	}

	/**
	 * Extend TinyMCE config with a setup function
	 */
	public static function extend_tiny_mce( $init ) {
		if ( 'tinymce' == wp_default_editor() )
			$init['setup'] = 'rich_scroll';

		return $init;
	}

	/**
	 * Returns redirect url with query arg for scroll position
	 */
	public static function add_query_arg( $location ) {
		if ( ! empty( $_POST['scrollto'] ) )
			$location = add_query_arg( 'scrollto', (int) $_POST['scrollto'], $location );

		return $location;
	}

	/**
	 * Prints Javascript data
	 */
	public static function print_js() {
		?>
	<script>
	( function( $ ) {
		$( '#post' ).submit( function() {
			scrollto =
				$( '#content' ).is( ':hidden' ) ?
				$( '#content_ifr' ).contents().find( 'body' ).scrollTop() :
				$( '#content' ).scrollTop();

			$( '#scrollto' ).val( scrollto );
		} );

		$( '#content' ).scrollTop( $( '#scrollto' ).val() );
	} )( jQuery );

	function rich_scroll( ed ) {
		ed.onInit.add( function() {
			jQuery( '#content_ifr' ).contents().find( 'body' ).scrollTop( jQuery( '#scrollto' ).val() );
		} );
	};
	</script>
		<?php
	}
}
add_action( 'plugins_loaded', array( 'Preserve_Editor_Scroll_Position', 'init' ) );

If you want you can create your own plugin with this snippet or you can download the plugin Preserve Editor Scroll Position.

function get_language_strings() {
    $strings = array(
        'example' => __( 'My Example String', TEXTDOMAIN_CONSTANT ),
        'foo'   => __( 'My foo string', TEXTDOMAIN_CONSTANT ),
        'bar'   => __( 'My bar', TEXTDOMAIN_CONSTANT )
    )

    return $strings;
}

When you call the extension, Plugin or Theme, the function must be loaded. For this task WordPress provides the function wp_localize_script() that takes care of everything:

wp_localize_script(
                       'my_foo',
                       'my_var_prefix',
                       $this->get_language_strings() // inside class
);

You can access the variables in the scripts:

alert( my_var_prefix.example );

No integration of wp-load.php or something like this, simply access the content. The strings are now translated into all languages using the classical methods and it applies only to create the appropriate files.

Today, let’s look at something, that most professionals never see: empty searches. You offer a search input field, and someone hits the submit button unintentionally, without any term entered. The resulting URI looks like this: example.com/?s=. It shows the same content as your front page. In fact, it is the front page.

No one needs that.

Therefore, I have added a simple rule to my .htaccess:

# Catch empty searches
RewriteCond %{QUERY_STRING} ^s=$
RewriteRule ^ /? [L,R=301]

Add these lines right after the RewriteBase directive.

Next, I wanted to save my visitors the unnecessary request. I have written a simple jQuery plugin:

/**
 * Stop empty searches
 *
 * @author Thomas Scholz http://toscho.de
 * @param  $ jQuery object
 * @return bool|object
 */
(function( $ ) {
   $.fn.preventEmptySubmit = function( options ) {
       var settings = {
           inputselector: "#s",
           msg          : "Don’t waste your time with an empty search!"
       };

       if ( options ) {
           $.extend( settings, options );
       };

       this.submit( function() {
           var s = $( this ).find( settings.inputselector );
           if ( ! s.val() ) {
               alert( settings.msg );
               s.focus();
               return false;
           }
           return true;
       });
       return this;
   };
})( jQuery );

I call it in my footer scripts:

jQuery( "#searchform" ).preventEmptySubmit();

Note that my search form element has an id attribute with the value searchform. Adjust the selector to match your current theme. To change the message, just add an option for it:

jQuery( "#searchform" ).preventEmptySubmit({ msg: "This won’t work!" });

You may use the script for other input elements too. Set the selector in the second option inputselector. Say, you have a form with the id discountcode and a field with the id dcodenumber:

jQuery( "#discountcode" ).preventEmptySubmit(
{
   msg: "No number, no discount, sorry!",
   inputselector: "dcodenumber"
});

Useful? Any hints?

Occasionally you like to have in your blog sidebar drop down menus (select-elements) to navigate the categories and the archive and the WordPress Codex provides the documentation and appropriate solutions for archive in which, however, both with only activated JavaScript function. In both cases, the URL of the destination page is stored in the value-value of the built-in option elements of the drop-down menu and when you select an entry, you will be forwarded via JavaScript on the very URL. The almost same functionality could be achieved also without scripts:

1. Create an old-fashioned GET form with submit button that sends to the base address of the site
2. Put the select in this very form and specify name="cat"
3. Give the option elements the slug of the categories

Submitting the form will result in a call to blog.de/?cat=category and thus the desired category, possibly with a redirect to the search engine friendly version of the URL. This works for the visitors just as good as the solution of the Codex, leaving aside the fact that you have to click on a button. But this is where you can engage with JavaScript to hide the button and sending the form via, by a script inserted, onclick handle . The end result looks like the script for users with Codex solution and all others come then just by clicking on the button to its destination and everyone is happy. So let's get to work!

The basis for the category drop forms creates a normal HTML form:

<form id="kategorienform" action="<?php bloginfo('url'); ?>" method="get">
    <label for="kategorienselect">Jump to Category</label>
    <select id="kategorienselect" name="cat">
        <option value="">-- Please Select</option>
        <?php
            $categories = get_categories('hierarchical=0');
            foreach($categories as $category){
                $selected = (is_category($category->cat_ID)) ? 'selected' : '';
                echo '<option '.$selected.' value="'.$category->cat_ID.'">'.$category->cat_name.' ('.$category->count.')</option>';
            }
        ?>
    </select>
    <input id="kategorienbutton" value="Kategorie abrufen" type="submit">
</form>

You could use this in your side bar and it would work, but we still want to get rid of the submit button and start forwarding directly when selecting a category. For this purpose, it does not take more than 6 lines of JavaScript that can be inserted directly below the form:

<script type="text/javascript">
    document.getElementById('kategorienselect').onchange = function(){
        if(this.value){
            document.getElementById('kategorienform').submit();
        }
    };
    document.getElementById('kategorienbutton').style.display = 'none';
</script>

If the user changes his selection in select element, is (if not the entry "Please select" is selected) submitting the form automatically, without having to activate the with style.display = 'none' made invisible button - done is the most user-friendly and still working without JavaScript category dropdown! This is a bit more code than the three lines from the Codex, but it works guaranteed on every visitor. And the principle is quite simple, provided you plan accordingly in advance. Since this is not happening in WordPress not even happen, we need to tap a little more - or in the case of the archive dropdown even much more:

<form id="archivform" action="<?php bloginfo('url'); ?>" method="get">
    <label for="archivselect">skip to month</label>
    <select id="archivselect" name="m">
        <option value="">-- Please select</option>
        <?php
            $query = "SELECT YEAR(post_date) AS `year`, MONTH(post_date) AS `month`, COUNT(ID) as `posts`
                FROM $wpdb->posts
                WHERE post_type = 'post' AND post_status = 'publish'
                GROUP BY YEAR(post_date), MONTH(post_date)
                ORDER BY post_date DESC";
            $key = md5($query);
            $cache = wp_cache_get('select_archives', 'general');
            if(!isset($cache[$key])){
                $arcresults = $wpdb->get_results($query);
                $cache[$key] = $arcresults;
                wp_cache_set('select_archives', $cache, 'general');
            }
            else{
                $arcresults = $cache[$key];
            }
            if($arcresults){
                global $wp_locale;
                foreach((array) $arcresults as $arcresult){
                    $value = $arcresult->year.$arcresult->month;
                    $text = sprintf(__('%1$s %2$d'), $wp_locale->get_month($arcresult->month), $arcresult->year);
                    $count = ' ('.$arcresult->posts.')';
                    $selected = (is_month() && get_query_var('year').get_query_var('monthnum') == $value) ? 'selected' : '';
                    echo '<option '.$selected.' value="'.$value.'">'.$text.$count.'</option>';
                }
            }
        ?>
    </select>
    <input id="archivbutton" value="Archiv abrufen" type="submit">
</form>

The problem with the Archive, is that without a custom SQL query, you cannot get to the information, which you need for a monthly archive. So there is no other way then to manually enter the database and cache the result manually. The principle is identical: simply output a conventional form and then six small lines of JavaScript:

<script type="text/javascript">
    document.getElementById('archivselect').onchange = function(){
        if(this.value){
            document.getElementById('archivform').submit();
        }
    };
    document.getElementById('archivbutton').style.display = 'none';
</script>

To summarize: many lines of code, but the principle is not complicated. Unobtrusive JavaScript is a question of intelligent planning and if it is not included as with WordPress automatically, you have to do it. With traditional websites, there is no reason to operate completely dependent on JavaScript, and should there be more effort, it is worth the clean separation of the layers and the accessibility bonus.

Guest Post

This post was written by Peter Kröner peterkroener.de.

Peter Kröner is freelance web designer and developer and also author of the HTML5-book.
On peterkroener.de he blogs on all kind of topics in web technology.

Thank you very much from our part to Peter.

If you also like to have your interesting post published on our website, please let us know on our contact page. Of course we will appreciate your contribution!

A first peak shows the site about Jcrop and I'm curious how it will be included in WordPress, currently is no live demo available.

Same for theme and Plugin authors. If you use a function of WordPress to implement JavaScript, you will have less complications and the compatibility between Plugins is much higher.
I will show you an example with Thickbox how to use JavaScript from the core.

There are many possibilities to implement the „Lightbox“ effect on your website. Let's take a close look on a way to use it without a Plugin.
WordPress has Thickbox in their standard installation, so it's not very complicated to use it.

wp_enqueue_script()

Since version 2.1 of WordPress, there is the function wp_enqueue_script() included, which makes the implementation of JavaScript libraries very easy and also checks it. There is no need to use additional JavaScripts, the integration is easy and clean.

wp_enqueue_style()

Additionally pay attention to wp_enqueue_style() . With this function you can integrate CSS files.
Both functions understand many parameters. For the example we need Thickbox, which exists as Plugin for jQuery. That's why you have to load both files, right?

wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'thickbox' );

WordPress manages the dependencies , so it would be enough if you present the extension and WordPress will detect that jQuery is necessary. It's enough to use wp_enqueue_script( 'thickbox' );. Therefor jQuery will be load and be placed into the right spot of the code. The same happens if other calls are needing jQuery. WordPress pays attention and only allows one call of the library or extension to prevent that they get loaded several times.

So we integrate in our example the necessary JavaScript files. Additionally we need a style to get the effect of the Thickbox.
It's enough to include the standard design of WordPress by calling the key Thickbox for the CSS call wp_enqueue_style( 'thickbox' ).

You can adjust the design for your own preferences.
Here a small example to add the close icon into your core.

#TB_window a:link {
	color: transparent !important;
	background: url('http:/examble.com/wp-includes/js/thickbox/tb-close.png') no-repeat;
	padding: 0 4px !important;
}

#TB_window a:hover {
	background: red;
}

If you don't want to look after it, which is only possible in your WordPress backend (otherwise the icons are not available, since they are defined in JS), you can just use the call add_thickbox(). With this everything will be included in Thickbox.

To connect links with this effect, you have to add to the link the class thickbox .
In the most simple case it would look like this:

<a href="http://examble.com/image.png" class="thickbox">
	<img src="http://examble.com/image-thumb.png" alt="Image" />
</a>

Set class automatically

Alternatively you can set the class automatically. The following function in functions.php of the theme does that, but it's not guaranteed that it works in all cases.

/*
 * Thickbox scan, add class for a
 */
function fb_add_thickbox($content){

	$content = preg_replace('/<a(.*?)href="(.*?).(jpg|jpeg|png|gif|bmp|ico)"(.*?)><img/U', '<a$1href="$2.$3" $4 class="thickbox"><img', $content);

	return $content;
}
add_filter('the_content', 'fb_add_thickbox', 2);

Other JavaScripts

WordPress offers the developers a range of other libraries and extensions to use them. The implementation of the displayed example above shows that there are no or just few difficulties and the different libraries don't disturb each other. Also it's not necessary to load some libraries several times, which happens because of some Plugins.

You can find quite a lot of keys in /wp-includes/script-loader.php. It's worth it to check them out. Here is just a selection of keys:

• prototype
• scriptaculous-root
• scriptaculous-builder
• scriptaculous-dragdrop
• scriptaculous-effects
• scriptaculous-slider
• scriptaculous-sound
• scriptaculous-controls
• jquery
• jquery-form
• jquery-color
• interface
• suggest
• schedule
• jquery-hotkeys
• thickbox
• swfupload
• swfupload-degrade
• swfupload-swfobject
• jquery-ui-core
• jquery-ui-tabs
• jquery-ui-sortable
• jquery-ui-draggable
• jquery-ui-resizable
• jquery-ui-dialog
• wp-gears
• farbtastic

If you deliver a key, you can also deliver it in an array, which extension is necessary.

wp_enqueue_script( 'scriptaculous', '', array('scriptaculous-dragdrop', 'scriptaculous-slider', 'scriptaculous-controls'), '1.8.0')

Own scripts

Alternatively you can include your own scripts with the help of the function. Here an example:

wp_enqueue_script( 'my_script',  plugins_url($path = 'my_plugin_folder/js/my_script.js'), array('jquery') );

It is not necessary to use just js-files, you can also work with PHP, if you like to use some variables of PHP

wp_enqueue_script( 'my_script',  plugins_url($path = 'my_plugin_folder/js/my_script.php'), array('jquery') );

Do you assume a specific version of the library, you can also deliver the version.

wp_enqueue_script( 'my_script',  plugins_url($path = 'my_plugin_folder/js/my_script.php'), array('jquery'), '1.2.1.3' );

This post should show you how to avoid complications with other libraries by using Plugins. The usage of this function is not only for Plugins, you can use it in your WordPress theme too.