How To Enhance The WordPress Visual Editor

Learn how to enhance the WordPress visual editor with additional formatting features in this tutorial.

How To Enhance The WordPress Visual Editor

The WordPress WYSIWYG (What You See Is What You Get) editor is powered by TinyMCE, an Open Source application that integrates with the WordPress Content Management System.

While the default WordPress visual editor is feature-rich, there are some things it can’t do, such as easily adding tables to WordPress without requiring knowledge or skills of coding HTML and CSS.

If you are looking for more functionality and options than what is currently provided by the built-in WordPress Visual editor, this step-by-step tutorial will show you how to add useful enhancements to your default WordPress Visual editor using WordPress plugins.

How To Enhance Your WordPress Visual Editor

Complete the tutorial below to learn how to install and configure the TinyMCE Advanced plugin.

TinyMCE Advanced

TinyMCE Advanced - WordPress Plugin

TinyMCE Advanced is a useful plugin that includes a number of additional WordPress editor-enhancing features.

The screenshot below shows the default WordPress visual editor …

TinyMCE Advanced - WordPress Plugin Here is a screenshot of the same WordPress visual editor after TinyMCE Advanced plugin has been installed, activated and (minimally) configured on your site …

TinyMCE Advanced - WordPress Plugin The additional functions included in TinyMCE Advanced include:

  • Advanced HR – insert a horizontal ruler
  • Advanced Image – insert and format images
  • Advanced Link – insert links to text and images.
  • Advanced List – (use this only if you experience problems with how lists display on your page).
  • Context Menu – adds a configurable context menu.
  • Emoticons (Smilies) – insert smiley images.
  • Date and Time – inserts date and time
  • IESpell – inserts a spellchecker.
  • Layer -adds some layer controls (only works on some browsers).
  • Nonbreaking – inserts nonbreaking space entities.
  • Print – adds a print button.
  • Search and Replace – adds a search/replace function.
  • Style – imports CSS classes from your themes style sheet.
  • Table – adds table management functionality.
  • Visual Characters – adds the possibility to see invisible characters.
  • XHTML Extras – adds support for XHTML specific tags.

How To Install TinyMCE Advanced WordPress Plugin

Warning

Always backup your WordPress site and data before installing a new WordPress plugin!

If you don’t want to perform your own site backups, then get professional WordPress assistance, or use a WordPress backup plugin.

Learn about a great WordPress backup plugin that we recommend using to completely automate your WordPress file and database backups here:

***

To install the plugin, log into your WordPress site and click on Plugins > Add New

Adding A New Plugin To WordPress

Make sure that you are in the “Search” tab of the Install Plugins screen. In the Search field enter TinyMCE Advanced and click on Search Plugins

TinyMCE Advanced - WordPress Plugin

Locate TinyMCE Advanced in the results list and click on the Install Now link to automatically install the plugin on your site …

TinyMCE Advanced - WordPress Plugin

Once the plugin has been successfully installed, click Activate Plugin

TinyMCE Advanced - WordPress Plugin

Your plugin is now activated …

TinyMCE Advanced - WordPress Plugin

Configuring TinyMCE Advanced Plugin

In your WP Admin menu, select Settings > TinyMCE Advanced

TinyMCE Advanced - WordPress Plugin

The “TinyMCE Buttons Arrangement” screen will display in your browser …

TinyMCE Advanced - WordPress Plugin

(Click here for an enlarged view of the above screenshot)

The screen displays a number of pre-filled and empty toolbars and all other available buttons below the toolbars, as well as an advanced section.

The toolbars are fully configurable. Simply drag and drop buttons corresponding to the functions you want to have available on the toolbars to add, remove or rearrange your visual editor menu …

TinyMCE Advanced - WordPress Plugin

You can also drag and drop menu separators when customizing this section. This will add a vertical separator between buttons …

TinyMCE Advanced - WordPress Plugin

When you have finished customizing your toolbars, remember to click the Save Changes button to apply your changes and save your new settings …

TinyMCE Advanced - WordPress Plugin

Adding Tables To WordPress Using TinyMCE Advanced Plugin

The TinyMCE Advanced WordPress plugin adds a number of extra functions to your WordPress editor, including the ability to add tables to WordPress posts and pages …

