RocketTheme Blog
Add Custom Styles More Easily to the WordPress Visual Editor
- Thursday, 27 October 2016 13:40
TinyMCE. WYSIWYG. HTML. A lot of acronyms get thrown around when talking about text editors in WordPress, but do you know what they mean and what you can do to get the most out of them?
If you’re interested in expanding the capabilities of the WordPress visual editor, you’ll need to learn how to add custom styles to your editor tool. In this article, we’ll cover what your options are and give you a number of different ways to implement them.
An Explanation of the TinyMCE Editor
WordPress powers its post and page editors with the Tiny Moxiecode Content Editor (TinyMCE). TinyMCE is a popular open-source software that enables users to have better and more flexible control over their content. If you use WordPress, then you’re already familiar with what your text editor window looks like.
This is how the Basic TinyMCE visual editor typically looks:
And this is how the Basic TinyMCE text editor typically looks:
As you can see, the options in the visual editor are fairly limited. If you want to apply any special formatting to the text on your website, you have to switch back and forth between the visual and text editor windows in order to do so.
But what happens if you or one of your users doesn’t know how to use HTML (Hypertext Markup Language)? Are you just supposed to use the simple stylization that the basic visual editor allows for? Considering how important header tags (and other metadata and tags) are to your page’s SEO, relying on the basic visual editor isn’t a practical option.
The solution is simple enough. All you need to do is add custom styles to your TinyMCE editor so that all the special stylizations you need are built directly into the visual editor interface. This way you can:
Save time by not having to switch back and forth between the visual editor and the text editor.
Save yourself and your other WordPress users the trouble of having to learn HTML or CSS (if you don’t want to).
Gain more flexibility and options for how you style your website’s content.
Create consistency in how the content on your website is styled.
So, if you’re interested in learning how to implement this simple solution, consider one of the methods below.
Option #1: Use a Plugin
When it comes to extending the power of your WordPress website, plugins are a great way to do this.
Below you will find a list of some of the top-rated plugins that help solve this problem of limited content styling. Each of these plugins works in different ways to resolve the issue, so make sure you review each before making a selection. Some require a more advanced knowledge of WordPress while others choose to ditch the TinyMCE editor altogether.
TinyMCE Advanced Plugin
This is, by far, the most popular TinyMCE extension plugin available right now. Once you activate the plugin, you’ll be able to update the default editor settings as you see fit. You’ll also notice that your visual editor now comes with drop-down title bar options typically seen in other word processing tools (like File, Edit, Insert, Format, etc.), which makes using your visual editor tool much easier.
WP Edit Plugin
This plugin not only gives you the ability to add custom styles to your visual editor, it does so in a very easy-to-use drag-and-drop builder. So rather than get bogged down with too many custom options in your editor, you can add only the ones you want. You can even choose what different users/roles will see when they use the visual editor.
Black Studio TinyMCE Widget Plugin
The main content on your website isn’t the only content that could benefit from extra styling. If you have sidebar content on your website, you’ve probably already run into this issue of not being able to style the text there without knowing how to use HTML. With this plugin, however, you’ll now have full visual editor capabilities when creating content for sidebar widgets.
Rich Text Editor Plugin
WYSIWYG (what you see is what you get) is another name for the visual editor in WordPress. In other words, what you type there, the images you insert, the styles you apply—what you see in the visual editor is what you get. For some people the TinyMCE editor, even with custom styles added, just isn’t enough. If that’s the case and you want more options (like being able to do a search and replace, change the font type, and more), try out this plugin.
Visual Editor Custom Buttons Plugin
Now, if you are comfortable using CSS and want to be able to build your own custom buttons and styles for the visual and text editors, you can use this plugin. Basically, if you don’t want to have to alter the coding of your website (we’ll cover that option below) and want a plugin to help you create these custom buttons, you can do so with this tool.
Visual CSS Style Editor Plugin
Want to ditch the TinyMCE editor altogether? Many developers nowadays are equipping their themes with front-end builders. In other words, you can look at your actual website and make changes directly on the page; there’s no longer a need to duck into the backend, edit your content in the editor interface, and then preview your changes to make sure they look okay. If your theme does not come with this functionality, you can use this plugin to enable front-end editing.
Option #2: Use Code
If you’d rather not rely on a bulky plugin to add custom styles or if the options above don’t cover all your needs, you can update your website’s coding instead. Make sure you’ve saved a backup of your website before proceeding.
Rather than walk you through the coding you’ll need to use, I’m going to point you to a tutorial published by Torque earlier this year. Any tutorial that shows you how to add custom styles is going to basically tell you to do the same thing. This one just so happens to be very simply laid out and easy to follow.
Here are the five basic steps you’ll need to follow when taking this route:
Step 1: Create a child theme so you won’t lose any changes you make to the visual editor when it comes to update the parent theme.
Step 2: Update the functions.php file in your child theme folder to add a new drop-down menu to the visual editor. These lines of code will add the default custom styles for header tags, inline text, block types, and alignment styling.
Step 3: Based on your specific needs, you’ll then want to update this code with the different custom style options you need. This tutorial explains many of the different attributes you might consider adding.
Step 4: In order for these styles to be translated over to your website, you need to update your style sheet. You’ll add coding to your style sheet file that defines each of the custom styles you created in the functions.php file.
Step 5: This final step is optional, but you may want to implement it if your theme doesn’t currently support a true WYSIWYG interface. So, if you want to see your custom styles within the visual editor, edit your text editor’s stylesheet accordingly.
Unless you’re planning to add custom styles to your visual editor that cannot otherwise be achieved through the use of plugins, I’d recommend going with Option #1. WordPress plugins are easy to use, and, so long as the developer keeps them up-to-date, they’re an efficient way to maintain new settings for your website.
Conclusion
The content you create for your website plays a very important role for your business. It lets people know what you do, demonstrates your expertise, reinforces your brand’s identity, and it also helps the search engines rank your website based on relevance and quality.
If you’re serious about creating high quality content and running a high performance website, you’ll want to add custom styles to your text editor tool. Be it through plugin or code, this may be one of the easier customizations you’ll ever have to make in WordPress.
Nathan Oulman owns and operates dailyhosting.net which features web hosting based reviews and technical support reviews.