Add Social Media Sharing Buttons To WordPress Without Plugin [No JavaScript]

In today’s post, we are going to show you a simple guide on how to create and add social media sharing buttons to WordPress without plugin and also without JavaScript. This tutorial is quite different from what you will find on other blogs as we have varieties of styles for you to choose from.

There is no doubt that social media share button is a must for a blog or website which is created to attain success as according to Google SEO social shares is among the ranking factors and no limit to what can be achieved with this social share button method and .

Add Social Media Sharing Buttons To WordPress Without Plugin [No JavaScript]

After a new website or blog is created the next thing that comes to mind is adding a social share button so as to fully optimize the blog for Search Engine Optimization (SEO) and the next thing to do is to add a third-party plugin as it is just a one-click install.

Easy to install just like plug and play but what about the negative impact it will have on your site speed? Have you put that into consideration? Well, this is why ZudoTech has published this post to help you with a beautiful social share buttons without JavaScript on your WordPress blog.

I am the picky type and I love to put aesthetics and optimization in mind when designing projects for my clients, your site must be good-looking without interference with the site performance when rendering the codes and also for optimum site speed. This has lead me to put together simple lines of codes to create a fast social share buttons for WP.

Have You Been Wanting Answers To The Following Questions?

How to create social share buttons on WordPress
Social Sharing Buttons Without JavaScript on WordPress
The Simplest way to add SVG social share button in WordPress
Adding Social Share Buttons to WordPress without plugin
DIY Social Sharing Buttons for WordPress e.t.c.

Trust me, you do not want to install a third party social share button plugin as this alone can reduce your site speed performance on PageSpeed Insights, GTmetrix and other website speed test tools.

Remember, the sharing buttons are a very important part of a website so you must have a clean-codded and attractive share button that when seen will encourage readers to share your content.

After many weeks of coding and testing I have finally come up with perfect social share buttons without JavaScript for WordPress websites/blogs and it has been optimized to work with any WordPress theme and also it is mobile responsive with the codes cleanly commented making it easy to customize to your taste.

Why Implement Your Own Social Sharing Button?

Speed is an essential factor that Google considers after you must have created a wonderful blog design or article so you don’t want to use a bloated plugin or plugins that uses too many extra requests from the WordPress plugin repository, below are some of the reasons to implement yours:

Many third-party social share plugins make plenty of requests which utilize a lot of hosting resources.
The majority of the social share plugins out there have JavaScripts in them which slows down your website speed.
If you create your social share buttons through this tutorial your page speed will increase and this makes Google to rank you higher than others.
Your page experience will be high giving visitors a smooth scroll on your website.

Features Of The Social Sharing Buttons

Here are some of the features we have in this fancy social sharing buttons for WordPress:

Made with PHP, HTML, SVG and CSS
Works with any WordPress theme
Mobile responsive
No JavaScript code included
No Tracking
No HTTP request
Super Fast Social Sharing Buttons (Tested on PageSpeed Insight & GTMetrix)
Clean code and commented for easy customization
FontAwesome and other third-party codes not added
Very Lightweight

WordPress Social Media Share Buttons Without Plugin In Steps

Let’s move away from the lengthy introduction and dive into the reason why you are here, all we need to make this simple project work is through PHP functions and CSS. With the function, we define the social buttons and hook them into the bottom content area (the position can also be changed to the top).

IMPORTANT: Make sure your site is backed up if you are implementing this via FTP, also, in case you come across any issue which affects your site visibility you can rename the function file or delete it.

Step 1: Create a function.php file

NOTE: It is important to note this, you can add your function code via a “Snippet plugin” or through “Theme Function” in the theme editor but those are not the best practice as we do not want a third-party plugin likewise we don’t want to tamper with our theme files.

So, what we’ve done here is to create our own plugin via a test editor app like Notepad++ or other types of editor, it can also be done via FTP. Here’s a guide that explains this better “How To Make WordPress Function.php File“. Read the guide first before proceeding.

<?php
/**
 * Plugin Name: ZudoTech Social Sharing Button
 * Version:     1.0.1
 * Description: My Social Share
 * Author:      Mr. Drey
 * Author URI:  https://zudotech.com/
 * License: GPL2
 */
/* Start Adding The Functions Below this Line */   

YOUR CODE SNIPPETS HERE!!!