TinyMCE Advanced - WordPress Plugin Here is an example of a table inserted into this post using the TinyMCE Advanced plugin:

WIDGET COMPARISON CHART FOR XYZ COMPANY
Item NoProduct NameDescription
W-001-PQAMegaWidget 2000The MegaWidget 2000 provides the most value for the least cost.
W-019-RVYPolyWidgetUse PolyWidget for multiple applications.
W-442-BCUNanoWidgetNanoWidget comes in a variety of colors and sizes.

TinyMCE Advanced lets you easily add, edit and delete tables, cells and rows, align and format content in tables, merge and split cells and more while working inside your post or page.

To learn how to create and manage tables in WordPress without HTML or CSS skills, see the tutorial below:

Useful Tip

Tip #1: Some plugins add their own custom buttons to the visual editor toolbar. Sometimes this can cause the visual editor menu to interfere with other areas of your WordPress site’s administration area …

TinyMCE Advanced - WordPress Plugin

If this happens, don’t worry … there is a very simple solution! All you need to do is rearrange some of the standard buttons on the menu toolbar …

TinyMCE Advanced - WordPress Plugin

To do this, bring up the TinyMCE Buttons Arrangement screen (Settings > TinyMCE Advanced) and drag some of the buttons away from the toolbar that is crowded with too many custom buttons to an emptier toolbar …

TinyMCE Advanced - WordPress Plugin

Once you have finished rearranging your menu buttons, click the “Save Changes” button to save your new settings …

TinyMCE Advanced - WordPress Plugin

Now, when you bring up the visual editor on your screen, you should find that the problem has been solved (if it hasn’t just keep rearranging the buttons until the issue has been corrected!) …

TinyMCE Advanced - WordPress Plugin

For more information, documentation and FAQs about this plugin, visit the plugin website: TinyMCE Advanced

Tip #2: Another plugin that takes the concept of enhancing your WordPress visual editor even further, is Ultimate Tiny MCE

Ultimate TinyMCE

Ultimate TinyMCE - WordPress Plugin

Ultimate Tiny MCE seems to be a well supported plugin with lots of documentation (including video tutorials) that provides many of the same features as TinyMCE Advanced, but offers additional features such as:

  • Advanced image features like mouseover and mouseout effects … even add your own popup javascript windows when a user clicks a link.
  • Add your own custom CSS using drop-down menus (no HTML knowledge required).
  • Easily Insert page anchors into long posts.
  • Image mapping allows you to add separate navigation links to the same image.
  • Over 40 emoticons (smilies)
  • And a whole lot more …

To learn more about this plugin, visit the plugin site here: Ultimate Tiny MCE

Warning

Note: Ultimate TinyMCE recently announced that the plugin will not work on WordPress versions above 3.9. The plugin developers recommend switching to its successor, WP Edit (see below).

WP Edit

WP Edit

(WP Edit)

WP Edit gives you control of the default WordPress editor and access to additional editor tools.

WP Edit is the successor of  the ‘Ultimate TinyMCE’ plugin (see previous item) and has been completely rebuilt to add extensive, additional editing functionality to the default WordPress editor. You can arrange buttons into toolbars and configure these however you like to improve your workflow.

WP Edit adds dozens of additional custom options to the WordPress editor, including new buttons, extended formatting abilities, and new features.

These features include:

  • Easily insert images, media, YouTube videos, and clip art.
  • Create tables via a graphical interface.
  • Adjust table cell border and background colors.
  • No need to learn HTML and CSS (use buttons with visual interfaces instead).
  • Easily access all shortcodes available to your WordPress environment and insert them into the content editor.
  • Use shortcodes to insert columns (similar to “magazine” style layouts) in your content areas.

To learn more about this plugin, visit the plugin page here: WP Edit

Visual Editor Custom Buttons

Visual Editor Custom Buttons

(Visual Editor Custom Buttons plugin)

Visual Editor Custom Buttons provides a fast and easy way to add custom buttons to the WordPress Visual Editor.

With this plugin you can easily add your own custom buttons in the Visual Editor, as well as the HTML Editor. You can then add HTML code to the button, either as a wrap (before, after) or as a single block. On top of that you can, from within the plugin, set the CSS so you can view the effect of the button directly in the Visual Editor.

