The Wunderbar User Guide

We're going to keep this simple…

…because we've observed that most of the time, the more complex something is, the less likely we are to use it.

We've long felt that way about WordPress editing. Too complicated. Too many steps. Too far removed from the context of the page you wanted the world to see. What we needed was something that let us edit with the convenience and familiarity of a word processor. Something that let us edit posts directly on the page, with a familiar bar of formatting buttons nearby so we could style things. Yeah, an editing and formatting bar would be wonderful. You could call it a Wunderbar.

In the past few years, there have been many attempts to address the limitations of the standard WordPress editor. There are theme editors and page builders, and finally WordPress itself introduced Gutenberg as a replacement editing system. We believe the Wunderbar still has a place, as it is the simplest solution with the least overhead. If your site uses a third-party page builder like Divi or Elementor, The Wunderbar is not for you. Those editors work through large numbers of custom shortcodes which directly conflict with the possibility of WYSIWYG HTML editing. On the Other hand, The Wunderbar works well with Guteneberg, and we have a special page in the support guide about this.

Installation

Wunderbar installs the same any WordPress plugin and is immediately ready to use by any user with editing privileges. While there are a few settings available under the WordPress settings menu, Wunderbar is ready to use right “out of the box” without any adjustments.

Wunderbar should function fine with most WordPress templates, themes, and plugins. If you find something that doesn't work, read through our troublshooting section below, and  don't hesitate to  contact us so we can investigate and update!

Your First Edits

At this point if you have Wunderbar installed, and you are as a logged-on WordPress admin with editing privileges, when you vist the public pages of the site you will see two additions:

  • The Wunderbar itself is visible above the usual WordPress administrative bar at the top of the page. It always shows one of two things. When you aren't in the middle of editing editing, you'll see just the Wunderbar logo:

    While you are actually editing  content, the formatting button bar will replace the logo:

     

You should see one or more colorful crosshairs near key page contents.   These are actually buttons which you click to edit the content nearest the crosshairs.

If you don't move your mouse for a few moments, the crosshairs will fade out and give you an unobstructed version of your page. (They also fade out if you move the mouse completely out of the browser window.)  Move the mouse again and the crosshairs will return.

Hover over one of the crosshairs and it will spin. Now click it. This is how you start editing. The attached content area will be highlighted in a dotted red outline and the formatting Wunderbar will appear at the very top of the screen. You can now edit this content!

NOTE: Actually, since Version 1.3, you don't have to click on the spinning cursor. As you move your mouse around the page, you'll see a small dotted-red “lasso” surrounding editable content areas. You can just double-click anywhere in one of these areas to begin editing. It's super-intuitive. There's a slight chance may not work in a few situations, so clicking the corsshairs will always be your other option.

Now that you're editing, move around with the cursor keys or your mouse. Change some wording. You can type, you can cut, you can paste, you can format the text using the word processing formatting buttons. You can even even drag photos or files into your content. Once you’ve made a few edits, click the green “SAVE” button that's visible at the far left side of the Wunderbar.

The dotted red outline will go away in a flash of color while your content is saved back to the WordPress database.

You're all done with your first edit. Your changes are immediately visible to the outside world. Wunderbar editing is that simple, that quick.

Many Formatting Options

Wunderbar's formatting buttons give you a wide range of choices. Buttons are grouped into several areas:


  • The left buttons are similar to a word processor's formatting options.
     

  • The middle buttons control font sizes, colors and styles.
     

  • The right button groups give you access to everything else you need to make a good web post – hyperlinks, access to images and documents, tables, the ability to clean up content imported from outside sources, and even edit the raw HTML of the page itself.

Details on the buttons and what they do can be found here.

What if I make a mistake?

Don't panic – we all make mistakes.

Seriously. Don't panic. Every time you save your edits a backup copy is made. Which means you can go back – not just to the previous version, but back through many versions.  First, start editing the content that you want to revert. There's a drop-down button to the right of SAVE. It contains more options.

Look under this button. You will see a drop-down list of “older versions” arranged by date. Select one. It will replace the current version, and if that restores the content the way you like it, then click “SAVE.” If it’s not the one you meant, pick another.  If none of them fit, then choose “Revert Edits” or just reload the current page.

