Do you want to create a floating social sharing button in GeneratePress without a plugin? If you are looking for a simple method, keep reading this article.
Want to boost your website’s reach and engagement?
Adding floating social sharing buttons in the GeneratePress theme is one of the easiest ways to encourage visitors to share your content across popular social media networks.
These always-visible social share icons improve user experience by making sharing effortless, whether on desktop or mobile view.
The best part is that you don’t need a plugin; just a little CSS code and customization.
In this guide, we’ll show you how to create stylish, lightweight sharing buttons for your site.
But before going further, let’s see why you should create floating social sharing buttons in GeneratePress.
☲ Table of Contents
- Why Do You Need to Create Floating Social Sharing Buttons in GeneratePress
- How to Create Floating Social Sharing Buttons in GeneratePress without Plugin
- Frequently Asked Questions
- Why should I add Floating Social Sharing Buttons in the GeneratePress Theme?
- Can I create social share buttons without a plugin?
- Do I need GeneratePress Premium to add floating social icons?
- Can I customize the design of my floating bar?
- Is it possible to display social share icons only on specific post types?
- Can I add a follow widget along with sharing buttons?
- Do floating social icons work on mobile view?
- How do floating social icons compare to third-party plugins?
- Conclusion
Floating social sharing buttons in the GeneratePress theme make it easier for your website visitors to share your content on popular social media networks without needing to scroll up or down.
These always-visible social share icons act as a subtle call-to-action button, improving user engagement and boosting overall traffic. Unlike simple after-post icons, Floating Social Sharing Buttons remain visible on desktop and mobile view, ensuring a better user experience across devices.
They also help drive more social interactions, increase brand visibility, and provide quick access to platforms like Facebook, Twitter, or LinkedIn. By adding lightweight social media icons with custom CSS, you can enhance your site design and encourage content sharing without compromising the speed of your website.
Now that you know why you should create the social media buttons, let’s see how to create floating sharing buttons in GeneratePress without any plugins.
Now, let’s see how to complete the task – create floating social sharing buttons in GeneratePress.
We will be using the premium version of GeneratePress (GP Premium) for this task. The GeneratePress premium theme will provide us with more unique features and options for customization.
The very first thing you need to do is activate the GeneratePress elements module. With this module, you can create floating social sharing buttons in GeneratePress.
Now, you need to create a Hook Element.
The code you will be using is to create floating social sharing buttons in GeneratePress is:
<?php
$technumeroURL = urlencode(get_the_permalink());
$technumeroTitle = urlencode(get_the_title());
$technumeroImage= urlencode(get_the_post_thumbnail_url(get_the_ID(), 'full'));
?>
<div class="technumero-float-social-wrapper hide-on-mobile hide-on-tablet">
<a class="technumero-float-social-sharing technumero-social-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $technumeroURL; ?>" 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="technumero-float-social-sharing technumero-social-twitter" href="https://twitter.com/intent/tweet?text=<?php echo $technumeroTitle;?>&url=<?php echo $technumeroURL;?>&via=technumero" 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="technumero-float-social-sharing technumero-social-pinterest" href="https://pinterest.com/pin/create/button/?url=<?php echo $technumeroURL; ?>&media=<?php echo $technumeroImage; ?>&description=<?php echo $technumeroTitle; ?>" 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="technumero-float-social-sharing technumero-social-linkedin" href="https://www.linkedin.com/shareArticle?url=<?php echo $technumeroURL; ?>&title=<?php echo $technumeroTitle; ?>&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="technumero-float-social-sharing technumero-social-whatsapp" href="https://api.whatsapp.com/send?text=<?php echo $technumeroTitle; echo " "; echo $technumeroURL;?>" 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="technumero-float-social-sharing technumero-social-reddit" href="https://reddit.com/submit?url=<?php echo $technumeroURL;?>&title=<?php echo $technumeroTitle; ?>" 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>
The Twitter/X handle in the above code is set to technumero. You may want to replace that with your own username.
Next, go to the hook settings. From there, choose the hook location: wp_footer. And also execute the PHP option.
Next, go to the Display Rules, select the location as ‘post’, and choose ‘all posts’.
Now, we are done with the code. Publish the element, and we can move to the styling part. The CSS code we are going to use is:
.technumero-float-social-wrapper {
position: fixed;
top: 70%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 9999;
}
.technumero-float-social-sharing {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
align-items: flex-start;
min-height: 30px;
font-size: 12px;
padding: 5px 10px;
}
.technumero-float-social-sharing svg {
position: relative;
top: 0.5em;
}
.technumero-float-social-sharing:first-of-type {
border-top-right-radius: 10px;
}
.technumero-float-social-sharing:last-of-type {
border-bottom-right-radius: 10px;
}
.technumero-social-facebook {
fill: #fff;
background-color: rgba(59, 89, 152, 1);
}
.technumero-social-facebook:hover {
background-color: rgba(59, 89, 152, .8);
}
.technumero-social-twitter {
fill: #fff;
background-color: rgba(29, 161, 242, 1);
}
.technumero-social-twitter:hover {
background-color: rgba(29, 161, 242, .8);
}
.technumero-social-pinterest {
fill: #fff;
background-color: rgba(189, 8, 28, 1);
}
.technumero-social-pinterest:hover {
background-color: rgba(189, 8, 28, .8);
}
.technumero-social-linkedin {
fill: #fff;
background-color: rgba(0, 119, 181, 1);
}
.technumero-social-linkedin:hover {
background-color: rgba(0, 119, 181, .8);
}
.technumero-social-whatsapp {
fill: #fff;
background-color: rgba(37, 211, 102, 1);
}
.technumero-social-whatsapp:hover {
background-color: rgba(37, 211, 102, .8);
}
.technumero-social-reddit {
fill: #fff;
background-color: rgba(255, 87, 0, 1);
}
.technumero-social-reddit:hover {
background-color: rgba(255, 87, 0, .8);
}
Add this code to your additional CSS section and publish the changes. And if you check the front end of your website, you will see the live results.
As per our configuration, these buttons will only be displayed on single posts.
That’s it!
This is how you can create floating social sharing buttons in GeneratePress.
Frequently Asked Questions
Now, let’s take a look at some of the frequently asked questions regarding the main topic we mentioned – create floating social sharing buttons in GeneratePress.
Floating social sharing buttons in the GeneratePress theme increase user engagement by making it easier for visitors to share your posts across popular social media networks. Unlike static icons, floating social share icons remain visible, boosting clicks and interactions.
Yes! You don’t need plugins like the Social Warfare plugin or Social Snap. Instead, you can use custom HTML, CSS code, and GeneratePress elements to build lightweight floating icons. This reduces HTTP requests and improves page load speed significantly.
You can add basic social media icons using additional CSS in the free version. However, the GeneratePress premium theme (GP premium) makes things easier with advanced display rules, location hooks, and other site editor features that help with precise button positioning.
Can I customize the design of my floating bar?
Absolutely! Using CSS classes, Hex code, SVG icons, or Font Awesome icons, you can control background colors, border radius, and button styling. You can even add SVG Inline code or edit via a CSS file or theme editor for a polished website design.
Yes. By applying display rules inside GeneratePress elements, you can show social sharing options only on specific post types, pages, or the comment section. This ensures your social profiles are visible only where they matter most.
Definitely! Alongside floating social sharing buttons, you can use a follow widget or social icons widget in your navigation menu or footer area. This allows visitors to follow your Twitter handle / X handle, or other social media profiles directly.
Yes. With responsive design, you can adjust floating social share icons for free using media queries. The icons adapt perfectly to mobile view, improving user experience without disrupting reading or scrolling.
While plugins like Sassy Social Share and Crunchy Sharing add features, creating buttons with custom CSS, PHP code, and GeneratePress premium avoids plugin bloat. This lightweight approach lowers HTTP requests, enhances content management, and keeps your WordPress dashboard clean.
Conclusion
Adding floating social sharing buttons in the GeneratePress theme is a powerful way to boost user engagement, increase visibility on social networks, and encourage readers to interact with your content.
By using simple CSS code, CSS classes, and even custom HTML, you can design lightweight floating icons that perfectly match your website design without slowing down the speed of your website.
As you can see in this post, adding a floating sharing button is a straightforward process. You do not need to rely on a third-party plugin, and it won’t compromise the website’s speed. All you need to do is tweak the code a bit to match your preferences and, if necessary, the CSS as well.
I highly recommend using this method if you are looking for a simple process to create floating social sharing buttons in GeneratePress.
Would you use this method to add floating social media sharing buttons on your website?
Let us know in the comments.