The plugin comes with a large number of ready to use button icons, but you can also add your own.

For more information, visit the plugin page here: Visual Editor Custom Buttons

Congratulations! Now you know how to enhance your WordPress visual editor with additional features and how to customize the WordPress Visual editor.

How To Enhance The WordPress Visual Editor

***

"Wow! I never knew there's so much to learn about WordPress! I bought one of the WordPress for Dummies three years ago, such authors need to be on this course!" - Rich Law, Create A Blog Now

***

Thrive Content Builder Plugin For WordPress

Thrive Content Builder is a plugin for WordPress that allows you to quickly build stunning content layouts with true click-to-edit and drag and drop simplicity …

WordPress EditorWordPress has evolved from being just a simple blogging application into a tool being used to create all types of sites.

Whatever you can imagine, someone is bound to be already building it with WordPress!

This article will help you learn how to create beautiful page layouts with drag & drop ease in WordPress websites.

Drag And Drop Content Editors For WordPress

Does The Default WordPress Content Editor Still Meet All Of Your Web Design Needs?

With all the rapid advancements that the WordPress platform has gone through in recent years, many WordPress users feel that the WordPress content editor is now lagging behind the developments being made to the software.

WordPress Editor

(The WordPress content editor is great for adding, formatting and editing “linear” content, but adding complex content elements can be challenging!)

For example, let’s say you want to create something like the layout shown below …

Thrive Content Builder Plugin For WordPress

Creating the above in your content would require typing something that looks like this in the default WordPress visual content editor …

Thrive Content Builder - Click-To-Edit Drag & Drop Content Creation Tool For WordPress

Generally, this is not an issue … unless you choose to reconfigure your layout (for example, move part of the content from box 3 into box 2, or change the button inside a box from green to yellow. Then, you’re stuck having to mess around with code inside the editor.

The WordPress visual editor is supposed to provide non-technical users with an easy-to-use WYSIWYG content editor, but as you can see, if you are creating with more complex content elements, often what you see in the WordPress visual editor screen may not be what you get …

Thrive Content Builder Plugin For WordPress

(“What You See” isn’t always “What You Get” … unless you can visualize code!)

In some instances, you could be better off working directly inside the html (text) editor tab instead of the WordPress visual editor when trying to add non-linear page elements …

Thrive Content Builder Plugin

Even though WordPress is extremely easy to use, this makes it hard for non-technical users to fully manage their own content.

The fundamental challenge with using shortcodes and HTML to create content in the default WordPress editor can be summarized as follows:

1) Speed – How long does it take to build a web page using the editor?

2) Abstraction – How closely does the content in the editor match the “front end” content when you are creating or editing a page?

Thrive Content Builder For WordPress

As you can see from the above image, what you see in the content editor looks nothing like what you see in the front end. This means that users have to abstract what the content will look like when working with complex layouts. Other solutions require taking a number of steps before you can begin configuring your page layout, or endlessly going back and forth between tabs and performing tweaks and updates to see how your content is coming along, which interrupts the creative process, as you wait for your updates to reload.

Many WordPress web developers have tried to come up with various solutions to try to make content editing easier. These range from plugins you can install on your site that add new functionality to the editor, to themes that offer built-in features like drag and drop editing …

Thrive Content Builder For WordPress

(WordPress “drag and drop” editors aim to make creating complex layouts easier!)

Some solutions end up requiring so many page design features, that users need to learn how to work with complicated-looking front end editors …

Thrive Content Builder For WordPress

Many of these alternative solutions work, but they don’t address the fundamental challenge of using HTML and shortcodes as described earlier. Creating, adding and editing non-linear content on a page becomes overly complicated, involves multiple steps and doesn’t match what users expect to see on the “front end.”

If you want your web content to look “just right” quickly, this can become quite frustrating.

Ask yourself this …

If there were no technical constraints, how would you like your web page builder to work?

Now that you’ve asked this question, imagine the following scenario …

  • You look at your content and if you spot something that needs to be fixed, simply click on the content and start typing. Your content has been instantly changed.
  • You just drag and drop items around the page, and the page looks exactly as it will appear on the front end without having to mentally abstract from HTML or shortcodes.
  • You have an idea for a specific piece of content that you’d like to add, so you immediately begin typing, and you build your web page on the fly, without delays, no switching tabs, and without waiting for new content to republish and reload.

