Remi's blog

Making WordPress shortcodes more user friendly

—

by

Remi
in

Every person working with WordPress knows shortcodes. Are they a good thing, or are they bad thing. Good question. Well, from my point of view the shortcodes concept is an incredibly amazing feature that makes me love WordPress even more. But, yes, i have to admit that shortcodes are a bit confusing for lambda users.

What are shortcodes ?

For those who don’t really know what i’m talking about, shortcodes are content in brackets that are interpreted on the frontend. Nowadays nearly every premium WordPress theme uses shortcodes. I’m not going to go deeper in the explanation of  “what is a shortcode”, i would just recommend you to read this page instead. I want to talk about another point.

Are Shortcodes user friendly ?

This is the main goal of this post, are shortcodes user friendly ? This question has already ben asked here. Well, i would say that for developers and people working everyday with WordPress, the answer would be YES. But about our clients ? Is a client able to use shortcodes ? I’m afraid not. Shortcodes are too complicated for most of WordPress users, just simply because they are “wysiwyg” (What You See Is What You Get). A user that sees this:

probably won’t understand it. Well, this is pretty complex notion to understand.

Is it possible to improve shortcodes?

So, i decided to work on something to make shortcode more user friendly. I haven’t released any code, i’m just working on local host, but i wanted to share this little preview video of what can be done and ask you what you think about this, how this could improve etc… In two words, what i’m doing here is replacing shortcodes on the fly by a zone containing an image. On double click on that zone, the shortcode parameters can be modified. I also added a button to the tinyMCE editor. It’s pretty much the same process used by the built-in gallery shortcode, excepted that i added double click feature, and few more tweaks.

So, please share your thoughts in the comments section, i can’t wait to read what you think about this!

EDIT: For those who asked, yes the shortcode displays on the frontend (to visitors, if you prefer) a customized content taking into account shortcode parameters. The blue zone with my logo isn’t what visitors see, and you can edit the blue zone to be whatever you want (it’s a div, so you can style it with CSS, insert images etc…).

, ,

