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.
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 ↓
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:
- SVG is vector graphic base, it can scale any size to fit web pages
- SVG is scalable, SEO friendly, has editing ability, and it is resolution independence
- 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
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.
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.
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 ↓.
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.
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:
- Complete Guide on How to Be a Successful Freelancer
- How to Upload Apk and Other Files in WordPress sites [100% working]
- Online Business Ideas you Need to Start Today (Top best 15)
- How to install WordPress on any web host [beginners guide]
- How to Buy Domain & Hosting Account on Any Web Host [Start Here]
Awesome issues here. I am very satisfied to peer your article.
Thanks a lot and I am looking forward to contact you.
Will you kindly drop me a mail?
Use this email to contact us
contact@jonakyblog.com
Wonderful beat ! I wish to apprentice while you amend your website, how can i subscribe for a blog website?
The account aided me a acceptable deal. I were a little bit familiar of
this your broadcast offered vivid clear concept
Oh my goodness! Amazing article dude! Thank you so much,
However I am going through troubles with your RSS.
I don’t know why I cannot subscribe to it. Is there anybody else having identical RSS issues?
Anyone who knows the answer can you kindly respond?
Thanx!!
Hello! Thanks for your response.
Subscribe to my Email Newsletter to get all my latest blog posts direct to your email.
Hola! I’ve been following your weblog for a while now and finally got
the courage to go ahead and give you a shout out from
Lubbock Texas! Just wanted to say keep up the great job!
Thank you.
Aw, this was a really nice post. Spending some time and actual effort to create a top notch article…
but what can I say… I put things off a lot and never manage to get nearly anything done.
I?m impressed, I must say. Rarely do I encounter a blog that?s both educative and amusing,
and let me tell you, you have hit the nail
on the head. The problem is something which too few men and women are
speaking intelligently about. Now i’m very happy that I
came across this during my search for something relating
to this.
Hey! This is my 1st comment here so I just wanted to give a quick shout
out and say I genuinely enjoy reading through your
articles.
Thanks a lot!
I was wondering if you ever considered changing the structure of your blog?
Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better.
Youve got an awful lot of text for only having 1 or 2 images.
Maybe you could space it out better?
I much like the valuable info you provide to your articles.
I will bookmark your blog and test yet again here frequently.
I’m reasonably certain I am going to learn plenty of new stuff proper here!
Have a great time for the next!
It’s awesome in support of me to have a website, which is valuable in support of my know-how.
thanks admin
samicho…Great
Hello, the whole thing is going fine here and ofcourse every
one is sharing information, that’s truly good, keep up
writing.
Thanks for the good writeup. It in truth used to be a entertainment account it.
Glance advanced to more introduced agreeable from you!
By the way, how could we keep in touch?
Use the contact form to contact us.
Hmm it seems like your website ate my first comment (it
was extremely long) so I guess I’ll just sum it up what I wrote and say, I’m
thoroughly enjoying your blog. I as well am an aspiring blog writer but
I’m still new to everything. Do you have any helpful hints for first-time blog writers?
I’d certainly appreciate it.
Yes!
I will write articles for new blog writers in the future. Make sure to be in touch with my blog.
Way cool! Some extremely valid points! I appreciate you
penning this article and the rest of the website is also really good.
I blog often and I truly appreciate your information. The article
has truly peaked my interest. I’m going to bookmark your website and
keep checking for new details about once a week. I opted in for your Feed
as well.
It is the best time to make some plans for the future and it is time
to be happy. I have read this post and if I could
I wish to suggest you few interesting things or advice.
Perhaps you can write next articles referring to this article.
I wish to read even more things about it!
Thank you for the auspicious writeup. It in factt was a amusement
account it. Look advanced to more added agreeable from
you! By the way, how could we communicate?
Hmm it looks like your website ate my first comment (it was extremely long)
so I guess I’ll just sum it up what I had written and say,
I’m thoroughly enjoying your blog. I too am an aspiring blog blogger but I’m still new to everything.
Do you have any tips and hints for inexperienced blog writers?
I’d certainly appreciate it.
We stumbled over here coming from a different web page and thought I should check things out.
I like what I see so i am just following you. Look forward to going over your web page repeatedly.
It’s going to be finish of mine day, but before finish I am reading this enormous paragraph to increase my
know-how.
I usually do not realize the way i ended up being here,
but I thought this post was great. I don’t know your identiity but certainly you will be going to a famous blogger when you
aren’t already 😉 Cheers!
Really when someone doesn’t understand then its up to other users that they
will help, so here it occurs.
Heya i’m initially here. I discovered this board and that i think it is truly useful &
it helped me to out much. I am hoping to provide something back and aid others such as you helped me.
Thanks for the good writeup. It if truth be told was once a leisure
account it. Look complex to far delivered agreeable
from you! However, how can we communicate?
Use the contact form at the footer of my website to contact me.
Wonderful web site.
Lots of helpful info here. I am sending it to several frriends ans additionally sharing in delicious.
And obviously, thanks tto your effort!
web site
Hi colleagues, its impressive piece of writing on the topic of cultureand fully defined,
keep it up all the time.
Hey are using WordPress for your blog platform? I’m new to the blog
world but I’m trying to get started and set up my own. Do you require any html coding knowledge to make your own blog?
Any help would be really appreciated!
Yes I am the designer who designed JonakyBlog.com
A lot of coding is involved in this website design.
But it isn’t a must to learn coding before you can create a blog.
Just desire to say your article is as surprising.
The clearness to your publish is simply great and i could think you’re
a professional in this subject. Well together with your permission let
me to seize your feed to stay up to date with approaching post.
Thank you a million and please keep up the enjoyable
work.
Everyone loves what you guys are usually up too.
This type of clever work and exposure! Keep up the
excellent works guys I’ve included you guys to my blogroll.