X

Add custom media_buttons for shortcode selection

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

add_action('media_buttons','add_sc_select',11);
function add_sc_select(){
    echo '&nbsp;<select id="sc_select">
			<option>Shortcode</option>
			<option value="[html][/html]">[html]</option>
			<option value="[css][/css]">[css[</option>
			<option value="[javascript][/javascript]">[javascript]</option>
	</select>';
}
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">
	jQuery(document).ready(function(){
	   $("#sc_select").change(function() {$("#content").val($("#content").val()+$("#sc_select :selected").val());})
	});
	</script>';
}

Comments  Leave a Reply

  1. breaked layout on this page

  2. 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?

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

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

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

  3. Wordpress Update: Automatically create media_buttons for shortcode selection – wpsnipp.com Wordpress code snippets for your blog June 8, 2011 at 9:02 am

    […] 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 […]

  4. 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!

    1. Ok just tested things in wordpress Version 3.1.3 and it does work but only when your using the HTML editor the visual editor does not accept the code.

    2. Just made an update of the snippet you asked about a while ago, it will now properly add shortcode to posts.

      http://wpsnipp.com/index.php/functions-php/update-automatically-create-media_buttons-for-shortcode-selection/

  5. 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!

    Justin

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

  6. Thanks for good share @Kevin..

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

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

    [toggle]

    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

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

    2. 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 ” 
      Shortcode
      [/html]
      [/css]
      [/javascript]
      “;

      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.

  8. webnik.dk | Add shortcode menu to editor March 18, 2011 at 7:48 am

    […] many customized shortcodes from functions.php. Here is one way of getting around the problem. From WordPress Code Snippets, a very cool site I just stumbled over. Have the feeling there is more useful stuff […]

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WordPress Launch Checklist

The Ultimate WordPress Launch Checklist

We've compiled all the essential checklist items for your next WordPress website launch into one handy ebook.
Yes, Send Me the Free eBook!