This is a utility plugin that will allow other plugins and themes to swap out shortcodes with custom images, in the same way that WordPress’ native gallery shortcode does this. Replacement images can be clicked to reveal a ‘delete’ button.
This works extremely well when your shortcode already has a tinymce button, but does work for manual shortcodes too.
This plugin does not support multi-line shortcodes or non-self-closing shortcodes (e.g. it supports <code>[foo bar="baz"]</code> but not <code>[foo]bar baz[/foo]</code>). Honestly, I don’t even know what would happen if you tried to use one. It may work, but it’s entirely unsupported.
To add your shortcode, hook onto the filter <code>'jpb_visual_shortcodes'</code>. That filter will pass one array as an argument. Each element of that array is an associative array which must contain values for the following keys:
<ul>
<li><code>shortcode</code> The name of the shortcode to replace</li>
<li><code>image</code> The url of the image to replace the shortcode with.</li>
</ul>
Additionally, the array may contain the optional parameter <code>command</code>, which must be a valid tinymce command. If present, this value will trigger a second UI button (‘Edit’) when the user clicks the replacement image which, when clicked, will execute the tinymce command passed as the value.

Visual Shortcodes

This is a utility plugin that will allow other plugins and themes to swap out shortcodes with custom images, in the same way that WordPress' nati …

Code Amp

DesignsAndCode

Forget About Shortcode (FASC) Buttons are a visual way to add CSS buttons in the rich text editor and to your themes. 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.
<iframe loading="lazy" title="Forget About Shortcode (FASC) Buttons for WordPress" width="750" height="422" src="https://www.youtube.com/embed/BA9ruSe-i1A?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
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.
<ul>
<li>
New – add FASC buttons to widgets in WP 4.8 🙂
</li>
<li>
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!
</li>
<li>
Utilises the latest CSS properties for styling
</li>
<li>
Includes Dashicons & <a href="http://fortawesome.github.io/Font-Awesome/icons/" rel="nofollow ugc">Font Awesome Icons</a> to add to your buttons and use in your themes.
</li>
</ul>
Your ratings mean a lot – if you like the plugin please consider leaving a review.
This plugin is only compatible with WordPress 4.2 and upwards (download version 1.x for compatibility with WP 3.9 – 4.1)
<h4>Links</h4>
<ul>
<li><a href="http://www.designsandcode.com/551/wordpress-forget-about-shortcode-buttons/" rel="nofollow ugc">FASC Buttons Discussion</a></li>
<li><a href="https://www.youtube.com/watch?v=BA9ruSe-i1A" rel="nofollow ugc">FASC Buttons Video Demo</a></li>
</ul>

Forget About Shortcode Buttons

... and this has it. Works exactly as advertised and is WYSIWYG. In edit mode, the buttons don't shrink when they receive focus, which I've seen on other plugins. There are a wide variety of choices for appearance, and the icons feature is an excellent addition. It just works.

I look for ease of use...

A visual way to add CSS buttons in the rich text editor and to your themes.

Visual Shortcodes vs Forget About Shortcode Buttons