How to Add Share Buttons to WordPress without Plugin ☑ [Explained]

Having share buttons in your website is a means to engage your visitors to promote your content and this is the reason why it’s important to add share buttons to WordPress without plugin (i.e customized share buttons).

Visitors who find your article worth reading may decide to spread the good news to their friends.

• Bonus guide: How to create WordPress contact form without plugin (ultimate guide) 

Most people like to use plugin for their WordPress share button. But some disadvantages of plugin is that; you cannot alter the plugin to suit individual requirements or specifications.

You can just change few things as the plugin developer have made it.

If you’re a tech guru like us who almost want to customize everything we are using, then you’re in the right place.

This method will prevent you from having so many plugins in your website and to abstain from loading external JavaScript’s and CSS to your site.

Getting Started

Today I’ll show you how you can add share buttons to your WordPress site without using any plugin to authenticate it.

Now anyone can add this share buttons directly from your WordPress dashboard without knowing much of HTML, CSS and PHP.

Never believe that it’s only possible to add share buttons in WordPress by using plugin alone. I don’t use it in my blog.

I have written a nice but simple code that will help you to achieve this. While following the below steps on how to achieve this, if you encounter any challenges use the comment section to tell us where you have issues.

Before we dive into how to add share buttons without plugin, it’s important to know how you can navigate through your dashboard and make changes to ⚙ Dashboard > Appearance > Theme Editor.

What are the requirements to add share button to WordPress without plugin?

WordPress enables their users to have quality control to their admin dashboard. Some specific functions you need to know are:

Appearance: This can be located directly from your dashboard panel once you successfully login to your WordPress dashboard.

Theme Editor: As the name described it, it’s the place where you can make changes to your theme. Before accessing this Theme Editor, you need to have basic knowledge of: folders, scripts, WordPress admin layout, and customization; and know how you can manipulate them.

Stylesheet: This theme file (style.css) contains the main CSS codes that powers your website user interface. If you have knowledge of CSS, you can make some changes to your website theme design here. But in this article all you need to do is COPY and PASTE. Even if you don’t have much knowledge about CSS, you can achieve all you need. ↓ Just make sure that you read this article to the end. ↓

Theme Functions: The function.php in your “Theme Editor” contains the major PHP codes that authenticate your website instructions. You can as well create new files directly from your functions.php file by just manipulating few lines of code.

Create a file: You need to create a new file in your “Theme Editor” so that your share button PHP code can be called from a separate file. Creating new files in your “Theme Editor” is not hard. Just follow my guidelines.

In addition, unnecessary to indicate, for Theme Editor Enthusiast read editing files guideline.

Now let’s get to the main part ↓

Preview of the share buttons that you’re going to have

By now you should know that share buttons is very essential to every website across the internet. It is necessary to style share buttons in order to make it very attractive to your website users.

The design of your share buttons will motivate your users to share your contents to their friends. After series of research and coding, we have written some authentic but simple codes that looks awesome to people.

From our CSS design, this is the preview of the share buttons:

We introduced SVG in our share button design because of the following reasons:

1. SVG is vector graphic base, it can scale any size to fit web pages
2. SVG is scalable, SEO friendly, has editing ability, and it is resolution independence

Merits of this share buttons

• It is responsive to all devices across the internet
• Inline SVG drawn with paths makes it looks very fantastic, beautiful most crucial scalable (This means that it’s display will look awesome regardless of your device screen resolution)
• It is customizable; you can change the “fill color” in the SVG to any color of your choice
• They don’t generate requests on your server
• Most relevant social media share buttons were included

Steps to add social media share buttons without plugin in WordPress

Step 1: Add below code in “functions.php”

Regardless of the theme you’re using, you should locate functions.php in your Theme Editor” and add the code below. This is mandatory even to those that are using a child theme in their WordPress website.

/**
 * Fantastic social media share buttons by www.jonakyblog.com
 */
