Add a style selector to the WordPress Post Editor

The toolbar (known as the kitchen sink – don’t ask me why!) is where you can style your post by assigning heading tags, creating lists, aligning text and lots more. You can also assign your own styles by adding classes to text. Add the following function to your theme’s functions.php file and add as many css selectors as you like. I’ve added “Intro” and “Link style” to this example. You need to add the title i.e. Link style and then css class i.e. linkstyle.

You can then find this new dropdown selector in your kitchen sink with the dropdown name of “Styles”. All you then need to do is select the text you wish to style and choose the selector from the dropdown. The text isn’t styled in the editor but will be on your site, assuming you’ve added a style to that class in your theme’s stylesheet.

// Add CSS Class to Edit Screen
add_filter( 'tiny_mce_before_init', 'my_custom_tinymce' );

function my_custom_tinymce( $init ) {
$init['theme_advanced_buttons2_add_before'] = 'styleselect';
$init['theme_advanced_styles'] = 'Intro=intro,Link style=linkstyle';
return $init;
}

Another useful little function to add is this:

// Show Kitchen Sink to all WP Admin users
function unhide_kitchensink( $args ) {
$args['wordpress_adv_hidden'] = false;
return $args;
}
add_filter( 'tiny_mce_before_init', 'unhide_kitchensink' );

This will then show the kitchen sync to add admin users. For some reason the second row in the kitchen sink is not shown by default, which is odd as this is where the most useful selectors are.