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.

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');
}

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
Hey there thank you a lot for this post, I am starting a theme from scratch and don’t want to use any plugins that gunk up my code. My one question though is how could this function be modified to allow for 4 spaces on tab indent instead of an actual tab spacing?
Hey Mason,
Try to replace
\t
symbol in the code with 4 spaces. That’s all.Do you know the action to get the tab key working in CF7 editor screen?
I think the action is the same, you just have to change the IDs
$('textarea#content, textarea#wp_mce_fullscreen')
to$('#wpcf7-form')
.Thanks for your reply.
The form id is correct, but the script is not included as I checked via web console. The action is not executed when loading the CF7 form editor.
Any other idea?
I found a solution for this: I do not load the two actions to echo the script, but I load my own script (for example admin.js) via the
admin_enqueue_scripts
action and put the code from step 1 into this file and added#wpcf7-form
to the jQuery selector.