What you can (and can't) edit

Wunderbar is primarily meant for editing the contents of posts or pages. Usually that's a single area in the middle of whatever page you are looking at. But Wunderbar can edit more: the content, the excerpts, and titles of  pages and posts. Wunderbar can edit and delete comments. Wunderbar also comes with an editable widget area and can even be made to work with many editable common sections of themes.

Your website's theme and Wunderbar's settings determine what and where you can edit. And sometimes a page will display content without any Wunderbar editing crosshairs next to it.

On your site's homepage, for instance, some content might not actually come from a database post or page. Some themes include text blocks that aren't stored as pages or posts, but as special content areas stored with the theme itself. Wunderbar can't work with these directly. HOWEVER — if you can edit these blocks in your theme, you can insert a special Wunderbar shortcode called [put_content_here] that will fetch data from a post instead — and that content will be editable. Details on using  put_content_here are available here.

Wunderbar can edit titles as well, if your theme uses them properly. But since post and page titles are handled badly by some themes, Title Editing is turned off by default. WordPress Admin/Settings/WunderBar has an option to allow title editing. Wunderbar's settings will do a review of the theme's PHP code and attempt to determine if titles are handled correctly. If we think they aren't, the title editing option won't be available. You must edit the theme files in question in order to make title editing available. Read more about admin settings here.

When you use Wunderbar to edit titles, you won't see the formatting toolbar. Titles are supposed to be short – usually single lines of content whose format is controlled by the design of your theme. Because of that Wunderbar doesn't allow you to format them further with the toolbar.

If you have the Advanced Custom Fields plugin installed and running your website, The Wunderbar will let oyu edit many of these fields too. Read more in our post called Comments, Widgets, and More.

An area is editable –
but I don't want it to be!

Since Wunderbar can edit several different types of content, you might see more edit crosshairs on a given page than you really want.  For example, your theme might list all your old post titles along the side of the screen, and Wunderbar will normally allow you to edit each one. If you'd rather not permit this, you can tell Wunderbar to ignore them. Start by editing any one of them, then click the downward-pointing arrow button next to the save button. You'll see one of the dropdown options is “Disallow Editing in this area.” Select that. Your page will reload and that part of the page should no longer be editable.

Wunderbar makes it's best guess about what “this area” of the page actually is. It might be a bad guess. In such instances, a visit to the Wunderbar admin settings will let you adjust it or remove it entirely.

There are actually several different ways to configure what/where Wunderbar can edit or not edit.

Click here to read more about your options.

Wunderbar editing and shortcodes

Wunderbar plays well with most WordPress shortcodes. Because shortcodes generally exist in order to display more content, while you are editing Wunderbar will display the shortcode itself rather than its output. That way you can change a shortcode's parameters or enter new shortcodes.

Some themes/plugins rely on shortcodes a lot to handle content. They build content blocks out of long nests of shortcodes. If this is the way your pages are built, Wunderbar won't be of much help, because all these shortcodes are conflicting with the very purpose of Wunderbar, which is to provide you with straightforward, visual WYSIWYG editing.

Hmmm. Maybe you don't need the other plugin anymore.

Or maybe you don't need Wunderbar available for that particular page or post. If so, from the regular WordPress administrative page/post editor you can add the tag “wunderbar_offjust to that post. Wunderbar won't be loaded then.

2 Comments

Dmg

I use visual composer a lot but dislike their frontend editor. If there was a way for your product to not display the shortcodes and only edit the output ie: whats on the screen leaving, shortcodes alone then I think you would have a very unique solution that a lot of people would buy, I am yet to find a simple inline edit solution that can push shortcodes out of the way and let people just edit the text.

EXAMPLE the following with shortcodes for two columns and text blocks in looks awful but its really just the text outside the brackets that needs editing……
[vc_row][vc_column width=”1/2″][vc_column_text]
I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_column_text]
I am a text block.
Click edit button to change this text. “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.” Do it all on the FRONTEND.[/vc_column_text][/vc_column][/vc_row]

Please let me know if you ever do something like this.

Reply
admin

I’m with you – I’m not font of Visual Composer’s front-end editor. It’s slow and bulky and kind of awkward. If there was a better way to work within it, it would be A Good Thing.

But due to the way shortcodes work, what you’re looking for is difficult to pull off. It’s easy enough to enable editing with the shortcodes enabled so that they generate their HTML — after all, that’s what happens to the page normally. What is quite hard is to convert the resulting content BACK into shortcodes again. You’d have to be stopped from trying to modify columns and sections and such. There might be some way to edit just the small chunks of the content BETWEEN shortcodes — that’s probably the most likely direction which can see happening – but it would be a fairly significant future enhancement. But I’ll give it some thought.

–Larry

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *