Designs & Code

Design, Development and WordPress

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

 

 

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

  1. Vz974

    Hi many thanks for this plugin. Worked like a charm until I moved from WP 4.1.5 to 4.2.2 .
    Previously created buttons still work on front end but unable to create new one because it disappeared from WP post editor. Any help with that ?

    Reply
  2. Hi Ross,

    I’m trying to use your fabulous Forget About Shortcode Buttons plugin to add buttons on my site’s product pages, but the option doesn’t show up in the text editor, is there any way to make it possible?

    Thanks in advance!

    Reply
  3. Hi, I installed this plugin but no button appears in my post edit screen or my page edit screen. I have activated the plugin, I’m using classifiedengine theme. Am I doing something wrong?

    Reply
    • Ross

      Hi there

      Is your post a custom post type? A few users have reported that this does not appear on custom post type screens, only regular post & page post types.

      Thanks

      Reply
  4. Maxi Collins

    Whoooooooooooooooooooooooooooo…huuuuh!
    Oh my God!
    This is stunning…and unbelievable!
    Let us all forget about short codes.

    Reply
  5. First of all, I LOVE your plugin. As someone without any programming experience, this has been a fantastic and easy to use gem. My problem is that, while the buttons work great on my desktop, when I use them from my iphone they come up with a “page not found”. Any ideas?

    Reply
    • Ross

      Hey Elizabeth – this plugin should never interfere with anything like that – I would recommend disabling the plugin, and I expect you will get exactly the same problems.

      Thanks

      Reply
      • But if I disable the plugin then the buttons that I created with the plugin will disappear. Are you telling me that I just shouldn’t use the plugin at all?

        Reply
        • Ross

          Hey, as a test – disable this plugin to see if you still get 404s – create normal links in WP with the exact same URL (copy & paste to make sure) – if you still get 404s I would suggest to look at the URL attribute – make sure this is the full URL (with `http://` etc)..

          If this still doesn’t work – I would say that another plugin or custom JS is interfering with the buttons. This plugin does no fancy trickery on the front end – it just uses a standard anchor tags for buttons, and styles them up nice – so for different versions of your site (mobile vs desktop) then I would suggest the problem lies in another plugin you are using. As a final test, you can add these buttons to a regular WP theme and I’m sure you will find no errors like this.

          Thanks

          Reply
  6. Stuart

    Just what I was looking fir – until I installed it and found I couldn’t set a border or border properties.

    Still a really nice plugin but borders seems basic to buttons – for me anyway

    thanks

    Reply
    • Ross

      You can change it just the same as in the editor – drag and highlight the text around the button, and change the font 🙂

      Reply
  7. Martin

    This is excellent and I now have it installed in all my new sites. Thank you very much for your work. If you accept feature requests, can I ask that you add the ability to store a default button, or perhaps some favourites? Being able to store the color/design as a favourite template and just adjust the link for each use would be great. The reality is I settle on one or maybe two designs per website, so it would save time if I didn’t have to configure the button every time I needed to add one to a new post. Many thanks again.

    Reply
    • Ross

      Hey Martin

      Updates resuming on this plugin soon, and saving buttons is top priority 😉

      Thanks

      Reply
    • Ross

      Thank you! The plugin has been somewhat on hold for a while, but hopefully soon I will get to do some much needed updates 🙂

      Reply
  8. Stuart

    Hello,
    Have you seen this before- since I loaded your plugin I have been getting 500 internal server errors. The error log points to a WP plugin- and cpp661 error which has to do with processes I believe.

    Any thoughts. I have disabled it and will see if it happens again.

    THX

    Reply
    • Ross

      Hey Stuart – I’ve not seen this before – its quite odd because this plugin is really such a simple one, small file sizes and not much php code actually – most of the code is written in JS and there should be nothing funny with server errors…

      Could you please test the plugin on a clean install?

      Reply
      • Stuart

        Ross,

        I have reinstalled your plugin and will be using it exclusively for buttons- my hosting company told me it was the most recent wordpress plugin installed so I assumed it was this. After calling them back when the problem continued after deleting your plugin they finally told me it was that the email processes were not closing out for 2 accounts and pushing me past my limit of 25.

        SO I WILL HAPPILY USE YOUR GREAT PLUGIN ONCE AGAIN- AS THERE IS NOTHING FROM THIS PLUGIN CAUSING ME ANY ISSUES!!!!!!!

        Keep up the great work- it is the easiest button plugin or generator I have ever used, and makes professional looking buttons.

        Reply
  9. THANK YOU! for this plugin, it has made things really easy for me. I would love to be able to see this updated so we can actually upload our own images into the plugin to turn those into buttons so it will match my layout – but regardless… I’m super happy with this – thanks so much!

    Reply
    • Ross

      No worries 🙂 Do you mean to upload images as icons? I’m not sure I will add this, but I may add some more font icons – the great thing about the ones we use are the fact that they can scale up or down to any size and be perfect quality – so they will look crisp in all sizes no matter what device or the size!

      Reply
  10. Günter

    Hi,

    I’ve found your plugin today and after a bit testing I have to say – very good.

    If it is possible it would be very great to implement the attribut: rel=””

    Would be good for example for a pic or a video in a lightbox.

    Thank you
    G

    Reply
    • Ross

      Hey Gunter, thanks, this is coming in the next update – you will be able to add any html attribute that you like to the button via an advanced tab – should be up by the end of next week 😀

      Reply
  11. Hi Ross, I installed and activated FASB but it didn’t show up in my visual editor. I re-installed but still no-go. Any ideas?

    If and when I get it running, can I put buttons into my sidebar widgets? I want to add a Register button.

    Cheers,
    John
    P.S. I’m the one who commented about no sound on the video – silly me, it’s actually quite clear. May be you don’t need sound…

    Reply
    • Ross

      Hey John no worries haha – it does seem a little strange when there is no audio – your not the first to mention it!

      Not sure why you can’t see the button.. What version on WP are you running? Do you have a link I could look at?

      RE sidebar widgets – there are few updates I’m making to the editor popup first over the next week or so and then I will start to look at integrating the plugin further within WP such as in the sidebars 🙂

      Reply
      • Hi Ross,
        The theme doesn’t have a problem
        I upgraded your plugin to the current version 1.0.3 and that’s what’s the issue. Right now it’s disabled and everything runs perfectly well. Each time I enable it, my blog becomes sort of shattered. Looks like the css file doesn’t load. Any idea?

        Reply
        • Ross

          Have you tried clearing your cache fully and checking again? I realised I didn’t use WP built in cache busting methods and have had another user already report errors because of caching, clearing the cache seemed to fix it for them.,

          With the next update there should be no caching problems.

          Do you have a link I could look at? Its really hard to guess what is going on in your setup – by shattered, what does this mean? What does the developer tools give you, do you see any 404’s in your logs with this plugin enabled?

          Reply
  12. Very beautiful plugin dude but I just upgrading to the latest version with wp 3.9, Genesis Prose and my blog became a mess. Any solution?

    Reply
    • Ross

      Hey Enstine…

      If upgrading WP broke you theme, then you need to contact your theme developer and find out when they will be supporting WP 3.9… There is not much more I can do really.

      As a matter of process… I would always check that my theme is compatible with a new version of WP before upgrading as some developers take longer to do this and once you upgrade it is very hard to go back! 🙁

      Reply
  13. Thanks for taking the time to mull this over. I’m wondering if “TinyMCE” would affect this? Thanks again for your awesomeness!

    Reply
  14. I loved the concept of your plugin so I installed it. However, anytime I try to do something with it such as click on the insert button it gives me a box telling me I got a 404 error. I’m compatible on everything so I can’t figure out why it doesn’t work.

    Reply
    • Ross

      Hey Surfdawgz sorry to hear that :/ So what you are saying is the popup won’t load and shows a 404?

      I once had a really annoying problem with a shortcode plugin actually which used a popup in the editor and gave me this headache for days.

      Try this:

      The popup is actually a html page, so see if you can access it by loading the URL directly (replace yoursite.com with the URL of your install):

      http://www.yoursite.com/wp-content/plugins/forget-about-shortcode-buttons/assets/js/fasc-buttons/popup.php?source=insert

      If you are getting a 404 on that URL, navigate via FTP to your plugins folder to see if a file called `popup.php` exists at this path…

      If it exists and you are getting a 404 then you are getting the same problem I once got, it was a really strange problem to do with permissions on the server of the `wp-content`, `plugin` and `plugin-name` folders…

      Let me know if that helps?

      Reply
      • Tried all of what you suggested and ended up with the same pop up of my site with the 404 error. Not savvy enough to use the FTP.

        Reply
        • Ross

          Do you have a link for your site? I could have a quick look.

          If the plugin cannot find the popup page, that means either that:

          1) It doesn’t exist, so there was a problem installing the plugin, try redownloading/installing to see if that helps

          or

          2) Your server settings prevent access to resources in the plugin folder so that the plugin does not have access to its own popup page – in this case it is as is described above, you may need to edit permissions on your server but it sounds like that is something your are not comfortable doing 🙁

          If you can try reinstalling the plugin, and then send me a link I’ll take a look and see what I can do 🙂

          PS please keep replies on here rather than via email (unless you send sensitive info).

          Thanks!

          Reply
          • Hi Ross, sorry about the email thing. I have a lot of plugins on my site and have had little problem with them so I can’t see why anything would be restricting access to it. I just deleted and reinstalled the FASC for the third time, still getting the pop-up of my site with the 404 error. My site is http://www.camptonheights.org and if you need my password to get in I would be more than glad to give it to you via your email. Thanks again!

            Reply
            • Ross

              I just figured out it was your website camptonheights.org and have found you do in fact have the problem I described – its not a nice one to have 🙁

              If you go to this link:
              http://www.camptonheights.org/wp-content/plugins/forget-about-shortcode-buttons/assets/js/fasc-buttons/popup.css

              It loads fine which means the plugin exists. The problem you have, which I also had, is that php files wont display – this is something to do with your server set up and permissions – which was a real pain for me to fix on a clients site a long time ago..

              Try this link:

              http://www.camptonheights.org/wp-content/plugins/forget-about-shortcode-buttons/assets/js/fasc-buttons/popup.php

              This should load a popup page instead of a 404 – which is why you are getting the problem.

              You mention that you are using other plugins, but do you have other plugins with popups in post editor screen? This is where this specific problem kicks in…

              I have to say at this stage there is not much more I can do until you are comfortable checking some things via FTP and trying to change your permissions.

              However, this plugin does not really need to use PHP in the popup (I think it will work fine with just .html).

              Let me have a think, I am doing some updates at the moment so I will try this and maybe I can have an update for you which avoids using PHP files 🙂 The problem really though does lie with your setup – which is what I faced before and there were several plugins which added popups to the editor I could not use as a result.

              Reply
  15. Fantastic! Truly amazing. You read a lot of comments that make this claim. But this is hands down one of the best utilities on any platform anywhere!

    Did you work for Apple, cos it’s freakishly simple and powerful

    Reply
    • Ross

      Haha thanks Surferles glad you like and good to see you’re already using them 🙂

      Reply
  16. Hi Ross,

    I just found your plugin on the repo and have put it to the test. Great job and thanks for releasing this!

    It solves a couple pain points that many WordPress admins have struggled with for some time:
    1. Visualizing the output of shortcode buttons
    2. Being a Non-designer and trying to make good looking buttons!

    I’ve written up a post about it on our site and have linked to it above. Hopefully it will help you get some more downloads and awareness:)

    Reply
    • Ross

      Hey Adam that’s great thanks for sharing – I think there are many more who share your (our) pain when it comes to shortcodes… For me when I make client websites this is a big problem, its a hurdle when I have to try to teach non technically minded users how to use shortcodes… I hope this plugin fills that gap when it comes to buttons at least.

      This plugin started more as a proof of concept, and there is plenty more I need to do on it (for example there are no rollover states just yet!) so will try to make a couple of updates before the general release of WP 3.9 next week.

      I actually have a few more ideas leveraging this same technology/concept so hopefully we can get rid of a few more UI elements that we’re currently having to use shortcodes for.

      Glad you liked the plugin anyway and thanks for the support 🙂

      It would also be really helpful if you could leave us a rating over on the WP plugins site to get the ball rolling and gain the plugin more visibility… 🙂

      Reply

Trackbacks/Pingbacks

  1.  

Leave a Reply

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