Home / admin / Update: Automatically create media_buttons for shortcode selection
  • How to Update: Automatically create media_buttons for shortcode selection

    custom media_buttons shortcode select menu

    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!

    wordpress snippet : PHP

    <>
    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>';
    }
    

    ( WordPress codex functions, hooks, in this snippet. )

    query, admin_head, add_action, selected, _e, wp,
  • Pingback: Wordpress Add custom media_buttons for shortcode selection – wpsnipp.com Wordpress code snippets for your blog()

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

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

    • 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

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

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

    • 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.

      • 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.

        • 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.

      • 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?

        • 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.

    • 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

    • 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 :)

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

  • 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?

    • 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

          • +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.

        • Not easily no,

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

  • 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.

    • 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.

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

  • 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.”;

    }

    }

    }