SHARE

Wordpres Development Course

wordpress plugin development– creating your first social share buttons

Learning WordPress development is very easy like arranging plastic bricks on top of each other to make a simple shape or a pattern.

Developing WordPress is no easy task, and i feel its what every one really wants to do, create a self developed stuff into the WordPress plugin repository.

here i made this simple tutorial on Creating your First WordPress Plugin the easy way – and today we are gonna develop a social share button.

Please Note: i really wont go after the coding process – i mean teaching you how to write PHP Code and CSS code, but here i am going to make my possible best to make this process a lot easier.

Creating Your First WordPress Plugin The Easy Way


The WordPress plugin is just a set of Written Php , css and HTMl code treated as a separate template with each plugin registering a different defined function string – most times a unique Function string so it doesn’t clash with other created or per-installed WordPress plugin o the WordPress repository.

To move on we need create 4 documents and a folder.

download image pack here >>> images.zip

The folder is going to contain the images we shall create so it it suites you you create a different image to suite your work, but for this process we shall use already sized images so it matches with our artificial shadow drop down by css – i.e shawdows are not from created image.

First step.

create a file with the format plugin-name.php but for this practical we going to use nerd social share plugin.

to make this a plugabble wordpress plugin we need add the below line code

[php]<?php
/*
Plugin Name: Nerd Social Share Buttons
Plugin URI: http://shoutershub.com
Description: A set of very simple light load social sharing buttons – featuring important social media in your network
Author: Neon Emmanuel
Version: 1.0
Author URI: http://shoutershub.com
*/ }[/php]

the above code is simple empty and needs us do few works on it , but that’s our first ground in our work space, we shall add our php functions , hooks loops and string and between the */ } php string.

next we going to define default settings option on activation.

with this second line code, just after the firs one.

[php]// Initialize setting options on activation
register_activation_hook( __FILE__, ‘nd_install_activate_default_values’ );
function nd_install_activate_default_values() {
$nd_plugin_options = array(
‘label’ =&gt; ‘Seriously !! we love Social Media :)’,
‘post’ =&gt; ‘ok’,
‘page’ =&gt; ”,
);
update_option( ‘nerd_social_plugin’, $nd_plugin_options );
}[/php]

the register_activation_hook helps to register default values for the preceding tag and the entire file path

[php]( __FILE__, ‘nd_install_activate_default_values’ );[/php]

the next tag set default placement on where the post would defiantly appear, having 'post' => 'ok', and 'page' => '', – i.e the plugin would defiantly show on all post content and is optional on pages.

lastly we registered the function nerd_social_plugin with the update function $nd_plugin_options

Next we need to define a get value tag so we could always get and change the values of certain tags on our registered hook – here

[php]// get option value from the database
$option = get_option( ‘nerd_social_plugin’ );
$label = $option[‘label’];
$displaypost = $option[‘post’];
$displaypage = $option[‘page’];[/php]

we called on the option we registered then $option = get_option( 'nerd_social_plugin' ); and also called on $label = $option['label']; and defined a special target for each call out ( 'nerd_social_plugin' ), ['label'], ['post'] , ['page']

for now we are going to pause as per the php code functionality and create a new file this time nerd-social-share.css

i shall give us the code and explain the separate function each div style define’s
Here is the raw CSS code.