21 responses to “Making WordPress shortcodes more user friendly”

  1. Topher

    Man, I’ve wanted to do stuff like that for a long long time, that’s fantastic. Please please release the code somehow.

    1. Rémi

      Sure, when this will be improved !

  2. William

    Hi Rémi,

    Look great, will definitely wait for the release :)

    Some question :
    Shortcodes are used to display content in another way, how will you deal with that ? Do you plan to insert the content on the preview ? As an example for Tabs or Toggle shortcode ?
    Maybe could you add the title of the shortcode on block generated ?

    1. Rémi

      Hi, the shortcode display on frontend can be whatever you want. For now this approach would work for all non repeat le elements.

  3. Zach

    Hey Remi,
    This is an awesome idea! I think you’ve nailed every developer’s thoughts on shortcodes, “they’re awesome, but clients just don’t understand them”.

    And it’s one of those things that requires us to take a step back and think about our process. To us, [do_magic_stuff] means the world – automation and ease-of-use. To clients, it’s arbitrary text that means nothing and gets in the way of their editing experience. The tab example is a craptastic example of where shortcodes may not be best for. How would we implement tabs for clients? There lies the choice between giving the client access to all that they want – and providing them an experience that is expected yet intuitive.

    Think about the WYSIWYG editor buttons – the first thing I do is lock that baby down. Clients don’t need access to change font-families or have blinking text, but some may feel that’s restrictive. It’s these types of decisions that define how you present your product to clients. What about the Settings area in WordPress? I recall so many times in the past that I used to say, “oh, so you see that settings area down there? Yeah, just don’t touch that”. This muddled around until I spent the time to learn permissions and how to IMPROVE the experience by TAKING THINGS AWAY for the sake of clarity.

    Shortcodes are an awesome idea and what you’ve started is exactly what I’d like to see. More visual representation of what they’re doing. No, I don’t think that if you give them the ability to insert a Gravity Form that it should actually show the form, but give them more context (like a graphic with a label like you did) so when they do come back to this article later on, they’re not confused on what the heck that odd bracket text means.

    This is an awesome start and am excited to see where this goes. Thanks!

    1. Rémi

      Thanks Zach. Yeah this is true, sometimes we have take off some elements to make the user experience better, but for shortcodes it’s a bit different. It’s so useful, but so misunderstood by clients, that’s a shame. I don’t know if what i’m working on is good enough, but i’m sure that i’ll try to implement this in all my plugins using shortcodes. For now i only shared the code with Pippin, and i’m really excited to see what’s he thinks about it and how this can be improved.

  4. a|x

    This looks great, Remi! Looking forward to seeing the source, if you decide to release it. I’m working on a shortcode plugin at the moment, and have implemented a TinyMCE button that brings up a shortcode helper page ( following Pippin’s tutorial, in fact), but this definitely is the next level in user-friendliness.

    Keep up the good work!!

    1. Rémi

      Hi, thanks! My next plugin is using this method! It should be released soon!

  5. a|x

    Hi again Remi.

    I’m on the way to getting something like this working with my plugin, but I’ve hit a snag, and I was wondering if you’d hit the same one, and if so, if you’ve managed to work around it.

    My progress so far, and the problem I’ve encountered is described here:
    http://wordpress.org/support/topic/updating-existing-shortcode-from-custom-tinymce-popup?replies=1#post-3597650

    Any tips on how I might solve this one? As I said in the forum post, I’m guessing some way of uniquely identifying each shortcode instance might be required, but I’m not sure how I might go about this…

    Any tips would be much appreciated!

    Thanks very much, and keep up the great work!

    a|x

    1. Rémi

      Hi Alex, yes i have a full working version of this, i added it in this plugin: http://codecanyon.net/item/sweet-wordpress-testimonials/3590272?ref=corsonr check the video i attached to it and let me know if it’s what you’re trying to do. By the way, what problems do you have?

  6. a|x

    Hiya,

    thanks very much for getting back to me so quickly. Yep, that’s exactly what I’m trying to do.
    It’s all working fine, except for one thing. If I add more than one instance of my shortcode, and try to update one of the instances using my popup ‘shortcode helper’ panel, all other instances of the shortcode are deleted by TinyMCE when I submit the changes. Did you come across that behaviour yourself?

    a|x

    1. Rémi

      Hey Alex, i faced the same issue and solved it. It’s just because of a single line in your code that you should delete: tinyMCEPopup.execCommand(‘mceRemoveNode’, false, null);

      If you follow the two tutorials you mentioned, then that should do it.

  7. a|x

    That’s cool, works a treat! Now I just need to work out how to parse the shortcode on my popup page and set options in the form.

    Thanks again,

    a|x

    1. Rémi

      You’re welcome!

  8. Tom McFarlin

    You’re hitting a point a significant point for me – I’ve almost exclusively avoided using shortcodes in my plugins and other work because of the poor user experience.

    The editor is for writing words and as soon as you introduce the ideas of tags to users – no matter how ‘meta’ they are – it immediately becomes more complicated.

    That’s the exact opposite of what we should be striving for.

    Props to you on the work above – eager to see it evolve.

    1. Rémi

      Many thanks Tom. I actually already implemented this methods on some of my plugins, but it seems to have a few conflicts, but by the way it’s working. I did it into Sweet WordPress Testimonials.

  9. conualfy

    Hello Rémi!

    Cam you please share the code? It seems to be working quite well..

    Thanks,
    F.

    1. Remi

      Hi, i have used for some premium plugins, but it still needs some improvements.

      1. Ahmed Badawy

        Even without improvements please if you can guide us to a primitive way (The base idea) I hope we can develop and improve it our self

  10. cedric_charles

    Hi Remi !

    Thanks for your great plugin ! Is it possible to replace the button by a select box where all my shordcodes will be listed. Than, the popup will display depending on the shortcode that is selected.

    Thanks a lot !
    Cédric

    1. Remi

      That’ could be done, but it goes beyond the scope of this post! ;-)

Leave a Reply