Looking for a way to create media buttons for adding shortcodes automatically? This snippet will add a select menu with an automatically generated list of your shortcodes.
Instructions:
Add this code to your theme’s functions.php file or in a site-specific plugin
Optionally edit the array line 10 to exclude certain shortcodes.
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 ' <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>';
}
Note: If this is your first time adding code snippets in WordPress, then please refer to our guide on how to properly add code snippets in WordPress, so you don’t accidentally break your site.
If you liked this code snippet, please consider checking out our other articles on the site like: Shortcodes Ultimate Review: Add Shortcodes to WordPress Quick & Easy.
Hello, very useful script, still have question for improvement,
it is showing existing shortcodes syntax bracketed, but not exactly available ids.
Additionally I would need opposite conditional logic to have showing only from some plugins as ‘to include’, can you propose approach or script?
Regards
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.”;
}
}
}
Hi Emmanuel,
I tried to follow your tutorial in the comments, and I’m a little confused about the symbol (“”) in “”. $ key. “”, can you explain what it is for?
Great example, thanks very much just what i needed to display my custom shortcodes! Keep up with the great shares 🙂
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,
instead of it echo ‘ “Shortcode”‘;
echo ‘ “”‘;
Not sure I’m following, use the http://wpsnip.com/contact/ form and send me an email.
i want it to echo an img instead of the option shortcode
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.
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!
” this is good advice” :)) clacks @google-78e9f950b24057773891758bcae63bb2:disqus
Cool glad you like the snippet.
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
And it now I checked it is now working with wordpress 3.3… 🙁
………*not working….
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,
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.
[…] to remember the shortcodes so I searched on the interweb and found Kevin Chard’s snippet at http://wpsnipp.com/index.php/functions-php/update-automatically-create-media_buttons-for-shortcode-s… to incorporate a shortcode dropdown into the editor. I modified Kevin’s code to work with […]
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 🙂
No problem glad you like the snippet.
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?
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] and [/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] or [/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.
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?
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().
@vagrantradio:disqus this is good advice.
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.
[…] add media icon. Edit the value= to change the inserted text.This snippet has been recently updated ( shortcode selection ).PHP add_action('media_buttons','add_sc_select',11); function add_sc_select(){ echo […]