/* Stop Adding The Functions Below this Line */
?>

You need to copy and paste the below code to replace where we have “YOUR CODE SNIPPETS HERE!!!.”

// Social Share
function zudotech_soical_share_buttom($content){

    global $post;
    if (is_singular() || is_home() || is_archive()) {
        
        //get shareable url & title & image Url
        $post_url = urlencode(get_permalink());
        $post_title = str_replace( ' ', '%20', get_the_title());
        $thumbnail = get_the_post_thumbnail_url($post->ID);

        $twitter = 'https://twitter.com/intent/tweet?text='.$post_title.'&amp;url='.$post_url.'&amp;';
        $facebook = 'https://www.facebook.com/sharer.php?u='.$post_url;
        $linkedIn = 'https://www.linkedin.com/shareArticle?mini=true&url='.$post_url.'&amp;title='.$post_title;
        $whatsapp = 'https://api.whatsapp.com/send?text='.$post_title . ' ' . $post_url;
                if ($thumbnail != '') {
        $pinterest = 'https://pinterest.com/pin/create/button/?url='.$post_url.'&amp;description='.$post_title;
        }else{
        $pinterest = 'https://pinterest.com/pin/create/button/?url='.$post_url.'&amp;description='.$post_title;
        }
        
        $content .= ' <div><b><div class="ico-sharetext">Share &#128158;: </div></b>
            <a class="share-ico ico-twitter" href="'.$twitter.'" title="Tweet on Twitter" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg> Tweet</a>
            <a class="share-ico ico-facebook" href="'.$facebook.'" title="Share on facebook" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></svg>Share</a>
            <a class="share-ico ico-pinterest" href="'.$pinterest.'" title="Pin on Pinterest" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" fill-rule="evenodd" clip-rule="evenodd"/></svg> Pin</a>
            <a class="share-ico ico-whatsapp" href="'.$whatsapp.'" title="Share on WhatsApp" target="_blank" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg> Send</a>
            <a class="share-ico ico-linkedin" href="'.$linkedIn.'" title="Share on LinkedIn" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="18" viewBox="0 0 24 24"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/></svg> Post</a>
        </div>';

        return $content;
    }

}
add_filter( 'the_content', 'zudotech_soical_share_buttom', 50);

After successfully adding this to the function.php when you visit any of your articles you will notice the share button has been added but is not beautifully displayed.

Step 2: Styling the button with CSS

To give it a nice design then you need to add the below CSS code in your CSS customization box E.g. Login to WP Dashboard > Appearance > Customize > Additional CSS.

Copy and paste the below CSS code into the “Additional CSS” box editor, then hit “Publish” to save your changes.

/* Social Share */
a.share-ico.ico-twitter {
    background-color: #007cba;
    color: #fff;
}
a.share-ico.ico-twitter:hover,a.share-ico.ico-twitter:active {
    background: #00b6f1;
}
a.share-ico.ico-facebook {
    background-color: #2d4372;
    color: #fff;
}
a.share-ico.ico-facebook:hover,a.share-ico.ico-facebook:active {
    background: #3B5997;
}
a.share-ico.ico-pinterest {
    background-color: #bd081c;
    color: #fff;
}
a.share-ico.ico-pinterest:hover,a.share-ico.ico-pinterest:active {
    background: #E50022;
}

a.share-ico.ico-whatsapp {
    background-color: #075E54;
    color: #fff;
}
a.share-ico.ico-whatsapp:hover,a.share-ico.ico-whatsapp:active {
    background: #128C7E;
}

a.share-ico.ico-linkedin {
    background-color: #006288;
    color: #fff;
}
a.share-ico.ico-linkedin:hover,a.share-ico.ico-linkedin:active {
    background: #0074A1;
}

a.share-ico svg {
    position: relative;
    top: 0.2em; 
	  fill: #fff;
	  display: inline-block;
	  padding-left: 0px;
}
a.share-ico {
    width: 100px;
    height: 28px;
    font-size: 1rem;
	  margin-right: px;
    line-height: 28px!important;
    text-align: center;
    display: inline-block;
	-webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.3);
    -webkit-border-radius: 4px;
	  -webkit-font-smoothing: antialiased;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 1px;
    text-decoration: none;
	  position: relative;
    top: 0.em;
	margin: 2px 0 2px 0; 
}
/* Social Share End */

