Written by me@grafxflow
13 Apr, 2014
0
2,956
Have you ever wanted to have control over the dropdown menu styles in WordPress's built-in CMS page editor (tinymce) or had a client ask why the font is a different colour than what appears on their website. Well look no further with this handy little bit of code for adding to the themes functions file.
// custom editor styles -- create editor-style.css in your theme directory
add_editor_style();
// add style selector drop down
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}// add styles
add_filter( 'tiny_mce_before_init', 'my_mce_before_init' );
function my_mce_before_init( $settings ) {
$style_formats = array(
array(
'title' => 'Button',
'selector' => 'a',
'classes' => 'button'
),
array(
'title' => 'Callout Box',
'block' => 'div',
'classes' => 'callout',
'wrapper' => true
),
array(
'title' => 'Bold Red Text',
'inline' => 'span',
'styles' => array(
'color' => '#f00',
'fontWeight' => 'bold'
)
)
);
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}
30 Apr, 2017
05 Sep, 2012
03 Sep, 2013
I am a Full-stack Developer who also started delving into the world of UX/UI Design a few years back. I blog and tweet to hopefully share a little bit of knowledge that can help others around the web. Thanks for stopping by!
Follow
11 Jul, 2023
21 Jun, 2023
25 Nov, 2022
20 Sep, 2022
Views: 162,544
Views: 38,780
Views: 34,579
Views: 31,924
