WordPress has a nice editor, with which are several hundreds of articles written daily.
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.
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.
Guest Post
This post is written by Dominik Schilling - wpgrafie.de and is a post in our Advent Calendar on WP Engineer about WordPress. Dominik is Student, Web Developer, WordPress Contributing Developer - ocean90 and he ♥ WordPress.
Thank you very much from my part to Dominik.
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!
© WP Engineer Team, All rights reserved (Digital Fingerprint: WPEngineer-be0254ce2b4972feb4b9cb72034a092d)
Comment Length Limiter
If you have used Twitter, then you know that you are only allowed to type 140 characters in a single Tweet. There is a nice little number below the text field indicating how much is left to write.
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:
https://gist.github.com/1422754
The first three
var
s 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. Thesubmit_button
is optional. Set thevar
tonull
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.
Guest Post
This post is written by Eric Teubert - www.satoripress.com and is a post in our Advent Calendar on WP Engineer about WordPress.
Thank you very much from my part to Eric.
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!
© WP Engineer Team, All rights reserved (Digital Fingerprint: WPEngineer-be0254ce2b4972feb4b9cb72034a092d)