How to Add Buttons To Your WordPress Editor (WordPress 3.9 updated)

If you are not WordPress developer you probably haven't heard that it's very easy to add custom buttons to TinyMCE visual editor. Here is the complete solution!

But do you even know what is TinyMCE?

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL.

By default you can see only one bar of buttons, but press Shift+Alt+Z to display all buttons in Visual Editor or click the Show/Hide Kitchen Sink button.

custom tinymce buttons In this short tutorial you'll learn how to extend TinyMCE functionaliby by creating custom buttons. You can use them like I do for download/demo buttons in theme roundups, for call to action purposes, to highlight important data or hint. It's a great feature, that will make your life easier. Now all you'll have to do now is just select text and add button style. Nice, right?

Code from step 1 and 2 paste into functions.php and from step 3 into your style.css

Let's create custom TinyMCE custom buttons

1.Enabling styleselect

Before any dropdown list will show, we need to activate the styleselect pulldown menu in the Visual editor. In this case we will use the mce_buttons_2 filter because that is the second row and it looks good there. You could instead use mce_buttons_3 which would add it to an empty third row.

/*
// Add Formats Dropdown Menu To MCE
if ( ! function_exists( 'wpex_style_select' ) ) {
	function wpex_style_select( $buttons ) {
		array_push( $buttons, 'styleselect' );
		return $buttons;
	}
}
add_filter( 'mce_buttons_2', 'wpex_style_select' );

2. Registering Custom Styles

The second part of this code is creates button names and assign them proper styles.
You can simply add as many buttons as you want, just do it with good syntax and don't forget to create styles for every single button.



// Add new styles to the TinyMCE "formats" menu dropdown
if ( ! function_exists( 'wpex_styles_dropdown' ) ) {
	function wpex_styles_dropdown( $settings ) {

		// Create array of new styles
		$new_styles = array(
			array(
				'title'	=> __( 'Custom Styles', 'wpex' ),
				'items'	=> array(
					array(
						'title'		=> __('Headline','wpex'),
						'selector'	=> 'h2',
						'classes'	=> 'themes-list'
					),
					array(
						'title'		=> __('Blue Button','wpex'),
						'inline'	=> 'span',
						'classes'	=> 'button blue',
					),
					array(
						'title'		=> __('Note Box','wpex'),
						'inline'	=> 'span',
						'classes'	=> 'notebutton note',
					),
				),
			),
		);

		// Merge old & new styles
		$settings['style_formats_merge'] = true;

		// Add new styles
		$settings['style_formats'] = json_encode( $new_styles );

		// Return New Settings
		return $settings;

	}
}
add_filter( 'tiny_mce_before_init', 'wpex_styles_dropdown' );

3. Custom Styles

The code above will only enable the styleselect dropdown menu and add your styles inside it. By default the Visual editor won't know how to display your styles as a preview. Luckily you can provide a custom CSS stylesheet for the editor that includes your styles. And double check if any of those styles doesn't override your current classes.


/* Buttons 
Thanks to http://webdesignerwall.com/tutorials/css3-gradient-buttons for these :)
*/
.notebutton {
	display: block;
	outline: none;
	text-decoration: none;
	padding: .5em 1em .55em;
	margin:5px;
}

.button {
    color: #FFFFFF !important;
    display: inline-block;
font: 16px/100% Arial, Helvetica, sans-serif;
    margin-left: 3px;
    margin-top: 3px;
    padding: 5px 9px;
	text-decoration: none;
    text-shadow: 1px -1px 0 rgba(0, 0, 0, 0.4);
	line-height: 2rem;
}

.button:hover {
	text-decoration: none;
	color: white;
}
.button:active {
	position: relative;
}

.large{
	font-size: 16px;
	font-weight: bold;
	padding-top:15px;
	padding-bottom:15px;
	padding-left:20px;
	padding-right:20px;
}

.action{
	margin-top:10px;
	float:right;
	margin-right:10px;
	margin-left:10px;
}

.more{
	margin:0px;
	margin-top:5px;
	margin-bottom:10px;
	width:576px;
	float:right;
}

/* color styles 
---------------------------------------------- */

