In this tutorial, we are going to Create Social Sharing Buttons in GeneratePress without Plugin using the super basic method.
Here we are using pure HTML, CSS, and PHP code with SVG Inline code to create a sharing button for GeneratePress Premium Theme. That means there is no JavaScript or third party integration like FontAwesome.
Also, in this guide you will learn more about
- Why Create Custom Social Sharing Buttons?
- About SVG Inline Code
- How to integrate social sharing button on the top and bottom of the content?
- Why WPLogout Social Sharing buttons are Scriptless?
- How we made Social Sharing Superfast?

Why Create Social Sharing Buttons for GeneratePress without Plugin?
We all know speed is one factor that Google looks after and we all love to speed up our website. In addition, there are lots of social sharing plugin available in the WordPress Repository with many awesome features.
But most of the plugins add extra requests and use bloated code which makes your website slow. Also, if you are searching for fancy social sharing buttons then it is not what you are looking for. It is a super basic sharing button that we add after the content in a single post.
Here, I am going to create social sharing buttons in GeneratePress without plugin. The following method is only going to work with GeneratePress Premium Theme.
If you are using the free version of GeneratePress then you may need to use social sharing plugin.
Moreover, I want to call this sharing button as WPLogout Social Sharing Buttons, and here are certain features that help to make it Scriptless, fast, and lightweight.
Also Read: Create Social Media Follow Buttons in GeneratePress without Plugin
Features of WPLogout Social Sharing Buttons
- Only use PHP, HTML, and CSS code.
- No JavaScript Code.
- No FontAwesome or any third-party Integration.
- Uses SVG Inline Code.
- No Extra Request.
- Lightweight and Responsive.
- No Tracking.
- Only made for GeneratePress Premium Theme.
- Super Fast Social Sharing Buttons (Speed Matters).
- Clean Code and Awesome UI Design.
Steps to Create Social Sharing Buttons in GeneratePress
We are using Element Module in GeneratePress that is only available in Premium Module. So If you haven’t activated Elements Module then first go to activate it. Go to Appearance > GeneratePress > Elements > Activate
Step 1: Add Social Sharing Code using Elements Module
So we are going to add a social sharing code in GeneratePress Theme.
Here, we are using $wplogoutURL to fetch the URL, $wplogoutTitle to fetch the article title, and $wplogoutImage to fetch the featured image of the post.
Moreover, we are using Social site URLs to share the post. List of social sharing buttons URLs
Facebook Social Sharing URL
https://www.facebook.com/sharer.php?u=[post-url]
Twitter Social Sharing URL
https://twitter.com/share?text=[post-title]&url=[post-url]&via=[via]
Pinterest Social Sharing URL
https://pinterest.com/pin/create/button/?url=[post-url]&media=[post-image]&description=[post-title]
Linkedin Social Sharing URL
https://www.linkedin.com/shareArticle?url=[post-url]&title=[post-title]
WhatsApp Social Sharing URL
https://api.whatsapp.com/send?text=[post-title] [post-url]
Reddit Social Sharing URL
https://reddit.com/submit?url=[post-url]&title=[post-title]
Now let’s create social sharing buttons for GeneratePress Theme.
1. First Go to Appearance > Elements > Add New > Choose Element Type as Hook > Add Title

