WordPress Visual Editor: Page Builder, Shortcode, TinyMCE

12

Content in a site is the main dish, and creating content in WordPress is simple. WordPress uses TinyMCE as content editor, we can also spice up our content with shortcodes to create complex content layout.

Last month I launch WP-Editor.com. A simpler way to create buttons, boxes, even column in WordPress Visual Editor. It’s still very limited in term of functionality, but it’s amazing to know that we can do this in WordPress default content editor.

Building Restaurant Site in WordPress

But what if we can do this?

http://www.youtube.com/watch?v=ctnCE7ODaZY

I was working on a restaurant site and i need a simple way to create restaurant menus (food menus, not navigation menus) so the restaurant owner can create easily create food item, re-order food item, delete food item, upload photo of food item, add price, etc.

Custom Post Type is not suitable for this

The first thing i try, is to create custom post type to store food item. Justin Tadlock create a Restaurant CPT plugin (still beta) where user can create each food menu item as post entry, tag each food item using custom taxonomy (maybe beverages, main dish, pasta, etc). But to create a page about Ice Tea is just too much for this site.

It’s too much hassle to write each content, it’s hard to explain to user, it’s hard to re-order/sort them. Yes there’s a plugin for that. But it’s still confusing for regular user.

  • Each entry will have their own page, and i don’t need this, so i need to disable singular pages for food items.
  • I need to create a page template to display all food item.
  • User cannot add content in between food item if needed.
  • Too much to build for simple feature I needed and user experience is not so great.

I don’t hate Shortcodes, but…

It’s awesome. Shortcode API is very simple, it’s easy to create one. But it’s frustrating to use. It’s even more frustrating to try to explain how to use it. Even fool-proof solution using tick box to build the shortcode tag and inserting them is too much. And it look really messy in the editor.

Page builder is just too complex

What user need is simplicity. Yes, page builder is simple, and it might be the future of WordPress editor. There’s several plugin that did this very well.

It’s simple, but in my opinion still too complex. It’s just added more complexity in writing content. Too much features. What i need is less time to explain to user, less time to support, and more time to be productive.

Why not using WordPress Editor and TinyMCE API?

If we can build this functionality in WordPress Visual Editor, it can solve a lot of problem. Not all. But a lot.

Problem solved:

  • Better user experience.
  • Simpler, less error.

What do you think about this solution?

I would love to hear what you think about this, just leave a reply or contact me.

12 Comments

  1. André

    Great idea, I’ll give it a try with my next project, maybe in combination with my font awesome glyph inserter. Gretings from germany!

  2. Alessandro

    Yeah, that’s a nifty solution for custom content modules, it would be great if you could share a sample of how to create such TinyMCE plugin, do you plan to update your plugs for the upcoming integration of TinyMCE 4.0 in WP?

    • David

      basically it’s the same/similar code with my wp-editor.com project:
      http://wp-editor.com/

      about tinymce 4, i haven’t test that,
      I still got several clients project, and some other project i need to do.
      i’ll do some testing in the near future.

      • Alessandro

        would you kindly share the restaurants code as a sample, or a snippet on how to insert an add image button in the content area ?

        about migration to TinyMCE 4.0, on it’s official site they say some old plugins will work out of the box, other will need ‘compat3x’ plugin.

        it seems that wordpress will include ‘compat3x’ by default http://make.wordpress.org/core/2014/01/18/tinymce-4-0-is-in-core/

        there’s a chance the plugins will work with WP 3.9 untouched

        • Alessandro

          Tested with WP 3.9 beta1 and unhopefully WPE columns doesn’t work and breaks tinymce completelly.

          The error is “ed.onEvent.add is undefined”

          I’ve verified that compat3x plugin is there, and yes, it has already been merged but not solving back-compatibility issues in this case.

          Do you have plans to release WP 3.9 compatible versions before it cames out?

  3. André

    I now have played around with your plugin for a few days. One thing that you probably could improve is the responsiveness of your columns. It would be nice, if they float on smaller devices.

    • David

      i actually want to add that, and decide that i’ll leave the responsiveness to theme author/developer using the plugins.

      not all theme are responsive. and not all theme have the same media queries breakpoints. to do a proper calculation on how the column would work in responsive design, we need to check it with content width, font size (and font family), etc.

      it’s actually very easy do add something like this.

      • André

        … in that case you probably should offer some action hooks to add user classes to the generated columns, plus the ability to get rid of the plugins frontend styling 😉 That’s how I have done it while playing around.

        • David

          user classes is not an option. it’s going to be a support headache/or something developer would call “dependency hell”.

          if a devs/user filter the html/element classes, it’s going to be a problem when i update the plugin, etc. btw javascript in wp (which these plugins uses heavily) is not as flexible as php (at least in my current skills)

          i think the classes provided is already flexible enough.

          and you can remove the styling on the front end and even the back end (editor style).

          check out the docs section:
          http://wp-editor.com/docs/

          you can do something like this:

          add_filter("wpe_addon_columns_load_front_css","__return_false");
add_filter("wpe_addon_columns_load_editor_css","__return_false");

Comments are closed.