/* black */
.black {
	color: #d7d7d7;
	border: solid 1px #414141;
	background: #414141;
	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
	background: -moz-linear-gradient(top,  #666,  #000);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
.black:hover {
	background: #000;
	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
	background: -moz-linear-gradient(top,  #444,  #000);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}
.black:active {
	color: #666;
	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
	background: -moz-linear-gradient(top,  #000,  #444);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');
}

a.black, a.gray, a.orange, a.red, a.blue, a.rosy, a.green, a.pink {
	color:white;
}

a.white, a.white:hover{
	color:#606060;
}

/* gray */
.gray {
	color: #e9e9e9;
	border: solid 1px #555;
	background: #6e6e6e;
	background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
	background: -moz-linear-gradient(top,  #888,  #575757);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.gray:hover {
	background: #616161;
	background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
	background: -moz-linear-gradient(top,  #757575,  #4b4b4b);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
}
.gray:active {
	color: #afafaf;
	background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
	background: -moz-linear-gradient(top,  #575757,  #888);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
}

/* white */
.white {
	color: #606060;
	border: solid 1px #b7b7b7;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
	background: -moz-linear-gradient(top,  #fff,  #ededed);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.white:hover {
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
	background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.white:active {
	color: #999;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
	background: -moz-linear-gradient(top,  #ededed,  #fff);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}


/* orange */
.orange {
	color: white;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
	background: -moz-linear-gradient(top,  #f88e11,  #f06015);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
	color: white;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

/* red */
.red {
	color: #faddde;
	border: solid 1px #980c10;
	background: #d81b21;
	background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
	background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover {
	background: #b61318;
	background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115));
	background: -moz-linear-gradient(top,  #c9151b,  #a11115);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}
.red:active {
	color: #de898c;
	background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));
	background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}

/* blue */
.blue {
	color: #d9eef7;
	background: #3498db;
}
.blue:hover {
	background: #2980b9;
}
.blue:active {
	color: #c0392b;
}

/* rosy */
.rosy {
	color: #fae7e9;
	border: solid 1px #b73948;
	background: #da5867;
	background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
	background: -moz-linear-gradient(top,  #f16c7c,  #bf404f);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');
}
.rosy:hover {
	background: #ba4b58;
	background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));
	background: -moz-linear-gradient(top,  #cf5d6a,  #a53845);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');
}
.rosy:active {
	color: #dca4ab;
	background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));
	background: -moz-linear-gradient(top,  #bf404f,  #f16c7c);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c');
}

/* green */
.green {
	color: white;
	background: #9464e2;


}
.green:hover {
	background: #BF1E4B;

}
.green:active {
	color: #BF1E4B;

}

/* pink */
.pink {
	color: #feeef5;
	border: solid 1px #d2729e;
	background: #f895c2;
	background: -webkit-gradient(linear, left top, left bottom, from(#feb1d3), to(#f171ab));
	background: -moz-linear-gradient(top,  #feb1d3,  #f171ab);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb1d3', endColorstr='#f171ab');
}
.pink:hover {
	background: #d57ea5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f4aacb), to(#e86ca4));
	background: -moz-linear-gradient(top,  #f4aacb,  #e86ca4);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4aacb', endColorstr='#e86ca4');
}
.pink:active {
	color: #f3c3d9;
	background: -webkit-gradient(linear, left top, left bottom, from(#f171ab), to(#feb1d3));
	background: -moz-linear-gradient(top,  #f171ab,  #feb1d3);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f171ab', endColorstr='#feb1d3');
}
	
.note {
    background-color: #F5F5F5;
    border: 3px solid #F4F4F4;
    color: #000000;
    margin-bottom: 25px;
    margin-left: 15px;
	overflow: auto;
    margin-right: 15px;
    padding: 20px;
}

4. Usage

You can add button styles to any text, div, span, paragraph or link. All you have to do is just select text you want to change into button, click styleselect dropdown menu in visual editor and choose proper option. Also if you don't want to use visual editor, just use code as in example below.

In pure HTML it will look like:
<span class="button gray">Span</span>
<p class="button orange">paragraph</p>
<a class="button red" href="#">link</a>
<div class="button blue">div</div>
<div class="button blue"></div>

Demo

Here you can see all the buttons in action!

Black Button

Gray Button

White Button

Orange Button

Red Button

Blue Button

Rosy Button

Pink Button

I use note button to add some important info to the content ex. above.

Note Button

Divi 2.0 WordPress Theme

Like what you read here in this blog post? If yes, please sign up and get latest articles delivered to your email account for FREE! You’ll be also subscribed to newsletter, where I share a exclusive content and offers.

About Kris Hoja

Hi! I'm Kris. For a while I was blogging about WordPress, now I'm owner of HogStudio - Creative Agency focused on website development.
Add me on Google+ and don't forget to follow me on Twitter :)

Leave a Reply