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


A little help with jQuery is needed :)

Hi everyone!

I am working on something for my own site, it is a plugin for wordpress that lets me add shortcodes for buttons. Slight difference with this to ones on the codes currently is mine will use flexbox to help lay these out.

I have the code to generate the shortcodes working from values entered in select options in a pupout.

Now the bit I can not figure out is how how to add and extra button within the wrapper shortcode:S

I a assuming we are looking a a variable to store first imputed data and then be updated with the new for as many buttons as you would like to add, however I have tried many things and im not getting close ....

Below you fill find the code that is being used to create and add the shortcodes. (Only the bits relevant to this question)


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

                <label for="bf_button_color" class="bf_button_form_label">Color</label>
                <select class="bf_button_form_select" id="bf_button_color" name="bf_button_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>

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

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

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


                <!-- This button should store first set of values and then allow more to be added as a new button -->
                <button class="button-primary" id="bf_button_add">Add Another Button</button>


                <!-- Controls Wrapper / Flex Direction -->
                <label for="bf_button_position" class="bf_button_form_label">Position</label>
                <select class="bf_button_form_select" id="bf_position" name="bf_button_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>

                <!-- Button to add final lot of shortcode -->
                <button class="button-primary" id="bf_shortcode_insert">Add Shortcode</button>


PHP function that include jQuery to add the content via shortcode to the tinyMCE editor:


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


  var bf_button_size = jQuery('select[name="bf_button_size"]').val();
  var bf_button_color = jQuery('select[name="bf_button_color"]').val();
  var bf_button_value = jQuery('input[name="bf_button_value"]').val();
  var bf_button_icon = jQuery('select[name="bf_button_icon"]').val();
  var bf_button_position = jQuery('select[name="bf_button_position"]').val();
  var bf_button_link = jQuery('input[name="bf_button_link"]').val();

    var shortcode = '[bf_button_wrapper bf_position="'+bf_button_position+'"]';
    shortcode += '[bf_button bf_button_size="'+bf_button_size+'" bf_button_color="'+bf_button_color+'" bf_button_value="'+bf_button_value+'" bf_button_icon="'+bf_button_icon+'" bf_button_link="'+bf_button_link+'"/]';
    shortcode += '[/bf_button_wrapper]';

  if( !tinyMCE.activeEditor || tinyMCE.activeEditor.isHidden()) {
  } else {
    tinyMCE.execCommand('mceInsertContent', false, shortcode);
  //close the thickbox after adding shortcode to editor



Any help and advice is much appreciated here ive been stuck for a while now...

1 Answer

Try to post your question on Wordpress theme forum. As JS question I have - where is "self" defined? If you want to make var self = $(this) you should do it first. There is no default "self" variable.