So how to add Social Share without Plugins? Well, that’s easy. The process will hardly take 30 minutes to complete depending on your taste. Whether you want to add Share Icons for Posts or Pages, the code is all same. Just the display condition is to be changed. This is the Easiest, Neat, and Clean method to add Social Share Icons for your WordPress site without any Plugins.
I just want to let you know, there is no ‘Share Count‘ feature. The code does not use third-party Icons, except Dashicons from WordPress itself. You can add or remove social share links just by editing some lines which will be discussed below.
Table of Contents
Social Share Icons PHP
Add the below code in your Child Theme’s ‘functions.php‘. We always recommend using Code Snippets Plugin for adding codes to theme files. Please do not add this to the Parent Theme’s functions.php file. (If you are OK with that, that’s fine. But know what you are doing)
/* WPC Climax Social Share Icons */
function wpclimax_social_share_icons($content) {
global $post;
if(is_single()) {
$wpclimaxURL = urlencode(get_permalink());
$wpclimaxTitle = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8');
$whatsappURL = 'https://api.whatsapp.com/send?text='.$wpclimaxURL;
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$wpclimaxURL;
$twitterURL = 'https://twitter.com/intent/tweet?text='.$wpclimaxTitle.'&url='.$wpclimaxURL.'&via=wpclimax';
$emailURL = 'mailto:?Subject='.$wpclimaxURL.'&title='.$wpclimaxTitle;
$content .= '<div class="wpclimax-social">';
$content .= '<p class="share-post">Share and Support</p>
<a class="wpclimax-link wpclimax-whatsapp" href="'. $whatsappURL .'" target="_blank"><span class=button-text>Whatsapp</span></a>';
$content .= '<a class="wpclimax-link wpclimax-facebook" href="'.$facebookURL.'" target="_blank"><span class=button-text>Facebook</span></a>';
$content .= '<a class="wpclimax-link wpclimax-twitter" href="'.$twitterURL.'" target="_blank"><span class=button-text>Twitter</span></a>';
$content .= '<a class="wpclimax-link wpclimax-email" href="'.$emailURL.'" target="_blank"><span class=button-text>Email</span></a>';
$content .= '</div>';
return $content;
}else{
return $content;
}
};
add_filter( 'the_content', 'wpclimax_social_share_icons');
/* End of WPC Climax Social Share Icons */The below code will work for any theme. This code will create Social Share Links in every single post only. Once added, open any post, you will see Social Sharing Links at the end of each post. We can add CSS and make it look appealing.
For Pages + Posts
If you want to add it to Page’s as well (also applies to posts), then replace line 4 with the below line.
if(is_singular()) { Only For Pages
If you want to add it only to Pages (not for posts), then replace line 4 with the below line.
if(is_page()) {
/*OR*/
if(is_page( 42 )) {
/*( 42 is the Page ID, incase you want this to apply for specific page)*/All Pages + Home Page
If you want to apply for all Single Pages and Posts, along with other conditions, in this case, code applies to the Home Page as well.
if(is_singular() || is_home()){ You can apply any conditions for the code to execute on a specific post type by referring to this article on WordPress Conditional Tags.
Social Share Icons CSS
Now let us add some CSS and make the Links appear like boxes. Add below lines of CSS to Theme’s Front End Customizer CSS or, to child theme’s style.css. One after the other to understand how it works, and you can make your own changes.
Background Color
There are two background colors for each icon. I have considered some standard colors. You can change them or you can use a common color related to your theme for all icons. That looks cool too.
/* Icon Background */
.wpclimax-twitter {
background: #08a0e9;
}
.wpclimax-twitter:hover,.wpclimax-twitter:active {
background: #36d8ff;
}
.wpclimax-facebook {
background: #3B5998;
}
.wpclimax-facebook:hover,.wpclimax-facebook:active {
background: #1877f2;
}
.wpclimax-whatsapp {
background: #075e54;
}
.wpclimax-whatsapp:hover,.wpclimax-buffer:active {
background: #25d366;
}
.wpclimax-email {
background: #bb001b;
}
.wpclimax-email:hover,.wpclimax-buffer:active {
background: #ea4335;
}
/* End Icon Background */Text + Icon Colors
Here we are going to add Colors for both the Text and Icons. In the below code, Text and Icons appear in White. While hovering, they will turn Black. Adding ‘important’ depends on your theme. If necessary add it.
/* General CSS */
.wpclimax-link:hover,.wpclimax-link:active {
color: black !important;
}
.wpclimax-link {
text-decoration: none;
color: white !important;
}
/* End General CSS */Icons Before Text
Let us add icons before the text shows up. We should see icons showing in front of text links. We are using Dashicons which are WordPress defaults. You can use Font Awesome if you wish. As of now, let us continue with Dashicons.
/* Icon CSS */
.wpclimax-link:before {
margin-top: 2px;
font-family: "dashicons";
}
/* End Icon CSS */
/* Icons Before */
.wpclimax-social .wpclimax-twitter:before {
content: "\f301";
}
.wpclimax-social .wpclimax-facebook:before {
content: "\f305";
}
.wpclimax-social .wpclimax-whatsapp:before {
content: "\f19a";
}
.wpclimax-social .wpclimax-email:before {
content: "\f466";
}
/* End Icons Before */Alignment
We will align everything to the center. We are also going to change the font size of the ‘Share and Support‘ text. You can change the text itself in the PHP code. Note that we have added the Bottom Margin to share text, also aligned icons to the center.
/* Share Text */
.share-post {
font-size: 20px;
font-weight: 700;
color: #1b78e2;
margin-bottom: 5px;
}
/* End Share Text */
/* Align Block */
.wpclimax-social {
text-align: center;
margin-bottom: 20px;
}
/* End Align Block */Desktop View CSS
If you add the below code, the Social Share Icons will look better in Desktop View. You can make changes according to your preference. You should change the media query cut-off width according to your theme.
/* Desktop View */
@media (min-width: 769px) {
.wpclimax-link {
padding: 2px 10px 4px 10px !important;
font-size: 19px;
border-radius: 2px;
margin: 4px 5px 4px 5px;
cursor: pointer;
display: inline-flex;
}
.wpclimax-link span.button-text {
padding-left: 6px;
}
}
/* End Desktop View */Mobile View CSS
In mobile view, we have removed the Link Texts and just kept the Icons. In case you need that Link Text, remove the ‘display: none;’ from the below code. In smaller devices, like iPhone SE, the sharing icons will appear in two lines. Removing the link text makes them appear in a single line.
/* Mobile View */
@media (max-width: 768px) {
.wpclimax-link {
padding: 2px 11px 4px 11px !important;
font-size: 24px;
border-radius: 5px;
margin: 4px 3px 4px 3px;
cursor: pointer;
display: inline-flex;
}
.wpclimax-link span.button-text{
display: none;
}
}
/* End Mobile View */Hover Effect
Let’s add some Pop-Up effects when the Mouse scrolls over the icons. You can adjust the scale in the below code.
/* Hover Effect */
.wpclimax-link:hover {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
/* End Hover Effect */Tips and Tricks
If something is not working, clear the cache and check.
If you want to add other sharing links, you can do that by replicating lines 11 and 17. Change the sharing URL and replace the names to avoid conflicts in PHP and CSS.
Note that, depending on your theme, WordPress dash icons may load only in the admin area and not in the front end. If the icons don’t show up in the frontend, add this code below to functions.php, or site through the Code Snippets plugin.
/* Load WordPress Dashicons FrontEnd */
add_action( 'wp_enqueue_scripts', 'wpclimax_load_dashicons_front_end' );
function wpclimax_load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}
/* End Load WordPress Dashicons FrontEnd */For GeneratePress Premium Theme
This applies to the GP theme with the GP Premium plugin installed and its elements feature activated. Instead of the above PHP code, you can use the code below. Here we have removed display conditions from the code.
<?php
function wpclimax_social_share_icons($content) {
global $post;
$wpclimaxURL = urlencode(get_permalink());
$wpclimaxTitle = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8');
$whatsappURL = 'https://api.whatsapp.com/send?text='.$wpclimaxURL;
$facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$wpclimaxURL;
$twitterURL = 'https://twitter.com/intent/tweet?text='.$wpclimaxTitle.'&url='.$wpclimaxURL.'&via=wpclimax';
$emailURL = 'mailto:?Subject='.$wpclimaxURL.'&title='.$wpclimaxTitle;
$content .= '<div class="wpclimax-social">';
$content .= '<p class="share-post">Share and Support</p>
<a class="wpclimax-link wpclimax-whatsapp" href="'. $whatsappURL .'" target="_blank"><span class=button-text>Whatsapp</span></a>';
$content .= '<a class="wpclimax-link wpclimax-facebook" href="'.$facebookURL.'" target="_blank"><span class=button-text>Facebook</span></a>';
$content .= '<a class="wpclimax-link wpclimax-twitter" href="'.$twitterURL.'" target="_blank"><span class=button-text>Twitter</span></a>';
$content .= '<a class="wpclimax-link wpclimax-email" href="'.$emailURL.'" target="_blank"><span class=button-text>Email</span></a>';
$content .= '</div>';
return $content;
};
add_filter( 'the_content', 'wpclimax_social_share_icons');
?>Here is how you do it,
Go to Elements > Add New Hook.
Copy the PHP Code with the PHP opening and closing tags.
Keep Defaults. Just Set the Display Rules.
Add a Display Location to Post, All Posts (or Whatever you like)
And then Publish. CSS will remain the same.
Custom Plugin
With all the PHP and CSS ready, you can construct your own plugin. This makes troubleshooting easy.
In case you want to download the Plugin version of the Code we use on our Site: WPC Social Share Plugin.
Just download the ZIP. Upload it to plugins and activate. Later in case you want to modify anything, you can do that by ‘Plugin Editor’ or ‘Front End CSS’.
Let us know in the comments if this article was useful. For any queries related to this page, please comment. We would love to help.