TinyMCE Advanced Custom Formats / Styles / Shortcode Buttons

editor-style.css

/* step 1: load this in editor-style.css in the theme folder */
/* step 2: activate function "Create CSS classes menu" in tinymce advanced */
/* this gets shown automatically in the formats dropdown */
.MY-CUSTOM-CLASS {
  background-color:red; 
}

functions.php

<?php
function tinymce_add_mce_button() {
	// check user permissions
	if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
		return;
	}
	// check if editor is enabled
	if ( 'true' == get_user_option( 'rich_editing' ) ) {
		add_filter( 'mce_external_plugins', 'tinymce_add_tinymce_plugin' );
		add_filter( 'mce_buttons', 'tinymce_register_mce_button' );
	}
}
function tinymce_add_tinymce_plugin( $plugin_array ) {
	$plugin_array['mce_buttons'] = get_stylesheet_directory_uri() .'/mce-button.js';
	return $plugin_array;
}
function tinymce_register_mce_button( $buttons ) {
	array_push( $buttons, 'mce_button_1' );
	array_push( $buttons, 'mce_button_2' );
	return $buttons;
}
add_action('admin_head', 'tinymce_add_mce_button');

mce-button.js

(function() {

	tinymce.PluginManager.add('mce_buttons', function( editor, url ) {

		// single button
		editor.addButton('mce_button_1', {
			text: 'Button #1',
			icon: false,
			onclick: function() {
				editor.insertContent('<br/><p>[TIPP]</p><p>Ihr Inhalt hier</p><p>[_TIPP]</p><br/>');
			}
		});
		
		// dropdown and buttons
		editor.addButton( 'mce_button_2', {
			text: 'Dropdown',
			icon: false,
			type: 'menubutton',
			menu: [
				{
					text: 'Button #1',
					menu: [
						{
							text: 'Button #1.1',
							onclick: function() {
								editor.insertContent('...');
							}
						},
						{
							text: 'Button #1.2',
							onclick: function() {
								editor.insertContent('...');
							}
						}
					]
				},
				{
					text: 'Button #2',
					menu: [
						{
							text: 'Button #2.1',
							onclick: function() {
								editor.insertContent('...');
							}
						},
						{
							text: 'Button #2.2',
							onclick: function() {
								editor.insertContent('...');
							}
						}
					]
				}
			]
		});
	});

})();