function my_share_buttons() {
    $url = urlencode(get_the_permalink()); /* Getting the current post link */
    $title = urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')); /* Get the post title */
    $media = urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full')); /* Get the current post image thumbnail */

    include( locate_template('share-buttons-template.php', false, false) );
}

The last line in the above code contains …share-buttons-template.php… This is a file that you need to create in your Theme Editor so that you can easily call this code => function my_share_buttons() anywhere in your website.

Step 2: You need to create a file named “share-buttons-template.php” and add the below code;

Am sure that most of you have not come across creating files within your Theme Editor. Though that’s simple. I will show you the easy way to do that.

Here is a post you should read in order to create a new file named share-buttons-template.php within your Theme Editor: ↓↓↓

If you are an expert in editing HTML, you can make some changes to suit your heart desire. But if you can’t do that, you don’t have to border. I’ve already designed a nice share button layout for you.

All you have to do now is to COPY EXACTLY the code below and PASTE it inside the file you created using guideline from the above link.

IMPORTANT NOTICE!

Make sure to substitute/replace Jonaky_Blog with your website name in Linkedin share button code below.

This is what I mean; when you copy the bulk of code for your share button, find and replace Linkedin source with your website name.

<!-- find this code in the main share button code and edit it -->
<a class="share-linkedin" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&source=Jonaky_Blog" title="Share on Linkedin" target="_blank">

As this will alter your post when shared on Linkedin to have its source as Jonaky Blog.

↓ This is the code you should COPY and PASTE it in the new file that you just created in your “theme editor” ↓

<!-- Share button HTML, CSS & PHP code by www.jonakyblog.com -->

