Use <Tab> to Indent in WordPress HTML Editor

I think it also depends on the code highlighter you use. Anyway, I don’t like it, when I write the code in a post and after the pressing tab button, textarea lose its focus.

tab indent in WordPress HTML editor

There are two simple steps which allows you to add this feature into your WordPress HTML editor in admin panel.

Step 1. jQuery

First of all let’s create a javascript file and place it for example directly into your current theme directory.

jQuery(function($) {
	$('textarea#content, textarea#wp_mce_fullscreen').keydown(function(e){
		// #content - HTML editor id attribute
		// #wp_mce_fullscreen - fullscreen HTML editor id
		if( e.keyCode != 9 )
			return;
		e.preventDefault();
		var   
		textarea = $(this)[0],
		start = textarea.selectionStart,
		before = textarea.value.substring(0, start),
		after = textarea.value.substring(start, textarea.value.length);
		textarea.value = before + "\t" + after;  
		textarea.setSelectionRange(start+1,start+1);  
	});
});

My javascript code is simple and lightweight, it only revise the tab button action in given textareas. Works (tested) on Google Chrome, Safari, Mozilla Firefox, Opera, IE9.

Step 2. Enqueueing the script

In this step we should include our javascript file to WordPress admin pages. «admin.tabintextarea» is the name of my file.

function mr_tab_to_indent_in_textarea() {
	wp_enqueue_script('tab-to-indent', get_stylesheet_directory_uri() . '/admin.tabintextarea.js', array('jquery'), null, true);
}
 
add_action('admin_print_scripts-post-new.php', 'mr_tab_to_indent_in_textarea');
add_action('admin_print_scripts-post.php', 'mr_tab_to_indent_in_textarea');

Look at the admin_print_scripts-post-new.php and admin_print_scripts-post.php action hooks. These hooks allows you to enqueue the javascript file only on «add post» and «edit post» pages.

That’s all.

…or skip the steps and add the following code to the functions.php

You can also skip the previous steps and use the code below. Just add it to your current theme functions.php file:

if( !function_exists('mr_tab_to_indent_in_textarea') ){
	function mr_tab_to_indent_in_textarea() {
		$tabindent = '<script>
		jQuery(function($) {
			$("textarea#content, textarea#wp_mce_fullscreen").keydown(function(e){  
				if( e.keyCode != 9 ) return;
				e.preventDefault();
				var textarea = $(this)[0], start = textarea.selectionStart, before = textarea.value.substring(0, start), after = textarea.value.substring(start, textarea.value.length);
				textarea.value = before + "\t" + after; textarea.setSelectionRange(start+1,start+1);  
			});
		});</script>';
		echo $tabindent;
	}
 
	add_action('admin_footer-post-new.php', 'mr_tab_to_indent_in_textarea');
	add_action('admin_footer-post.php', 'mr_tab_to_indent_in_textarea');
}

# WordPress, wp-admin

Misha Rudrastyh

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on Twitter