How to create a dropdown of shortcodes in edit mode for posts

Question

I plan on using multiple shortcodes for various reasons throughout WordPress.

(i.e.)

• A Vimeo embed (with a shortcut parameter to input the actual video URL)
• A 'Contact Us' element block that can be attached to various posts
• A responsive jQuery photo slider (with parameters for photos by name)
• A css3 button that links to a third party donate site.
• etc..

I want all these options to be available to the non-technical user (the WordPress editor) when they are writing stories.

Within SharePoint 2013, there is a drop-down option for 'Reusable Content'. When you click it, it shows a drop-down of reusable items that you can place into your content editor. This is what I am accustomed to working with.

My Questions:

• What is the most efficient way for WordPress editors to see these shortcode options while they are using the HTML editor and choosing anyone to drop into the HTML editor?
• Is it something I can easily build in WordPress 4.6.2 for them?
• If possible, what in the WordPress API should I concentrate on, to do the build?
• Are there any system hacks involved with setting something like this up?
• Is this request going outside the box of how WordPress can operate?

Thanks!

Answer 1

I wanted to post a comment to your question, but since I'm new on the site and don't have enough rep I can't do that.

This is indeed the way to go for what you need. There is quite a bit of code involved and you probably won't get an out of the box copy/paste solution as an answer here, but as a starting point take a look at the answer to this question, experiment with a button for a start and then go from there: How to add a shortcode button to the TinyMCE editor?

It is not that hard to do, and the functionality provided will certainly make life easier for your users/editors. If you don't have a lot of shortcodes you might want to settle for adding more buttons instead of a dropdown menu and just use the code in the linked question.