2. Copy and paste the following code.
<?php
$wplogoutURL = urlencode(get_the_permalink());
$wplogoutTitle = urlencode(get_the_title());
$wplogoutImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
?>
<div class="wplogout-social-wrapper">
<span class="hide-on-mobile">Share on:</span>
<a class="wplogout-social-sharing wplogout-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $wplogoutURL; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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="wplogout-social-sharing wplogout-social-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $wplogoutTitle;?>&url=<?php echo $wplogoutURL;?>&via=wplogout" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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="wplogout-social-sharing wplogout-social-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo $wplogoutURL; ?>&media=<?php echo $wplogoutImage; ?>&description=<?php echo $wplogoutTitle; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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="wplogout-social-sharing wplogout-social-linkedin" href="https://www.linkedin.com/shareArticle?url=<?php echo $wplogoutURL; ?>&title=<?php echo $wplogoutTitle; ?>&mini=true" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" 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>
<a class="wplogout-social-sharing wplogout-social-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $wplogoutTitle; echo " "; echo $wplogoutURL;?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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="wplogout-social-sharing wplogout-social-reddit" href="https://reddit.com/submit?url=<?php echo $wplogoutURL;?>&title=<?php echo $wplogoutTitle; ?>" target="_blank" rel="nofollow"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M24 11.779c0-1.459-1.192-2.645-2.657-2.645-.715 0-1.363.286-1.84.746-1.81-1.191-4.259-1.949-6.971-2.046l1.483-4.669 4.016.941-.006.058c0 1.193.975 2.163 2.174 2.163 1.198 0 2.172-.97 2.172-2.163s-.975-2.164-2.172-2.164c-.92 0-1.704.574-2.021 1.379l-4.329-1.015c-.189-.046-.381.063-.44.249l-1.654 5.207c-2.838.034-5.409.798-7.3 2.025-.474-.438-1.103-.712-1.799-.712-1.465 0-2.656 1.187-2.656 2.646 0 .97.533 1.811 1.317 2.271-.052.282-.086.567-.086.857 0 3.911 4.808 7.093 10.719 7.093s10.72-3.182 10.72-7.093c0-.274-.029-.544-.075-.81.832-.447 1.405-1.312 1.405-2.318zm-17.224 1.816c0-.868.71-1.575 1.582-1.575.872 0 1.581.707 1.581 1.575s-.709 1.574-1.581 1.574-1.582-.706-1.582-1.574zm9.061 4.669c-.797.793-2.048 1.179-3.824 1.179l-.013-.003-.013.003c-1.777 0-3.028-.386-3.824-1.179-.145-.144-.145-.379 0-.523.145-.145.381-.145.526 0 .65.647 1.729.961 3.298.961l.013.003.013-.003c1.569 0 2.648-.315 3.298-.962.145-.145.381-.144.526 0 .145.145.145.379 0 .524zm-.189-3.095c-.872 0-1.581-.706-1.581-1.574 0-.868.709-1.575 1.581-1.575s1.581.707 1.581 1.575-.709 1.574-1.581 1.574z"/></svg></a>
</div>
Note: Please change your Twitter Handle in above Twitter Sharing Link. Search for via=wplogout and replace it with via=yourtwitterusername in the above code
3. Now go to the Hook Settings and Choose Hook Location as after_entry_content. Click on Execute PHP

If you want your social sharing buttons to display after your post title then choose Hook Location as after_entry_title
4. Furthermore, Go to Display Rules and Choose Location as Post, All Posts

5. Hit Publish Button.
Here I am using SVG Inline code from iconmonstr. If want to customize the icons then you can choose from Icon Monstr.
Step 2: Style Social Sharing Buttons
Let’s style our Social Sharing Buttons using CSS code.
- Go to Appearance > Customize
- Go to Additional CSS
- Copy and Paste the following code to style social sharing buttons
.wplogout-social-wrapper {
margin: 30px 0;
font-size: 0;
}
.wplogout-social-wrapper span {
font-weight: bold;
padding-right: 10px;
font-size: 16px;
}
.wplogout-social-sharing {
font-size: 17px;
padding: 7px 20px;
}
@media only screen and (max-width: 600px) {
.wplogout-social-sharing {
font-size: 17px;
padding: 7px 12px;
display: inline-block;
}
}
.wplogout-social-sharing svg {
position: relative;
top: 0.15em;
display: inline-block;
}
.wplogout-social-sharing:first-of-type {
border-radius: 100px 0 0 100px;
}
.wplogout-social-sharing:last-of-type {
border-radius: 0 100px 100px 0;
}
.wplogout-social-facebook {
fill: #fff;
background-color: rgba(59, 89, 152, 1);
}
.wplogout-social-facebook:hover {
background-color: rgba(59, 89, 152, .8);
}
.wplogout-social-twitter {
fill: #fff;
background-color: rgba(29, 161, 242, 1);
}
.wplogout-social-twitter:hover {
background-color: rgba(29, 161, 242, .8);
}
.wplogout-social-pinterest {
fill: #fff;
background-color: rgba(189, 8, 28, 1);
}
.wplogout-social-pinterest:hover {
background-color: rgba(189, 8, 28, .8);
}
.wplogout-social-linkedin {
fill: #fff;
background-color: rgba(0, 119, 181, 1);
}
.wplogout-social-linkedin:hover {
background-color: rgba(0, 119, 181, .8);
}
.wplogout-social-whatsapp {
fill: #fff;
background-color: rgba(37, 211, 102, 1);
}
.wplogout-social-whatsapp:hover {
background-color: rgba(37, 211, 102, .8);
}
.wplogout-social-reddit {
fill: #fff;
background-color: rgba(255, 87, 0, 1);
}
.wplogout-social-reddit:hover {
background-color: rgba(255, 87, 0, .8);
}
You can also change/modify the CSS code according to your need.
Step 3: Result

