wordpress snippets last updated   : January 29, 2015
we now have 646 snippets

Add custom media_buttons for shortcode selection

wordpress snippet

I was looking for a simple way to create a menu for my shortcode items and although you can create tinymce plugins I found it to be a pain. So I decided to create a simplified select menu that would require me to change a little HTML to add new items. Adding this wordpress snippet to the functions.php of your wordpress theme will add a new select menu beside the add media icon. Edit the value= to change the inserted text.

This snippet has been recently updated ( shortcode selection ).
snippet :  PHPcopy
function add_sc_select(){
    echo '&nbsp;<select id="sc_select">
			<option value="[html][/html]">[html]</option>
			<option value="[css][/css]">[css[</option>
			<option value="[javascript][/javascript]">[javascript]</option>
add_action('admin_head', 'button_js');
function button_js() {
	echo '<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	   $("#sc_select").change(function() {$("#content").val($("#content").val()+$("#sc_select :selected").val());})

Did you like this post? If so please share it with your friends. Thanks!

  • Pingback: webnik.dk | Add shortcode menu to editor()

  • Justin Young

    Hi Kevin,

    First off, I just discovered your site and it’s really a gem. Very well done.

    For this particular script, I’m having difficulty with using quotes in the shortcode area. For example:


    The quotes around “example” do not seem to be allowed, since when I use the button, all the text after the first quote is missing.

    Any suggestions?

    Thanks again.

    • Justin Young

      Never mind. It doesn’t seem to need the quotes. It’s good. Works great.

    • http://wpsnipp.com Kevin Chard

      HI Justin glad you like the site, I post new snippets everyday so drop by anytime. In regards to your issue you could restructure things like this.

      echo ” 

      If you notice I change the single quote on the echo to a double quote and then single quotes on the html select menu. Then I can add the shortcode attributes. Don’t forget the backslash on the quotes.

  • http://twitter.com/ftoprak Fatih Toprak

    Thanks for good share @Kevin..

    • http://wpsnipp.com Kevin Chard

      Thanks Fatih Toprak glad you like it, I post new snippets everyday so stop by anytime.

  • Justin

    Hey Kevin

    I have another question related to this snippet. For some reason it will not allow the insertion of the shortcode within the visual editor. Works great using the html editor, however. Would you have any idea why it wouldn’t work in the visual editor? Thanks!


    • http://wpsnipp.com Kevin Chard

      Hi Justin,
      This is because its a rough hack, was primarily just a way so that I could avoid building TinyMCE plugin for things. This also makes it a single plug and play snippet for the functions.php that I could just add what I like in a few seconds and less involved than a MCE plugin.

      The jquery is basic I just take the full value of #content and slap the value of the option on the end of it not the best way to do things.

  • andi_sf

    Great idea- I have a problem though – I integrated your code into my functions.php file and everything is showing up as it is supposed to but when I select from the drop-down nothing is added to the content panel (in both Visual and HTML editor windows). I am using WP 3.13 – any help or tips would be greatly appreciated!

  • Pingback: Wordpress Update: Automatically create media_buttons for shortcode selection – wpsnipp.com Wordpress code snippets for your blog()

  • http://zeaks.org/ Zeaks

    I know there’s an updated version, but I like how this one works better. I need to add [Left Pullquote] to my theme (added spaces so comments wouldn’t eat the code) The problem is, after the first =”alignleft it stops adding the code to the post because of the quote mark. Anyway to get around this?

    • http://wpsnipp.com Kevin Chard

      ┬áIts because of the double quotes within the value=”” if you do value=” [pull float=” alignleft” ][/pull] ” should work for you. Or use single quote with the option value.

      • http://zeaks.org/ Zeaks

        Yeah I did try that, I get a parse error if I use the single quotes, and using the it will display [pull float= and still cuts off the code. Maybe I’ll have to use your updated version.

        • http://wpsnipp.com Kevin Chard

          Duh what is wrong with me lol this will work, sorry wrong quotes
          value=” [pull float=’ alignleft’ ][/pull] ”
          just use single quote for the float attribute.

  • Mte90Net

    breaked layout on this page