WordPress Visual Editor – A Step by Step Guide

In this actionable, step by step guide, we take a detailed look at how to use WordPress Visual Editor. Find out how to enable visual editor, and how to use it for your blog posts and much more!

There are currently 455 million registered WordPress sites across the globe.

Let that sink in…

455 million WordPress sites!

From personal hobby blogs to professional news sites, these WordPress sites are designed by all kinds of coders with a broad range of experience. 

Luckily, self-hosted WordPress sites are customizable in a limitless number of ways. There are options and tools for any kind of web designer, to fit any kind of preference. 

One of the easiest ways to personalize your WordPress experience is by utilizing the WordPress visual editor over the traditional text editor. This intuitive editing option can make your experience with WordPress even easier. 

But first, does WordPress have a visual editor?

And if so, what is WordPress visual editor?

What Is WordPress Visual Editor?

The WordPress visual editor is a rich text editor located on the post edit screen. But which is better for you? Visual or Text?

WordPress visual vs text.

As you can see from the image below, WordPress gives you two editor options: Visual and Text. 

While the text editor will feature lines of HTML code, the visual editor is a WordPress WYSIWYG editor. WYSIWYG stands for “what you see is what you get,” meaning that the way content appears in the editor is exactly how it will appear on your site.

Other examples of WYSIWYG editors include Microsoft Word and Pages. 

WordPress Visual Editor actually has a layout quite similar to Microsoft Word. It  features a familiar toolbar at the top with various options that allow you to format your content. 

This is because the visual editor is actually a modified version of TinyMCE, an open-source editor that is frequently used across various applications. Put differently, this is also a WordPress tinymce editor.

WordPress text editor

The WordPress text editor, which is also called the HTML editor, generates and displays the HTML code of a page or post. This is extremely useful for plain text formatting.

Users may fix unwanted styling and formatting changes that WordPress might automatically apply, when customizing with the text editor.

What Is Visual Mode and Why Should I Use It?

The visual editor, also known as editing in “visual mode,” can be a great option for those who are not that familiar with HTML. It’s also useful for those who are more visually inclined, or seeking certain functions. 

In order to have a successful WordPress blog or site, it’s important that your layout be visually appealing. One of the advantages of the visual editor is that you can see in real-time how the changes you make affect your website layout. 

Another advantage is how many possibilities there are to customize the visual editor functions. Because TinyMCE is extensible, you have the option to add a WordPress Visual Editor plugin (or a few) that allows you to personalize or add on to your toolbar button options. 

WordPress Visual Editor has all the functions of the text editor, including aligning text, bolding or italicizing text, aligning pictures, adding quotes, adding media, and so much more. 

WordPress Visual Editor Missing? How Do I Enable Visual Editor in WordPress?

You can enable the visual editor by going to your User Profile page. Here you should find a toggle button marked “Enable Visual Editor” under “Personal Options.” 

In older versions of WordPress, once the visual editor was enabled, it became the only option for editing. Now, however, it is easy to toggle between text and visual mode. This is great news for those who still enjoy tinkering with HTML, but also want a clear view of what their site will look like.

WordPress has also become quite good at remembering your preferences. So, when you leave for a bit and come back to edit, you’ll get to use whichever editor type you prefer, even if you leave Visual Editor on. 

Leaving the visual editor on is also a great way to unlock some features that are exclusive to the visual editor. This includes the newly added, streamlined Linking Tool. With this tool, internal linking becomes an easy, almost fun task. 

Tabs at the top labeled “Visual” and “HTML” will help you easily toggle between the two. A word of warning, though: some code chains will not transfer perfectly between them. Keep an eye out for that.

How to Use WordPress Visual Editor

Using WordPress Visual Editor is actually fairly simple. In fact, the visual editor makes designing your site or webpages as simple as composing an email.

First, you’ll want to get familiar with the toolbar. This is the hub of all the visual editor functions. Some of these functions include:

• Adjusting post content style (styling drop-down menu)
• Bolding text (Bold B icon)
• Italicizing text (Italic I icon)
• Creating ordered and bulleted lists (Bullet and 123 icons)
• Creating block quotes (Quote icon)
• Aligning text left, right, and center (Alignment icons)
• Linking to other webpages or sites (Link and Unlink icons)

