Skip to content

Instantly share code, notes, and snippets.

@SmashBrando

SmashBrando/shortcodes.js

Created May 12, 2014 20:34
Show Gist options
  • Save SmashBrando/aecb65a11bbbf08a80c1 to your computer and use it in GitHub Desktop.
Save SmashBrando/aecb65a11bbbf08a80c1 to your computer and use it in GitHub Desktop.
Download ZIP
WordPress Shortcode Buttons (icons not included 20*20)
Raw
shortcodes.js
jQuery(document).ready(function($) {
// 1. Youtube Shortcode
tinymce.create('tinymce.plugins.youtube_plugin', {
init : function(ed, url) {
// Register command for when button is clicked
ed.addCommand('youtube_insert_shortcode', function() {
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = '[youtube video_id="'+selected+'"]';
}else{
content = '[youtube video_id="VIDEOID"]';
}
tinymce.execCommand('mceInsertContent', false, content);
});
// Register buttons - trigger above command when clicked
ed.addButton('youtube_button', {title : 'Insert Youtube Video', cmd : 'youtube_insert_shortcode', image: url + '/yt.png' });
},
});
// Register our TinyMCE plugin
// first parameter is the button ID1
// second parameter must match the first parameter of the tinymce.create() function above
tinymce.PluginManager.add('youtube_button', tinymce.plugins.youtube_plugin);
});
jQuery(document).ready(function($) {
// 2. Two Column Shortcode
tinymce.create('tinymce.plugins.twocol_plugin', {
init : function(ed, url) {
// Register command for when button is clicked
ed.addCommand('twocol_insert_shortcode', function() {
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
}else{
content = '[twocol]...[/twocol]<br />[twocol]...[/twocol]';
}
tinymce.execCommand('mceInsertContent', false, content);
});
// Register buttons - trigger above command when clicked
ed.addButton('twocol_button', {title : 'Insert Two Column Layout', cmd : 'twocol_insert_shortcode', image: url + '/two.png' });
},
});
// Register our TinyMCE plugin
// first parameter is the button ID1
// second parameter must match the first parameter of the tinymce.create() function above
tinymce.PluginManager.add('twocol_button', tinymce.plugins.twocol_plugin);
});
jQuery(document).ready(function($) {
// 3. One Third Shortcode
tinymce.create('tinymce.plugins.thirdcol_plugin', {
init : function(ed, url) {
// Register command for when button is clicked
ed.addCommand('thirdcol_insert_shortcode', function() {
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
}else{
content = '[thirdcol]...[/thirdcol]';
}
tinymce.execCommand('mceInsertContent', false, content);
});
// Register buttons - trigger above command when clicked
ed.addButton('thirdcol_button', {title : 'Insert On Third Column Layout', cmd : 'thirdcol_insert_shortcode', image: url + '/onethree.png' });
},
});
// Register our TinyMCE plugin
// first parameter is the button ID1
// second parameter must match the first parameter of the tinymce.create() function above
tinymce.PluginManager.add('thirdcol_button', tinymce.plugins.thirdcol_plugin);
});
jQuery(document).ready(function($) {
// 4. Two Third Shortcode
tinymce.create('tinymce.plugins.twothirdcol_plugin', {
init : function(ed, url) {
// Register command for when button is clicked
ed.addCommand('twothirdcol_insert_shortcode', function() {
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
}else{
content = '[twothirdcol]...[/twothirdcol]';
}
tinymce.execCommand('mceInsertContent', false, content);
});
// Register buttons - trigger above command when clicked
ed.addButton('twothirdcol_button', {title : 'Insert Two Third Column Layout', cmd : 'twothirdcol_insert_shortcode', image: url + '/twothree.png' });
},
});
// Register our TinyMCE plugin
// first parameter is the button ID1
// second parameter must match the first parameter of the tinymce.create() function above
tinymce.PluginManager.add('twothirdcol_button', tinymce.plugins.twothirdcol_plugin);
});
jQuery(document).ready(function($) {
// 5. Line Shortcode
tinymce.create('tinymce.plugins.line_plugin', {
init : function(ed, url) {
// Register command for when button is clicked
ed.addCommand('line_insert_shortcode', function() {
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
}else{
content = '[line]';
}
tinymce.execCommand('mceInsertContent', false, content);
});
// Register buttons - trigger above command when clicked
ed.addButton('line_button', {title : 'Insert Divider Line', cmd : 'line_insert_shortcode', image: url + '/line.png' });
},
});
// Register our TinyMCE plugin
// first parameter is the button ID1
// second parameter must match the first parameter of the tinymce.create() function above
tinymce.PluginManager.add('line_button', tinymce.plugins.line_plugin);
});
jQuery(document).ready(function($) {
// 6. Button Shortcode
tinymce.create('tinymce.plugins.button_plugin', {
init : function(ed, url) {
// Register command for when button is clicked
ed.addCommand('button_insert_shortcode', function() {
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
}else{
content = '[button link="" target="" text=""]';
}
tinymce.execCommand('mceInsertContent', false, content);
});
// Register buttons - trigger above command when clicked
ed.addButton('button_button', {title : 'Insert Button', cmd : 'button_insert_shortcode', image: url + '/button.png' });
},
});
// Register our TinyMCE plugin
// first parameter is the button ID1
// second parameter must match the first parameter of the tinymce.create() function above
tinymce.PluginManager.add('button_button', tinymce.plugins.button_plugin);
});
jQuery(document).ready(function($) {
// 7. Clear Shortcode
tinymce.create('tinymce.plugins.clear_plugin', {
init : function(ed, url) {
// Register command for when button is clicked
ed.addCommand('clear_insert_shortcode', function() {
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
}else{
content = '[clear]';
}
tinymce.execCommand('mceInsertContent', false, content);
});
// Register buttons - trigger above command when clicked
ed.addButton('clear_button', {title : 'Clear Row', cmd : 'clear_insert_shortcode', image: url + '/clear.png' });
},
});
// Register our TinyMCE plugin
// first parameter is the button ID1
// second parameter must match the first parameter of the tinymce.create() function above
tinymce.PluginManager.add('clear_button', tinymce.plugins.clear_plugin);
});
jQuery(document).ready(function($) {
// 8. Slideshow Modal Shortcode
tinymce.create('tinymce.plugins.slideshow_plugin', {
init : function(ed, url) {
// Register command for when button is clicked
ed.addCommand('slideshow_shortcode', function() {
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
}else{
content = '[slideshow_modal name="slideshowname" title="Slideshow Title" button_text="Button Text"]SLIDESHARE SHORTCODE[/slideshow_modal]';
}
tinymce.execCommand('mceInsertContent', false, content);
});
// Register buttons - trigger above command when clicked
ed.addButton('slideshow_button', {title : 'Add Slideshow Modal | Sldieshare Goes Inside', cmd : 'slideshow_shortcode', image: url + '/slide.png' });
},
});
// Register our TinyMCE plugin
// first parameter is the button ID1
// second parameter must match the first parameter of the tinymce.create() function above
tinymce.PluginManager.add('slideshow_button', tinymce.plugins.slideshow_plugin);
});
Raw
shortcodes.php
<?php
// 1. Youtube Shortcode
// init process for registering our button
add_action('init', 'youtube_shortcode_button_init');
function youtube_shortcode_button_init() {
//Abort early if the user will never see TinyMCE
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true')
return;
//Add a callback to regiser our tinymce plugin
add_filter("mce_external_plugins", "youtube_register_tinymce_plugin");
// Add a callback to add our button to the TinyMCE toolbar
add_filter('mce_buttons', 'youtube_add_tinymce_button');
}
//This callback registers our plug-in
function youtube_register_tinymce_plugin($plugin_array) {
$plugin_array['youtube_button'] = ''.get_template_directory_uri().'/shortcodes/shortcodes.js';
return $plugin_array;
}
//This callback adds our button to the toolbar
function youtube_add_tinymce_button($buttons) {
//Add the button ID to the $button array
$buttons[] = "youtube_button";
return $buttons;
}
// Add Shortcode
function youtube_embed_shortcode( $atts ) {
// Attributes
extract( shortcode_atts(
array(
'video_id' => 'VIDEOID',
), $atts )
);
// Code
return '<div class="embed-container"><iframe src="http://www.youtube.com/embed/'.$video_id.'" height="240" width="320" allowfullscreen="" frameborder="0"></iframe></div>';
}
add_shortcode( 'youtube', 'youtube_embed_shortcode' );
// 2. Two Column Shortcode
// init process for registering our button
add_action('init', 'twocol_shortcode_button_init');
function twocol_shortcode_button_init() {
//Abort early if the user will never see TinyMCE
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true')
return;
//Add a callback to regiser our tinymce plugin
add_filter("mce_external_plugins", "twocol_register_tinymce_plugin");
// Add a callback to add our button to the TinyMCE toolbar
add_filter('mce_buttons', 'twocol_add_tinymce_button');
}
//This callback registers our plug-in
function twocol_register_tinymce_plugin($plugin_array) {
$plugin_array['twocol_button'] = ''.get_template_directory_uri().'/shortcodes/shortcodes.js';
return $plugin_array;
}
//This callback adds our button to the toolbar
function twocol_add_tinymce_button($buttons) {
//Add the button ID to the $button array
$buttons[] = "twocol_button";
return $buttons;
}
// Add Shortcode
function twocol_embed_shortcode( $atts , $content = null ) {
// Code
return '<div class="col-md-6">'.do_shortcode($content).'</div>';
}
add_shortcode( 'twocol', 'twocol_embed_shortcode' );
// 3. Third Column Shortcode
// init process for registering our button
add_action('init', 'thirdcol_shortcode_button_init');
function thirdcol_shortcode_button_init() {
//Abort early if the user will never see TinyMCE
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true')
return;
//Add a callback to regiser our tinymce plugin
add_filter("mce_external_plugins", "thirdcol_register_tinymce_plugin");
// Add a callback to add our button to the TinyMCE toolbar
add_filter('mce_buttons', 'thirdcol_add_tinymce_button');
}
//This callback registers our plug-in
function thirdcol_register_tinymce_plugin($plugin_array) {
$plugin_array['thirdcol_button'] = ''.get_template_directory_uri().'/shortcodes/shortcodes.js';
return $plugin_array;
}
//This callback adds our button to the toolbar
function thirdcol_add_tinymce_button($buttons) {
//Add the button ID to the $button array
$buttons[] = "thirdcol_button";
return $buttons;
}
// Add Shortcode
function thirdcol_embed_shortcode( $atts , $content = null ) {
// Code
return '<div class="col-md-4">'.do_shortcode($content).'</div>';
}
add_shortcode( 'thirdcol', 'thirdcol_embed_shortcode' );
// 4. Two Third Column Shortcode
// init process for registering our button
add_action('init', 'twothirdcol_shortcode_button_init');
function twothirdcol_shortcode_button_init() {
//Abort early if the user will never see TinyMCE
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true')
return;
//Add a callback to regiser our tinymce plugin
add_filter("mce_external_plugins", "twothirdcol_register_tinymce_plugin");
// Add a callback to add our button to the TinyMCE toolbar
add_filter('mce_buttons', 'twothirdcol_add_tinymce_button');
}
//This callback registers our plug-in
function twothirdcol_register_tinymce_plugin($plugin_array) {
$plugin_array['twothirdcol_button'] = ''.get_template_directory_uri().'/shortcodes/shortcodes.js';
return $plugin_array;
}
//This callback adds our button to the toolbar
function twothirdcol_add_tinymce_button($buttons) {
//Add the button ID to the $button array
$buttons[] = "twothirdcol_button";
return $buttons;
}
// Add Shortcode
function twothirdcol_embed_shortcode( $atts , $content = null ) {
// Code
return '<div class="col-md-8">'.do_shortcode($content).'</div>';
}
add_shortcode( 'twothirdcol', 'twothirdcol_embed_shortcode' );
// 5. Line Break
// init process for registering our button
add_action('init', 'line_shortcode_button_init');
function line_shortcode_button_init() {
//Abort early if the user will never see TinyMCE
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true')
return;
//Add a callback to regiser our tinymce plugin
add_filter("mce_external_plugins", "line_register_tinymce_plugin");
// Add a callback to add our button to the TinyMCE toolbar
add_filter('mce_buttons', 'line_add_tinymce_button');
}
//This callback registers our plug-in
function line_register_tinymce_plugin($plugin_array) {
$plugin_array['line_button'] = ''.get_template_directory_uri().'/shortcodes/shortcodes.js';
return $plugin_array;
}
//This callback adds our button to the toolbar
function line_add_tinymce_button($buttons) {
//Add the button ID to the $button array
$buttons[] = "line_button";
return $buttons;
}
// Add Shortcode
function line_embed_shortcode( $atts ) {
// Code
return '<div class="hr short"></div>';
}
add_shortcode( 'line', 'line_embed_shortcode' );
// 6. Button
// init process for registering our button
add_action('init', 'button_shortcode_button_init');
function button_shortcode_button_init() {
//Abort early if the user will never see TinyMCE
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true')
return;
//Add a callback to regiser our tinymce plugin
add_filter("mce_external_plugins", "button_register_tinymce_plugin");
// Add a callback to add our button to the TinyMCE toolbar
add_filter('mce_buttons', 'button_add_tinymce_button');
}
//This callback registers our plug-in
function button_register_tinymce_plugin($plugin_array) {
$plugin_array['button_button'] = ''.get_template_directory_uri().'/shortcodes/shortcodes.js';
return $plugin_array;
}
//This callback adds our button to the toolbar
function button_add_tinymce_button($buttons) {
//Add the button ID to the $button array
$buttons[] = "button_button";
return $buttons;
}
// Add Shortcode
function button_embed_shortcode( $atts ) {
// Attributes
extract( shortcode_atts(
array(
'link' => '',
'target' => '',
'text' => '',
), $atts )
);
// Code
return '<div class="buttonred sc-content"><a href="'.$link.'." target="'.$target.'">'.$text.'</a></div>';
}
add_shortcode( 'button', 'button_embed_shortcode' );
// 7. clear
// init process for registering our button
add_action('init', 'clear_shortcode_button_init');
function clear_shortcode_button_init() {
//Abort early if the user will never see TinyMCE
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true')
return;
//Add a callback to regiser our tinymce plugin
add_filter("mce_external_plugins", "clear_register_tinymce_plugin");
// Add a callback to add our button to the TinyMCE toolbar
add_filter('mce_buttons', 'clear_add_tinymce_button');
}
//This callback registers our plug-in
function clear_register_tinymce_plugin($plugin_array) {
$plugin_array['clear_button'] = ''.get_template_directory_uri().'/shortcodes/shortcodes.js';
return $plugin_array;
}
//This callback adds our button to the toolbar
function clear_add_tinymce_button($buttons) {
//Add the button ID to the $button array
$buttons[] = "clear_button";
return $buttons;
}
// Add Shortcode
function clear_embed_shortcode( $atts ) {
// Code
return '<div class="clearfix"></div>';
}
add_shortcode( 'clear', 'clear_embed_shortcode' );
// 8. Slide Share
function slideshare_embed_shortcode( $atts ) {
// Attributes
extract( shortcode_atts(
array(
'id' => '',
), $atts )
);
// Code
return '<style>
.embed-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; margin: 25px 0px; height: 0; overflow: hidden; max-width: 100%; height: auto; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class="embed-container">
<iframe
src="http://www.slideshare.net//slideshow/embed_code/'.$id.'"
width="427"
height="356"
frameborder="0"
marginwidth="0"
marginheight="0"
scrolling="no"
style="border:1px solid #CCC; border-width:1px 1px 0; margin-bottom:5px; max-width: 100%;"
allowfullscreen>
</iframe>
</div>';
}
add_shortcode( 'slideshare', 'slideshare_embed_shortcode' );
// 8. Slide Show Modal
// init process for registering our button
add_action('init', 'slideshow_shortcode_button_init');
function slideshow_shortcode_button_init() {
//Abort early if the user will never see TinyMCE
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true')
return;
//Add a callback to regiser our tinymce plugin
add_filter("mce_external_plugins", "slideshow_register_tinymce_plugin");
// Add a callback to add our button to the TinyMCE toolbar
add_filter('mce_buttons', 'slideshow_add_tinymce_button');
}
//This callback registers our plug-in
function slideshow_register_tinymce_plugin($plugin_array) {
$plugin_array['slideshow_button'] = ''.get_template_directory_uri().'/shortcodes/shortcodes.js';
return $plugin_array;
}
//This callback adds our button to the toolbar
function slideshow_add_tinymce_button($buttons) {
//Add the button ID to the $button array
$buttons[] = "slideshow_button";
return $buttons;
}
function slideshow_modal_shortcode( $atts, $content = null ) {
// Attributes
extract( shortcode_atts(
array(
'name' => '',
'title' => '',
'button_text' => '',
), $atts )
);
// Code
return '
<div class="slideshow_modal">
<!-- Button trigger modal -->
<div class="buttonred pointer" data-toggle="modal" data-target="#'.$name.'">
<a>'.$button_text.'</a>
</div>
<!-- Modal -->
<div class="modal fade" id="'.$name.'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">'.$title.'</h4>
</div>
<div class="modal-body">
'.do_shortcode($content).'
</div>
</div>
</div>
</div>
</div>
';
}
add_shortcode( 'slideshow_modal', 'slideshow_modal_shortcode' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment