Add your own CSS classes to tinyMCE

The Rich Text Editor (RTE) in WordPress use a JavaScript-library called tinyMCE. It is a widely used library and can be configured in a lot of ways.

WordPress let developers filter the settings to tinyMCE so that it fits your needs.

function mytheme_tiny_mce_before_init($arr){
 $arr['theme_advanced_blockformats'] = 'h2,p,blockquote';
 $arr['theme_advanced_styles'] = 'Leading=leading';

 return $arr;
}
add_filter( 'tiny_mce_before_init', 'mytheme_tiny_mce_before_init' );

function mytheme_mce_buttons($arr){
 return array('bold', 'italic', '|', 'bullist', 'numlist', '|', 'formatselect', 'styleselect', '|', 'link', 'unlink' );
}
add_filter( 'mce_buttons', 'mytheme_mce_buttons' );

These few lines of code changes the buttons in the editor, and also adds a format select and a style select.

From the format select you now can select “Heading 2”, “Blockquote” and “Paragraph”. In the style select you can select “Leading” and your element will get the CSS class leading.

Advertisements
About

Web Developer @ Oakwood Creative - www.oakwood.se

Tagged with: , , ,
Posted in Intermediate

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

About

WordPress Quick Tips is a blog supplying great tips about WordPress.

We hope to create a great knowledge resource for WordPress developers as well as serving a reminder for all the forgetful ones.

The blog is created and run by Vincent of Oakwood Creative

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 120 other followers

%d bloggers like this: