Editor friendly shortcode: wp.mce.views

One of the coolest features WordPress offers us is the shortcode. They give the possibility to render a complex design with a lot of properties and connect an interface to it to input the values. It also can render an actual template as preview of is final result. The UI can be powered with AJAX through the TinyMCE, but unfortunately the codex of WordPress does not provide information about it.

 

The breaking issue for noob content managers.

Since the use of WP falls often in hands of people not very into the IT world, you will have to avoid scenarios where your shortcode breaks HTML tags. With TinyMCE settings, you have the possibility to isolate automatically your shortcode and give it an easy way to edit his content. A clear example is the builtin gallery system created by WordPress, from which we’ll also inherit the UI. This is called wp.mce.views.

Banner plugin.

Following a not documented example from Wordpres codex, we can create a shortcode [banner] with mce views functionalities for editing. As you should know, inside every shortcode we can put all the kind of data we require to define our element: id, content, size, position, etc. Then we can reuse these information to convert them into HTML data.

 

Exlaining missing part of TinyMCE.

The missing part from above is about the communication between TinyMCE and WordPress functionalities, for instance the banner wrap and how to render the preview.


Related content:

WordPress permalink and redirect made simple

If you are using WordPress inside a company, will come the time to change the permalink structure of your custom posts type (CPT), as request by the SEO department. I said company, because almost nobody will invest so much money for such a thing. In my case, the request has been to create a structure … Continued

Everyday Git usage

Taking the chance to work in a team environment with different developers, I’ve faced many times a lack of documentation for everyday Git commands, which personally define mandatory to avoid mess. To be clear, these occurring errors have been dictated by a change of OS which I usually work with, from Windows to Mac OS … Continued

New theme from scratch (with free download)!

Even I still wonder where I found the time to code a new website, through I have no free time at all, I finally accomplished to develop a theme also for me from scratch, using the starter theme Sage (ver 9 cames with bootstrap and needs to be cleaned, duh). The whole to-do list planned … Continued

Styleguide framework: kss

If you or your company is planning to recreate a framework, it’s mandatory to have a sort of inventory of all the components, with a word styleguide. This not only will help you to remember the markup, but will be necessary for your colleague to understand how to create elements and avoid repetition, which means … Continued