Tabindex on text input immediately after WordPress title input

I found last part of @birgire answer the most useful way, however it breaks the possibility to tab to content. In fact I think is normal focus the content by click tab while in the subtitle field.

To do that, you have also to take care if the content is shown in the “Text” tab or in the “Visual” tab (TynyMCE).

I put the code inline , inside your function, but you can use wp_enqueue_script or add it to some javascript file already enqueued in post edit screen.

add_action( 'edit_form_after_title', 'add_input' );

function add_input(){
  global $post;
  $options = get_option( 'kia_subtitle_options' );
  // only show input if the post type was not enabled in options
  if ( isset ( $options['post_types'] ) && in_array( $post->post_type, $options[ 'post_types'] ) ) {
    //create the meta field (don't use a metabox, we have our own styling):
    wp_nonce_field( plugin_basename( __FILE__ ), 'kia_subnonce' );
    //get the subtitle value (if set)
    $sub = get_post_meta( get_the_ID(), 'kia_subtitle', true );
    // echo the inputfield with the value.
    printf(
      '<input type="text" class="widefat" name="subtitle" placeholder="%s" value="%s" id="the_subtitle" tabindex="1"/>',
      __( 'Subtitle', 'kia-subtitle'   ), esc_attr($sub)
     );
  ?>

  <script>
  (function($) { $(document).on( 'keydown', '#title, #the_subtitle', function( e ) {
  var keyCode = e.keyCode || e.which;
  if ( 9 == keyCode){
    e.preventDefault();
    var target = $(this).attr('id') == 'title' ? '#the_subtitle' : 'textarea#content';
    if ( (target === '#the_subtitle') || $('#wp-content-wrap').hasClass('html-active') ) {
      $(target).focus();
    } else {
      tinymce.execCommand('mceFocus',false,'content');
    }
  }
  }); })(jQuery);
  </script>

<?php
} // endif
} // end function

Leave a Comment