Create Social Sharing Buttons In GeneratePress without Plugin: Hey bloggers! Let’s learn how to add custom social sharing buttons to your GeneratePress site—without needing a plugin. In this post, I’ll show you how to create lightweight, modern-looking buttons.
Ready? Let’s dive in!
To create social sharing buttons without a plugin, you’ll need to use GeneratePress Elements from GP Premium. But if you prefer using a plugin, Add to Any is a great option.
I’ll guide you through creating these buttons without any plugins in your GeneratePress theme.
How to add Social Sharing Buttons in GeneratePress Theme Without Plugin
Follow the complete process given below and you will be able to add social share button in GeneratePress Theme to your post without any problem.
Read More : How to add WhatsApp Telegram Join buttons in WordPress
Step 1: Add Social Sharing Buttons using GeneratePress Elements Hook
- First of all you have to go to your WordPress dashboard, after reaching there click on elements under appearance.
- Create a new hook by going to elements and clicking “add new element“, ok.
- Create a new hook and copy and paste this code.
<div class="codewp-share-container">
<div class="codewp-share-text">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M400 255.4V240 208c0-8.8-7.2-16-16-16H352 336 289.5c-50.9 0-93.9 33.5-108.3 79.6c-3.3-9.4-5.2-19.8-5.2-31.6c0-61.9 50.1-112 112-112h48 16 32c8.8 0 16-7.2 16-16V80 64.6L506 160 400 255.4zM336 240h16v48c0 17.7 14.3 32 32 32h3.7c7.9 0 15.5-2.9 21.4-8.2l139-125.1c7.6-6.8 11.9-16.5 11.9-26.7s-4.3-19.9-11.9-26.7L409.9 8.9C403.5 3.2 395.3 0 386.7 0C367.5 0 352 15.5 352 34.7V80H336 304 288c-88.4 0-160 71.6-160 160c0 60.4 34.6 99.1 63.9 120.9c5.9 4.4 11.5 8.1 16.7 11.2c4.4 2.7 8.5 4.9 11.9 6.6c3.4 1.7 6.2 3 8.2 3.9c2.2 1 4.6 1.4 7.1 1.4h2.5c9.8 0 17.8-8 17.8-17.8c0-7.8-5.3-14.7-11.6-19.5l0 0c-.4-.3-.7-.5-1.1-.8c-1.7-1.1-3.4-2.5-5-4.1c-.8-.8-1.7-1.6-2.5-2.6s-1.6-1.9-2.4-2.9c-1.8-2.5-3.5-5.3-5-8.5c-2.6-6-4.3-13.3-4.3-22.4c0-36.1 29.3-65.5 65.5-65.5H304h32zM72 32C32.2 32 0 64.2 0 104V440c0 39.8 32.2 72 72 72H408c39.8 0 72-32.2 72-72V376c0-13.3-10.7-24-24-24s-24 10.7-24 24v64c0 13.3-10.7 24-24 24H72c-13.3 0-24-10.7-24-24V104c0-13.3 10.7-24 24-24h64c13.3 0 24-10.7 24-24s-10.7-24-24-24H72z"/></svg>
<span class="codewp-share-text-mobile">Share This Article</span>
</div>
<div class="codewp-share-icons">
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_the_permalink()); ?>&text=<?php echo urlencode(get_the_title()); ?>" target="_blank" class="codewp-facebook-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512" style="filter: drop-shadow(4px 4px 0 #88888826);"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg>
Facebook
</a>
<a href="https://twitter.com/share?url=<?php echo urlencode(get_the_permalink()); ?>&text=<?php echo urlencode(get_the_title()); ?>" target="_blank" class="codewp-twitter-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512" style="filter: drop-shadow(4px 4px 0 #88888826);">
<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/>
</svg>
Twitter
</a>
<a href="https://api.whatsapp.com/send?text=<?php echo urlencode(get_the_title() . ' ' . get_the_permalink()); ?>" target="_blank" class="codewp-whatsapp-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" style="filter: drop-shadow(4px 4px 0 #88888826);">
<path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49.0 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/>
</svg>
</a>
<a class="codewp-share-only" href="#" id="codewp-share-button4">
<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" style="filter: drop-shadow(4px 4px 0 #88888826);">
<path d="M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z"/>
</svg>
</a>
</div>
</div>
<script>
document.getElementById("codewp-share-button4").addEventListener("click", function (e) {
var t;
e.preventDefault();
console.log("Button clicked."); // Add this line for debugging
if (navigator.share) {
t = document.title;
e = window.location.href;
navigator.share({ title: t, url: e })
.then(() => {
console.log("Share successful for share-button.");
})
.catch(e => {
console.error("Share failed for share-button:", e);
});
} else {
alert("Share functionality is not supported in this browser.");
}
});
</script>- And give it any name, go down and select “generate_after_content” or may be generate_after_content in the box next to Hook and check mark “Execute PHP“.
- Now go to Display Rules and click on Post > All Post. And then publish it.
Step 2: Now implement CSS to style these buttons
- So copy the CSS given below and put it in the style.css file of your child theme.
.codewp-share-container {
border-top: 1px dashed #a5a5a5;
border-bottom: 1px dashed #a5a5a5;
padding: 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.codewp-share-text {
display: flex;
align-items: center;
font-weight: 500;
}
.codewp-share-text-mobile{
margin-left: 5px;
}
.codewp-share-text svg {
font-size: 18px;
}
.codewp-share-icons svg {
margin-right: 5px;
font-size: 19px;
}
.codewp-share-icons {
display: flex;
align-items: center;
}
.codewp-share-icons a {
margin-left: 10px;
color: #000;
text-decoration: none;
display: flex;
align-items: center;
padding: 6px 9px;
border-radius: 3px;
font-size: 15px;
font-weight: 500;
transition: opacity 0.3s ease;
}
.codewp-share-only {
font-size: 16px;
background: none !important;
}
/* Hover effects */
.codewp-share-icons a:hover {
opacity: 0.8;
}
.codewp-share-icons a:hover,
.codewp-share-icons:hover a {
opacity: 1;
}
.codewp-facebook-icon {
background: #b9e0fffa;
}
.codewp-twitter-icon {
background: #adeeffe8;
}
.codewp-whatsapp-icon {
background: #a6ffd3eb;
}
/* After Post Social Share CSS for larger screens Ends Here */
/* After Post Social Share CSS for mobile devices starts Here */
@media (max-width: 768px) {
.codewp-share-icons {
flex-wrap: wrap;
}
.codewp-share-icons a {
margin-left: 10px;
margin-bottom: 10px;
padding: 5px 7px;
font-size: 16px;
}
.codewp-share-icons svg {
height: 22px;
width: auto;
margin-right: 5px;
}
.codewp-share-text-mobile {
display: none;
}
.codewp-share-container {
padding-bottom: 5px !important;
}
.codewp-share-text svg{
margin-bottom: 5px;
}
}- Or you can do what everyone else does. Go to the “Customize” section and paste the code into the “Additional CSS” field. Then publish it. Now, refresh any post and see the magic!
Step 3: Final result of Social Sharing Buttons
- Behold, stylish social share buttons have arrived for your convenience!
- I’ve included three social media buttons, and the fourth button, when clicked, triggers the browser’s Navigation.share function. This function opens a share dialog in your desktop or mobile browser, allowing you to share the post link with ease.
- Users can share your website not just on these social media accounts but also on any app on their mobile or desktop.
Conclusion :
With this method, you can add social share icons to the GeneratePress premium theme without using a plugin
Implement this method on your website and remove your social share icon plugin. If you’re still using the old-style social share icons, get rid of them as well. This will help improve your website’s speed.
If you encounter any issues, please leave a comment below. I’ll be happy to answer your questions. Thank you for reading this article, where I’ve shared a method for creating social sharing buttons in the GeneratePress theme or WordPress without using a plugin.
FAQs:
How to Create Social Sharing Buttons in GeneratePress Without Plugins
To implement this method, you’ll need the GeneratePress Premium theme. This theme provides an “Elements” module that allows you to create custom hooks. These hooks can be used to insert various elements into your website’s layout, including social sharing buttons.
How social share buttons work?
Social share buttons are small icons or links that allow website visitors to easily share content with their social media networks. They are typically located at the bottom or side of web pages and are often accompanied by the names and logos of the supported social media platforms.
Why are social share buttons used?
They are used to encourage your readers to share your content on their social media channels or apps.
Can I change the style of these social sharing buttons?
Yes, you can easily do this if you have a basic understanding of HTML and CSS.
Yes i want the new design
Use the above given code and in addition paste this CSS to your child theme style.css file or in additional CSS. You will get the new color style in your social icons.
.facebook-icon {
background: #b9e0fffa;
}
.twitter-icon {
background: #adeeffe8;
}
.whatsapp-icon {
background: #a6ffd3eb;
}