Would this not be the ideal way to build content for your web site? Just click-to-edit and drag and drop elements around the pages?

Thrive Content Builder - Click-To-Edit Drag And Drop Content Builder For WordPress

(Imagine being able to create complex web page layouts in real-time for your web content with no technical constraints!)

If you are ready to change the way you create content in WordPress site, then here is a plugin that you may want to consider using …

Thrive Content Builder – WordPress Click-To-Edit Drag & Drop Content And Landing Page Creation Tool

Thrive Content Builder - Click-To-Edit Drag & Drop Content Creator And Editor For WordPress

Plugin Description

Thrive Content Builder is a revolutionary WordPress plugin that lets you quickly create and edit content on your posts and pages with a powerful click-to-edit and drag and drop content editor.

Thrive Content Builder - Click-To-Edit Drag & Drop Content Builder Plugin For WordPress

Thrive Content Builder provides you with a new and exciting way to set up conversion-focused pages on your WordPress website.

Once installed, Thrive Content Builder adds a visual content editor and a sidebar menu that lets you click, then drag and drop elements on your web page …

Thrive Content Builder Plugin

(Thrive Content Builder adds a new visual content editing option to your WordPress site)

The Thrive Content And Landing Page Builder plugin is actually a combination of the Thrive Content Builder and Thrive Landing Pages plugins combined into one, plus an additional plugin feature called Thrive Lightbox.

Thrive Content Builder

We will cover each of the above plugins and how all of this powerful functionality works together to help you transform and improve your web site and create amazing marketing pages, streamlined landing pages and engaging content.

Thrive Content Builder

You can easily add complex design layouts to your web pages using drag and drop elements …

Thrive Content Builder

Every element on your web page can be created, changed and customized by ”clicking-to-edit” and “dragging and dropping” things around the page …

Thrive Content Builder - WordPress Click-To-Edit Drag & Drop Content Builder Plugin

Once elements have been added to your page, you can then continue to customize them without going through additional steps or opening more settings screens …

Thrive Content Builder Plugin

The built-in Thrive Landing Pages also lets you work inside highly attractive landing pages that can just as easily be edited or customized …

Thrive Content Builder Plugin For WordPress

Thrive Content Builder and Landing Pages is simple, easy to use, and ideal for all WordPress users at all levels. In fact, working on content with the plugin installed is so effortlessly simple, that the developers warn that once you start using it, it will ruin the experience of using all other content editors forever, and you’ll never look back!

More info: Thrive Content Builder

Tip

The integrated Thrive Content Builder and Landing Pages plugin was created by the same team that developed Thrive Leads, another terrific plugin for WordPress that we have recommended on this site.

Go here to learn more about the plugin:

Benefits

Here are just a few of the benefits and advantages of using Thrive Content Builder to speed up your page design and content creation process:

Fast And Simple To Install And Configure. Be Up And Running In No Time.

Thrive Content Builder is very easy to install. Just upload a zip folder that contains the plugin to your Plugin folder via your admin user section and activate.

Real-Time Content Building And Editing

Thrive Content Builder is is not only simple to use, it also lets you create and edit content in real-time.

A Truly Visual Content Editor

With Thrive Content Builder installed, what you see as you work within the editor – fonts, elements, page layouts, etc. is exactly what you get on the front end of your site.

Thrive Content Builder Plugin For WordPress

Some additional plugin benefits include the following:

  • Add Beautiful Page Layouts With Drag-And-Drop Ease: Create any layout you can imagine with drag and drop ease.
  • Add Customizable Elements With No Shortcodes Required: With the Thrive Content Builder plugin you not only get a click-to-edit content editor, but the plugin also includes a jaw-dropping collection of customizable design elements that you can use on your layouts without using shortcodes, like flat design elements, feature grids, page section dividers, responsive maps, etc.
  • Distraction-Free Content Creation: Not having to deal with technical stuff, or wait for the content to reload frees up your attention and allows you to build the pages your business needs, quickly and without having to edit code or click through multiple layers of menus to get what you need done.

