How To: Add Custom Text Styles to WordPress Post Editor
Shortcodes are all very well, but they are not the ideal solution if you wanted to add extra styles to your WordPress post editor screen. People will have to memorise the shortcode they want to use or keep referrring back to the documentation, and if they switch themes then they could end up losing the styling unless it is ported over to the new theme. A better way is to use CSS and an even better way is to add extra controls to the WYSIWYG editor so the end user can just select which style they want to use from a drop down menu.
This is where a new plugin from my friend James Kemp comes in, it’s called Easy Custom Styles and it allows you to create unlimited styles in a visual interface for the end user to choose from. In this tutorial I will show you how to install and configure the plugin and create your first custom style.
Install The Plugin
Download the plugin and unzip the file, you will see another zip called “easy-custom-styles” then in your WordPress admin, visit “Plugins” > “Add New” > “Upload” and upload the file.
Activate the plugin and you will see it adds a new menu item under “Settings” called “Custom Styles” visit this and we can add our first style.
This is the page that would list all your styles and let you edit them, at the moment its empty so go ahead and hit the “Add New” link at the top and we can begin adding our first style
As you can see on the left hand side you have all the options for styling with CSS and on the right you have a live preview of what it will look like :
For the purpose of this tutorial, lets create a red error style – enter a name at the top “Error box” and enter the following settings :
Once you are done, hit “Publish” on the right hand side and the style will be added.
Using your Custom Styles
Visit the post screen – “Posts” > “Add New” and click the far right icon which is “Show / Hide the kitchen sink” to show more icons
With this new row of icons visible you will see the styles drop down on the left, hightlight some text you want to apply the style to and then select your custom style from the drop down :
You will then see your new style applied :
This plugin is really easy to use – people unfamiliar with CSS may struggle a little bit at first but some trial and error made easier by the live preview should have them up and running in no time. The color picker for all the color options is a nice touch. Of course if you are using this for a client, you would just create all the styles before hand for them and they would just need to use the styles drop down in the post editor. I could see this being of use to theme authors as well.
Well worth the $15 or for $75 you can get an extended license which gives you the right to use in a theme.