<div><h3 style="margin-bottom: 5px; padding: 0px;">Share this post:</h3>
<ul class="share-buttons">
    <li>
        <a class="share-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink();?>" title="Share on Facebook" target="_blank">
            <svg id="facebook" data-name="facebook" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.61 59.03">
                <path d="M47.2,12.76H41.63c-4.36,0-5.18,2.09-5.18,5.11v6.71h10.4l-1.38,10.5h-9V62H25.59V35.07h-9V24.57h9V16.84c0-9,5.5-13.87,13.52-13.87a69.4,69.4,0,0,1,8.09.43Z" transform="translate(-16.59 -2.97)"/>
            </svg>
            <span>Share</span>
        </a>
    </li>
    <li>
        <a class="share-twitter" href="https://twitter.com/intent/tweet?url=<?php the_permalink();?>&text=<?php echo the_title(); ?>&via=<?php the_author_meta( 'twitter' ); ?>" title="Tweet this" target="_blank">
            <svg id="twitter" data-name="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58.1 47.2">
                <path d="M54.86,20.19v1.55c0,15.74-12,33.88-33.88,33.88A33.64,33.64,0,0,1,2.74,50.27a24.55,24.55,0,0,0,2.88.15A23.84,23.84,0,0,0,20.4,45.33,11.93,11.93,0,0,1,9.27,37.07a15,15,0,0,0,2.25.18,12.58,12.58,0,0,0,3.13-.41A11.91,11.91,0,0,1,5.1,25.17V25a12,12,0,0,0,5.38,1.51A11.92,11.92,0,0,1,6.8,10.61,33.84,33.84,0,0,0,31.35,23.06a13.44,13.44,0,0,1-.29-2.73,11.92,11.92,0,0,1,20.61-8.15,23.43,23.43,0,0,0,7.56-2.87A11.87,11.87,0,0,1,54,15.88,23.87,23.87,0,0,0,60.84,14,25.59,25.59,0,0,1,54.86,20.19Z" transform="translate(-2.74 -8.42)"/>
            </svg>
            <span>Tweet</span>
        </a>
    </li>
    <li>
        <a class="share-pinterest" href="//pinterest.com/pin/create/%20button?url=<?php echo urlencode(get_permalink($post->ID)); ?>&description=<?php the_title(); ?>" target="_blank" title="Pin it">
            <svg id="pinterest" data-name="pinterest" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61.48 61.48">
                <path d="M31.78,63a30.1,30.1,0,0,1-8.73-1.28,25.52,25.52,0,0,0,3.12-6.56s.36-1.36,2.16-8.45c1,2,4.16,3.84,7.48,3.84,9.89,0,16.61-9,16.61-21.09,0-9.09-7.72-17.61-19.49-17.61C18.37,11.83,11,22.32,11,31c0,5.28,2,10,6.28,11.77a1.06,1.06,0,0,0,1.52-.8c.16-.52.48-1.88.64-2.44A1.51,1.51,0,0,0,19,37.85a8.93,8.93,0,0,1-2-6C17,24,22.77,17.07,32.1,17.07c8.24,0,12.81,5,12.81,11.81,0,8.85-3.92,16.33-9.77,16.33a4.76,4.76,0,0,1-4.84-5.92C31.22,35.41,33,31.2,33,28.4c0-2.52-1.36-4.64-4.16-4.64-3.28,0-5.92,3.4-5.92,8a12.81,12.81,0,0,0,1,4.88c-3.36,14.25-4,16.73-4,16.73a26.94,26.94,0,0,0-.52,7.08A30.77,30.77,0,1,1,31.78,63Z" transform="translate(-1.04 -1.5)"/>
            </svg>
            <span>Pin_it</span>
        </a>
    </li>
    <li>
        <a class="share-linkedin" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&source=Jonaky_Blog" title="Share on Linkedin" target="_blank">
            <svg id="linkedin" data-name="linkedin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 292 292">
                <path d="M186.4 142.4c0 19-15.3 34.5-34.2 34.5 -18.9 0-34.2-15.4-34.2-34.5 0-19 15.3-34.5 34.2-34.5C171.1 107.9 186.4 123.4 186.4 142.4zM181.4 201.3h-57.8V388.1h57.8V201.3zM273.8 201.3h-55.4V388.1h55.4c0 0 0-69.3 0-98 0-26.3 12.1-41.9 35.2-41.9 21.3 0 31.5 15 31.5 41.9 0 26.9 0 98 0 98h57.5c0 0 0-68.2 0-118.3 0-50-28.3-74.2-68-74.2 -39.6 0-56.3 30.9-56.3 30.9v-25.2H273.8z" transform="translate(-104.55 -69.65)" />
            </svg>
            <span>Linkedin</span>
        </a>
    </li>
    <li>
        <a class="share-whatsapp" href="https://api.whatsapp.com/send?text=<?php the_title(); ?>: <?php the_permalink(); ?>" data-action="share/whatsapp/share" title="Share on Whatsapp" target="_blank">
            <svg id="whatsapp" data-name="whatsapp" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
                <path d=" M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z" transform="translate(-5.55 -4.65)" />
            </svg>
            <span>Whatsapp</span>
        </a>
    </li>
    <li>
        <a class="share-email" href="mailto:type%20email%20address%20here?subject=I%20wanted%20to%20share%20this%20post%20with%20you%20from%20<?php bloginfo('name'); ?>&body=<?php the_title(); ?> - <?php the_permalink(); ?>" title="Email to a friend/colleague" target="_blank">
            <svg id="email" data-name="email" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
                <path d="M101.3 141.6v228.9h0.3 308.4 0.8V141.6H101.3zM375.7 167.8l-119.7 91.5 -119.6-91.5H375.7zM127.6 194.1l64.1 49.1 -64.1 64.1V194.1zM127.8 344.2l84.9-84.9 43.2 33.1 43-32.9 84.7 84.7L127.8 344.2 127.8 344.2zM384.4 307.8l-64.4-64.4 64.4-49.3V307.8z" transform="translate(-105.55 -60.65)" />
            </svg>
            <span>Email it</span>
        </a>
    </li>
