Share Shortcode Outputs on top of the page

Support
#1

Hi I am trying to make some modifications to the [share] shortcode and I have added it to the functions.php as follows:

  function x_portfolio_item_social_v2() {

    $share_project_title = x_get_option( 'x_portfolio_share_project_title' );
      $enable_facebook     = x_get_option( 'x_portfolio_enable_facebook_sharing' );
      $enable_twitter      = x_get_option( 'x_portfolio_enable_twitter_sharing' );
      $enable_google_plus  = x_get_option( 'x_portfolio_enable_google_plus_sharing' );
      $enable_linkedin     = x_get_option( 'x_portfolio_enable_linkedin_sharing' );
      $enable_pinterest    = x_get_option( 'x_portfolio_enable_pinterest_sharing' );
      $enable_reddit       = x_get_option( 'x_portfolio_enable_reddit_sharing' );
      $enable_email        = x_get_option( 'x_portfolio_enable_email_sharing' );

      $share_url     = urlencode( get_permalink() );
      $share_title   = urlencode( get_the_title() );
      $share_source  = urlencode( get_bloginfo( 'name' ) );
      $share_content = urlencode( get_the_excerpt() );
      $share_image   = urlencode( x_get_featured_image_with_fallback_url() );

      $facebook    = ( $enable_facebook == '1' )    ? "<a href=\"#share\" id=\"a-fb\" class=\"x-share\" title=\"" . __( 'Share on Facebook', '__x__' ) . "\" onclick=\"window.open('http://www.facebook.com/sharer.php?u={$share_url}&amp;t={$share_title}', 'popupFacebook', 'width=650, height=270, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-facebook\" data-x-icon=\"\"></i></a>" : '';
      $twitter     = ( $enable_twitter == '1' )     ? "<a href=\"#share\" id=\"a-tw\" class=\"x-share\" title=\"" . __( 'Share on Twitter', '__x__' ) . "\" onclick=\"window.open('https://twitter.com/intent/tweet?text={$share_title}&amp;url={$share_url}', 'popupTwitter', 'width=500, height=370, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-twitter\" data-x-icon=\"\"></i></a>" : '';
      $google_plus = ( $enable_google_plus == '1' ) ? "<a href=\"#share\" data-toggle=\"tooltip\" data-placement=\"bottom\" data-trigger=\"hover\" class=\"x-share\" title=\"" . __( 'Share on Google+', '__x__' ) . "\" onclick=\"window.open('https://plus.google.com/share?url={$share_url}', 'popupGooglePlus', 'width=650, height=226, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-google-plus\" data-x-icon=\"&#xf0d4;\"></i></a>" : '';
      $linkedin    = ( $enable_linkedin == '1' )    ? "<a href=\"#share\" data-toggle=\"tooltip\" data-placement=\"bottom\" data-trigger=\"hover\" class=\"x-share\" title=\"" . __( 'Share on LinkedIn', '__x__' ) . "\" onclick=\"window.open('http://www.linkedin.com/shareArticle?mini=true&amp;url={$share_url}&amp;title={$share_title}&amp;summary={$share_content}&amp;source={$share_source}', 'popupLinkedIn', 'width=610, height=480, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-linkedin-square\" data-x-icon=\"&#xf08c;\"></i></a>" : '';
      $pinterest   = ( $enable_pinterest == '1' )   ? "<a href=\"#share\" id=\"a-pi\" class=\"x-share\" title=\"" . __( 'Share on Pinterest', '__x__' ) . "\" onclick=\"window.open('http://pinterest.com/pin/create/button/?url={$share_url}&amp;media={$share_image}&amp;description={$share_title}', 'popupPinterest', 'width=750, height=265, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-pinterest\" data-x-icon=\"\"></i></a>" : '';
      $reddit      = ( $enable_reddit == '1' )      ? "<a href=\"#share\" data-toggle=\"tooltip\" data-placement=\"bottom\" data-trigger=\"hover\" class=\"x-share\" title=\"" . __( 'Share on Reddit', '__x__' ) . "\" onclick=\"window.open('http://www.reddit.com/submit?url={$share_url}', 'popupReddit', 'width=875, height=450, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;\"><i class=\"x-icon-reddit-square\" data-x-icon=\"&#xf1a2;\"></i></a>" : '';
      $email       = ( $enable_email == '1' )       ? "<a href=\"mailto:?subject=" . urlencode( get_the_title() ) . "&amp;body=" . urlencode( __( 'Hey, thought you might enjoy this! Check it out when you have a chance:', '__x__' ) ) . " " . get_permalink() . "\" id=\"a-ma\" class=\"x-share email\" title=\"" . __( 'Share via Email', '__x__' ) . "\"><span><i class=\"x-icon-envelope-o\" data-x-icon=\"\"></i></span></a>" : '';

      if ( $enable_facebook == '1' || $enable_twitter == '1' || $enable_google_plus == '1' || $enable_linkedin == '1' || $enable_pinterest == '1' || $enable_reddit == '1' || $enable_email == '1' ) :

        ?>

        <div class="x-entry-share">
          <div class="x-share-options">
            <?php echo $facebook . $twitter . $google_plus . $linkedin . $pinterest . $reddit . urldecode( $email ); ?>
          </div>
        </div>

      <?php

    endif;

  }

add_action('wp_head', 'change_item_social_v2');

function change_item_social_v2() {
    remove_shortcode( 'share' );
    add_shortcode( 'share', 'x_portfolio_item_social_v2' );
  }

However, for some reason, the output of the shortcode is always displayed at the top of the page. Why does this happen?

many thanks,
Andrew

#2

Actually I got some help and was able to modify the function like this in my functions.php

This will be useful for others.

add_action('wp_head', function() {

  // bail if shortcode doesn't exists
  if ( ! shortcode_exists( 'share' ) ) {
    return;
  }

  remove_shortcode( 'share' ); // remove what is defined before in change_item_social_v2()

  add_shortcode( 'share', function( $args = [], $content = '' ) {
    ob_start();

    x_portfolio_item_social_v2( $args, $content );

    return ob_get_clean();
  } );
}, 100 ); // high hook order 100 > 10 (default), ensure this is called after original change_item_social_v2()
#3

Hi,

Thanks for sharing the code.

Have a great day!

#4

Thanks–i’m not quite as proficient as you with php. is there a way to write this to accommodate all shortcodes? I’m hoping to be able to use a couple of different ones in the “topbar content” section…

[EDIT] a little digging with the correct terms found the fix: https://theme.co/apex/forum/t/shortcodes-stopped-displaying-after-upgrading-to-x-theme-5-2-2/12974/2

#5

Glad you’ve sorted it out.

Cheers!