EasyRead Simplifier Editor

We needed an editor for EasyRead for simplifiers to be able to edit side by side. So decided to use the comment system as the editor. single.php for the post page. In there we modify the css and divs to look like what we need. Assuming only one type of category I had used a temporary hard coded check to check if the post is of category “simplify” if it was then show the editor layout.

[code language=”php”] <?php $categories = get_the_category( $id ); if( $categories[0]->cat_name <> “Simplify” ){ //do something} ?> [/code] Found I could load different templates of comment so now we can load a different template for the comment for simplifying [code language=”php”] if (get_option(‘askit_show_postcomments’) == ‘on’) comments_template(‘/comments-simplify.php’, true); [/code]

Was working on the editor css when I ran into issue of CSS being stubburnly cached. Googled the issue and found a CSS force refreshing by adding a timestamp to the css link to force the browser to think it is a new css file. Change this:

[code language=”html”] <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” /> [/code]

to this

[code language=”html”]

<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); echo ‘?d=’ . filemtime( get_stylesheet_directory() . ‘/style.css’); ?>”  type=”text/css” media=”screen” />


Remember to turn on debug in wp-config it also has a debug log saved in wp-content

First tried the display:inline; method but didn’t work.then used float and it worked! finally.

COMMENT HEIGHT(source) So now we need the input box to be the same length and width as the content. so we need to get word count and use an estimated word perrow to guess the height and width of our editor text box. ob_start method , this is usually not advisable due to some unpredictable behaviour with different browsers. But is the only solution so far.

$content = ob_get_clean();

$numWords =  sizeof(explode(" ", $content)); if you want it as a function just add into the wordpress function.php file

Next is edit the comment box text area height and width. There is 2 ways


but since we want ours to be variable we will have to change the settings in the comment box itself. (source)

global $commentRow ;
$commentHeight = $commentRow*20;
comment_form( array(
‘label_submit’ => esc_attr__( ‘Save’, ‘AskIt’ ),
‘title_reply’ => ‘<span>’ . esc_attr__( ‘The Simplifying Editor’, ‘AskIt’ ) . ‘</span>’, ‘title_reply_to’ => esc_attr__( ‘Leave a Reply to %s’ ),
‘comment_field’ => ‘<p class=”comment-form-comment”><label for=”comment”>’ . _x( ‘The EasyRead Simplifying Editor’, ‘noun’ ) . ‘</label><textarea id=”comment” name=”comment” cols=”45″ rows=”8″ aria-required=”true” style=”width: 450px; height:’.$commentHeight.’px; font-size:100%; font-family: Arial, Verdana, sans-serif; “></textarea></p>’

Added a better category search

$categories = get_the_category( $id );//gets the category of this post
$simplifyArticle = false;
foreach($categories as $category) {
if($category->cat_name == “Simplify”){
$simplifyArticle = true;

At this point the normal text input was working.

Then installed RTE Comments plugin which literally replaces the entire comment output with the internal wordpress editor which is simplified version of the Tinymce . which is called by wp_Editor. Again here had problem with adjusting the height of the editor because it used Iframe to control the height.

Submit a Comment