wordpress snippets last updated   : September 29, 2014
we now have 639 snippets

Creating custom styles drop down in TinyMCE

wordpress snippet

Adding this snippet to the functions.php of your wordpress theme will let you create a custom styles drop down menu. Modify the array to create custom html elements and classes that can be inserted into the TinyMCE visual editor. This is a great little snippet that will let your clients add special elements to the TinyMCE editor without knowing a single thing about HTML or even shortcodes.

( example screenshot )
snippet :  PHPcopy
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' );
source →

Did you like this post? If so please share it with your friends. Thanks!

  • B.J.

    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 P

    After 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 :(

    • http://wpsnipp.com Kevin Chard

      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.

  • B.J.

    Thank you so much Kevin,

    • http://wpsnipp.com Kevin Chard

      No problem glad that I could help.

  • B.J.

    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.

    • http://wpsnipp.com Kevin Chard

      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.

  • B.J.

    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/

  • http://twitter.com/keramch Kera McHugh

    brilliant! THANK YOU!!! this is exactly the solution i was looking for… even with the right styles all ready to go!

    • http://wpsnipp.com Kevin Chard

      @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…

  • http://giamsatgps.vn/ dinh vi

    Thanks Kevin,
    This is exactly the solution i was looking for.

    • http://wpsnipp.com Kevin Chard

       Perfect glad to see you like the snippet :)

  • http://twitter.com/ladygeekgeek Charlie Craig

    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?

  • http://www.anythinggraphic.net/ Kevin Donnigan

    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.

  • http://www.anythinggraphic.net/ Kevin Donnigan

    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.

  • http://www.anythinggraphic.net/ Kevin Donnigan

    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.

  • http://www.anythinggraphic.net/ Kevin Donnigan

    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.

  • http://www.anythinggraphic.net/ Kevin Donnigan

    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.

  • http://www.anythinggraphic.net/ Kevin Donnigan

    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.

    • http://wpsnipp.com Kevin Chard

      Perfect glad to hear this TinyMCE snippet was able to help you out!