How To Create Social Button Shortcodes in WordPress
20th May 2014 | Posted by Eko S. | 1 CommentPreviously I have write a tutorial on how to create a unique html/css social buttons by using our free Clipp Follow Us Button PSD Template. And today I’ll continue on how to applicate that social buttons on WordPress by using shortcodes. Let’s get started – only 5 steps!
General Steps
To create a shortcode on your WordPress website, you can start by creating a .php file on your root wordpress theme folder. Then by using WordPress include function, call .php file that you have been created before, inside your theme function.php file.
Step 1: Create a .php file
We’ll start by creating a .php file, we’ll name the file: custom-social-button.php then fill it with the script below:
Script 1:
<?php
function wp_button_scripts_styles() {
wp_enqueue_style( 'social-button', get_stylesheet_directory_uri() . '/articles_and_tutorials/css/shortcode_sbutton_styles.css' );
}
add_action( 'wp_enqueue_scripts', 'wp_button_scripts_styles' );
?>
The script above is to call the css style for your shortcode, and in this tutorial I’ll name the css style: shortcode-sbutton-styles.css. And the css file will inside your WordPress theme css folder.
Script 2:
<?php
function Social_Button($atts, $content = null) {
extract(shortcode_atts(array(
'link' => '#',
'social' => '',
'target' => ''
), $atts));
?>
<ul>
<?php
return '
<li class='.$social.'>
<div class="logo"></div><div class="body-list"><span><a href="'.$link.'" target="'.$target.'">' . do_shortcode($content) . '</a></span></div>
<div class="logo box"></div><div class="body-list box"><span><a href="#"></a></span></div>
</li>';?>
</ul>
<?php
}
add_shortcode('button', 'Social_Button');
add_filter('widget_text', 'do_shortcode');/*for widget*/
?>
On the above script, we have created a shortcode with the name “button” and adding three attributes for customization purpose inside three variables, ie: $link, $social and $target. The value of these variable by default was defined in array and will change depend with input, if you want to add the other attributes you can add on array but don’t forget to enclose the variable. The name of attribute and varible should same.
Step 2: Include the Shortcode PHP file inside functions.php
The next step is include our custom-social-button.php inside your WordPress theme function.php file by adding this script:
include_once (TEMPLATEPATH . ‘/custom-social-button.php’);
Now our shortcode is ready to use
Step 3: How to use the shortcode
To use our shortcode please type this script inside your post editor or text widget:
[button]YouTube[/button]
The result will be like this:
YouTube
As you can see, so far there is nothing special with our shortcode. Because we haven’t added the shortcode style.
Step 4: Adding the Shortcode CSS Style
Open the shortcode-sbutton-styles.css that we have been created before and add the css code below:
ul li{
list-style: none;
display: inline-block;
margin-right: 3px !important;
margin-bottom: 6px;
padding: 0;
}
li .body-list{
position: relative;
background: #f4f4f4;
border: 1px solid #61abc9;
border-left: none;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
width: 112px;
height: 25px;
border-bottom: 1px solid rgba(225,225,225,0.5);
}
li .body-list span a{
color: #747474;
text-decoration: none;
text-transform:capitalize;
padding: 2px 20px 0 15px;
position: absolute;
font-size: 13px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 80px;
}
li .body-list span{
content: " ";
height: 100%;
width: 5px;
background: #cc7b7b;
position: absolute;
float: left;
left: 0;
}
li .logo{
position: relative;
background: #b80000 url(/articles_and_tutorials/images/bg_logo.png) no-repeat -4px -6px;
width: 30px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
border: 1px solid #61abc9;
border-right: 1px solid transparent;
float: left;
height: 25px;
border-bottom: 1px solid rgba(225,225,225,0.5);
z-index: 100;
margin-left: -31px;
}
.body-list{
z-index: 100;
}
li .logo.box, .body-list.box, .body-list.box span {
/*add box-shadow*/
-webkit-box-shadow: inset 0px -6px 10px 0px rgba(50, 50, 50, 0.35);
-moz-box-shadow: inset 0px -6px 10px 0px rgba(50, 50, 50, 0.35);
box-shadow: inset 0px -6px 10px 0px rgba(50, 50, 50, 0.35);
/*setting position*/
margin-top: -23px;
z-index: 10;
border-bottom: 1px solid #61abc9 !important;
}
li .logo.box span, .body-list.box span{
margin-top: 0;
border: none !important;
}
We also need images (bg-logo.png and bg-logo-hover.png), you can download here. Then put it on your images theme folder.
Now our shortcode will be like this:
This is the default social button display since we haven’t add any attribute.
Step 5: Custom our button shortcode display
On the previous step, remember we have make the array attribute and three variable $social, $link, $target. These variable will be use on our shortcode like this:
[button social="$social" link="$link" target="$target"]Twitter[/button]
So, to show the different social buttons you need to add the attribute like this:
[button social="twitter" link="http://twitter.com" target="_blank"]Twitter[/button]
[button social="facebook" link="http://twitter.com" target="_blank"]Twitter[/button]
[button social="forrst" link="http://twitter.com" target="_blank"]Twitter[/button]
Then, our social button will be like this:
But, before that you should add more css styles for Twitter, Dribbble, RSS, Facebook, Pinterest, LinkedIn, Behance, Forrst, Vimeo and Flickr inside shortcode-sbutton-styles.css:
.twitter .logo{background-color: #2aaddd; background-position: -48px -8px;} /* change icon and background logo*/
.twitter .body-list span{background: #8dd8f4;} /* ring background color*/
.dribbble .logo{background-color: #f6287f; background-position: -92px -8px;}
.dribbble .body-list span{background: #f49cc2;}
.rss .logo{background-color: #ed6428; background-position: -4px -54px;}
.rss .body-list span{background: #feb095;}
.facebook .logo{background-color: #4462a3; background-position: -48px -54px;}
.facebook .body-list span{background: #a1b6e2;}
.pinterest .logo{background-color: #eb354b; background-position: -91px -54px;}
.pinterest .body-list span{background: #ff909d;}
.linkedin .logo{background-color: #006dc0; background-position: -4px -97px;}
.linkedin .body-list span{background: #71baf1;}
.deviantart .logo{background-color: #597062; background-position: -48px -97px;}
.deviantart .body-list span{background: #a4b3aa;}
.behance .logo{background-color: #00c6ff; background-position: -92px -97px;}
.behance .body-list span{background: #74e0ff;}
.forrst .logo{background-color: #4ec026; background-position: -4px -138px;}
.forrst .body-list span{background: #9dd888;}
.vimeo .logo{background-color: #2c81ba; background-position: -48px -137px;}
.vimeo .body-list span{background: #87bfe5;}
.flickr .logo{background-color: #58595a; background-position: -92px -137px;}
.flickr .body-list span{background: #9e9e9e;}
/*hover*/
li:hover .body-list{background-color: #dddddd; cursor: pointer; }
li:hover .logo{background-color: #888; background-image: url(/articles_and_tutorials/images/bg_logo_hover.png); cursor: pointer;}
li:hover .body-list span{background-color: #b1b1b1}
Conclusion
In this tutorial, you just create social button shortcode that you can applicate on your own WordPress website. I hope this tutorial will inspired you and helping you in your web WordPress project. The last, if you found the other better ways to build wordpress shortcodes, let’s discuss it with us below. Enjoy!
If you found this article is useful for you, then please keep update with us by following DynamicWP on Twitter.
- Written by Mukhlasin -
About The Author
