Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Help Please! When I click the insert button for shortcode, browser want to change page :S spot the error :)

Hi everyone!

I am on trying to build a plugin, all seems well really. It is a shortcode generator.

If you type the shortcode in manually all works fine, the pop out form to generate the attr's works fine..... Until you press the button to insert them.......

When you do press the button the code goes in to the TinyMCE editor but you get an alert box sometimes saying are you sure you want to leave this page and other times it just whips you over to the post page :S

Haha quite amusing really as I have no idea what I have done to cause this..

Below is the code for all to kindly look over and hopefully help spot the error of my ways :)

<?php

//Creat Shortcode Layouts and Variables
function bf_button_shortcode( $params, $content=null ) {
    extract(shortcode_atts(array(
        'bf_size'     => 'default',
        'bf_color'    => 'default',
        'bf_value'    => 'button',
        'bf_icon'     => 'home',
        'bf_position' => 'center',
        'bf_href'     => "#"
    ), $params ) );

    $result = '<div class="bfbuttons-btn-wrap ' . $bf_position .'">

                   <a class="btn btn-' . $bf_size . ' btn-' . $bf_color . '" href="' . $bf_link . '">' . $bf_value . '
                   <span class="glyphicon glyphicon-' . $bf_icon . '"></span></a>

               </div>';


    return $result;
}
add_shortcode( 'bf_button', 'bf_button_shortcode' );





//Add the button to the tinymce editor
function bf_button_shortcode_button($context){

    return $context.=__("
        <a href=\"#TB_inline?width=480&inlineId=bf_button_shortcode_generator_popup&width=640&height=513\"
           class=\"button thickbox\"
           id=\"bf_button_shortcode_button\"
           title=\"Add My Shortcode\">
           BF Buttons
           </a>");
}
add_action('media_buttons_context','bf_button_shortcode_button');




//Generate content for the popup window when the button is clicked
function bf_button_shortcode_generator(){
?>

<div id="bf_button_shortcode_generator_popup" style="display:none;">

    <div class="wrap">

        <h2>Options for Buttons</h2>

        <form role="form">
            <div class="form-group">

                <label for="bf_size" class="bf_button_from_label">Size</label>
                    <select class="form-control bf_button_from_select" id="bf_size" name="bf_size">
                        <option value="xs">Extra Small</option>
                        <option value="sm">Small</option>
                        <option value="md">Normal</option>
                        <option value="lg">Large</option>
                    </select>

                <label for="bf_color" class="bf_button_from_label">Color</label>
                <select class="form-control bf_button_from_select" id="bf_color" name="bf_color">
                    <option value="default">Default</option>
                    <option value="primary">Primary</option>
                    <option value="success">Success</option>
                    <option value="info">Info</option>
                    <option value="warning">Warning</option>
                    <option value="danger">Danger</option>
                </select>

                <label for="bf_value" class="bf_button_from_label">Value</label>
                <input type="text" class="form-control bf_button_from_input" id="bf_value" name="bf_value" placeholder="Value" />

                <label for="bf_icon" class="bf_button_from_label">Icon</label>
                <select class="form-control bf_button_from_select" id="bf_icon" name="bf_icon">
                    <option value="glyphicon-home">Home</option>
                    <option value="glyphicon-user">User</option>
                    <option value="glyphicon-cog">Cog</option>
                    <option value="glyphicon-hand-left">Hand Left</option>
                    <option value="glyphicon-arrow-down">Arrow Down</option>
                    <option value="glyphicon-trash">Trash</option>
                </select>

                <label for="bf_position" class="bf_button_from_label">Position</label>
                <select class="form-control bf_button_from_select" id="bf_position" name="bf_position">
                    <option value="bfbuttons-btn-wrap">Space Around</option>
                    <option value="btn-container-center">Row Center</option>
                    <option value="btn-container-left">Row Left</option>
                    <option value="btn-container-right">Row Right</option>
                    <option value="btn-container-stretch">Space Between</option>
                    <option value="btn-container-col-center">Column Center</option>
                    <option value="btn-container-col-right">Column Right</option>
                    <option value="btn-container-col-left">Column Left</option>
                </select>

                <label for="link" class="bf_button_from_label">Link</label>
                <input type="text" class="form-control bf_button_from_input" id="link" name="link" placeholder="#" />

            </div>
            <button class="button-primary" id="insert_bf_button_shortcode">Add Shortcode</button>
        </form>

    </div>

</div>
<?php
}
add_action('admin_footer','bf_button_shortcode_generator');



//javascript code needed to make shortcode appear in TinyMCE edtor
function bf_button_shortcode_add_shortcode(){?>
<script>
jQuery(document).ready(function ( $ ) {

    $('#insert_bf_button_shortcode').on('click',function(){

        var size = $('select[name=bf_size]').val();
        var type = $('select[name=bf_color]').val();
        var value = $('input[name=bf_value]').val();
        var type = $('select[name=bf_icon]').val();
        var type = $('select[name=bf_position]').val();
        var link = $('input[name=link]').val();

        var shortcode = '[my_shortcode attributes="'+user_content+'"/]';

      if( !tinyMCE.activeEditor || tinyMCE.activeEditor.isHidden()) {
        $('textarea#content').val(shortcode);
      } else {
        tinyMCE.execCommand('mceInsertContent', false, shortcode);
      }
      //close the thickbox after adding shortcode to editor
      self.parent.tb_remove();
    });

});
</script>
<?php
}
add_action('admin_footer','bf_button_shortcode_add_shortcode');





function bf_button_shortcode_styles(){

    wp_enqueue_style( 'bf_button_shortcode_style', plugins_url( 'bf_button_shortcodes/css/bf_button_shortcodes.css') );

}
add_action( 'wp_enqueue_scripts', 'bf_button_shortcode_styles' );

function bf_button_admin_styles(){

    wp_enqueue_style( 'bf_button_shortcode_style', plugins_url( 'bf_button_shortcodes/css/bf_button_admin.css') );

}
add_action( 'admin_head', 'bf_button_admin_styles' );


?>

There may be more than one error so eyes pealed out there!

Craig

Please help Zac Gordon :)

