In this article, I will explain how to add social sharing buttons to GeneratePress theme without using any plugin. Here we will discuss in detail two different methods and two different types of social share icons.
Usually we rely on separate plugins for social share buttons, but this slows down the loading speed of the website and adds unnecessary code. So this method is very useful for those who want to create a light, fast and clean website.
The first method is floating social share icons. These icons will be visible on every page of the website, so that visitors can easily share content at any time. However, to improve the user experience, these floating icons will not be displayed in mobile view.
The second method is to add social share icons at the end of each post. In this method, the social share icon will automatically appear at the very end of each blog post or article, which will further encourage readers to share the content.
In this tutorial, I have tried to present the topics in a way that even beginners can understand. You can follow these methods even if you are using any version of GeneratePress Premium. The best part is that you don’t need to use any additional plugins, so your website will be faster, more secure, and more optimized.
Therefore, it is requested to read the entire article carefully. If you follow this guide correctly, you will be able to easily add social share icons to your GeneratePress-based website without using a single plugin.
GeneratePress floating Social Share icons
Floating Social Share Icons in GeneratePress theme refer to some social share buttons that are fixed in a specific position on one side of the website screen. These icons remain visible on the screen even when the user scrolls the page. As a result, visitors can easily share your content on social media at any time.
The biggest advantage of Floating Social Share Icons is that it works throughout the website. That is, the icons are visible everywhere, on the homepage, posts, pages, etc. This way, the opportunity to share content is always in front of the user, which helps a lot in increasing social traffic.
Since GeneratePress is a lightweight and performance-focused theme, adding Floating Social Share Icons here without using plugins is the best decision. Using additional plugins can reduce the loading speed of the website, but adding icons using Hooks and custom CSS makes the website fast and clean.
However, it is important to keep one thing in mind: Due to the small screen size of mobile devices, Floating Icons can sometimes ruin the user experience. Therefore, these Floating Social Share Icons are usually hidden in mobile views and only shown on desktop and tablet devices.
All in all, if you want to increase shares on your GeneratePress website while maintaining a clean design, then Floating Social Share Icons are a very effective and smart solution.
GeneratePress floating Social Share icons Code
Copy this code and follow the procedure shown in the screenshot.
<div class="floating-share">
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink()); ?>" target="_blank" aria-label="Share on Facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://twitter.com/intent/tweet?url=<?php echo urlencode(get_permalink()); ?>&text=<?php echo urlencode(get_the_title()); ?>" target="_blank" aria-label="Share on Twitter">
<i class="fab fa-x-twitter"></i>
</a>
<a href="https://www.linkedin.com/sharing/share-offsite/?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" aria-label="Share on LinkedIn">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="https://api.whatsapp.com/send?text=<?php echo urlencode(get_the_title() . ' ' . get_permalink()); ?>" target="_blank" aria-label="Share on WhatsApp">
<i class="fab fa-whatsapp"></i>
</a>
<a href="mailto:?subject=<?php echo rawurlencode(get_the_title()); ?>&body=<?php echo rawurlencode(get_permalink()); ?>" aria-label="Share via Email">
<i class="fas fa-envelope"></i>
</a>
</div>
<style>
/* Base container */
.floating-share {
position: fixed;
top: 40%;
left: 20px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 10px;
opacity: 0;
transform: translateX(-60px);
animation: slideIn 0.8s ease-out forwards;
}
/* Each button */
.floating-share a {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--gp-color-content-bg, #fff);
color: var(--gp-color-text, #555);
border: 1px solid rgba(0,0,0,0.1);
font-size: 18px;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
/* Hover effect */
.floating-share a:hover {
background: var(--gp-color-link, #0073aa);
color: #fff;
border-color: var(--gp-color-link, #0073aa);
transform: translateY(-2px);
}
/* Animation keyframes */
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-60px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Hide completely on mobile */
@media (max-width: 1024px) {
.floating-share {
display: none !important;
}
}
</style>
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
GeneratePress After the Post Social Sharing button
Adding social sharing buttons after a post is one of the most effective ways to increase content shares. Usually, when a reader finishes reading the entire article, he or she decides whether to share the content or not. Having social sharing buttons at the end of the post increases the chances of getting shares a lot.
Social sharing buttons can be easily added after each post in the GeneratePress theme without any plugins. This does not cause any additional load on the website and the performance is also good. At the same time, the website design is clean and professional.
In this method, social sharing buttons are displayed only at the end of the blog post or article. The buttons are not unnecessarily visible on the homepage or other pages, resulting in a better user experience. This is a very natural and user-friendly system for those who read content regularly.
Another big advantage is that by adding social sharing buttons after the post, you can have separate buttons for certain social media platforms such as Facebook, Twitter, LinkedIn or WhatsApp. This makes it easier to get shares on the platforms that your target audience uses the most.
All in all, if you are using the GeneratePress theme and want to increase social shares without slowing down the website and maintaining a clean design, then adding social sharing buttons after posts is a very good and effective decision.
GeneratePress After the Post Social Sharing button Code
Copy this code and follow the procedure shown in the screenshot.
<div class="share-post">
<h4 class="share-title">Share this Post:</h4>
<div class="share-buttons">
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink()); ?>" target="_blank" aria-label="Share on Facebook">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://twitter.com/intent/tweet?url=<?php echo urlencode(get_permalink()); ?>&text=<?php echo urlencode(get_the_title()); ?>" target="_blank" aria-label="Share on Twitter">
<i class="fab fa-x-twitter"></i>
</a>
<a href="https://www.linkedin.com/sharing/share-offsite/?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" aria-label="Share on LinkedIn">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="https://api.whatsapp.com/send?text=<?php echo urlencode(get_the_title() . ' ' . get_permalink()); ?>" target="_blank" aria-label="Share on WhatsApp">
<i class="fab fa-whatsapp"></i>
</a>
<a href="mailto:?subject=<?php echo rawurlencode(get_the_title()); ?>&body=<?php echo rawurlencode(get_permalink()); ?>" aria-label="Share via Email">
<i class="fas fa-envelope"></i>
</a>
</div>
</div>
<style>
.share-post {
margin-top: 40px;
padding: 25px;
border-radius: 12px;
background: var(--gp-color-content-bg, #f9f9f9);
border: 1px solid rgba(0,0,0,0.05);
text-align: center;
}
.share-post .share-title {
margin-bottom: 15px;
font-size: 18px;
color: var(--gp-color-heading, #222);
font-weight: 600;
}
.share-buttons a {
display: inline-block;
margin: 0 8px;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
background: var(--gp-color-content-bg, #fff);
color: var(--gp-color-text, #555);
border: 1px solid rgba(0,0,0,0.08);
transition: all 0.3s ease;
font-size: 17px;
}
.share-buttons a:hover {
background: var(--gp-color-link, #0073aa);
color: #fff;
border-color: var(--gp-color-link, #0073aa);
}
</style>
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">Final Thoughts
In this article, I have tried to show you in a very simple way how to add social sharing buttons to GeneratePress theme without using any plugin. Floating social share icon and social sharing button after post are two methods that you can use to increase the opportunity to share content on your website.
The best thing is that by using these methods, you will not need any additional plugins on your website. As a result, the website will be fast, light and performance-friendly. In addition, managing the code will be safe and easy due to the use of GeneratePress Hook.
Hopefully, by following this guide, you will be able to easily add professional-quality social sharing buttons to your GeneratePress website. If you have difficulty understanding anything, then be patient and review each step again and customize it yourself if necessary.
Finally, I would say that small optimizations make a good and successful website. Best wishes for your website.