These are just scratching the surface of the many functions available in the visual editor. Not only is this just the beginning of the built-in functions, but WordPress also allows plugins that let you further expand the visual editor functionality. 

Once you’re familiar with the visual editor toolbar, you can begin using the visual editor very similarly to Microsoft Word. Text can be typed right onto the webpage and edited with these tools to fit your liking. 

To format your text, you can use tools such as the Headings drop-down menu, the bulleted lists button, and the embedding feature to totally personalize your site’s appearance. 

Because the code is built-in, Visual Editor allows you to get your website exactly how you want it without ever having to touch HTML. 

Troubleshooting: WordPress Visual Editor Not Working? What Do I Do?

Unfortunately, the WordPress Visual Editor is not perfect. Like any other piece of technology, things can happen that will need some troubleshooting.

While there is no singular solution to Visual Editor problems, there are a few common issues that can disrupt your web-building process. If you find that Visual Editor stops working entirely, you could have problems ranging from outdated themes or wonky plugins to un-updated versions of WordPress.

To find the solution, you’ll have to do some troubleshooting. 

Method 1: Hard Reset

One of the oldest technological tricks in the book is to turn your technology off and then back on again. This is like hitting the reset button, allowing your tech to re-find its starting place.

The same method can be used for an inoperable WordPress Visual Editor. To do it, you’ll need to start by going to Users > Profile on the left-hand side of your WordPress dashboard. 

Next, check the box beside “Disbale visual editor when writing.” Then, click the blue “Update Profile” button at the bottom of the page.

Now, hard refresh your webpage using Ctrl + F5 (Windows) or Cmd, Shift, R (Mac). Go back and uncheck “Disable visual editor when writing.”

Hopefully, your visual editor will reappear.

Method 2: Reinstall WordPress Files

If the first method doesn’t work, you likely have a deeper problem that will take some investigation. A good method to try next is reinstalling your WordPress files. This will update your website to the latest version of WordPress.

Please note: before beginning this method, it’s important to create a backup of your current website. 

Now, in just a few steps, you can reinstall your files by:

• In your WordPress account, go to Dashboard > Updates
• Click Re-install Now

Once it’s done installing, check to see if your visual editor has reappeared.

Method 3: Install a New Theme

If updating WordPress doesn’t work, the problem could be that your website is using an outdated theme. Not every WordPress theme is compatible with the visual editor.

Luckily, there are thousands of WordPress themes to choose from. To install a new theme on your WordPress site:

• Go to Appearance > Themes
• Click “Add New” at the top of the page
• Browse and select the theme you want
• On your chosen theme, select “Install” then “Activate”

Once again, check to see if your visual editor has reappeared.

Method 4: Deactivate Your Plugins

Sometimes, WordPress sites can be bogged down by outdated or convoluted plugins. In fact, plugins cause frequent problems with a variety of WordPress sites.

If the 3 methods above did not work, it might be time to try deactivating all of your plugins. To do this efficiently:

• Go to Plugins > Installed Plugins on the left-hand side
• Check the box next to “Plugin” to select all
• Go to “Bulk Actions” and select “Deactivate”
• Click “Apply” on the pop-up box
• Select “Activate” and “Apply” to reactivate plugins

Now, check to see if the visual editor has started working again.

Method 5: Edit WordPress Configuration

The final solution on our list requires a bit more tech-savvy. If all of the above solutions did not work and you feel comfortable doing so, you’ll need to access your cPanel to reconfigure your WordPress site manually.

Your cPanel can be accessed through your hosting account. To edit your configuration you’ll want to:

• Go to “File Manager”
• Review the list of folders and open the “public_html” folder
• Scroll down to the “wp-config.php” file
• Right-click the file and select “Edit code”
• Copy the code below:
  • define(‘CONCATENATE_SCRIPTS’, false);
• Paste it below the line that reads define(‘db_collate’,”);:
• Save the changes

Now, see if your visual editor is working. If you’re still having trouble, reach out to your WordPress host site for more troubleshooting solutions.

Your Turn – Enter a World of Possibility With WordPress Visual Editor

WordPress Visual Editor can make web design easy and fun.

It is a tremendously useful tool for those new to web building, those who are visually inclined, or those who are looking for more advanced features.

Contact us to learn more about how to elevate your blog.

For beginners and experienced coders alike, we have tons of tips and tricks that can take your site to the next level.