[css]/*social sharing buttons*/
.thetext { font: 100 20px/1.5 ‘Pacifico’, Helvetica, sans-serif; color: #2b2b2b; }
.social a{ display:inline-block; margin:10px 10px 5px 0; padding:10px 15px; color:#fff; font-weight:bold; text-align:center; text-decoration:none; border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; -webkit-border-radius:5px; -ms-border-radius:5px; }
/* ———- Google Font ———- */
@import url(http://fonts.googleapis.com/css?family=Oswald);
/* RESET STYLES */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 {font-weight:normal;padding-bottom:10px;}
q:before, q:after { content:”}
strong { font-weight: bold }
em { font-style: italic }
.italic { font-style: italic }
.aligncenter { display:block; margin:0 auto; }
.alignleft { float:left; margin:10px; }
.alignright { float:right;margin:10px; }
.no-margin{margin:0px;}
.no-bottom{margin-bottom:0px;}
.no-padding{padding:0px;}
.margin-t{margin-top:25px;}
div { position:relative }
a{text-decoration:none;color:#0073B2;}
a:hover{text-decoration:underline;}
a:active,a:focus{outline: none;}

div,img{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}/**** GENERAL STYLES*****/
html{-webkit-font-smoothing:antialiased;}body { background:#e0e0e0; color:#454545; }#menu-holder{width:100%;
margin: 60px fixed;}

.set-1 ul li{display:inline-block;margin-left:20px;margin-top:20px;}
.set-2{margin-top:50px;}
.set-2 ul li{display:inline-block;margin-left:20px;margin-top:20px;}
.content{margin-top:100px; text-align:center;}

.set-1 a {
position: relative;
color: #ffffff;
text-decoration: none;
font-family: ‘Oswald’;
display: block;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
width: 60px;
text-align: center;

-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);

-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;

height:54px;
cursor:pointer;
overflow:hidden;

font: 0/0 a;
text-shadow: none;
color: transparent;
}

.set-1 a:active, .set-2 a:active {
-webkit-transform: translate(0, 3px);
-moz-transform: translate(0, 3px);
transform: translate(0, 3px);
}

.set-2 a {
position: relative;
color: #ffffff;
text-decoration: none;
font-family: ‘Oswald’;
display: block;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;

font-size:16px;
padding:10px 15px 10px 60px;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
transform: translate(0, 0);

-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}

a.twitter-small, a.twitter-big{
-webkit-box-shadow: 0px 6px 0px #2695BC;
-moz-box-shadow: 0px 6px 0px #2695BC;
box-shadow: 0px 6px 0px #2695BC;
}
a.twitter-small{background:#2CA9E1 url("images/twitter.png") no-repeat center center;}
a.twitter-big{background:#2CA9E1;}

a.twitter-small:active, a.twitter-big:active{ -webkit-box-shadow: 0px 2px 0px #2695BC;
-moz-box-shadow: 0px 2px 0px #2695BC;
box-shadow: 0px 2px 0px #2695BC;
}

a.twitter-big:before{background: url("images/twitter.png") no-repeat center center;
content:"";
width:30px;
height:30px;
position:absolute;
left:10px;
top:18%;
}

a.facebook-small, a.facebook-big{
-webkit-box-shadow: 0px 6px 0px #293F63;
-moz-box-shadow: 0px 6px 0px #293F63;
box-shadow: 0px 6px 0px #293F63;
}
a.facebook-small{background:#3B5997 url("images/facebook.png") no-repeat center center;}
a.facebook-big{background:#3B5997;}

a.facebook-small:active, a.facebook-big:active{ -webkit-box-shadow: 0px 2px 0px #293F63;
-moz-box-shadow: 0px 2px 0px #293F63;
box-shadow: 0px 2px 0px #293F63;
}

a.facebook-big:before{background: url("images/facebook.png") no-repeat center center;
content:"";
width:30px;
height:30px;
position:absolute;
left:10px;
top:18%;
}

a.pinterest-small, a.pinterest-big{
-webkit-box-shadow: 0px 6px 0px #8C151B;
-moz-box-shadow: 0px 6px 0px #8C151B;
box-shadow: 0px 6px 0px #8C151B;
}
a.pinterest-small{background:#CD1D1F url("images/pinterest.png") no-repeat center center;}
a.pinterest-big{background:#CD1D1F}

a.pinterest-small:active, a.pinterest-big:active{ -webkit-box-shadow: 0px 2px 0px #8C151B;
-moz-box-shadow: 0px 2px 0px #8C151B;
box-shadow: 0px 2px 0px #8C151B;
}
a.pinterest-big:before{background: url("images/pinterest.png") no-repeat center center;
content:"";
width:30px;
height:30px;
position:absolute;
left:10px;
top:18%;
}

a.gplus-small, a.gplus-big{
-webkit-box-shadow: 0px 6px 0px #141412;
-moz-box-shadow: 0px 6px 0px #141412;
box-shadow: 0px 6px 0px #141412;
position:relative;
}
a.gplus-small{background:#353631 url("images/gplus.png") no-repeat center center;}
a.gplus-big{background:#353631;}
a.gplus-small:active, a.gplus-big:active{ -webkit-box-shadow: 0px 2px 0px #141412;
-moz-box-shadow: 0px 2px 0px #141412;
box-shadow: 0px 2px 0px #141412;
}
a.gplus-big:before{background: url("images/gplus.png") no-repeat center center;
content:"";
width:30px;
height:30px;
position:absolute;
left:10px;
top:18%;
}

a.rss-small,a.rss-big{
-webkit-box-shadow: 0px 6px 0px #C64802;
-moz-box-shadow: 0px 6px 0px #C64802;
box-shadow: 0px 6px 0px #C64802;
}
a.rss-small{background:#FF6501 url("images/rss.png") no-repeat center center;}
a.rss-big{background:#FF6501;}
a.rss-small:active, a.rss-big:active{ -webkit-box-shadow: 0px 2px 0px #C64802;
-moz-box-shadow: 0px 2px 0px #C64802;
box-shadow: 0px 2px 0px #C64802;
}
a.rss-big:before{background: url("images/rss.png") no-repeat center center;
content:"";
width:30px;
height:30px;
position:absolute;
left:10px;
top:18%;
}
a.dribbble-small, a.dribbble-big{
-webkit-box-shadow: 0px 6px 0px #B23D6D;
-moz-box-shadow: 0px 6px 0px #B23D6D;
box-shadow: 0px 6px 0px #B23D6D;
}
a.dribbble-small{background:#E84D89 url("images/dribbble.png") no-repeat center center;}
a.dribbble-big{background:#E84D89;}
a.dribbble-small:active, a.dribbble-big:active{ -webkit-box-shadow: 0px 2px 0px #B23D6D;
-moz-box-shadow: 0px 2px 0px #B23D6D;
box-shadow: 0px 2px 0px #B23D6D;
}
a.dribbble-big:before{background: url("images/dribbble.png") no-repeat center center;
content:"";
width:30px;
height:30px;
position:absolute;
left:10px;
top:18%;
}

a.linkedin-small, a.linkedin-big{
-webkit-box-shadow: 0px 6px 0px #005377;
-moz-box-shadow: 0px 6px 0px #005377;
box-shadow: 0px 6px 0px #005377;
}
a.linkedin-small{background:#0073B2 url("images/linkedin.png") no-repeat center center;}
a.linkedin-big{background:#0073B2;}
a.linkedin-small:active, a.linkedin-big:active{ -webkit-box-shadow: 0px 2px 0px #005377;
-moz-box-shadow: 0px 2px 0px #005377;
box-shadow: 0px 2px 0px #005377;
}
a.linkedin-big:before{background: url("images/linkedin.png") no-repeat center center;
content:"";
width:30px;
height:30px;
position:absolute;
left:10px;
top:18%;
}
a.stumble-small, a.stumble-big{
-webkit-box-shadow: 0px 6px 0px #B7371D;
-moz-box-shadow: 0px 6px 0px #B7371D;
box-shadow: 0px 6px 0px #B7371D;
}
a.stumble-small{background:#EA4B24 url("images/stumble.png") no-repeat center center;}
a.stumble-big{background:#EA4B24;}
a.stumble-small:active, a.stumble-big:active{ -webkit-box-shadow: 0px 2px 0px #B7371D;
-moz-box-shadow: 0px 2px 0px #B7371D;
box-shadow: 0px 2px 0px #B7371D;
}
a.stumble-big:before{background: url("images/stumble.png") no-repeat center center;
content:"";
width:30px;
height:30px;
position:absolute;
left:10px;
top:18%;
}
a.flickr-small, a.flickr-big{
-webkit-box-shadow: 0px 6px 0px #C10E78;
-moz-box-shadow: 0px 6px 0px #C10E78;
box-shadow: 0px 6px 0px #C10E78;
}
a.flickr-small{background:#FC1090 url("images/flickr.png") no-repeat center center;}
a.flickr-big{background:#FC1090;}
a.flickr-small:active, a.flickr-big:active{ -webkit-box-shadow: 0px 2px 0px #C10E78;
-moz-box-shadow: 0px 2px 0px #C10E78;
box-shadow: 0px 2px 0px #C10E78;
}
a.flickr-big:before{background: url("images/flickr.png") no-repeat center center;
content:"";
width:30px;
height:30px;
position:absolute;
left:10px;
top:18%;
}
a.vimeo-small, a.vimeo-big{
-webkit-box-shadow: 0px 6px 0px #1993AF;
-moz-box-shadow: 0px 6px 0px #1993AF;
box-shadow: 0px 6px 0px #1993AF;
}
a.vimeo-small{background:#20B9EB url("images/vimeo.png") no-repeat center center;}
a.vimeo-big{background:#20B9EB;}
a.vimeo-small:active, a.vimeo-big:active{ -webkit-box-shadow: 0px 2px 0px #1993AF;
-moz-box-shadow: 0px 2px 0px #1993AF;
box-shadow: 0px 2px 0px #1993AF;
}
a.vimeo-big:before{background: url("images/vimeo.png") no-repeat center center;
content:"";
width:30px;
height:30px;
position:absolute;
left:10px;
top:18%;
}

.myclass {
border: 1px solid #DDDDDD;
border-radius: 5px;
box-shadow: 0 0 15px 4px #E0E0E0 inset;
padding: 10px;
}[/css]

here i defined new tag for the text which i shall add with the inscription, “seriously we love social media”

[css]/*social sharing buttons*/
.thetext { font: 100 20px/1.5 ‘Pacifico’, Helvetica, sans-serif; color: #2b2b2b; }[/css]

[css].social a{ display:inline-block; margin:10px 10px 5px 0; padding:10px 15px; color:#fff; font-weight:bold; text-align:center; text-decoration:none; border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; -webkit-border-radius:5px; -ms-border-radius:5px; }[/css]

The text font style used "Pacifico" inst a universal web save font so i made an alternative and imported it from google with this tag

/* ---------- Google Font ---------- */
@import url(http://fonts.googleapis.com/css?family=Oswald);

to remove any might collide styles and fonts i reset the all styles with the below code for this plugin.

[css]/* RESET STYLES */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 {font-weight:normal;padding-bottom:10px;}
q:before, q:after { content:”}
strong { font-weight: bold }
em { font-style: italic }
.italic { font-style: italic }
.aligncenter { display:block; margin:0 auto; }
.alignleft { float:left; margin:10px; }
.alignright { float:right;margin:10px; }
.no-margin{margin:0px;}
.no-bottom{margin-bottom:0px;}
.no-padding{padding:0px;}
.margin-t{margin-top:25px;}
div { position:relative }
a{text-decoration:none;color:#0073B2;}
a:hover{text-decoration:underline;}
a:active,a:focus{outline: none;}[/css]

i then set a new style for it with the below code.

[css]/**** GENERAL STYLES*****/
html{-webkit-font-smoothing:antialiased;}
body { background:#e0e0e0; color:#454545; }
#menu-holder{width:100%;
margin: 60px fixed;}[/css]

i made use of this color code #e0e0e0 that looks like a gray and blend of white as the background, plus
#454545 as the color code, which looks just like the below color code sample.

color code 2

color code

but i made sure i set the width to 100%, with the above code width:100% so its resposive and would adapt even on low end smartphones.

[css]a.facebook-small, a.facebook-big{
-webkit-box-shadow: 0px 6px 0px #293F63;
-moz-box-shadow: 0px 6px 0px #293F63;
box-shadow: 0px 6px 0px #293F63;
}
a.facebook-small{background:#3B5997 url("images/facebook.png") no-repeat center center;}
a.facebook-big{background:#3B5997;}
a.facebook-small:active, a.facebook-big:active{ -webkit-box-shadow: 0px 2px 0px #293F63;
-moz-box-shadow: 0px 2px 0px #293F63;
box-shadow: 0px 2px 0px #293F63;
}[/css]

i then set the style for each button linking them to the image folder and the particular image in the image folder. using this code {background:#3B5997 url("images/facebook.png")

and i further repeated save process for all style i used as seen in the raw css code.
save your css code, after saving the css code by copy pasting the raw css code.

Please Take a time out

we are through with the Css file editing and wanna go back to the php file editing .

we need create the option base

[php]// get option value from the database
$option = get_option( ‘nerd_social_plugin’ );
$label = $option[‘label’];
    $displaypost = $option[‘post’];
    $displaypage = $option[‘page’];

// social share code obsolete
$plugin_code = ‘<div id="menu-holder">

<div class="set-1">
<ul>
<li><a href="http://twitter.com/home?status=’. the_title(”, ”, FALSE) .’: ‘. get_permalink() .’" title="Share this post on Twitter!" target="_blank" rel="nofollow" class="twitter-big">Twitter</a></li>
<li><a href="http://www.facebook.com/sharer.php?u=’. get_permalink() .’&amp;t=’. the_title(”, ”, FALSE) .’" rel="nofollow" title="Share this post on Facebook!" onclick="window.open(this.href); return false;" class="facebook-big">Facebook</a></li>
<li><a href="http://www.pinterest.com/pin/create/button/?url=’. get_permalink() .’ class="pinterest-big" class="pinterest-big">Pinterest</a></li>
<li><a href="https://plus.google.com/share?url=’. get_permalink() .’" rel="nofollow" class="gplus-big">GPlus</a></li>
<li><a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=’. get_permalink() .’" rel="nofollow" class="linkedin-big">Linkedin</a></li>
<li><a href="http://reddit.com/submit?url=’. get_permalink() .’&amp;title=’. the_title(”, ”, FALSE) .’" rel="nofollow" class="flickr-big">Reddit</a></li>
</ul>
</div>’."
</div>
</div>";
[/php]

and next i need my plugin to show on the side bar of the backend of the admin profile like this one.

admin menu

[php]add_action( ‘admin_menu’, ‘nd_social_share_plugin’ );
// Adding Submenu to settings
function nd_social_share_plugin() {
add_options_page( ‘Nerd Social Share Plugin’, ‘Nerd Social Share’,
‘manage_options’, ‘nerd-social-plugin-nd’, ‘nerd_social_plugin_nd’ );
}[/php]

Next i created a form for the admin back end that would always update the main file at the back end with this code.

[php]// plugin settings form
function nerd_social_plugin_nd() {

    ?>
<div class="wrap">
<?php screen_icon(); ?>
<h2>nerd’s social share buttons</h2>
<form action="options.php" method="post">
<table class="form-table">
<?php settings_fields(‘nerd_social_plugin’); ?>
<?php do_settings_sections(‘nerd-social-plugin-nd’); ?>
<div>
<input name="Submit" class="button-primary" type="submit" value="Save Changes" />
</div>

</form>
</table>

<br />
<h2>Documentation</h2>
<h3>Template Tags</h3>
<table><tr valign=’top’>
<td scope=’row’><p style="list-style:circle"></p>To include this plugin in any location of your theme, <br />
use this template tag</p></td>
<td style="margin: 5px"><textarea cols=’30’ rows=’1′>&lt;?php nd_social_share_tag(); ?&gt;</textarea></td>
</tr>

<tr valign=’top’>
<td scope=’row’><p style="list-style:circle"></p>To add a <b>Share label</b> using the template tag,<br />
pass the text as the function argument like this: </p></td>
<td><textarea cols=’45’ rows=’1′>&lt;?php nd_social_share_tag(‘Share this article’); ?&gt;</textarea></td>
</tr></table>

<h3>Shortcodes</h3>
<table><tr valign=’top’>
<td scope=’row’><p style="list-style:circle"></p>To include this plugin within a post or page,<br />
use this Shortcodes</p></td>
<td style="margin: 5px"><textarea cols=’30’ rows=’1′>[nd-social]</textarea></td>
</tr>

<tr valign=’top’>
<td scope=’row’><p style="list-style:circle"></p>To add a <b>share label</b> using shortcodes,<br />
do it like this: </p></td>
<td><textarea cols=’45’ rows=’1′>[nd-social label="Share this article"]</textarea></td>
</tr></table>
</div>

<?php }

    // Register and define the settings
    add_action(‘admin_init’, ‘nerd_social_plugin_init’);
    function nerd_social_plugin_init(){
    register_setting(
    ‘nerd_social_plugin’,
    ‘nerd_social_plugin’,
    ”
    );

    add_settings_section(
    ‘nerd-social-plugin-main’,
    ”,
    ”,
    ‘nerd-social-plugin-nd’
    );
    add_settings_field(
    ‘nerd-social-plugin-nd’,
    ‘Text to display before social buttons     ‘,
    ‘nd_social_share_plugin_setting_input’,
    ‘nerd-social-plugin-nd’,
    ‘nerd-social-plugin-main’
    );
    }

    // Display and fill the form field
    function nd_social_share_plugin_setting_input() {
    // Retrieve the settings values form DB and make them global
    global $label, $displaypost, $displaypage;
    echo "
    <tr valign=’top’>
    <th scope=’row’><label for=’read_more’> <strong>Sharing label</strong></label></th>";
    echo "<td><textarea cols=’60’ rows=’2′ id=’label’ name=’nerd_social_plugin[label]’>$label</textarea></td>
    </tr>"; ?>
    <tr valign=’top’>
    <th scope=’row’><label for=’display’> <strong>Where to be shown?</strong></label></th>
    <td><b>Post</b><br/><input type=’checkbox’ name=’nerd_social_plugin[post]’ value="ok" <?php checked($displaypost, ‘ok’)?> /><br/>
    <br/><b>Page</b><br/><input type=’checkbox’ name=’nerd_social_plugin[page]’ value="ok" <?php checked($displaypage, ‘ok’)?> /><br/>
    </td><br/><br/>
    </tr>[/php]

Next i added actions, and created a fill form action action and update system with this code.

[php]    <?php
    }

    /**
    * big
    */
    function nd_social_share_css() {
    wp_enqueue_style( ‘nd-social-share’, plugins_url(‘nd-social-share.css’, __FILE__) );
    wp_enqueue_style( ‘nd-social-font’, ‘http://fonts.googleapis.com/css?family=Pacifico’ );
    }
    add_action( ‘wp_enqueue_scripts’, ‘nd_social_share_css’ );

    add_action(‘the_content’, ‘nd_social_share_plugin_display’);

    /**
    * Displays social button function
    * @param string $content post content
    */
    function nd_social_share_plugin_display($content) {
    global $plugin_code, $label, $displaypost, $displaypage;
    
    if ($displaypost == ‘ok’) {
    if (is_single()) {
    $content.= ‘<div class="myclass" align="center">
    <div class="social"><div class="thetext">’. $label . ‘<div id="menu-holder">

<div class="set-1">
<ul>
<li><a href="http://twitter.com/home?status=’. the_title(”, ”, FALSE) .’: ‘. get_permalink() .’" title="Share this post on Twitter!" target="_blank" rel="nofollow" class="twitter-big">Twitter</a></li>
<li><a href="http://www.facebook.com/sharer.php?u=’. get_permalink() .’&amp;t=’. the_title(”, ”, FALSE) .’" rel="nofollow" title="Share this post on Facebook!" onclick="window.open(this.href); return false;" class="facebook-big">Facebook</a></li>
<li><a href="http://www.pinterest.com/pin/create/button/?url=’. get_permalink() .’ class="pinterest-big" class="pinterest-big">Pinterest</a></li>
<li><a href="https://plus.google.com/share?url=’. get_permalink() .’" rel="nofollow" class="gplus-big">GPlus</a></li>
<li><a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=’. get_permalink() .’" rel="nofollow" class="linkedin-big">Linkedin</a></li>
<li><a href="http://reddit.com/submit?url=’. get_permalink() .’&amp;title=’. the_title(”, ”, FALSE) .’" rel="nofollow" class="flickr-big">Reddit</a></li>
</ul>
</div>’."
</div>
</div>
</div>";
    }    
    }
if ($displaypage == ‘ok’) {
    if (is_page()) {
    $content.= ‘<div class="myclass" align="center">
    <div class="social"><div class="thetext">’. $label  . ‘</div>
       <div id="menu-holder">

<div class="set-1">
<ul>
<li><a href="http://twitter.com/home?status=’. the_title(”, ”, FALSE) .’: ‘. get_permalink() .’" title="Share this post on Twitter!" target="_blank" rel="nofollow" class="twitter-big">Twitter</a></li>
<li><a href="http://www.facebook.com/sharer.php?u=’. get_permalink() .’&amp;t=’. the_title(”, ”, FALSE) .’" rel="nofollow" title="Share this post on Facebook!" onclick="window.open(this.href); return false;" class="facebook-big">Facebook</a></li>
<li><a href="http://www.pinterest.com/pin/create/button/?url=’. get_permalink() .’ class="pinterest-big" class="pinterest-big">Pinterest</a></li>
<li><a href="https://plus.google.com/share?url=’. get_permalink() .’" rel="nofollow" class="gplus-big">GPlus</a></li>
<li><a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=’. get_permalink() .’" rel="nofollow" class="linkedin-big">Linkedin</a></li>
<li><a href="http://reddit.com/submit?url=’. get_permalink() .’&amp;title=’. the_title(”, ”, FALSE) .’" rel="nofollow" class="flickr-big">Reddit</a></li>
</ul>
</div>
</div>’."
</div>";
    }    
    }

    return $content;
    }
[/php]

and set a first way update system for the above code with this function

Next i created a shortcode and a display channel for it, so when a shortcode is added it could easily display the plugin on any section of my blog.

[php]your code here/**
    * Shortcode function ish
    */
    add_shortcode( ‘nd-social’, ‘nd_social_share_plugin_shortcode’ );
    function nd_social_share_plugin_shortcode( $attr ) {
    global $plugin_code;
    echo ‘<div class="myclass" align="center">’;
    if (!empty($attr[‘label’])) {
    echo ‘<div class="social"><div class="thetext">’. $attr[‘label’] . ‘</div>’;
    }
    else {
    echo ‘<div class="social">’;
    }
    echo ‘<!–Facebook–>
 <div id="menu-holder">

<div class="set-1">
<ul>
<li><a href="http://twitter.com/home?status=’. the_title(”, ”, FALSE) .’: ‘. get_permalink() .’" title="Share this post on Twitter!" target="_blank" rel="nofollow" class="twitter-big">Twitter</a></li>
<li><a href="http://www.facebook.com/sharer.php?u=’. get_permalink() .’&amp;t=’. the_title(”, ”, FALSE) .’" rel="nofollow" title="Share this post on Facebook!" onclick="window.open(this.href); return false;" class="facebook-big">Facebook</a></li>
<li><a href="http://www.pinterest.com/pin/create/button/?url=’. get_permalink() .’ class="pinterest-big" class="pinterest-big">Pinterest</a></li>
<li><a href="https://plus.google.com/share?url=’. get_permalink() .’" rel="nofollow" class="gplus-big">GPlus</a></li>
<li><a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=’. get_permalink() .’" rel="nofollow" class="linkedin-big">Linkedin</a></li>
<li><a href="http://reddit.com/submit?url=’. get_permalink() .’&amp;title=’. the_title(”, ”, FALSE) .’" rel="nofollow" class="flickr-big">Reddit</a></li>
</ul>
</div>
</div>
‘ . "
</div>
</div>";
    }[/php]

and finally created the template tag for the plugin with style-1 with an option that could be changed later to style-2, note all style one could be changed in the php tag to style-2

[php]/**
    * Template tag for adding plugin to templates
    * @param string $read_more Share plugin label
    */
    function nd_social_share_tag( $read_more = ”) {
    global $plugin_code;
    echo ‘<div class="myclass" align="center">
    <div class="social"><div class="thetext">’. $read_more . ‘</div>
      <div id="menu-holder">

<div class="set-1">
<ul>
<li><a href="http://twitter.com/home?status=’. the_title(”, ”, FALSE) .’: ‘. get_permalink() .’" title="Share this post on Twitter!" target="_blank" rel="nofollow" class="twitter-big">Twitter</a></li>
<li><a href="http://www.facebook.com/sharer.php?u=’. get_permalink() .’&amp;t=’. the_title(”, ”, FALSE) .’" rel="nofollow" title="Share this post on Facebook!" onclick="window.open(this.href); return false;" class="facebook-big">Facebook</a></li>
<li><a href="http://www.pinterest.com/pin/create/button/?url=’. get_permalink() .’ class="pinterest-big" class="pinterest-big">Pinterest</a></li>
<li><a href="https://plus.google.com/share?url=’. get_permalink() .’" rel="nofollow" class="gplus-big">GPlus</a></li>
<li><a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=’. get_permalink() .’" rel="nofollow" class="linkedin-big">Linkedin</a></li>
<li><a href="http://reddit.com/submit?url=’. get_permalink() .’&amp;title=’. the_title(”, ”, FALSE) .’" rel="nofollow" class="flickr-big">Reddit</a></li>
</ul>
</div>    ‘ .
        "
</div>
</div>
</div>";

    }[/php]

next i would create a file named uninstall.php, so all files and created tables are deleted as soon i click the uninstall button on my wordpress backend.

after creating the file , i shall add the below code

[php]<!–?php &lt;br ?–> // If uninstall not called from WordPress exit
if( !defined( ‘WP_UNINSTALL_PLUGIN’ ) )
exit ();
// Delete option from options table
delete_option( ‘nerd_social_plugin’ );
//remove any additional options and custom tables[/php]

and finally i shall create a readme.txt file for my plugin in case i wanna add it too wordpress repository.

you could download the readme file here >> readme.txt

Finally heer is the out come >>>

plugin outcome
code outcome for style-1
plugin 1
Code outcome for style-2

Download Full Plugin Code – Nerd social share butttons

view plugin in wordpress respository – Nerd social share in wordpress repository

Where you lost ? trust me there is no possbile way of my breaking down the coding process than what i have just done, but non the less , if you have got any issues or you not clear in some part of the tutorial please contact me by the comment box below.

Till then happy day ahead 🙂

LEAVE A REPLY