How can I prevent a shortcode div from extending beyond its boundaries?

Question

I have a shortcode for user-defined social media buttons that works well, except for the fact that the div extends beyond its boundaries, meaning that if this shortcode is called in a widget, the following widgets are also encompassed within the shortcode’s div & shortcode-specific styling impacts the following widgets. I think what’s happening is probably akin to this thread but I’m not sure where I’ve gone awry because I’m not echoing anything in this code.

If the shortcode is placed last, it works perfectly but that’s not exactly good UX, is it?

Here is my code:

<?php

function smb_function( $atts ) {
    ?> <div class="social_button_shortcode"><?php
    $smb = array('fb', 'ig', 'tw', 'pi', 'li', 'et', 'fl', 'rd', 'tu', 'gr', 'yt', 'sn', 'em');
    $smb_url = array();
    foreach ( $smb as $index => $site ) {
        $thisURL = get_theme_mod ( 'themeslug_' . $site . '_url', '');
        if ( $thisURL != '' ) { 
            $smb_url[$site] = $thisURL;
            if ( $site == 'em' ) { if ( strncasecmp($smb_url[$site],"mail",4) and $smb_url[$site] != ''  ) { $smb_url[$site] = "mailto:" . $smb_url[$site]; } } 
            if ( $site != 'em' and ( strncasecmp($smb_url[$site],"http",4) and $smb_url[$site] != '' ) ) { $smb_url[$site] = "https://" . $smb_url[$site]; } 
        }
    } 
    
    $smb_img = array(   
        'fb' => $smb_dir . 'class="fab fa-facebook-f"',
        'tw' => $smb_dir . 'class="fab fa-twitter"',
        'rd' => $smb_dir . 'class="fab fa-reddit-alien"',
        'em' => $smb_dir . 'class="far fa-envelope"',
        'et' => $smb_dir . 'class="fab fa-etsy"',
        'fl' => $smb_dir . 'class="fab fa-flickr"',
        'ig' => $smb_dir . 'class="fab fa-instagram"',
        'li' => $smb_dir . 'class="fab fa-linkedin-in"',
        'pi' => $smb_dir . 'class="fab fa-pinterest-p"',
        'gr' => $smb_dir . 'class="fab fa-goodreads-g"',
        'sn' => $smb_dir . 'class="fab fa-snapchat-ghost"',
        'tu' => $smb_dir . 'class="fab fa-tumblr"',
        'yt' => $smb_dir . 'class="fab fa-youtube"',
    );

    if ( count($smb_url) > 0 ) {
                foreach($smb_url as $index => $site ){
        $return_string .= '<div class="smbwrap">';
        $return_string .= '<a target="_blank" href="' . $smb_url[$index] . '"><i ' . $smb_img[$index] . '></i></a>';
        $return_string .= '</div>';
        }

        return $return_string;
    } 

    ?></div>
    <?php
}

add_shortcode('socialbuttons', 'smb_function');
?>

Yes, I realize that adding shortcodes to a theme isn’t necessarily sanctioned by the poobas but the potential for a conflict here is incredibly low.

0
Jeff W 4 months 0 Answers 12 views 0

Leave an answer