Thrive Content Builder - WordPress Plugin

(Create, edit and customize web page elements like testimonial boxes, pricing tables, content reveal feature, dividers, responsive videos, etc.)

Plugin Features

Thrive Content Builder offers web site owners many great features. Below we have listed just a few:

  • All WordPress Editor Functionality Is Preserved: You have access to all of the regular WordPress text editing options that you are used to (e.g. bold formatting, justified paragraphs, font styles, etc.),
  • Drag And Drop Multi-Style Elements: The plugin adds a “drag and drop” table of multi-style elements to your post or page screen when editing content.
  • Conversion-Boosting Elements: The plugin includes various eye-catching and customizable elements that will help increase your sales conversions, including buttons and call-to-action elements, testimonials, and guarantees. In addition to being customizable, multiple design options are also available for various elements.
  • Responsive Element Design: Add responsive columns, boxes, content section dividers, e.g. which will resize and display great on different device screens.
  • Add Animation Events To Web Pages: Thrive Content Builder’s Event Manager feature lets you insert animated page elements, trigger lightboxes and more!

Thrive Content Builder - WordPress Click-To-Edit Drag & Drop Content Creation Plugin

(Add Animated Elements To Your Pages)

Thrive Landing Pages – Landing Page Templates

Landing page sets are web page templates that work together logically and use the same conversion-optimized design language to take your visitors all the way from signup to purchase, product download and more.

Thrive Landing Pages Plugin - Landing Page Sets

(Thrive Landing Pages gives you access to conversion-optimized page templates)

Thrive Landing Pages – Benefits

  • Hosted on your own WordPress site
  • Save time and money building landing pages
  • 100% conversion-optimized web page templates
  • No web coding skills needed
  • Works with any WordPress theme

Thrive Content and Landing Page Builder not only lets you create beautiful-looking content in your WordPress posts and pages, but you can also choose from dozens of professionally designed, conversion optimized landing page templates and fully customizable …

Thrive Landing Pages - Landing Page Sets

(Thrive Landing Pages provides sets of templates that work together logically and use the same conversion-optimized design language)

There are over 30 templates available, with more templates being worked on. In addition to the templates that are currently available, expect to see new templates in the future for email lead generation, sales pages, course pages, personal branding pages, webinar pages and more.

Fully Customizable And Flexible Landing Page Template

Typically, to be able to fully customize landing page templates, you would need to either hire a web designer to do the work, or learn web coding languages like HTML and CSS and figure out how to edit the page code yourself.

As Shane Melaugh, co-founder of Thrive Themes says …

“There are many ways to get a pre-designed page published quickly, but the problem comes with customization. Total design freedom requires either hiring web developers to do the work for you, or learn how to do it yourself, which involves learning how to code or use complex editors. Customizable usually means complicated, expensive or time-consuming. So, you can either have something that is fast and easy to set up, or something that is customizable and flexible. But you couldn’t have both … until now! With Thrive Landing Pages you get the best of both worlds for creating conversion-optimized web pages.”

Thrive Landing Pages gives you beautiful pre-built page templates that are fully optimized and ready to go, and complete design freedom that lets you change and customize anything on your page …

Thrive Landing Pages Plugin - Landing Page Templates

With the landing page templates included with this plugin, you can:

  • Modify text in all headlines, bullet points, buttons, etc.
  • Remove text, images or any other component of your landing page
  • Replace all background images and background colors
  • Edit the color of text, links, buttons, etc.
  • Use your own fonts
  • Use your own images and graphics
  • Change the size of the content area
  • Rearrange the order of elements on your pages
  • Translate pages into different languages
  • Add any type of custom content inside your pages
  • Start with a blank web page and create your own templates, or even build a custom landing page templates library.

Thrive Landing Pages - Landing Page Sets

(Change and customize any element of your page templates)

Transform Your Website Into A Powerful Marketing Machine With Thrive Lightbox

The Thrive plugin package also includes the Thrive Lightbox plugin, which lets you add fully editable 2-step opt-in forms and animated elements to your content pages …

Thrive Lightbox Plugin - Transform Your Web Site Into A Marketing Machine

(Add lead capture forms and animation to your WordPress website with Thrive Lightbox)

