Do you want to create your own custom styles dropdown menu? While there’s probably a plugin for this, we have created a quick code snippet that you can use to create custom styles drop down in TinyMCE visual editor.
Instructions:
All you have to do is add this code to your theme’s functions.php file or in a site-specific plugin:
function themeit_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
add_filter( 'mce_buttons_2', 'themeit_mce_buttons_2' );
function themeit_tiny_mce_before_init( $settings ) {
$settings['theme_advanced_blockformats'] = 'p,a,div,span,h1,h2,h3,h4,h5,h6,tr,';
$style_formats = array(
array( 'title' => 'Button', 'inline' => 'span', 'classes' => 'button' ),
array( 'title' => 'Green Button', 'inline' => 'span', 'classes' => 'button button-green' ),
array( 'title' => 'Rounded Button', 'inline' => 'span', 'classes' => 'button button-rounded' ),
array( 'title' => 'Other Options' ),
array( 'title' => '½ Col.', 'block' => 'div', 'classes' => 'one-half' ),
array( 'title' => '½ Col. Last', 'block' => 'div', 'classes' => 'one-half last' ),
array( 'title' => 'Callout Box', 'block' => 'div', 'classes' => 'callout-box' ),
array( 'title' => 'Highlight', 'inline' => 'span', 'classes' => 'highlight' )
);
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}
add_filter( 'tiny_mce_before_init', 'themeit_tiny_mce_before_init' );
Note: If this is your first time adding code snippets in WordPress, then please refer to our guide on how to properly copy / paste code snippets in WordPress, so you don’t accidentally break your site.
If you liked this code snippet, please consider checking out our other articles on the site like: 46 biggest brands in the world using WordPress actively and how to create a custom user registration form in WordPress.
Does not seem to work anymore. I just added this, nothing happened in my MCE. Perhaps a conflict with my theme/page builder? (Madrigal/WPBakery)
Sorry to dig up an ancient post, but is there any way to do this and create 2 separate ‘Format’ drop downs? I’d like one containing P options and one containing colour options if possible.
Thank you SO much for this. I was using another code snippet for the same effect, but after upgrading to WP with the new TinyMCE plugin, that code no longer worked. I tried this, and it sitll works.
Appreciate it.
Perfect glad to hear this TinyMCE snippet was able to help you out!
Thank you SO much for this. I was using another code snippet for the same effect, but after upgrading to WP with the new TinyMCE plugin, that code no longer worked. I tried this, and it sitll works.
Appreciate it.
Thank you SO much for this. I was using another code snippet for the same effect, but after upgrading to WP with the new TinyMCE plugin, that code no longer worked. I tried this, and it sitll works.
Appreciate it.
Thank you SO much for this. I was using another code snippet for the same effect, but after upgrading to WP with the new TinyMCE plugin, that code no longer worked. I tried this, and it sitll works.
Appreciate it.
Thank you SO much for this. I was using another code snippet for the same effect, but after upgrading to WP with the new TinyMCE plugin, that code no longer worked. I tried this, and it sitll works.
Appreciate it.
Thank you SO much for this. I was using another code snippet for the same effect, but after upgrading to WP with the new TinyMCE plugin, that code no longer worked. I tried this, and it sitll works.
Appreciate it.
Great post Kevin, thanks. Is there anyway we can remove the styles in the editor, much the same way the user can click on the remove formatting button?
Thanks Kevin,
This is exactly the solution i was looking for.
Perfect glad to see you like the snippet 🙂
brilliant! THANK YOU!!! this is exactly the solution i was looking for… even with the right styles all ready to go!
@twitter-17003417:disqus Cool glad that you find this wordpress snippet useful. The right styles wow it’s like I can read your mind 😉 cheers enjoy…
Thanks Kevin,
I have found some solution as working with line-breaks with the More Tag (split content).
Its also very easy to add.
Dont wanna drop urls here but this helped me a lot.
http://digwp.com/2010/03/wordpress-post-content-multiple-columns/
Kevin, sorry but i’ve got one last question.
The code is all working correct there is only a little problem with WordPress wrapping each Paragraph into a single Left or Right column.
This is my function, nothing fancy.
function themeit_mce_buttons_2( $buttons ) { array_unshift( $buttons, 'styleselect' ); return $buttons;}add_filter( 'mce_buttons_2', 'themeit_mce_buttons_2' );function themeit_tiny_mce_before_init( $settings ) { $settings['theme_advanced_blockformats'] = 'p,a,div,span,h1,h2,h3,h4,h5,h6,tr,'; $style_formats = array( array( 'title' => 'Add Columns' ), array( 'title' => '← Column', 'block' => 'div', 'classes' => 'content-col-left' ), array( 'title' => 'Column →', 'block' => 'div', 'classes' => 'content-col-right' ) ); $settings['style_formats'] = json_encode( $style_formats ); return $settings;}add_filter( 'tiny_mce_before_init', 'themeit_tiny_mce_before_init' );
And when i start typing a story,
Lets say it’s a story with 3 paragraphs, and when i’m done typing i select all content (3 paragraphs) together and hit the style > Left column button from the TinyCME editor but it wraps each paragraph into a single …
This is very frustrated to see and for some reason i can’t get it to work.
I want my 3 paragraphs to be wrapped into P-tags and all 3 P-tags together need to be wrapped into one div with a class left-column.
Hi B.J. Yes I can see what you mean, that would get frustrating however at the point that things are inserted that would be TinyMCE and not part of my snippet so I don’t think anything can be done. The snippet just adds news settings,
However have you tried to add a line break after it merges the three paragraphs into one? does that fix things. Ill fool around with things and see if I can do something about it for you.
Thank you so much Kevin,
No problem glad that I could help.
Could you make columns with those drop down styles?
Like in the drop down menu:
Add column 1 (this will add this code)
Cursor should be here for typing content in PAfter that pick from the drop down menu Add column 2
For adding a second column of text next to the first one.
I think it’s very difficult to split text into 2 columns at the content entry div if you don’t know how html works.
I would like to know this for a client of mine who can only work with a WYSIWYG editor but would like to have an option to have two columns at the entry div.
Sorry for my Poor English 🙁
Hi B.J. yes you could add a div with the class class=”rgt-column” and another with class=”lft-column” then its just up to you when setting up the CSS to make this work as columns. If you want to have the CSS to create the columns used within the editor you can add this little code and create a new style sheet with the columns code.
function wps_add_editor_style() {
add_editor_style( ‘editor-style-columns.css’ );
}
add_action( ‘after_setup_theme’, ‘wps_add_editor_style’ );This way they can see the content in multiple columns, you may need to fool around with this a bit to get it working the way you would like.