Ok we are moving forward for anyone taking a look at this question,

I now have a button on the tinymce editor that kindly opens my form, my form fully generates the shortcode and the shortcode works.

However, rather than the immediate redirect, I just get an alert saying would you like to leave this page :S is I say no and stay on the page shortcodes go into editor as and where i expect them. If I say leave I get hijacked over to the post section of admin area :S.

My latest code below: (sorry this is long)

<?php


//Add the call out button to the tinyMCE editor
function bf_button_shortcode_button($context){

    return $context.=__("
        <a href=\"#TB_inline?width=480&inlineId=bf_button_shortcode_generator_popup&width=640&height=513\"
           class=\"button thickbox\"
           id=\"bf_button_shortcode_button\"
           title=\"Add My Shortcode\">
           BF Buttons
           </a>");
}
add_action('media_buttons_context','bf_button_shortcode_button');


//Creat Shortcode Layouts and Variables
function bf_button_shortcode( $params, $content=null ) {
    extract(shortcode_atts(array(
        'bf_size'     => 'default',
        'bf_color'    => 'default',
        'bf_value'    => 'button',
        'bf_icon'     => 'glyphicon-home',
        'bf_position' => 'center',
        'bf_href'     => "#"
    ), $params ) );


    $result = '<div class="bfbuttons-btn-wrap ' . $bf_position .'">

                   <a class="btn btn-' . $bf_size . ' btn-' . $bf_color . '" href="' . $bf_link . '">' . $bf_value . '
                   <span class="glyphicon ' . $bf_icon . '"></span></a>

               </div>';

    return force_balance_tags( $result );
}
add_shortcode( 'bf_button', 'bf_button_shortcode' );


//Generate inline content for the popup window when the "my shortcode" button is clicked
function bf_button_shortcode_popup(){
?>

<div id="bf_button_shortcode_generator_popup" style="display:none;">
    <div class="wrap">

        <h2>Insert My Shortcode</h2>

        <div class="my_shortcode_add">

            <form>

                <label for="bf_size" class="bf_button_form_label">Size</label>
                <select class="bf_button_form_select" id="bf_size" name="bf_size">
                    <option value="xs">Extra Small</option>
                    <option value="sm">Small</option>
                    <option value="md">Normal</option>
                    <option value="lg">Large</option>
                </select>

                <label for="bf_color" class="bf_button_form_label">Color</label>
                <select class="bf_button_form_select" id="bf_color" name="bf_color">
                    <option value="default">Default</option>
                    <option value="primary">Primary</option>
                    <option value="success">Success</option>
                    <option value="info">Info</option>
                    <option value="warning">Warning</option>
                    <option value="danger">Danger</option>
                </select>

                <label for="bf_value" class="bf_button_form_label">Value</label>
                <input type="text" class="bf_button_form_input" id="bf_value" name="bf_value" placeholder="Value"/>

                <label for="bf_icon" class="bf_button_form_label">Icon</label>
                <select class="bf_button_form_select" id="bf_icon" name="bf_icon">
                    <option value="glyphicon-home">Home</option>
                    <option value="glyphicon-user">User</option>
                    <option value="glyphicon-cog">Cog</option>
                    <option value="glyphicon-hand-left">Hand Left</option>
                    <option value="glyphicon-arrow-down">Arrow Down</option>
                    <option value="glyphicon-trash">Trash</option>
                </select>

                <label for="bf_position" class="bf_button_form_label">Position</label>
                <select class="bf_button_form_select" id="bf_position" name="bf_position">
                    <option value="bfbuttons-btn-wrap">Space Around</option>
                    <option value="btn-container-center">Row Center</option>
                    <option value="btn-container-left">Row Left</option>
                    <option value="btn-container-right">Row Right</option>
                    <option value="btn-container-stretch">Space Between</option>
                    <option value="btn-container-col-center">Column Center</option>
                    <option value="btn-container-col-right">Column Right</option>
                    <option value="btn-container-col-left">Column Left</option>
                </select>

                <label for="bf_link" class="bf_button_form_label">Link</label>
                <input type="text" class="bf_button_form_input" id="bf_link" name="bf_link" placeholder="#" />

                <button class="button-primary" id="bf_button_insert">Add Shortcode</button>

            </form>

        </div>
    </div>
</div>

<?php
}
add_action('admin_footer','bf_button_shortcode_popup');

//javascript code needed to make shortcode appear in TinyMCE edtor
function bf_button_add_shortcode_to_editor(){
?>

<script>
jQuery('#bf_button_insert').on('click',function(){

  var bf_size = jQuery('select[name="bf_size"]').val();
  var bf_color = jQuery('select[name="bf_color"]').val();
  var bf_value = jQuery('input[name="bf_value"]').val();
  var bf_icon = jQuery('select[name="bf_icon"]').val();
  var bf_position = jQuery('select[name="bf_position"]').val();
  var bf_link = jQuery('input[name="bf_link"]').val();


    var shortcode = '[bf_button bf_size="'+bf_size+'" bf_color="'+bf_color+'" bf_value="'+bf_value+'" bf_icon="'+bf_icon+'" bf_position="'+bf_position+'" bf_link="'+bf_link+'"/]';

  if( !tinyMCE.activeEditor || tinyMCE.activeEditor.isHidden()) {
    jQuery('textarea#content').val(shortcode);
  } else {
    tinyMCE.execCommand('mceInsertContent', false, shortcode);
  }
  //close the thickbox after adding shortcode to editor
  self.parent.tb_remove();
});
</script>

<?php
}
add_action('admin_footer','bf_button_add_shortcode_to_editor');



function bf_button_shortcode_styles(){
    wp_enqueue_style( 'bf_button_shortcode_style', plugins_url( 'bf_button_shortcodes/css/bf_button_shortcodes.css') );
}
add_action( 'wp_enqueue_scripts', 'bf_button_shortcode_styles' );

function bf_button_admin_styles(){
    wp_enqueue_style( 'bf_button_shortcode_style', plugins_url( 'bf_button_shortcodes/css/bf_button_admin.css') );
}
add_action( 'admin_enqueue_scripts', 'bf_button_admin_styles' );

?>

I appreciate anyone looking over this to help and understand there may be a number of errors or better practices, this code has come from lots of research so thing may even be out of date.

Thanks anyway :)