Resources     Blog  

  1. Home
  2. WordPress Tutorials
  3. How to Use the WordPress Visual Editor with Custom Styles

How to Use the WordPress Visual Editor with Custom Styles

The visual editor of WordPress is often a writer’s default view when creating content. It’s here that you have buttons and functions to give your text some visual appeal. Although the default TinyMCE tool is useful, you can add more options to the WordPress editor.

In this tutorial, let’s take a look at a couple different WordPress custom editor style plugins. Each of these offer excellent ways to enhances the content you create on your website.

It’s a great way to add visual appeal without using elements like WordPress shortcodes. For example, you can add an attractive button to your site using nothing more than CSS coding and placing a few options.

For this tutorial, you’ll need to know how to install WordPress plugins.

Using TinyMCE Custom Styles

The TinyMCE Custom Styles plugin adds a function to allow you to edit your own CSS classes and styles. It uses a sleek interface that removes a lot of the code work to create things like buttons.

If you know a bit of the basics behind CSS, this tool is a good one to try out.

Install and activate the TinyMCE Custom Styles plugin in WordPress.

TinyMCE Custom Styles

Go to Settings and click, “TinyMCE Custom Styles.”

TinyMCE Custom Settings

Before you can use TinyMCE Custom Styles, you need to set a location for the CSS files the editor will use. Choose one of the radio buttons to select a location. For this tutorial, I’m going to specify a custom directory. You need to create the folder before using the option.

TinyMCE Save Locale

Click the “Save all settings” button.

Save Settings

Scroll down and click the “Add new style” button.

Add New Style

Here is where you input the values for the style you want in the TinyMCE editor. These values are all for CSS, and you need to know which elements you’re going to use.

New Style

Once you’re done, click the “Save all settings” button to save your style.

Save Style

Accessing the New Style

After you saved your style, you need to access it. Go to any post, page or custom post type that uses the WordPress visual editor. You can create a new one if you wish.

Click the “Toolbar Toggle” icon in the editor. You may already have it activated by default.

Toggle Toolbar

Select the text you want to accent with a style.

Select Text

Use the “Formats” drop down and select a style.

Select Format

The text will then use the style you created.

Text Style Complete

Using Just TinyMCE Custom Styles

The Just TinyMCE Custom Styles plugin is another useful tool for creating CSS enhanced content on your website. It comes with options to edit your text in a similar way to the plugin above. It’s a bit more difficult to manage, but works well.

If you’re new to CSS, I’d suggest using TinyMCE Custom Styles instead.

Install and activate “Just TinyMCE Custom Styles.”

Just TinyMCE Custom

Go to Settings and click, “TinyMCE Custom Styles.”

Custom Styles Settings

In the first time use, you’ll need to modify the settings of the plugin. You can either go to the tab or click the “Open Settings” link.

Open Settings

Make the adjustments you want to handle in this plugin. These are the CSS elements you want to control from the tool.

When you’re done with your selections, click the “Save all settings” button.

Save CSS Settings

After saving, click the “TinyMCE Formats” tab on the top.

TinyMCE Formats

Input the new CSS format you want to use in the spaces provided.

CSS Item

Once you’ve entered the CSS data, click the “save all settings” button to save it.

Save CSS

Accessing the Style

Go into an old post or create a new one. For this example, I’m going to add a new red header to an existing post.

Highlight a piece of text you want to modify with CSS by selecting it.

Highlight Text

Click the “Formats” drop down and choose your CSS style.

Select Style

This TinyMCE custom styles plugin is more difficult to manage than the first example above. It requires a bit more knowledge of how CSS works and doesn’t have the automatic functions like adding backgrounds and the like.

You’ll have to enter those snippets of code in manually when you create the new style.

If you know your CSS, it’s a wonderful tool for adding more flare to posts and pages. It’s just a bit more advanced than many of the other plugins.

Get More Out of the Content

Adding custom CSS to a WordPress website adds more versatility in what you can do and text formatting can make a world of difference when it comes to engaging your audience. Something as simple as a bold in the right place can have an impact on readability. Adding custom styles adds more to the experience while making it easier for you to perform certain tasks.

What kind of tools do you use to boost the readability of your content? How often do you use visual plugins to increase the engagement of your WordPress site?

Author: Kaumil Patel

Kaumil Patel is the Chief Operating Officer of GreenGeeks and has over 13 years of experience in the web hosting industry working for and owning web hosting companies. Kaumil’s expertise is in marketing, business development, operations, acquisitions and mergers.

Was this article helpful?

Related Articles

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.