Thrive Lighbox Two-Step Opt-in Forms

A two-step opt-in process can increase your conversion rates. Visitors click on an image or button, and then they are presented with your opt-in form …

Transform Your Site Into A Powerful Marketing Machine With Thrive Lightbox

(two-step opt-in forms help to improve your conversion rates.)

Event Manager

An “event” consists of a trigger and an action. You can make opt-in forms appear when your visitor clicks or hovers over a button or an image, or when someone scrolls down to a certain point on the page. You can also use the Event Manager to animate images on your pages, using a range of animation effects (e.g. fade out, slide in from right to left, rotate, etc.

Thrive Lightbox Event Manager

(Set up and manage events on your sales pages with the Thrive Lightbox plugin)

Lightboxes and events are created automatically for your landing pages, but you also have complete control over all events, triggers and design.

Thrive Lightbox Event Manager

User Feedback

Below are some of the testimonials and comments that plugin customers have submitted for Thrive Content Builder:

”Wow! This is just getting better & better. This plugin is making my websites look so professional. Keep up the great work and thank you for the new features. Ladonna Ragalin”

***

”Your stuff is beautifully designed, fast and has great options for marketers that you just don’t see with other themes. Great, great job! Absolutely love Thrive! David Coleman”

Thrive Content Builder – Useful Tips

Thrive Content Builder works with any WordPress theme, not just with Thrive Landing Pages. Note, however, that you cannot use Thrive Content Builder to edit content that was not created with the plugin.

You can add WordPress short codes inside Thrive Content Builder or Thrive Landing Pages and they will display correctly on on your site.

Thrive Lightbox works with any content built using Thrive Content Builder.

Thrive Content Builder Plugin Support

Thrive Content Builder and Landing Pages Plugin comes with free updates, new landing templates and upcoming features. The plugin developers are constantly working on adding new features and improving existing ones.

Thrive software is well-supported, and users get lifetime software updates, and 1 year unlimited support with their purchase, backed by a risk-free, thirty day, 100% refund guarantee.

This is an exciting product for WordPress users that will just keep getting better.

Plugin Pricing

At the time of writing, the pricing information shown below includes all three components described above (Thrive Content Builder, Thrive Landing Pages & Thrive Lightbox):

  • Single Site License – This enables you to activate the plugin on one website only. Includes full feature set, unlimited updates and one year of unlimited support. Price = $59.00.
  • Unlimited Sites License – This license option lets you set up the plugin on all of your personal sites. Includes full feature set, unlimited updates and 1 year of unlimited support. Cost = $87.00.
  • Agency License Edition – This allows you to configure the plugin on all of your own sites and all client websites. Price includes access to Thrive Content Builder, plus all Thrive Themes & Thrive Plugins. Price = $247.00 per year.

Note: Pricing for the Thrive Content Builder plugin can vary, depending on whether there are any promotions or limited-time specials being offered. The price above was correct when this content was published. This may not be the actual price charged by the product developer when you visit the product site and there may be additional upsells or one-time offers after purchasing.

Check the plugin’s website for current pricing details:

Additional Information

The Thrive Content Builder and Landing Pages plugin developers emphatically maintain that the plugin’s architecture gives you the “best of both worlds,” and help bring back the “joy of creating content.”

On the one hand, you have the time-saving benefits of ready-made page elements and beautiful, pre-designed template sets that help to speed up page design and content creation, and on the other hand, you have 100% control over the design process and the ability to change anything and everything on your web page, using the plugin’s click-to-edit and drag and drop features, that allows you to get things done without having to keep switching tabs or going through multiple steps.

For demo videos of the plugin in action, including installation instructions and tutorials, FAQs, customer help desk, contact details and more, visit the Thrive Content Builder website.

Download This Plugin …

If you want to edit something, simply click on the element and start editing. If you want to change something, you will see the change happen instantly. If you want to move something, all you need to do is drag it and drop it into its new position. There are no unnecessary steps involved.

If you want to transform and improve your web site and create amazing marketing pages and content, this plugin delivers an incredible conversion-boosting package with a single, inexpensive plugin.

Thrive Content Builder - Click-To-Edit Drag & Drop Content Creation Tool For WordPress

For more details, check out the plugin here:

***