Added ability for buttons to open in a new tab

js/lbdesign-button-shortcode.js

@@ -19,6 +19,7 @@
                     title : 'Insert a Button',
                     body: [
                         {type: 'textbox', name: 'link', label: 'Link'},
+                        {type: 'checkbox', name: 'new_tab', label: 'Open link in a new tab'},
                         {type: 'textbox', name: 'content', label: 'Button Text' },
                         {type: 'listbox',
                             name: 'type',
@@ -56,7 +57,10 @@
                     ],
                     onsubmit: function(e) {
                         ed.focus();
-                        ed.selection.setContent('[lbdesign_button link="' + e.data.link + '" type="' + e.data.type + '" size="' + e.data.size + '" style="' + e.data.styles + '" custom_class="' + e.data.custom_class + '"]' + e.data.content + '[/lbdesign_button]');
+
+                        // build shortcode that gets inserted into the content when 'ok' is pressed on the modal
+                        // [lbdesign_button link="" new_tab="" type="" size="" style="" custom_class=""][/lbdesign_button]
+                        ed.selection.setContent('[lbdesign_button link="' + e.data.link + '" new_tab="' + e.data.new_tab + '" type="' + e.data.type + '" size="' + e.data.size + '" style="' + e.data.styles + '" custom_class="' + e.data.custom_class + '"]' + e.data.content + '[/lbdesign_button]');
                     }
                 });
             });

lbdesign-button-shortcode.php

@@ -13,8 +13,11 @@ function lbdesign_button_shortcode( $atts, $content = null ) {
 
     $classes[] = '';
 
+    $target = '';
+
     $atts = shortcode_atts(array(
     	'link'  => null,
+      'new_tab' => false,
     	'type'  => 'default',
         'color' => 'default',
     	'size'  => 'default',
@@ -24,17 +27,21 @@ function lbdesign_button_shortcode( $atts, $content = null ) {
 
     foreach ( $atts as $key => $att ) {
 
-        if( $key !== 'link' && $key !== 'custom_class' && $att !== null && $att !== '' && $att !== 'default' ) {
-            $classes[] = 'lbdesign_' . esc_attr( $att );
+        if( $key !== 'link' && $key !== 'new_tab' && $key !== 'custom_class' && $att !== null && $att !== '' && $att !== 'default' ) {
+            $classes[] = 'lbdesign_' . strtolower( esc_attr( $att ) );
         }
 
         if( $key == 'custom_class' ) {
             $classes[] = esc_attr( $att );
         }
 
+        if( $key == 'new_tab' && false !== $att && "false" !== $att ) {
+            $target = 'target="_blank"';
+        }
+
     }
 
-   return '<a class="lbdesign_button ' . implode( $classes, " " ) . '" href="' . esc_url( $atts['link'] ) . '">' . do_shortcode( $content ) . '</a>';
+   return '<a class="lbdesign_button ' . implode( $classes, " " ) . '" href="' . esc_url( $atts['link'] ) . '" ' . $target . '>' . do_shortcode( $content ) . '</a>';
 
 }
 add_shortcode( 'lbdesign_button', 'lbdesign_button_shortcode' );

readme.txt

@@ -34,6 +34,9 @@ This simple plugin allows you to add call-to-action buttons to post and page con
 * Pill
 * Block
 
+= Shortcode formatting: =
+[lbdesign_button link="" type="" size="" style="" custom_class=""]Button text[/lbdesign_button]
+
 == Installation ==
 
 1. Upload `lbdesign-button-shortcode` to the `/wp-content/plugins/` directory