wordpress snippets last updated   : October 6, 2014
we now have 641 snippets

Update: Automatically create media_buttons for shortcode selection

wordpress snippet

Adding this snippet to the functions.php of your wordpress theme will add a select menu with an automatically generated list of your shortcodes. For everyone that is going to say hey wait a minute you posted this snippet before! Yes this is true but I added a few updates to this version.

The old version of this snippet is located here (Add custom media_buttons for shortcode selection ) I made a few changes to this version.
  • 1.) You don't need to add shortcode, the snippet will generate the list for you.
  • 2.) you will notice the comment "enter names of shortcode to exclude bellow" this will let you exclude any shortcodes you don't want clients to see.
  • 3.) I fixed the pesky javascript issue that would only let you you add shortcode when using the html editor.
This could still use some work ill keep posting the updates. Enjoy!
snippet :  PHPcopy
add_action('media_buttons','add_sc_select',11);
function add_sc_select(){

    global $shortcode_tags;

     /* ------------------------------------- */
     /* enter names of shortcode to exclude bellow */
     /* ------------------------------------- */

    $exclude = array("wp_caption", "embed");

    echo '&nbsp;<select id="sc_select"><option>Shortcode</option>';

    foreach ($shortcode_tags as $key => $val){
	    if(!in_array($key,$exclude)){
            $shortcodes_list .= '<option value="['.$key.'][/'.$key.']">'.$key.'</option>';
    	    }
        }

     echo $shortcodes_list;
     echo '</select>';
}
add_action('admin_head', 'button_js');
function button_js() {
	echo '<script type="text/javascript">
	jQuery(document).ready(function(){
	   jQuery("#sc_select").change(function() {
			  send_to_editor(jQuery("#sc_select :selected").val());
        		  return false;
		});
	});
	</script>';
}

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

  • Pingback: Wordpress Add custom media_buttons for shortcode selection – wpsnipp.com Wordpress code snippets for your blog()

  • http://markjaquith.com/ Mark Jaquith

    WordPress already includes jQuery… no need to have it twice.

    • http://www.vagrantradio.com VagrantRadio

      And if you add it for some reason, it should be called with wp_enqueue_script(“jquery”) above wp_head().

      • http://wpsnipp.com Kevin Chard

        @vagrantradio:disqus this is good advice.

    • http://wpsnipp.com Kevin Chard

      Hey Mark how are ya,
      This is very true I made the updates to the snippet, not sure what was in my cereal this morning.
      Thanks for the heads up.

  • Cor van Noorloos

    Hello Kevin,

    Peronally I think this will be one of the best, and user friendly bit of code I’ll be using when creating a new site.

    It would however be realy awesome to have a second selectionbox which lists all entries (shortcode values) somehow.

    Best regards,

    Cor

    • http://wpsnipp.com Kevin Chard

      Cool glad you like it, can you explain in a bit more detail about the second select menu?

  • http://www.cliffpaulick.com Cliff Paulick

    Sorry if I’m missing something very obvious, but what does inserting the shortcode do? Any screen shots out there? Thanks.

    • http://wpsnipp.com Kevin Chard

      Hi Cliff
      Shortcodes or a little bit of code you can add to your posts that is a short way of adding functionality or really anything. For example, the link bellow will let you add an iframe with just a little code. [ iframe url=”http://wpsnipp.com” ]

      http://wpsnipp.com/index.php/functions-php/iframe-shortcode-for-posts-and-pages/

      WordPress also has some built in shortcodes like [ gallery ] this page will provide more details on the gallery shortcode.

      http://codex.wordpress.org/Gallery_Shortcode

      However the code above in this post will create a list of shortcodes you have available so you can select them to add to your posts. I hope this helps explain things a little better.

      • http://www.cliffpaulick.com Cliff Paulick

        I know what shortcodes are (and I love them, because then you can stay in the Visual Editor – like your iframe one, which is great), but I was wondering if any additional code was required anywhere. I ask because I saw [php][/php][/php] and [html][/html][/html] and wasn’t sure about the use-case. Do you put PHP or HTML code right in the Visual Editor? Thanks.

        • http://wpsnipp.com Kevin Chard

          This code will create a list of shortcodes you already have in your wordpress install so if you have [php][/php][/php] or [html][/html][/html] then it is specific to you.

      • http://www.cliffpaulick.com Cliff Paulick

        Gotcha. I don’t have those in my shortcodes list – I saw them in your screen shot at the start of this post.
        Based on your comment, how is this functionality different from this (http://wpsnipp.com/index.php/template/print-a-list-of-all-supported-shortcodes/)?
        Any tips where to get PHP or HTML shortcodes to use?

        • http://wpsnipp.com Kevin Chard

          It is very different, the link to the snippet posted will only use print_r and print the array itself. The code above will add a menu to your editor screen with a list of shortcode available. When you select one it will add it to the editor.

  • Carlos Casarez

    Is there any way to specify the order it shows up in the #media-buttons div? Right now it’s showing up cleared to the left it seems and it’s blowing out my main text area.

    Killer little snippet of code though.

    c.

    • http://wpsnipp.com Kevin Chard

      Should just be beside the add media icon at above the editor toolbar like the picture above, is it not like that for you?

  • ???? ????

    When i mix the Javascript Code from here and switch it with “Add custom media_buttons for shortcode selection” javascript it works great :) thanks.. still.. the select is bumping with the top of my editor slightly hiding the top of there tools..

    This is not so bad but looks weird.. i tried Css but it doesent work
    Got an idea how can i influence the “media-buttons” dive from within my functions.php ?
    (just so i would add a margin-bottom: 10px value)

    Thanks anyhow

    • http://wpsnipp.com Kevin Chard

      You can style things with id=”sc_select” the following code will add css. Not sure if this will fix things but will help you fool around with the css to sort things out.

      function wps_add_my_css(){?>
         
          #sc_select{margin-bottom:10px;}
        
      < ?}

      add_action( 'admin_head-post.php', 'tinymce_title_css');
      add_action( 'admin_head-post-new.php', 'tinymce_title_css');

      • ???? ????

        Thanks man.. i kinda figure that out but select can “margin” since its inside a div.. thats ok tough i have simply set font-size for 11px and it set great above the editor toolbar.

        Thanks for this great code :)

        • http://wpsnipp.com Kevin Chard

          No problem glad you like the snippet.

  • Pingback: Unable to perform Translation:Quota Exceeded. Please see http://code.google.com/apis/language/translate/overview.html - CyberMaster()

  • http://twitter.com/_mattbailey Matt Bailey

    Great snippet Kevin, thanks for that. I have one question – at the moment this simply allows you to drop in the opening and closing shortcode tag next to each other, but it would be even better if you could select a block of text and have the opening and closing tags wrap that text. Does that make sense? Do you think that would be possible?

    • http://wpsnipp.com Kevin Chard

      Hi Matt for sure this was just an early version, that is mostly JQuery that will do that part. I’m not sure when Ill be posting an updated version however. But I will try to get around to it asap.

  • hoko

    Hi Kevin,

    Is there anyway to take drop down from media button to 3 or 2nd row of tinymce editor? Because with updated uploader (with v3.3) , it doesn’t look good.

    Thanks,
    Hoko

    • hoko

      And it now I checked it is now working with wordpress 3.3… :(

      • hoko

        ………*not working….

        • hoko

          sorry again, it is working properly with wordpress 3.3.

          But I’m still asking if we can move drop down from media buttons place to any of the tinymce buttons row?

          Thanks Kevin

          • http://www.wordimpressed.com Devin Walker

            +1 for this request to add the dropdown into the actual menu bar of the TinyMCE editor. BTW, this is a great snippet and just what I’m looking for, BUT I’d like to have the dropdown moved. It looks a bit out of place right next to the uploads media button and is breaking the CSS a bit.

        • http://wpsnipp.com Kevin Chard

          Not easily no,

  • http://www.cikletoyun.com/oyunlar/balon-oyunlari balon patlatma

    ” this is good advice” :)) clacks @google-78e9f950b24057773891758bcae63bb2:disqus 

    • http://wpsnipp.com Kevin Chard

      Cool glad you like the snippet.

  • KelvinAlf

    Awesome snippet but it won’t work for more complex shortcodes. For example I like to include a source shortcode with two arrays: name and link so that the name would show and be linked to the page it is directed to. If there’s any fix please let me know!

  • premiumwd

    yo kev great post! Saved me a lot of coding and a lot of pain searching articles with more complicated ways of doing this. I had a question. When inserting the code, it works great. I wanted to know just to show it as a button instead.

    • http://wpsnipp.com Kevin Chard

      This is not something that would work for this snippet since most wordpress installs would have many many shortcodes. This is one of the reasons I use a select menu, since it could have a list of who knows how many items. Let me know if I’m misinterpreting what your question is,

      • premiumwd

        instead of it echo ‘ “Shortcode”‘;
        echo ‘ “”‘;

      • premiumwd

        i want it to echo an img instead of the option shortcode

      • premiumwd

        i think i asked the question wrong. I want not the options within the dropdown to show as a button, but the actual drop down menu to show as a button so when Oi click over it it drops a menu showing all the shortcodes.

  • http://www.smileywar.com/ Emmanuel Flossie

    Great example, thanks very much just what i needed to display my custom shortcodes! Keep up with the great shares :)

  • http://www.smileywar.com/ Emmanuel Flossie

    btw if you want to customize what gets printed out you can do something like this

    foreach ($shortcode_tags as $key => $val){

    if(!in_array($key,$exclude)){

    if ($key==’button’){

    $shortcodes_list .= “”.$key.””;

    }elseif ($key==’focus’){

    $shortcodes_list .= “”.$key.””;

    }else{

    $shortcodes_list .= ”.$key.”;

    }

    }

    }