Killer hacks to enhance WordPress editor

by Jean. 28 Comments -

When you’re a blogger, the editor is indeed something very important because it is the tool used to write your posts. In this article, I’m going to show you some hacks and tips to enhance WordPress editor. Enjoy!

Allow more HTML tags in the editor

By default, WordPress editor don’t allow html tags wich aren’t compliant with the XHTML 1.0 standard. For example, iframes will be stripped out by the editor. If for some reason you have to insert an iframe into a post or page, this can be very frustrating.

The code below will force the editor to accept more tags. Just paste it into your theme functions.php file, save it, and you’re done.

function fb_change_mce_options($initArray) {
	$ext = 'pre[id|name|class|style],iframe[align|longdesc| name|width|height|frameborder|scrolling|marginheight| marginwidth|src]';

	if ( isset( $initArray['extended_valid_elements'] ) ) {
		$initArray['extended_valid_elements'] .= ',' . $ext;
	} else {
		$initArray['extended_valid_elements'] = $ext;
	}

	return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_change_mce_options');

» Source: http://wpengineer.com/1963/customize-wordpress-wysiwyg-editor/

Set HTML editor as the default

I know a lot of tech-savvy persons who don’t really like WordPress “visual” editor. Personally, I don’t use it because I’m used to writing HTML, and also because WYSIWYG editors are more likely to produce bad, not valid or dirty code.

If you prefer using the HTML editor, then what about making it your blog default? Just paste the line below into your theme functions.php file, and you’re done.

add_filter('wp_default_editor', create_function('', 'return "html";'));

» Source: http://www.wprecipes.com/how-to-set-html-editor-as-the-default-in-wordpress

Set default content in WordPress editor

Do you always insert the same text on all your posts, for exemple to tell people to subscribe to your rss feed? If yes, you should definitely set up WP to have it automatically inserted in the editor.

Open your functions.php file, and paste this code. That’s all you need to do to define some default content.

add_filter( 'default_content', 'my_editor_content' );

function my_editor_content( $content ) {
	$content = "If you enjoyed this post, make sure to subscribe to my rss feed.";
	return $content;
}

» Source: http://justintadlock.com/archives/2009/04/05/how-to-preset-text-in-the-wordpress-post-editor

Add your language to spell check

By default, WordPress have an English spellchecker so you can check mistakes in your posts (Too bad it doesn’t work with grammar!). But, what if you blog in another language than English?

If you want to add another language to WordPress spellcheck, that’s actually quite easy to do. Paste the following into functions.php to add French to the spellchecker.

function fb_mce_external_languages($initArray){
	$initArray['spellchecker_languages'] = '+French=fr, English=en';

	return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_mce_external_languages');

» Source: http://wpengineer.com/1963/customize-wordpress-wysiwyg-editor/

Add buttons to WordPress editor

TinyMCE (The name of the WYSIWYG editor used by WordPress) have some buttons that allow you to make some text bold, insert paragraphs, and so on.
Want to insert a custom button? It’s not so hard at all. The following code show how you can do it easily. Just paste it to your functions.php file and a “Youtube” button will be displayed into your editor. Please note that this code add a button to the editor, but do not trigger any action. If you’d like to get more info about custom buttons, have a look at the source site.

function add_youtube_button() {
   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
     return;
   if ( get_user_option('rich_editing') == 'true') {
     add_filter('mce_external_plugins', 'add_youtube_tinymce_plugin');
     add_filter('mce_buttons', 'register_youtube_button');
   }
}

add_action('init', 'add_youtube_button');

function register_youtube_button($buttons) {
   array_push($buttons, "|", "brettsyoutube");
   return $buttons;
}

function add_youtube_tinymce_plugin($plugin_array) {
   $plugin_array['brettsyoutube'] = get_bloginfo('template_url').'/custom/editor_plugin.js';
   return $plugin_array;
}

» Source: http://brettterpstra.com/adding-a-tinymce-button/

Set different editor stylesheets for different post types

Cutom post types are definitely one of the best new things added to WordPress last year. Now, you probably created some post types to display your portfolio or some code snippets. So, what about using a different stylesheet for your editor, depending on the type of the post you’re currently writing?

Just paste the following code into your functions.php file. You’ll have to adapt it a bit, depending on your post types. Don’t forget to change the stylesheets names as well.

function my_editor_style() {
    global $current_screen;
    switch ($current_screen->post_type) {
    case 'post':
        add_editor_style('editor-style-post.css');
        break;
    case 'page':
        add_editor_style('editor-style-page.css');
        break;
    case 'portfolio':
        add_editor_style('editor-style-portfolio.css');
        break;
    }
}
add_action( 'admin_head', 'my_editor_style' );

» Source: http://wpstorm.net/2010/04/editor-styles-custom-post-types-wordpress-3-0/

Display hidden buttons in TinyMCE

By default, the TinyMCE editor have buttons for most common tasks such as bold text, italic, titles, etc. But you may need other text formatting options, like, for example, horizontal rules.

To reveal hidden buttons, simply add this code to your functions.php file:

function enable_more_buttons($buttons) {
  $buttons[] = 'hr';
  $buttons[] = 'fontselect';
  $buttons[] = 'sup'; 
  
  // etc, etc... 
 
  return $buttons;
}
add_filter("mce_buttons", "enable_more_buttons");

The available buttons are: bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, bullist, numlist, outdent, indent, cut, copy, paste, undo, redo, link, unlink, image, cleanup, help, code, hr, removeformat, formatselect, fontselect, fontsizeselect, styleselect, sub, sup, forecolor, backcolor, charmap, visualaid, anchor, newdocument, and separator.
» Source: http://www.sycha.com/wordpress-add-hr-button-tinymce-visual-editor

Comments (28) - Leave yours

  1. Vivek Parmar said:

    that’s a superb post.
    For Editor, disable visual editor only when you know HTML coding otherwise never disable visual editor.
    For HTML editor we can use it after disabling visual editor and i was in search of different stylesheets. thanks for sharing here

  2. Johan said:

    Very nice hacks…
    Was wondering if there were a nice way to add buttons in the HTML editor…

    I also made a plugin that let’s you edit in HTML editor mode in fullscreen: http://wordpress.org/extend/plugins/fullscreen-html-editor

  3. Webby Rob said:

    Great stuff!

    Have been trying to allow more html tags in the editor for ages and have always had to manually edit posts in the DB which gets very annoyijng, very fast :)

  4. Jesper said:

    I am totally new to the WordPress universe. I’m about to put a blog up, but there are many things I need to learn, I can see. So it’s really good with your input, thanks

  5. David said:

    “Set HTML editor as the default” why add a line of code to the functions.php, when you could just do the exact same thing under “settings” in your backend?

  6. Greg Lam said:

    Do you guys know of anyway to make the input/edit box bigger? I find it sometimes too small to work with and I end up copy and pasting the code into a text editor so I can have more room.

  7. janet said:

    @Greg: Go to your Dashboard and click Settings, then Writing. Right at the top of that page you can increase the size of the post box with as many lines as you want.

  8. Jason McArtor said:

    The “Add buttons to WordPress editor” function causes the entire TinyMCE toolbar to disappear. Is there a known fix for this? I’m in WP3.1 and did not apply this in any previous version of WP.
    Thanks.
    Jason

  9. Mike said:

    Anyone know a way to stop WordPress removing and tags without disabling formatting entirely.

    I Tried the TinyMCE advanced plugin which has this a s feature, but it results in other bugs (unexpectedly adds breaks and paragraphs into content).

    Any help would be really appreciated!

  10. David V said:

    Nice post, thanks.
    I never use the visual editor simply because of the bad coding it puts out, and the extra bloat it adds. There’s one problem with disabling it if you use any plugins that hook into it. (such as a shortcode plugin, etc..), they almost all add a button to the visual and not the html. Also the majority of custom premium themes have shortcodes built in and they also add the button to the visual editor, I personally hate this practice, but that’s just me. Do you know the best way to hook into the editor so a button will function/show in both visual and html mode? This would keep both parties (visual/html) happy!
    It’s frustrating to be working on a page and have to switch to visual mode to grab a shortcode.
    Thanks

    • Peter said:

      I have exactly the same problem.
      I have a premium theme installed that created a button in visual mode. I tend to not use visual mode at all. I can find the spot where the button gets created but I currently can’t find the part where the html tab gets created.

      I will look into it further and try to copy the button / js call over to the html tab.

      If someone knows how to do it or even already did it I would appreciate a tip.

      Regards,

      Peter

  11. John said:

    Thanks for non-English spell check solution! Is there any way to install not only spell check, but also grammar and thesaurus module? I found online service like this one http://www.spellchecker.net/spellcheck/ but I still need to copy and paste text.

  12. Mark Spolsky said:

    Thanks for posting how to add another language to WordPress spellcheck. My first language is not English so I use both English and my native language on my blogs. I am going to try the spellchecker with your code and hope it will work fine.

  13. tina said:

    Was feeling totally tortured by issues with my editors trashing pages with the visual editor (all pages use the Google Calender iframe code) until a search found your tip for function.php. Thank you, thank you, thank you – I bow to your supreme kitty wisdom.

  14. Ruthik said:

    How would one assign the editor to a variable to be displayed later?? I use functions and classes for my UI’s. For instance:

    function showEditor(){
    $content = wp_editor();
    return $content;
    }

    (In another file)

    $text = “header here”;
    $text .= showEditor();
    $text .= “footer here”;

    Doing this right now throws the editor to the top of the page above the header. :(

  15. Maurine said:

    Hi is there a way to fix the theme editor or plugin editor. The plugin editor and the theme editor adds some unecessary codes at the bottom when i try to edit

    thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!