Now you can go back to one of your posts and check, you will discover you now have a beautiful social share button with SVG icon.

This is the preview of the buttons:

Add Social Media Sharing Buttons To WordPress Without Plugin [No JavaScript] 2

To remove the shadow below each button find and delete this code:

-webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.3);

Preview of the buttons with no shadow:

To remove the font smoothing delete this line of code:

  -webkit-font-smoothing: antialiased;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 1px;
    text-decoration: none;
	  position: relative;
    top: 0.em;
	margin: 2px 0 2px 0;

Preview of the buttons with no font smoothing:

To make the button circle-like change the whole CSS with the one below:

/* Social Share */
a.share-ico.ico-twitter {
    background-color: #007cba;
    color: #fff;
}
a.share-ico.ico-twitter:hover,a.share-ico.ico-twitter:active {
    background: #00b6f1;
}
a.share-ico.ico-facebook {
    background-color: #2d4372;
    color: #fff;
}
a.share-ico.ico-facebook:hover,a.share-ico.ico-facebook:active {
    background: #3B5997;
}
a.share-ico.ico-pinterest {
    background-color: #bd081c;
    color: #fff;
}
a.share-ico.ico-pinterest:hover,a.share-ico.ico-pinterest:active {
    background: #E50022;
}

a.share-ico.ico-whatsapp {
    background-color: #075E54;
    color: #fff;
}
a.share-ico.ico-whatsapp:hover,a.share-ico.ico-whatsapp:active {
    background: #128C7E;
}

a.share-ico.ico-linkedin {
    background-color: #006288;
    color: #fff;
}
a.share-ico.ico-linkedin:hover,a.share-ico.ico-linkedin:active {
    background: #0074A1;
}

a.share-ico svg {
    position: relative;
    top: 0.2em; 
	  fill: #fff;
	  display: inline-block;
	  padding-left: 0px;
}
a.share-ico {
    width: 100px;
    height: 28px;
    font-size: 1rem;
	  margin-right: px;
    line-height: 28px!important;
    text-align: center;
    display: inline-block;
	-webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.3);
    -webkit-border-radius: 4px;
	  -webkit-font-smoothing: antialiased;
    -moz-border-radius: 100px;
    -o-border-radius: 100px;
    border-radius: 100px;
    text-decoration: none;
	  position: relative;
    top: 0.em;
	margin: 2px 0 2px 0; 
}
/* Social Share End */

Preview of the buttons with circled radius:

To give your button a unique style effect change your CSS to below:

/* Social Share */
a.share-ico.ico-twitter {
    background-color: #007cba;
    color: #fff;
}
a.share-ico.ico-twitter:hover,a.share-ico.ico-twitter:active {
    background: #00b6f1;
}
a.share-ico.ico-facebook {
    background-color: #2d4372;
    color: #fff;
}
a.share-ico.ico-facebook:hover,a.share-ico.ico-facebook:active {
    background: #3B5997;
}
a.share-ico.ico-pinterest {
    background-color: #bd081c;
    color: #fff;
}
a.share-ico.ico-pinterest:hover,a.share-ico.ico-pinterest:active {
    background: #E50022;
}

a.share-ico.ico-whatsapp {
    background-color: #075E54;
    color: #fff;
}
a.share-ico.ico-whatsapp:hover,a.share-ico.ico-whatsapp:active {
    background: #128C7E;
}

a.share-ico.ico-linkedin {
    background-color: #006288;
    color: #fff;
}
a.share-ico.ico-linkedin:hover,a.share-ico.ico-linkedin:active {
    background: #0074A1;
}

a.share-ico svg {
    position: relative;
    top: 0.2em; 
	  fill: #fff;
	  display: inline-block;
	  padding-left: 0px;
}
a.share-ico {
    width: 100px;
    height: 28px;
    font-size: 1rem;
	  margin-right: px;
    line-height: 28px!important;
    text-align: center;
    display: inline-block;
	-webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.3);
    -webkit-border-radius: 4px;
	  -webkit-font-smoothing: antialiased;
    -moz-border-radius: 100px;
    -o-border-radius: 100px;
    border-radius:  100px 100px 0;
    text-decoration: none;
	  position: relative;
    top: 0.em;
	margin: 2px 0 2px 0; 
}
/* Social Share End */

Preview of the buttons with unique radius:

