Killer hacks to enhance WordPress editor

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