Here is the result of WPLogout Social Sharing Buttons for GeneratePress Theme. I have only added popular social networks like Facebook, Twitter, Pinterest, Linkedin, WhatsApp, and Reddit, etc.
Wrapping Up
At last, by following the above steps, you can create Social Sharing Buttons in GeneratePress without plugin. In the above tutorial, you can customize CSS and PHP code as per your need. Moreover, you can customize the SVG buttons that I have used from iconmonstr.com.
If you get any difficulty then please feel free to comment below.
I want social sharing buttons, design, effects everything like your site has.
Hi Subodh, you can customize the CSS code. Feel free to change/modify it.
Awesome work!!
Si there a way to get these social sharing buttons fixed to the bottom of the browser on mobile?
Hi Yhonatan, Thank You for the comment.
Right now there isn’t any fixed social sharing buttons for Mobile Version.
Hi, my friend.
I just found an easy way to have your buttons fixed to the bottom of the phone while scrolling.
Two steps:
1) Hook position: Footer.
2) Add this CSS code:
@media (max-width: 767px) {
.wplogout-social-wrapper {
position: fixed !important;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
}
Hi, Thank you for the input. I will update this tutorial soon.
Hi Suraj,
Sidebar & Social Share, Whatsapp Link is not working.
Hi Sachin, Thank you for letting me know. Recently there is a problem with WhatsApp, I am looking for the fix and I will post the update soon.
I have updated the link for WhatsApp. Please check it.
Thank You
He Sir Apne Generate Press Me Bahut Details Me Work Kiya He. Mene Apki Site Follow Karke Customise Kiya He Apni Site. but Ek Questions He. Apke Site bar Or Post Me Sab Box Ya Shadow Me Show Hote He Usko Kese Customise Kar Sakte He. Please Give Details.
Hi AK, Thank you for visiting my site. You can use this code in your Class or ID.
Thank You.
where is Class Or ID I am Not Understand, give A Full Details
You can place the above code in your sidebar’s text ID or Class. For Example: If you have class
.abc-xyz
then add the code like thisThank You
Great design, I have also added the shadows and it looks great
Thank you for using it.
Hi again, for some reason, sharing from facebook not include de featured image or any image?
What would be teh cause?
And also, is there a way (from mobile) to open the facebook app instead teh web version?
Hi Gabriel,
Looks really good, thank you. How can I align-center the icons so it sits in the middle of the screen instead of the left?
Hi Joey, Please use this code
That works, thank you Suraj.
Glad, its working for you, Joey 🙂
Amazing, I did it, thank you Suraj Katwal
Cheers Alex ✅
where to change the twitter link , can you highlight that portion
Hi Abhishek, there is a via=wplogout in a Twitter link change that wplogout to your Twitter handle.
Thanks
Unable to execute PHP as DISALLOW_FILE_EDIT is defined.
Hi Manpreet, I have tried again on the localhost and it’s perfectly working at my end. Please check the tutorial again step by step again.
Thanks
Your post is a lifesaver. Thank you so much!
Thank you for implementing it into your site 🙂
Your post was very helpful and it worked on my site. Thanks!
Thank you for using it, Tiina 🙂
Hello, that you for this amazing piece of code. Can you please tell me how do I increase the spacing between the icons?
Hello, You can see I have pasted CSS code in the first replied comment. Remove the existing Social Sharing Buttons CSS code. and use paste that CSS code from the comment section.
Thanks
thanks i will be waiting
Suraj, your a life saver.
I hope your doing well?
I’m wondering how could i add another social platform like messenger?
Hi Huseyin, Thank you for your comment and happy to help.
Soon I will figure it out and update the tutorial
Thanks
Thanks for the tutorial. It works well for me.
Nevertheless, I’m unable to identify your twitter handle to replace it with mine. Could you highlight the handle?
Hi Olarewaju,
Please Search for via=wplogout and replace it with via=yourtwitterusername in the above code
Thanks
Hi Suraj,
This is excellent. I used GP socials icons, but that had an issues opening pages to edit. So this is an excellent and nice solution. I managed to change to bar to my own colors so that made me happy.
I want to add a email-social-share but I am afraid I need some help on the code of the Elements to fix this (css, svg is done).
Thanks, Peter
Hi Peter, I have tested the email code but I am not sure it will work or not. I have mailed it to your email.
Please test it and let me know.
Thanks
Hello.
Can I have the email code too?
Thanks
Hi Anibal, I will update the tutorial soon.
Thanks
Hi, the pinterest button I created broke recently. Just left with the black unstyled Pinterest icon instead. How to fix?
Hi Caitriona, Did you delete the CSS part for Pinterest? Check it
Please feel free to comment back if you feel something is wrong.
Moreover, the above code for social sharing is perfectly working at my end.
Thanks
Hi,
Thank you for your reply. The CSS is still the same, I checked. It’s broken in the floating social sharing bar and the social sharing buttons too. Just the Pinterest one.
Maybe I should delete all and do it again.
Hi Caitriona, I think you are using other Pinterest buttons or plugin and that is causing a problem. Please deactivate the plugin or manual CSS code and check again.
Thanks
That’s right!! I recently downloaded the plugin for pinning images. But I since deleted it because I felt that it slowed down the site. Manual CSS code seems to be okay. Maybe that’s where the problem stemmed from
Yes, fixed! It was caused by the Pinterest widget… Thanks for your feedback!
Glad, it’s working. 🙂
Hi,
facebook button is giving me an error: “Parameter ‘href’ should represent a valid URL”.
Could you help, please.
Hi Tibor,
I am using the same code at my blog and it’s working fine.
Can you please recheck the above code and paste it into your site?
Furthermore, you can post the screenshot
Thanks
Thank goodness for Suraj Katwal…
Cant believe I have found your post. Been looking for a simple social share option for months now. Been so unhappy with the plugins.
Your code works perfectly and I am beside myself relieved!
Thank you for your time and effort and for sharing with us!
I was busy with a GeneratePress ticket -issue regarding their recommended social share plugin which is not working.. when I happened to stumble upon you.
Lucky me.
I did post your link…
XXX
Thank you Wendy for using my solution to create Social Sharing buttons.
Hi Suraj,
Great, how do you add Instagram?
Thank you 🙂
Instagram is a simple photo-sharing platform through your mobile devices so there isn’t any way for Instagram.
Thanks
Hi,
I’m dropping by to say thank you. Appreciate very much on this tutorial.
Thumbs up and have a good day.
Thank You Melvin for your comment.
It means a lot to me. 🙂
Cheers
thanks. I have learned a lot from you
Welcome mate 🙂
This is great! Do you know if there is a way to adapt this to display the total share counts for each of the services alongside of the buttons?
Hi Ian,
There are many ways but I prefer not to use them as they require JS.
Thanks
How can I show these buttons in mobile and tablet only?
Hi Sumit,
Use media query or GeneratePress has inbuilt classes to hide/show in different devices.
You can check my floating social sharing buttons tutorials.
Thanks
Hi Suraj,
Thanks for publishing this article.
I can’t see the code in step 2. Not sure if it’s just me having this problem.
Would you be able to send me the relevant code please?
Cheers,
Matt
Hi Matt,
Step 2 is all about CSS code. Please copy it and paste it into your site’s Additional CSS.
It’s clearly over the site.
Thanks
Hi Suraj,
Sorry, I mean list item 2 in step 1.
I’m not at step 2 yet.
Cheers,
Matt
Hi,
Copy the code from list 2 and follow list 1 to paste the code.
Thanks
It’s not showing on pages. any solution?