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 Forget About Shortcode Buttons Plugin from the WordPress Plugin Repository:
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 🙂
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:
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.
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! 🙂
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.
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.
When trying to insert a button on the page I get the following message:
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
Just fixed in our 2.0.0 release 🙂 Best
Is there a way to put the icon selected on the right side of the button?
Added this to version 2.0, which we just released 🙂
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 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?
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.
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. 🙂
Just release 2.0.0 🙂 should be in the repo in the next few minutes!
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.
The quick and dirty solution would be to add `!important` declarations to your CSS, so :
border:1px solid #000;
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
No, making it important in editor is also not working.
Hey Rida, you cannot add inline CSS, because it will be stripped out. You must add any custom CSS to your themes CSS file, usually `style.css` in your theme folder (some themes are different though).
Yes I get it and I am doing exactly the same. I put it in child theme style.css
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
Hey Emma, I’m afraid I don’t know an easy way to that (and haven’t tried it myself) – I guess you would have to use a combination of FASC buttons and the info at this link – https://codex.wordpress.org/Customizing_the_Read_More – its a nice idea actually, I’ll stick it on the feature requests list.
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!
Hi, it looks like a great plugin. But is there a way to use it in a sidebar widget rather than only on a page or post?
Question: We can upload on this plugin our custom icons or not ?
For now I’m afraid now 🙁
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
Ah I think I know the issue, and its fixed in the next update 🙂
“Forget About Shortcode Buttons Plugin” still not for download.
Any news on when this is ready?
Yup its on download directly here: http://www.designsandcode.com/wp-content/uploads/2016/06/forget-about-shortcode-buttons-2.0.0.zip – otherwise its getting sent to the plugin repo today for re-approval
I decided to rush (an already in progress) V2 rather than fix the old version.
look like a great plugin!
Q. If I uninstall the plugin once the site build is complete, will the buttons all work ok?
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 🙂
thanks for your prompt reply Ross 🙂
how to enable force download for media files
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
What exactly is the template tab for? How do you make templates?
Click the “save” / disk icon in the button preview area to add a template 🙂
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
Strange, what does the button look like? Is it from another plugin?
Problem solved, that icon was from an existing plugin! At last I’ve found yours in the middle of the edit toolbar and worked. Thanks a lot and kindest regards
Did I miss something or is there a way to move the button to the right side of the page?
Geez, what a lame question – sorry! Figured it out as soon as I posted it.
Thanks for a great plug-in!
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.
Sure, for your link just enter `mailto:firstname.lastname@example.org` 🙂
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.
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 🙂
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.
HTML stripped. without tag open/close:
input type=”text” id=”button-color” name=”button-color” value=”#292D58″
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?
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 🙂
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.