</ul>
</div>

Step 3: Add below code to your Stylesheet (style.css)

All WordPress themes has style.css file. Even if you’re using a child theme, locate where your sytyle.css file is and carefully COPY and PASTE below code inside the file.

I will advise you to scroll to the last CSS code in your style.css file and paste this code you’re about to copy. This is for easy customization and editing as well.

/* Share buttons CSS code designed by www.jonakyblog.com */
.share-buttons {
    font-size: 0.5rem;
    font-weight: bold;
    line-height: 0.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 30px;
    z-index: 2;
    position: relative;
    text-align: center;
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: flex-start;
}

.share-buttons li {
    height: auto;
    flex: 0 1 auto;
    width: calc(16.6% - 2px);
    margin-right: 2px;
}

.share-buttons li:last-child {
    width: 16.6%;
    margin-right: 0;
}

.share-buttons svg {
    fill: #fff;
    margin-right: 5px;
    width: 16px;
    height: 16px;
}

.share-buttons a {
    display: block;
    padding: 8px 8px 8px;
    text-align: center;
    text-decoration: none !important;
    color: #fff !important;
}

.share-buttons a:hover {
    opacity: 0.8;
}


.share-buttons li:first-child a {
    border-radius: 6px 0 0 6px;
}

.share-buttons li:last-child a {
    border-radius: 0 6px 6px 0;
}

.share-twitter {
    background: #1da1f2;
}

.share-facebook {
    background: #3b5998;
}

.share-whatsapp {
    background-color:#3fbb50;
}
.share-linkedin {
    background-color:#0077b5;
}
.share-email {
    background-color:#888;
}

.share-pinterest    {
    background: #b5071a;
}

Thumbs up!

At this stage, you have successfully copied all the necessary codes needed to display the share buttons in your website. But guess what! It’s time for you to call the already created function to the places (whether in pages or posts) where you want them to be displayed.

How to display the share buttons in your WordPress website

For you to be able to display the share buttons to some strategic places within your website, you have to call the class you created earlier. Now call my_share_buttons() function in your  single.php or in your page.php.

You can decide to call function in both page.php and single.php that is if you intend to have the share buttons showing both in your pages and as well as your blog posts.

COPY and PASTE below code in either of the pages as the case may be.

<?php my_share_buttons(); ?>

Alternatively to customize further on how and where you want these share buttons to be displaying, read the section below ↓.

Placing this share button at the footer of your blog post

I know that you will love to display this awesome share buttons at the footer of all your blog posts. To do this, you need to open your “single.php” file which contains all the elements that should be displayed repeatedly in all your blog posts.

Normally single.php file contains loop of PHP code which runs each time a new post is being published. Depending on your theme, you may just need to call my_share_buttons(); inside the loop of codes (instaed of adding the PHP opening and closing tag – <?php ?>) so as to include the share buttons within your posts.

This is the end of this tutorial.

If you followed all the steps sequentially and carefully, you’ll arrive at displaying this awesome share buttons in your WordPress website.

Live preview of this share button

This is how the share button will look like in your website if you had followed all the steps correctly.

Conclusion

That’s how to add share buttons without plugin in WordPress.

Share button is also a means of generating organic visitors to your website. This is possible when your visitor share your post to people who are in need of your content.

If you were successful in following these steps, please drop a comment with your website URL so I can check it out and give you a high five via reply!

Your comment will inform me if you need help in displaying the share buttons to the exact place that you need it.

While you are here, share this article to your friends and to social media handles.

Here are other posts you should read: 

1. Complete Guide on How to Be a Successful Freelancer
2. How to Upload Apk and Other Files in WordPress sites [100% working] 
3. Online Business Ideas you Need to Start Today  (Top best 15)
4. How to install WordPress on any web host [beginners guide]
5. How to Buy Domain & Hosting Account on Any Web Host [Start Here]