Designs & Code

Design, Development and WordPress

Forget About Shortcode Buttons for WordPress

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!

Download

Grab the download from the WordPress Plugin Repository:

FASC Buttons on WordPress.org

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 🙂

 

WordPress Requirements

This plugin will only work with WordPress 3.9 and up.

This is due to this plugin utilising new functionality of the TinyMCE editor which comes with WP 3.9 – I will therefor be unable to support any versions of WP prior to this.

 

Support

The best place to get support for this plugin is over on the WordPress support forum.  I can’t guarantee lighting fast responses but I do my best to check there and respond to any queries,

FASC Buttons Support

 

Browser Compatibility

 

Some notes in general about CSS3 compatibility

Most of you interested in CSS only buttons will already know what they’re about, and why they are so much better over the old outdated ways of how we used to create buttons and what the common pitfalls are…

But for those that don’t know – you need to be aware that not all CSS3 properties we use in these buttons are supported by all the major browsers – in general support is good so these or any other CSS3 buttons you use will look pretty much the same across most modern browsers, but if you need to know exactly what is and isn’t supported by your browser it would be a good idea to check this compatibility chart by findmebyIP.

All the buttons generated from this plugin work across all modern browsers utilising CSS3 for effects:

Tested on:

  • Desktop Browsers – Chrome, Firefox, Safari, Opera, IE
  • Browsers on Touch Devices – Android Browser, Chrome, Safari, Opera

 

Admin Compatibility – the post edit screen

As per the front end and for your users, your browser must be able to support the CSS3 properties in order to be able to see them.

The visual editor integration with TinyMCE has been tested and is compatible on Chrome, Firefox, IE9+, Safari and Opera. If you are using this on another browser please let me know and I can add it to the list here.

*WordPress 3.9+ uses the TinyMCE 4.x editor on the post edit screen – it does not work well in IE8 and nor will this plugin.

*The admin interface has not yet been tested with Touch devices.

 

Screenshots

Coming soon.

 

33 Responses to “Forget About Shortcode Buttons for WordPress”

  1. Neal

    This used to be a great plugin – but have you checked the Support Threads in WordPress.org recently?

    The plugin vs2 onwards breaks the TinyMCE Editor in other plugins in the admin area – PLEASE do fix this otherwise your great plugin becomes unusable.

    Reply

    • Ross

      Yup – I’m afraid this is a one man band and I had a deadline on. FASC is getting some love again this week, asap.

      Reply

      • Neal

        OK – thanks for the update and really look forward to that. Understand you can be busy.

        Reply

  2. Pat

    Please fix your “Forget About Shortcodes Buttons” plugin. It breaks the WordPress editor badly, including Yoast. and FooBox/FooGallery. It stops most default buttons from working, and there are several posts around from people with the same issue! The only fix is to deactivate the plugin, make the back end changes, and reactivate the plugin. What a pain! Is it time to look for something else?

    Reply

    • Ross

      Hi Pat are you still having issues with the latest version?

      I thought I’d got to the bottom of this issue.. need to dive back into again (I’m maintaining the plugin but juggling a couple of projects)

      Thanks

      Reply

    • Ross

      Ahhh, you’ll notice a little save / floppy disk icon in the lower right of the button preview area? This is for saving buttons as templates to re-use later 🙂

      Reply

  4. Samuel A King

    This plugin causes the visual post editor to dissappear once activated. I downloaded the latest version 2.0 and I cannot use it .

    To try and recreate the problem, activate the plugin, go to your wordpress post edit screen, you will get a blank post screen if you using the visual editor, switch to text editor and you will be able to edit your posts.

    Try and fix it please.

    Regards

    Reply

    • Ross

      Hi Samuel

      I had a look and did some more tests, are you by any chance on an older version of WP?

      Thanks

      Reply

      • Adam Edge

        Hi,

        Getting the same here on WP 4.5.2. Disable plugin and it works all OK.

        Uncaught TypeError: a.prototype.match is not a function
        http://localhost/…/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,thickbox,underscore,shortcode,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortabl&load%5B%5D=e,backbone,wp-util,wp-backbone,media-models,plupload,wp-plupload,mediaelement,wp-mediaelement,media-views,media-editor,media-aud&load%5B%5D=iovideo,mce-view,jquery-ui-draggable,jquery-ui-slider,jquery-touch-punch,iris,wp-color-picker,editor&ver=4.5.2

        I hope this helps you.

        Kind regards,

        Reply

        • Ross

          Thanks for the update Adam, any chance you get in touch via email? http://designsandcode.com/contact

          I’ve tested it on WP 4.5.2 and no issues on a site with 60+ plugins.

          I think there may be a conflict with something else in your setup, so really would like to investigate and resolve before it gets out to the rest of our users!

          Thanks

          Reply

  6. Melissa H.

    Are you still offering this plugin? I can’t seem to find it in the wordpress plugin repository.

    Reply

    • Ross

      We were temporarily remove because of an XSS exploit (wish we were warned about it) – we are submitting a patch today so should hopefully be back up and running in the next couple of days 🙁

      Reply

    • Ross

      For now you can only access the button creator popup on any post edit screen (any post type that is) – however, you can copy the html generated into a text widget area and they will show up fine 🙂

      Reply

    • Ross

      If you know CSS you could do this yourself, for now this is not a feature of the plugin. Thanks

      Reply

  9. Jayson Cote

    Brillant idea. I have always struggled with figuring out a good way for my clients not to disturb the html in the post editor when wanting to change the css class name of an element.
    Example <a href="/" rel="nofollow">My Button</a>
    Thank you for making WP development and the client post editor UI cleaner and easier to manage!

    Reply

Trackbacks/Pingbacks

  1.  

Leave a Reply

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