If there’s one thing I know (and love) about WordPress, it’s that editing content on pages and posts is a lot easier than you think it’d be.
The backend of a page may look a little scary at first, but one thing you recognize right away is the visual editor, the TinyMCE WYSIWYG visual editor to be exact. It’s integrated into WordPress out of the box, and it has simple, straightforward text formatting options.
No knowledge of HTML or CSS necessary, which most clients love.
When I help clients get familiar with their new website, adding and editing pages is always a top concern for them—they think they need to learn HTML to change anything on their website.
When I show them this WYSIWYG (What You See Is What You Get) editor, it’s like something ‘clicks’—they get it, and they’re usually quite relieved that they don’t need to take a web development class to understand what’s going on.
It seems like clients are always a little more at ease when they see they can edit and add content, format text, and insert images in WordPress as easily as they might in Microsoft Word.
Things become problematic when I try to show them how to change content contained in widgets.
The Problem
When I try to explain how to edit text in the native text widget, clients get confused.
The themes we build off of and create sites with are “widgetized.”
The home page, header, sidebars, and footers usually consist of several widget areas that make adding and organizing content very simple—you just click and drag them.
The built-in WordPress widget for adding text and images is a simple text box, which is great if you know a bit of HTML and have a knack for Googling.
For our clients, it’s not exactly easy to explain widgets, widget areas, and HTML.
“Why Isn’t This the Same as Editing the Pages?”
I’ve had this question quite a few times from clients. What could I tell them? Other than, “That’s just the default WordPress text widget.”
The Solution
The solution is obvious in retrospect—get that same simple WYSIWYG editor and slap it in a widget.
We discovered this super-duper, handy, FREE plugin by the folks over at Black Studio called TinyMCE Widget.
The name is pretty self explanatory:
It brings the TinyMCE WYSIWYG visual editor into a text widget!
Now, explaining to a client how to edit content on their homepage (or anywhere we’ve placed a widget), is much simpler—and they don’t have to learn HTML.
The Difference
So we built a website for a local Denton 5k that will benefit the mayor’s Summer Youth Jobs Program.
On one widget area on the home page, we wanted a simple 4-column layout for the sponsor’s’ logo and just a sentence of text describing the race.
If we wanted to achieve this with the default WordPress text widget, first we’d have to go to the Media Library and upload these 4 logos. Once that was done, we’d come back to the widgets editor and manually add the Genesis Column Classes shortcode.
Then we’d have to navigate back to the Media Library and click each image to get its respective URL, then back to the text widget and add the appropriate HTML to get that image to show up. The most basic way to do this would be: <img src=”image-url-here”/>.
That doesn’t even account for the fact that we want these images centered and at a specific width and height.
I Lost You Already, Haven’t I?
If you skimmed the above, you can see how tedious and daunting this sounds. But it doesn’t have to be.
In short, this is what the above code would have looked like using the default text widget:
Here’s what the Black Studio TinyMCE widget looks like:
Can YOU spot the differences? 😉
The Rundown
Instead of manually entering the 4 column shortcode, all we do with the TinyMCE widget is click a button and BAM! Shortcode added.
*Note: You have to be using the awesome Genesis Framework for it to be THIS easy.
Next, instead of the back-and-forth with the Media Library, we’d simply insert images using the all-too-familiar Add Media function:
We need to center these images, right? Simple. Click on the image and use the center formatting button:
I don’t think it gets anymore easier than this, folks.
Try It For Yourself
I know I covered a lot here, but it might seem more complicated than it actually is, so give this a try for yourself.
Upload a copy of the Black Studio TinyMCE plugin to your website by downloading it here.
Run a backup first, of course. We haven’t experienced any conflicts with this plugin, but you can never be too sure. Better safe than sorry, I always say.
Or I have been saying after my last little mistake.
Since discovering this plugin, we’ve added it to our set of default plugins that we add to every site.
Training clients in managing text widgets has become a whole lot easier, and it now comes with less questions on styling text or adding images.
Check it out and see what you think! It may make managing your site a whole lot easier.