To display just the SVG Icon alone change your Function code to:

// Social Share
function zudotech_soical_share_buttom($content){

    global $post;
    if (is_singular() || is_home() || is_archive()) {
        
        //get shareable url & title & image Url
        $post_url = urlencode(get_permalink());
        $post_title = str_replace( ' ', '%20', get_the_title());
        $thumbnail = get_the_post_thumbnail_url($post->ID);

        $twitter = 'https://twitter.com/intent/tweet?text='.$post_title.'&amp;url='.$post_url.'&amp;';
        $facebook = 'https://www.facebook.com/sharer.php?u='.$post_url;
        $linkedIn = 'https://www.linkedin.com/shareArticle?mini=true&url='.$post_url.'&amp;title='.$post_title;
        $whatsapp = 'https://api.whatsapp.com/send?text='.$post_title . ' ' . $post_url;
                if ($thumbnail != '') {
        $pinterest = 'https://pinterest.com/pin/create/button/?url='.$post_url.'&amp;description='.$post_title;
        }else{
        $pinterest = 'https://pinterest.com/pin/create/button/?url='.$post_url.'&amp;description='.$post_title;
        }
        
        $content .= ' <div><b><div class="ico-sharetext">Share &#128158;: </div></b>
            <a class="share-ico ico-twitter" href="'.$twitter.'" title="Tweet on Twitter" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg> </a>
            <a class="share-ico ico-facebook" href="'.$facebook.'" title="Share on facebook" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></svg></a>
            <a class="share-ico ico-pinterest" href="'.$pinterest.'" title="Pin on Pinterest" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" fill-rule="evenodd" clip-rule="evenodd"/></svg> </a>
            <a class="share-ico ico-whatsapp" href="'.$whatsapp.'" title="Share on WhatsApp" target="_blank" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg> </a>
            <a class="share-ico ico-linkedin" href="'.$linkedIn.'" title="Share on LinkedIn" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="18" viewBox="0 0 24 24"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/></svg></a>
        </div>';

        return $content;
    }

}
add_filter( 'the_content', 'zudotech_soical_share_buttom', 50);

//* Social share end

Preview of the button after removing text:

To give your button a wavelike shape use this CSS:


/* Social Share */
a.share-ico.ico-twitter {
    background-color: #007cba;
    color: #fff;
}
a.share-ico.ico-twitter:hover,a.share-ico.ico-twitter:active {
    background: #00b6f1;
}
a.share-ico.ico-facebook {
    background-color: #2d4372;
    color: #fff;
}
a.share-ico.ico-facebook:hover,a.share-ico.ico-facebook:active {
    background: #3B5997;
}
a.share-ico.ico-pinterest {
    background-color: #bd081c;
    color: #fff;
}
a.share-ico.ico-pinterest:hover,a.share-ico.ico-pinterest:active {
    background: #E50022;
}

a.share-ico.ico-whatsapp {
    background-color: #075E54;
    color: #fff;
}
a.share-ico.ico-whatsapp:hover,a.share-ico.ico-whatsapp:active {
    background: #128C7E;
}

a.share-ico.ico-linkedin {
    background-color: #006288;
    color: #fff;
}
a.share-ico.ico-linkedin:hover,a.share-ico.ico-linkedin:active {
    background: #0074A1;
}

a.share-ico svg {
    position: relative;
    top: 0.2em; 
	  fill: #fff;
	  display: inline-block;
	  padding-left: 0px;
}
a.share-ico {
    width: 100px;
    height: 28px;
    font-size: 1rem;
	  margin-right: px;
    line-height: 28px!important;
    text-align: center;
    display: inline-block;
	-webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.3);
    -webkit-border-radius: 4px;
	  -webkit-font-smoothing: antialiased;
    -moz-border-radius: 4px;
    -o-border-radius: 4p;
    border-radius: 1px;
    text-decoration: none;
	  position: relative;
    top: 0.em;
	margin: 2px 0 2px 0; 
	border-radius: 50px 0px 50px 0px;
}
/* Social Share End */

Preview below:

With the above codes and previews, you shouldn’t find it hard to make a pick, you can as well play with the CSS codes to come up with more styles.

How To Add Share Buttons Before Content In WordPress

Based on popular demand we also got our readers covered, in case you want to know how to add a social sharing button at the top of your content all you have to do is to add this function in your function.php file.

