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

Best solution to WordPress without plugin

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.



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.

MilesWeb

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. ↓

Also read:   How to setup Foremedia Ads on WordPress [Beginners Guide]

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:

share buttons without plugin - social 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.

Also read:   How to Design Sticky Back-To-Top Button in WordPress without Plugin

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!

Also read:   How to Setup OneSignal Push Notifications in WordPress [Explained]

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.

share buttons without plugin - share this post sample by jonakyblog.com

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]
Share this article:
Sign up for my newsletter ⤵

get all the fresh content directly to your email.

After you have subscribed, check your email inbox to confirm your subscription.




Man Behind JonakyBlog

Author | Admin

Nnabugwu Ikechukwu Johnbosco is a part time blogger that love to blog on categories like; Blogging, WordPress development, Technology, Web Design, Make money online, etc. A web developer (plays with WordPress sites & Blogger); who designed JonakyBlog. (Contact Us)

View all posts by Admin →

221 Comments on “How to Add Share Buttons to WordPress without Plugin ☑ [Explained]”

  1. Great blog! Is your theme custom made or did you download it from somewhere?
    A design like yours with a few simple tweeks would really
    make my blog stand out. Please let me know where you
    got your design. Appreciate it

  2. Hello this is kinda of off topic but I was wanting to know
    if blogs use WYSIWYG editors or if you have to manually code with
    HTML. I’m starting a blog soon but have no coding skills
    so I wanted to get guidance from someone with experience.
    Any help would be enormously appreciated!

    1. Hi
      I’m using WordPress CMS. But I’m good in coding so i write most of the codes by myself.

      Even if you’re not good in coding, you can use WordPress to design your blog.

  3. Hello my family member! I wish to say that this article is
    awesome, great written and include approximately all important infos.
    I’d like to peer extra posts like this .

  4. Woah! I’m really enjoying the template/theme of this site. It’s simple,
    yet effective. A lot of times it’s challenging to get that “perfect balance” between usability and visual
    appearance. I must say you have done a amazing job with this.
    In addition, the blog loads super fast for me on Safari. Exceptional Blog!

  5. Hi there it’s me, I am also visiting this web page daily,
    this website is really nice and the users are actually
    sharing nice thoughts.

  6. It’s really a great and useful piece of information. I’m happy that you just shared this
    helpful information with us. Please stay us informed like this.
    Thanks for sharing.

  7. This website really has all the information and facts I wanted about this subject and didn’t know who to ask.

  8. If you desire too increase your know-how simnply
    keep visiting this web pagve and be updated with the newest information posted here.

  9. Excellent site you have here.. It’s hard to find excellent writing
    like yours nowadays. I truly appreciate people like you! Take care!!

  10. I pay a visit daily a few web sites and information sites to read content, however this
    website offers feature based content.

  11. Hello! Do you know if they make any plugins to help with Search Engine Optimization? I’m trying to get my blog
    to rank for some targeted keywords but I’m not seeing very good results.
    If you know of any please share. Thank you!

  12. Generally I don’t read post on blogs, but I wish to
    say that this write-up very pressured me to take a look at and do it!
    Your writing taste has been surprised me.

    Thank you, quite nice article.

    1. Hi! Shad Muhammad
      Thanks for giving us feedback.

      All my contents are tested and verified before they are being uploaded to JonakyBlog.

  13. I’m amazed, I have to admit. Seldom do I come across a blog that’s both equally educative and amusing, and let me tell you, you have hit the nail on the head.
    The problem is something which not enough men and women are speaking intelligently about.
    I’m very happy I found this in my search for something relating to this.

  14. Hello there, just became alert to your blog through Google,
    and found that it’s truly informative. I am going to watch out for brussels.
    I’ll appreciate if you continue this in future.
    Many people will be benefited from your writing. Cheers!

  15. It’s in point of fact a nice and useful piece of information. I am glad that you shared this
    helpful info with us. Please stay us informed like this.
    Thanks for sharing.

  16. Greate article. Keep writing such kind of information on your site.
    Im really impressed by it.
    Hey there, You have done an excellent job.

    I will certainly digg it and individually suggest to my friends.
    I’m sure they will be benefited from this website.

Leave a Reply
Your Comments are too Valuable! But please see that they are related to the above article, and are not off-topic!

Your email address will not be published.