This is a detailed guide on how to add WordPress Share Button Without Plugin in just 5 minutes. You can achieve this by adding a few lines of code to your functions.php and style.css. That’s all!
In this guide, you will see:
- How to add code to child theme’s functions.php
- How to add CSS to your theme
- Share button HTML
- WhatsApp share button
Let’s get started.
If you prefer a video tutorial, see the video above.
Why use code instead of a plugin for the share button?
While you may it is faster to use the WordPress share button, loading your website with plugins every time you want to add a new feature is…. waste of server resources. The more plugin you use on your WordPress, the slower it tends to load and the more susceptible to hacking.
Only use a plugin on your website if it is necessary.
How to add WordPress share button without plugin
Adding a WordPress share button without using a plugin is simple and straightforward. Before you get started, you need to use a child theme. This makes it safer. The reason is, adding a code to your parent theme means you will lose the code every time the theme is updated.
SEE ALSO: How To Redirect WordPress Page to Another Page Without Plugin
Steps to add WordPress share button without plugin.
- Add a few lines of code to your functions.php
- Add a few lines of CSS codes to your style.css or the additional CSS in the customize tab
STEP #1. Copy and paste the code below to the end functions.php of your child theme. CLICK HERE TO COPY THE CODE.
//SHAREBUTTON SHORTCODE by www.alphawebtips.com
function social_share_buttons_shortcode() {
ob_start();
?>
<div class="post__content--share">
<h6>Share on:</h6>
<div class="share-buttons">
<a href="https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>" target="_blank" rel="nofollow noopener noreferrer"><img src="https://www.alphawebtips.com/wp-content/uploads/2023/06/twitter-icon.webp" width="20" height="20"/> Twitter</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" target="_blank" rel="nofollow noopener noreferrer"><img src="https://www.alphawebtips.com/wp-content/uploads/2023/06/facebook-icon.webp" width="20" height="20"/> Facebook</a>
<a href="https://api.whatsapp.com/send?text=<?php the_title(); ?> <?php the_permalink(); ?>" target="_blank" rel="nofollow noopener noreferrer"><img src="https://www.alphawebtips.com/wp-content/uploads/2023/06/whatsapp-logo.webp" width="20" height="20"/> WhatsApp</a>
</div>
</div>
<?php
return ob_get_clean();
}
add_shortcode('social_share_buttons', 'social_share_buttons_shortcode');
//ADD THE SHORTCODE AT THE END OF YOUR CONTENT
function append_social_share_buttons($content) {
if (is_single()) {
$social_share_buttons = do_shortcode('[social_share_buttons]');
$content .= $social_share_buttons;
}
return $content;
}
add_filter('the_content', 'append_social_share_buttons');
This code contains HTML you can still modify if you want to include more social networks. Presently, I used Twitter, Facebook and WhatsApp.
STEP #2: Copy and paste the CSS code below into the style.css to the Additional CSS in the Customize tab. You can modify this CSS to make the colours you want.
.content--share {
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: 0.5rem;
border-top: 1px solid grey;
}
.content--share .share-buttons {
display: flex;
flex-direction: row;
gap: 0.5rem;
flex-wrap: wrap;
}
.content--share .share-buttons a {
color: dark;
text-decoration: none;
border: 1px solid grey;
border-radius: 0.3rem;
padding: 0.3rem 0.5rem;
}
.content--share .share-buttons a:hover {
background-color: blue;
color: white;
}
For a better understanding, watch the video above.
Wrapping up how to Add WordPress Share Button Without Plugin
Adding features like post sharing without a plugin is one of the ways to ensure you get rid of too many plugins and make your WordPress site load faster. This article has done justice to how to add a share button to WordPress without plugin.
Were you able to get it to work?
Ask Question