// Social Share Top
function zudotech_soical_share_top($content){

    global $post;
    if (is_singular() || is_home() || is_archive()) {
        
        //get shareable url & title & image Url
        $post_url = urlencode(get_permalink());
        $post_title = str_replace( ' ', '%20', get_the_title());
        $thumbnail = get_the_post_thumbnail_url($post->ID);

        $twitter = 'https://twitter.com/intent/tweet?text='.$post_title.'&amp;url='.$post_url.'&amp;';
        $facebook = 'https://www.facebook.com/sharer.php?u='.$post_url;
        $linkedIn = 'https://www.linkedin.com/shareArticle?mini=true&url='.$post_url.'&amp;title='.$post_title;
        $whatsapp = 'https://api.whatsapp.com/send?text='.$post_title . ' ' . $post_url;
                if ($thumbnail != '') {
        $pinterest = 'https://pinterest.com/pin/create/button/?url='.$post_url.'&amp;description='.$post_title;
        }else{
        $pinterest = 'https://pinterest.com/pin/create/button/?url='.$post_url.'&amp;description='.$post_title;
        }
        
        $before_content .= ' <div> <div class="ico-sharetext">Share this:
            <a class="share-ico ico-twitter" href="'.$twitter.'" title="Tweet on Twitter" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg> </a>
            <a class="share-ico ico-facebook" href="'.$facebook.'" title="Share on facebook" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></svg></a>
            <a class="share-ico ico-pinterest" href="'.$pinterest.'" title="Pin on Pinterest" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" fill-rule="evenodd" clip-rule="evenodd"/></svg> </a>
            <a class="share-ico ico-whatsapp" href="'.$whatsapp.'" title="Share on WhatsApp" target="_blank" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z"/></svg> </a>
            <a class="share-ico ico-linkedin" href="'.$linkedIn.'" title="Share on LinkedIn" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="18" viewBox="0 0 24 24"><path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z"/></svg> </a>
        </div></div>';
$fullcontent = $before_content . $content ;
        return $fullcontent;
    }

}
add_filter( 'the_content', 'zudotech_soical_share_top');

//* Social share Top end

Now that you know how to create custom social share button in WordPress without plugin you can then proceed to change the position or display on various pages.

How To Hide Social Share Button On Pages

After you add social media sharing buttons to your blog without plugins you will notice your normal pages like About Us, Contact Us, Disclaimer e.t.c. shows the social share buttons. To hide them we can make use of CSS.

You need to note down the number of each of the pages you want to hide so you can replace it on the code below:

/* Home Page */
.page-id-75 div.ico-sharetext {display: none;}
.page-id-75 a.share-ico.ico-twitter {display: none;}
.page-id-75 a.share-ico.ico-facebook {display: none;}
.page-id-75 a.share-ico.ico-pinterest {display: none;}
.page-id-75 a.share-ico.ico-whatsapp {display: none;}
.page-id-75 a.share-ico.ico-linkedin {display: none;}
/* Home Page */

/* About Us Page */
.page-id-70 div.ico-sharetext {display: none;}
.page-id-70 a.share-ico.ico-twitter {display: none;}
.page-id-70 a.share-ico.ico-facebook {display: none;}
.page-id-70 a.share-ico.ico-pinterest {display: none;}
.page-id-70 a.share-ico.ico-whatsapp {display: none;}
.page-id-70 a.share-ico.ico-linkedin {display: none;}
/* About Us Page */

You can get your page ID number for example by logging in to your Dashboard > Pages > Homepage, then clicking on edit, you should then check the browser address and you can see your ID number.

As you can see my homepage ID is 75 while my About Us page ID is 70, just replace the ID with what you have on yours and you can add more pages as you like.

Wrapping Up

With all the steps we’ve shown in this article I believe you now know how to create a social share button without javascript in WordPress. We have included the most used social buttons which are Facebook, Twitter, Pinterest, WhatsApp and Linked In, you can as well add more if you want or remove the ones you do not want.

In case you are faced with any difficulty or maybe you have any questions regarding website or WordPress development, then please feel free to contact me, I promise to help in my own little way.

If this article is helpful kindly hit the share button so as to encourage us to do more.

Share 💞:

How To Create A Custom WordPress Functions Plugin [2024]

Leave a Reply Cancel reply

Contact

Site Links

Search