Home / admin / Add custom media_buttons for shortcode selection
  • How to Add custom media_buttons for shortcode selection

    custom media_buttons shortcode select menu

    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 ). ( click code to copy )

    wordpress snippet : PHP

    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());})

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

    query, admin_head, add_action, selected, wp,
  • 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.

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

  • Thanks for good share @Kevin..

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


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

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

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

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

        • 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