0

I'm making a button shortcode that requires to attach extra HTML element to wp_foot for each shortcode added.

function action_button_shortcode( $atts, $content = null ) {
  extract( shortcode_atts(
    array(
      'title' => 'Title',
      'color' => 'blue', // blue, green
      'url' => 'url',
      'icon' => 'arrow',  // arrow, download, email, search, account, lock
      'level' => 'primary', // primary, secondary, tertiary
      'target' => 'self', // blank, self
    ),
    $atts
  ));
  if($target == 'modal'){
    return '<span class="byn-btn btn-' . $level . ' bg-' . $color . ' icon-' . $icon . '" data-toggle="modal" data-target="#modal' . url_to_postid( $url ) . '"><span>' . $title . '</span></span>';
  } else {
    return '<a href="' . $url . '" class="byn-btn btn-' . $level . ' bg-' . $color . ' icon-' . $icon . '" target="_' . $target . '"><span>' . $title . '</span></a>';
  }
  $content = wpautop(trim($content));
}
add_shortcode( 'ci-action-button', 'action_button_shortcode' );

When user set 'target' => 'modal', it will add this extra HTML to wp_foot. Something like loop, since there can be multiple buttons added to the page

<div class="modal fade" id="modal' . url_to_postid( $url ) . '" tabindex="-1" role="dialog" aria-labelledby="modal' . url_to_postid( $url ) . 'Label" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content subscribe-fields">
      <div class="modal-body">
        <div class="fullframe"><iframe width="100%" src="'. $url .'" class="fullHeight"></iframe></div>
      </div>
    </div>
  </div>
</div>

How to do that?

0

Usually, you don't need to place the modal code in the bottom of the website. So you can just write it directly before or after your toggler.

If you really want to place it in the bottom it is more complicated.

Since we need to get attributes from the shortcode, you cannot call wp_footer hook directly. So we need to write a filter that display the modal in the footer.

Here is an exemple :

function draw_footer_modal($modal_id) {
    add_action('wp_footer', function () use ($modal_id) {
        ?>
        <div class="modal fade" id="<?= $modal_id; ?>" tabindex="-1" role="dialog" aria-labelledby="<?= $modal_id; ?>'Label" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content subscribe-fields">
                    <div class="modal-body">
                        <div class="fullframe">my modal is here! </div>
                    </div>
                </div>
            </div>
        </div>
        <?php
    });
}

add_filter('draw_a_modal', 'draw_footer_modal', 10, 1);

function action_button_shortcode($atts, $content = null) {
    extract(shortcode_atts(
                    array(
                        'title' => 'Title',
                        'color' => 'blue', // blue, green
                        'url' => 'url',
                        'icon' => 'arrow', // arrow, download, email, search, account, lock
                        'level' => 'primary', // primary, secondary, tertiary
                        'target' => 'self', // blank, self
                    ),
                    $atts
    ));
    if ($target == 'modal') {
        do_action('draw_a_modal', '#modal' . url_to_postid($url)); // Apply the action here
        return '<span class="byn-btn btn-' . $level . ' bg-' . $color . ' icon-' . $icon . '" data-toggle="modal" data-target="#modal' . url_to_postid($url) . '"><span>' . $title . '</span></span>';
    } else {
        return '<a href="' . $url . '" class="byn-btn btn-' . $level . ' bg-' . $color . ' icon-' . $icon . '" target="_' . $target . '"><span>' . $title . '</span></a>';
    }
    $content = wpautop(trim($content));
}

add_shortcode('ci-action-button', 'action_button_shortcode');

I recommend putting the modal id attribute in a variable to avoid being different in target attribute than in the id attribute

0

You could use a "Closure" aka "anonymous function" inside the shortcode. Using this you can add_action('wp_footer', function(){}) and pass your modal to the footer.

function action_button_shortcode( $atts, $content = null ) {
    $atts = shortcode_atts(
        array(
            'title' => 'Title',
            'color' => 'blue', // blue, green
            'url' => 'url',
            'icon' => 'arrow',  // arrow, download, email, search, account, lock
            'level' => 'primary', // primary, secondary, tertiary
            'target' => 'self', // blank, self
        ),
        $atts
    );
    if($atts['target'] === 'modal'){
        add_action('wp_footer', function() use ($atts){
            echo '<div class="modal fade" id="modal' . url_to_postid( $atts['url'] ) . '" tabindex="-1" role="dialog" aria-labelledby="modal' . url_to_postid( $atts['url'] ) . 'Label" aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content subscribe-fields">
                  <div class="modal-body">
                    <div class="fullframe"><iframe width="100%" src="'. $atts['url'] .'" class="fullHeight"></iframe></div>
                  </div>
                </div>
              </div>
            </div>';
        });
        return '<span class="byn-btn btn-' . $atts['level'] . ' bg-' . $atts['color'] . ' icon-' . $atts['icon'] . '" data-toggle="modal" data-target="#modal' . url_to_postid( $atts['url'] ) . '"><span>' . $atts['title'] . '</span></span>';
    } else {
        return '<a href="' . $atts['url'] . '" class="byn-btn btn-' . $atts['level'] . ' bg-' . $atts['color'] . ' icon-' . $atts['icon'] . '" target="_' . $atts['target'] . '"><span>' . $atts['title'] . '</span></a>';
    }
    $content = wpautop(trim($content));
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.