Below, you’ll find a detailed guide on how to add the Spice Social Share Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Spice Social Share Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Spice Social Share Plugin and the shortcodes it provides:
"Spice Social Share is a dynamic WordPress plugin that allows you to easily integrate and display social sharing buttons on your website. Boost engagement and increase your site's visibility with this tool."
- [spice_social_share]
Spice Social Share [spice_social_share] Shortcode
The spice-social-share shortcode is used to display social sharing buttons on a WordPress site. It retrieves theme settings to customize the appearance and functionality of these buttons. It includes Facebook, Twitter, LinkedIn, Mail, and Pinterest buttons. The buttons only appear if the respective setting is enabled. It also allows for customizing the order of these buttons. The shortcode also supports styling options. The text heading, button colors, and typography can be customized according to the theme settings. This makes the social sharing section blend seamlessly with the rest of the website.
Shortcode: [spice_social_share]
Examples and Usage
Basic example – A simple implementation of the spice-social-share plugin shortcode. This will display the social share buttons with default settings.
[spice_social_share]Advanced examples
Displaying the social share buttons with specified theme modifications. This example changes the heading of the share buttons, the order of the buttons, and enables only Facebook and Twitter share buttons.
[spice_social_share spice_social_share_heading="Share this post:" spice_social_share_sort="spice_facebook_share, spice_twitter_share" enable_spice_facebook_share=true enable_spice_twitter_share=true enable_spice_linkedin_share=false enable_spice_mail_share=false enable_spice_pinterest_share=false]Customizing the appearance of the social share buttons. This example changes the font family, font size, line height, font weight, font style, and text transform of the heading. It also changes the color of the heading, background color and icon color of the buttons.
[spice_social_share spice_social_share_fontfamily="Arial" spice_social_share_fontsize=20 spice_social_share_lheight=24 spice_social_share_fontweight=700 spice_social_share_fontstyle="italic" spice_social_share_transform="uppercase" spice_social_share_heading_color="#000000" spice_social_share_bg_color="#ffffff" spice_social_share_icon_color="#000000"]PHP Function Code
In case you have difficulties debugging what causing issues with [spice_social_share] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'spice_social_share',array($this,'social_share_callback'));Shortcode PHP function:
function social_share_callback()
{
ob_start();
$spice_social_share_content=get_theme_mod('spice_social_share_heading', esc_html__('Share this content:', 'spice-social-share' ));?>
<div class="spice_share_wrapper">
<?php if($spice_social_share_content != ''):?><p class="spice_share_title"><?php echo esc_html($spice_social_share_content);?></p><?php endif;?>
<div class="social-icon-box"><ul class="spice_social_share_list <?php if($spice_social_share_content != ''):?> margin <?php endif;?>">
<?php
$spice_social_share_sort=get_theme_mod( 'spice_social_share_sort', array('spice_facebook_share','spice_twitter_share','spice_linkedin_share','spice_mail_share','spice_pinterest_share') );
if ( ! empty( $spice_social_share_sort ) && is_array( $spice_social_share_sort ) ) :
foreach ( $spice_social_share_sort as $spice_social_share_sort_key => $spice_social_share_sort_val ) :
if(get_theme_mod('enable_spice_facebook_share',true)==true):
if ( 'spice_facebook_share' === $spice_social_share_sort_val ) :?>
<li class="spice_share_item">
<button class="spice_social_share_link spice_social_share_link_facebook">
<i class="fab fa-facebook-f"></i>
</button>
</li>
<?php endif;
endif;
if(get_theme_mod('enable_spice_twitter_share',true)==true):
if ( 'spice_twitter_share' === $spice_social_share_sort_val ) :?>
<li class="spice_share_item">
<button class="spice_social_share_link spice_social_share_link_twitter">
<i class="fab fa-twitter"></i>
</button>
<input type="hidden" id="spice_social_share_tweetuser" value="<?php echo esc_attr(get_theme_mod('spice_social_share_tw_user',''));?>"/>
</li>
<?php endif;
endif;
if(get_theme_mod('enable_spice_linkedin_share',true)==true):
if ( 'spice_linkedin_share' === $spice_social_share_sort_val ) :?>
<li class="spice_share_item">
<button class="spice_social_share_link spice_social_share_link_linkedin">
<i class="fab fa-linkedin-in"></i>
</button>
</li>
<?php endif;
endif;
if(get_theme_mod('enable_spice_mail_share',true)==true):
if ( 'spice_mail_share' === $spice_social_share_sort_val ) : ?>
<li class="spice_share_item">
<button class="spice_social_share_link spice_social_share_link_mail">
<i class="fa fa-envelope"></i>
</button>
</li>
<?php endif;
endif;
if(get_theme_mod('enable_spice_pinterest_share',true)==true):
if ( 'spice_pinterest_share' === $spice_social_share_sort_val ) :
$spice_social_share_pin_link=wp_get_attachment_url( get_post_thumbnail_id( get_the_ID() ) ); ?>
<li class="spice_share_item">
<button class="spice_social_share_link spice_social_share_link_pinterest">
<input type="hidden" id="spice_social_share_pin_link" value="<?php echo esc_attr($spice_social_share_pin_link);?>"/>
<i class="fab fa-pinterest"></i>
</button>
</li>
<?php endif;
endif;
endforeach;
endif; ?>
</ul>
</div>
</div>
<?php if(get_theme_mod('spice_social_share_typo',false) == true): ?>
<style type="text/css">
p.spice_share_title
{
font-family:'<?php echo esc_attr(get_theme_mod('spice_social_share_fontfamily','Poppins'));?>';
font-size:<?php echo intval(get_theme_mod('spice_social_share_fontsize',18));?>px;
line-height:<?php echo intval(get_theme_mod('spice_social_share_lheight',22));?>px;
font-weight:<?php echo intval(get_theme_mod('spice_social_share_fontweight',400));?>;
font-style:<?php echo esc_attr(get_theme_mod('spice_social_share_fontstyle','normal'));?>;
text-transform:<?php echo esc_attr(get_theme_mod('spice_social_share_transform','default'));?>;
}
</style>
<?php endif;
if(get_theme_mod('enable_spice_social_share_clr',false) == true):?>
<style type="text/css">
p.spice_share_title
{
color: <?php echo esc_attr(get_theme_mod('spice_social_share_heading_color','#858585'));?>;
}
body .spice_share_wrapper .spice_social_share_list button.spice_social_share_link
{
background-color: <?php echo esc_attr(get_theme_mod('spice_social_share_bg_color','#efefef'));?>;
color: <?php echo esc_attr(get_theme_mod('spice_social_share_icon_color','#242020'));?>;
}
body .spice_share_wrapper .spice_social_share_list button.spice_social_share_link:hover, body .spice_share_wrapper .spice_social_share_list button.spice_social_share_link:focus
{
background: <?php echo esc_attr(get_theme_mod('spice_social_share_bg_hover_color','#061018'));?>;
color: <?php echo esc_attr(get_theme_mod('spice_social_share_icon_hover_color','#ffffff'));?>;
}
</style>
<?php
endif;
$output = ob_get_contents();
ob_end_clean();
return $output;
}
Code file location:
spice-social-share/spice-social-share/spice-social-share.phpConclusion
Now that you’ve learned how to embed the Spice Social Share Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply