How To: Add a Dropdown CSS Style Selector to the Visual Editor

Using the new menu it will be possible to apply a CSS style to a text link in your post, in order to create a button effect without using any images. The links could look something like this, although the appearance is up to you:How To Styles 04

The End Result

In this post you will learn how to easily turn text links into attractive buttons in WordPress. By following this how to guide you will find out how to add a dropdown menu to the WordPress visual editor that allows you to apply custom CSS styles to your post content.
How To Styles 06
Now whenever you need to insert an eye-catching and attractive button into your posts or pages, just create a text link and then select that style from the dropdown menu.
However, if you are working on a development site or local installation of WordPress it’s not entirely necessary to create a child theme.
If you were to use your own CSS, then the classes entry would be whatever you called your own CSS class. In the example above though, the button CSS style is called linkButton.
Now go back to the Appearance > Editor page and click on the style.css file from the list of files on the right-hand side.

Safety Precautions

If all the above sounds great in theory, but you would like a quicker way of implementing it without editing any code, then these two plugins might be of interest:

  • functions.php
  • style.css

Both of these files are part of your theme, so we will work working with the versions that are associated with the theme currently active on your site. Firstly, it’s important to make a backup copy of these files in case something should go wrong.
This approach not only saves you time when creating a post, but also makes it easy for all the contributors to your blog to be able to consistently use the same styles to decorate buttons or any other post elements.
Once the code has been added to the file, click the Update File button to save the changes. If all went well, you should see the styleselect dropdown menu has been added to the WordPress visual post editor.

Adding the Styles Menu Item

Then copy and paste the following code into the file. For convenience I recommend pasting at the end of the file so you can easily keep track of what you’ve added to the file.
Secondly, it’s good practice to create a child theme of your current theme. If you don’t know how to create a child theme, check this guide by Rachel Adnyana. Using a child theme will ensure that should you update your current theme, what we do in this tutorial won’t get overwritten. It’s also worth pointing out that should you switch themes, these changes will be lost too.
Now you can easily create great looking buttons in WordPress simply by selecting an option from a dropdown menu on the WordPress Visual Editor. If you run into any difficulty or have any questions, just leave a comment below.
The end result of this how to guide will enable you to select some text in your post, and then apply a style to it via the dropdown menu on the post editor. This is great for creating the kind of buttons you see here on WP Kube as well as adding any other kind of formatting to your post content.
Hopefully you can think of some other great uses for this feature. If you want you can add additional styles to the menu. These can be for different styles of buttons, or formatting the appearance of text, or anything else you can do with CSS.
Once we’ve finished, the Visual Editor will look like this, and contain a Styles dropdown menu item:
The Styles dropdown menu item is actually part of the WordPress Visual Editor already but it’s been disabled by default. To enable is, you just need to add some code to the functions.php file of your current theme.
How To Styles 05
How To Styles 02
In this tutorial we are creating a button for our text links, but you could just as easily create the decoration and formatting for any other type of page element.

Creating the Button CSS Styles

In this tutorial we are going to be editing the following files:
array( ‘title’ => Bigger Button’, ‘selector’ => ‘a’, ‘classes’ => ‘biggerButton’,
),

These custom CSS styles can be applied to text in your posts to decorate and format it. A great use for this is to create attractive and attention grabbing buttons for your posts. This guide will also cover generating the button CSS styles. If you want an easy way to add attractive buttons to posts and pages then this guide is for you.
To apply the CSS style and create the button, simply create a text link in your post, highlight the text and then select the Link Button style from the menu. The styles won’t be visible in the post editor window. You must preview the post to see the formatting, which should look something like this:
How To Styles 03

Adding the Style to the Dropdown Menu

Now click on the functions.php file again and paste in the code below at the bottom of the file.
Now we need to create the CSS styles for the button. You can either create your own CSS or use one of the many online button generator applications out there. CSS Button Generator is a good choice so visit the site and quickly create a button and then copy the CSS or use the example below.

  • title – this is the title that will be displayed on the dropdown menu
  • selector – the ‘a’ refers to anchor, signalling this styles is for links
  • classes – this is the name of our button CSS class

// Enable the Styles dropdown menu item
// Callback function to insert ‘styleselect’ into the $buttons array
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, ‘styleselect’ );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter(‘mce_buttons_2’, ‘my_mce_buttons_2’);
// end of part I

Next click on the functions.php file from the file list on the right-hand side of the page, to begin editing that file.
// Add the Button CSS to the Dropdown Menu
// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) { // Define the style_formats array
$style_formats = array( // Each array child is a format with it’s own settings
array( ‘title’ => ‘Link Button’, ‘selector’ => ‘a’, ‘classes’ => ‘linkButton’,
),
); // Insert the array, JSON ENCODED, into ‘style_formats’
$init_array[‘style_formats’] = json_encode( $style_formats );
return $init_array;
} // Attach callback to ‘tiny_mce_before_init’
add_filter( ‘tiny_mce_before_init’, ‘my_mce_before_init_insert_formats’ );
// end of part II

Again, scroll down to the end of the file and paste in the below button CSS or use your own CSS:
Once you’ve pasted in the code, click the Update File button to save the changes. Once the file is saved, go to the WordPress post editor and refresh the window for the changes to take effect. Now click on the styles dropdown menu and you should see an entry entitled Link Button.
How To Styles 01

Advanced Options

However, we are not finished yet. If you look at the menu items on this new dropdown list, they are the styles connected to the Visual Editor’s other buttons. We want to add our own styles to the list.
First check that the theme your WordPress site is currently using is selected on the dropdown menu at the top of the right of the page. I’m currently editing the functions.php file for the Twenty Twelve theme but for you it may be a different theme.
To open the file for editing, you can go to the Appearance menu and then click on Editor from the submenu.

Shortcuts

If you want to create an additional button style and add it to the dropdown menu, simply create another entry in the array (that was added to functions.php) and change the title and classes lines:

Conclusion

.linkButton {
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#79bbff’, endColorstr=’#378de5′);
background-color:#79bbff;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #84bbf3;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:15px;
font-weight:bold;
font-style:normal;
height:40px;
line-height:40px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #528ecc;
} .linkButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#378de5′, endColorstr=’#79bbff’);
background-color:#378de5;
} .linkButton:active {
position:relative;
top:1px;
} /* This button was generated using CSSButtonGenerator.com */

Update the file to save the changes.

Posted by WordPress Guru