Web DevelopmentWordPress

How to add custom styles in the WordPress TinyMCE editor without a plugin

By June 22, 2012 2 Comments
How to add custom styles in the Wordpress TinyMCE editor without a plugin

I’m sure you’ve run into this issue so many times if you’ve made themes whose complexity ranges from medium to tearing-your-hair-out-and-wishing-the-designer-has-diarrhea: The admin needs to be able to add a custom style to one of the elements from the WordPress editor. Sounds simple enough, and it is.

But before you go styling away, always keep this to a minimum. Although WordPress and other publishing platforms are used as Content Management Systems, the meaning of that phrase seems to be misunderstood. “Content” management is exactly that: managing content. This means the layout and styles are supposed to be kept separate from the content. But there are cases where this cannot be avoided, and those are exactly the cases for which this post was created.

As always, this is done in three easy steps:

Step 1: Edit your functions.php

If you don’t have a functions.php files in your theme, create one, and add the following code:

// Add a "styleselect" drop down menu to the editor
add_filter( 'mce_buttons_2', 'my_awesome_buttons' );
function my_awesome_buttons( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

// Initialize our buttons
add_filter( 'tiny_mce_before_init', 'init_my_awsome_buttons' );
function init_my_awsome_buttons( $settings ) {

    $style_formats = array(
        array(
        	'title' => 'Super Div',
        	'block' => 'div',
        	'classes' => 'super-div',
        	'wrapper' => true // --- * Notice how this is a wrapper * ---
        ),
    	array(
    		'title' => 'Awesome Button Link',
    		'selector' => 'a', // --- * This means it will only work with A's * ---
    		'classes' => 'awesome-button-link'
    	)
    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;
}

// Add style sheet for the custom styles to the TinyMCE Editor in the Admin
function awesome_tinymce_css( $blah ) {
	$blah .= ',' . get_bloginfo('stylesheet_directory') . '/awesome.css';
	return $blah;
}
// We now tell WordPress to load our style sheet inside its editor!
add_filter( 'mce_css', 'awesome_tinymce_css' );

Step 2: awesome.css

Create an “awesome.css” and put it in your theme’s directory. We will use this files to make our awesome styles appear in the TinyMCE editor.

.super-div {
	border:1px dotted #CCC;
	padding:5px;
}
.awesome-button-link {
	display:inline-block;
	padding:5px;
	background-color:#F90;
	color:#FFF;
}

Step 3: Be awesome

Now add a new Post or Page in your WordPress admin and you can try out your newly created styles like so:

  • Add a Super Div by selecting it from the “Styles” dropdown
  • Type some text and make it a link. Remember, according to our code the Awesome Button Link only works with an ‘A’ tag
  • Once you’ve made a link, select it and apply the “Awesome Button Link” style to it
  • Impress your client!

Here’s an example of how our code works:

2 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.