Designs & Code

Design, Development and WordPress

Forget About Shortcode Buttons – Use visual buttons in your post editor

Posted by & filed under CSS, Development, HTML, PHP, Plugins, TinyMCE, Uncategorized, WordPress.

Ever since I started using WordPress I’ve appreciated the power of shortcodes.  But there has been one thing (well two things) about the visual editor of WordPress that has always niggled away at me.

Its having to use shortcodes for some really simple visual elements, and even more than that, not being able to edit them in a better way – this especially applies when I’m doing client work.

There are some great plugins that add a button to the editor toolbar, which allow you to create a shortcode via a popup (you don’t have to type out the shortcode manually).  But what none of them seem to do is allow you a way to use that configuration popup for already existing shortcodes within the page – for me this would be the perfect way to edit a shortcode.

After previous failed experiments I gave up on trying to improve this, it all boiled down to the flexibility of the in built TinyMCE editor – which was beginning to get stuck in the past and not providing a reliable enough experience across browsers.

That is, until the recent announcement that WordPress 3.9 will be using the new TinyMCE editor version 4.0.20. With some consistency improvements across browsers and better copy and paste functionality in the new version of TinyMCE we have the power to do more, visually, with the editor while providing a reliable user experience across modern browsers.

So, I’ve created this plugin as an experiment, to test what the new TinyMCE can do with WordPress and to begin to tackle the two problems I first mentioned.

Drum roll please…

What are Forget About Shortcode Buttons?

Forget About Shortcode (FASC) Buttons plugin for WordPress is a visual way to add buttons in the post editor screen.  Instead of adding shortcodes in the post editor, you insert real, styled buttons – making the process of adding buttons to your posts and pages much more natural whilst improving the appearance and usability of the post editor.

FASC Buttons tries to be as clean as possible with the html, only using data attributes for necessary features – the buttons you use in the post editor use the exact same classes as on the front end of your site with no extra or hidden markup to make them behave this way.

Editing a button couldn’t be easier – just double click a button and an options panel appears allowing you to completely reconfigure the current button – beats tedious shortcodes and using precise syntax!

FASC Buttons will only work with WordPress 3.9 and up.

Download

Download Forget About Shortcode Buttons Plugin from the WordPress Plugin Repository:

WordPress Plugins

How to use

Once you’ve downloaded the plugin and installed it in to your WordPress site, you will find a new button on the toolbar in your post edit screen.  This will display a popup allowing you to create a new button in your post/page. Create your button, click submit and that’s it! You’ll be able to see your new button in the post editor as you would on the front end of your site – and if you’re not happy with it, just double click one of the buttons you have created to edit it 🙂

Documentation

It should be pretty straight forward to use these buttons with virtually no learning curve.  However I’m sure there are some things that need covering in some form of documentation  – check out the project page for now for some info about compatibility:

FASC Buttons Project

 

 

120 Responses to “Forget About Shortcode Buttons – Use visual buttons in your post editor”

  1. There is a sort of incompatibility between the plugin UPDRAFT PLUS and the new version of your plugin “FORGET ABOUT SHORT CODE BUTTONS.

    My site uses both plugins the Updraft plus for the backup and restores, and your plugin to built up buttons. Everything was OK until the last update in your plugin and then the back up plugin doesn´t work. The support team of the UPDRAFT plus says that it has to do with the java, that the solution was to desactive all the plugins, installed and then active one by one until I find the plugin that makes that the updraft plus doesn´t work, so I did, and the “culprit” was your plugin.
    As both plugins are very popular and very usefull, it will be great if you both talk about this incompatibilty and fix the problem that arised since your last update.
    Best regards.
    Pablo Marcos

    Reply

    • Ross

      Sorry for the delay, I will be looking at this next week – I’ve been away and seen the various posts regarding this – I fully intend to get FASC back up with compatibility but time is the only restriction I have atm.

      Thanks for letting me know and persisting! 🙂

      Best

      Reply

  2. The front-end creation dialog does not work for me on my Genesis sites (tried on multiple sites). I have to create the button I need on a non-Genesis site and copy and paste the code to Genesis. The button works, just not the creation dialog.

    Reply

    • Ross

      Hmmm, we just release 2.0.0 which has quite a code overhaul, I’m hoping it will work now. Pls check repo in the next few minutes for the release.

      Thanks

      Reply

  3. Gómez

    Hello

    When trying to insert a button on the page I get the following message:

    Forbidden

    You don’t have permission to access /wp-content/plugins/forget-about-shortcode-buttons/assets/js/fasc-buttons/popup.php on this server.
    Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

    Is there any solution?

    Thanks for your reply
    a cordial greeting
    Gomez

    Reply

  5. Anna

    Hi Ross,

    Great work! i really appreciate it and i am currently using it on my 10 websites. I am using it as a download button and in some cases as a reference to other websites. As i am a regular user of this plugin, I was thinking that it would be awesome if you could add a checkbox to make the link “nofollow”. There is a checkbox to open link in new window but i always have put “nofollow” tags manually whenever needed. I am not complaining about it 🙂 it really is an awesome plugin and much lite coding with no complicated settings. Sometimes a very large post with a lot of outbound links makes it really difficult to find and put nofollow tags. The worst thing is when you already have put 39 nofollow tags and then realize that oh there was 1 more left and when you will switch back to “Text” tab, in some cases all of your 39 nofollow tags will also disappear and you will have to put all of them again :/ .

    Moreover, how about also adding recaptcha option? users like me can enable captcha enabled buttons to downloads to prevent bots and spam. I hope these additions will take this plugin to next level 🙂

    Thanks, Anna

    Reply

    • Ross

      Hey Anna

      Thanks for the message, its always nice to hear when people are using it on multiple sites 🙂

      I’ve actually added a nofollow option in our v2 beta, do you want a copy to test?

      The captcha idea sounds nice, so they have to pass before they get access to the link?

      Best

      Reply

      • Anna

        Hey Ross,

        Thank you for appreciating my idea. Sure i can give a try to beta version. 🙂
        Yes exactly, user have to pass captcha before get access to the link. It will really help to fight spam and bots as i have encounter a situation where a bot was repeatedly downloading with 10s interval and that cause my server down. It took me 30 min to find the exact IP and blocked it. It would be prevented with captcha. Looking forward for this upgrade.

        Good Luck

        Reply

      • Anna

        Hey Ross,

        Any update for nofollow attribute in buttons? It’s been 4 months since you tell us about upcoming update with No-follow attribute. Just wondering if it is ready now? I am really excited and needy for it. 🙂

        Thanks.

        Reply

  6. Hey I am unable to over write this plugin css with my child theme style.css file. Why is it happening? button-style.css is loading after chile theme style.css.

    Reply

    • Ross

      The quick and dirty solution would be to add `!important` declarations to your CSS, so :

      .some-class
      {
      border:1px solid #000;
      }

      Would become
      .some-class
      {
      border:1px solid #000 !important;
      }

      The proper solution would be to load your stylesheet after FASC (themes usually load their stylesheets before plugins) using `https://developer.wordpress.org/reference/functions/wp_enqueue_style/`

      Hope that helps

      Reply

  7. Hi Ross

    What am I missing..? How do I make the text following the Read more tag disappear, the way it does with the generic WP ‘Insert Read more tag’…?

    Thank you Emma

    Reply

  8. Apologies: I’ve found my answer. Ross, you’ve given a workaround to grab the html for the button code – that’s all I need for a sidebar widget. Thank you! I’ll try this plugin!

    Reply

  11. ND

    I really love this plugin to death, use it on several websites.

    It got removed cuz of some security reasons i think.
    please reupload it when its fixed asap <3

    Great job guys, wish u the best

    Reply

  12. John

    look like a great plugin!

    Q. If I uninstall the plugin once the site build is complete, will the buttons all work ok?

    Reply

    • Ross

      You should really keep it installed, but if you uninstall the buttons will work, but you will loose the styling – for the buttons to appear correctly you must include the css from this plugin in your theme – thats the only thing you would need to do 🙂

      Reply

    • Ross

      I’m afraid this is not possible with the plugin, essentially it generates links – if you have a plugin that forces downloads on media items then you can link to media files and they will work together

      Reply

    • Ross

      Click the “save” / disk icon in the button preview area to add a template 🙂

      Reply

  15. Luigi Diamante

    Hi, I’ve just installed your plugin in my wordpress latest version (brooklyn) theme. In the edit tool bar of the pages there was already the “insert button” icon, when clicking on it a window opens up requesting url, codes shape etc.
    I tried now hoping to see your beautiful buttons, but still the old window opens up.
    What I am doing wrong and how can I utilize your plugin?
    Thanks a lot and kindest regards
    Luigi Diamante

    Reply

  17. This is an amazing plug-in, thank you for creating it! Just one query – is it possible for the buttons to link to an email address instead of an URL? I can’t figure it out if there is. It would be super mega useful to me if that was an option.

    Thanks!

    Reply

  18. The plugin works great. Thank you for making my life easier.
    I was wondering if there was a way to change the default settings (color, size, link to new window, etc.). I looked at the php scripts but cannot find the right place.
    Thanks again!

    Reply

    • Ross

      Ahhh no I don’t think so, I guess it would be nice to be able to set one of your saved buttons as a default – I’ll look to add this in an update 🙂

      Reply

    • Hey Luke,

      You can change the default value for the background colour etc. of the button by editing the value of the #button-color input HTML tag in wp-content/plugins/forget-about-shortcode-buttons/assets/js/fasc-buttons/popups.php on line 120:

      The above would change the default background colour to red. You could do the same for the other button properties too.

      A little bit dirty, and the better way would be for this to be a setting somewhere in the plugin, but is a quick fix.

      Reply

      • HTML stripped. without tag open/close:

        input type=”text” id=”button-color” name=”button-color” value=”#292D58″

        Reply

  19. Ross, many thanks for this plugin. Definitely needed for us who lack code skills.

    The website that I am creating is a directory, what I’m after is a button that I can put into each listing page within the directory instead of every page of my website.

    The plugin I’m using for the directory is Business Directory. Is it compatible with that if I insert some sort of code into each listing page within the directory?

    Regards,

    Tom.

    Reply

    • Ross

      Hmmm there is no way to officially do it, but what you could do is simply create the style of button you want, switch to the HTML tab and grab the html code – and then of course use that in your loop / custom code 🙂

      Reply

  20. Really useful Ross, thanks for this :). We get a lot of clients who aren’t that tech savvy and just don’t get shortcodes – I’ll be sure to recommend this to them.

    Reply

Leave a Reply

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