In this article, you will learn How To Create a Social Share button without plugins On a WordPress website. Two types of sharing button sets are covered in this article, Floating sidebar social sharing button as well as after content social sharing icons.
The social sharing interface is made to deliver Minimal & Professional styling to the overall article page.
To create such a design interface, I have used HTML, CSS, PHP code, which you’ll need to copy from this article and paste according to the instructions given below. I’m using the Generatepress theme which lets us use ‘Hook‘ to insert codes to the main website.
If you’re on a different WordPress theme that doesn’t feature such functionality, you can Paste the code to either ‘Functions.php‘ which can be found from “Dashboard > Appearance > Theme Editor > Functions.php“,
Or if you want simple and permanent methods, use the Code Snippets plugin to run code snippets on your site.
How to add the Code
Navigate to the given below modules and copy the code snippets respectively, First one is PHP which provides functionality to the Social sharing buttons, another is CSS which stylizes the Sharing element.
Adding PHP Code
If you’re on Generatepress theme, simply locate to WordPress “Dashboard > Appearance > GeneratePress > Elements > Activate” to activate the Elements Module first. Note that the module is only available in the Premium version of Generatepress.
In case you do not have premium, follow along with the alternative ways to add custom PHP to your site via Snippets Plugin as discussed before.
Now, after enabling the Elements module, click on ‘Add New Element’, and choose element type as ‘Hook’.
For custom code inserter plugins, the process would be almost the same where you have to paste the PHP Code at first and Save and Activate it after further settings. You’ll find the following code from below given Snippets.
Now, Choose the Hook to ‘wp_body_open’ for Sidebar floating Social share buttons, and ‘Generate_after_content’ for Footer social share buttons. Make sure to check ‘Execute PHP’, or else the code will not work.
After the basic settings, now you have to choose where to show the Social share buttons. By default, this snippet works on every single page, which we have to change to Posts only.
Make sure to set the ‘Location’ to Post > All posts, and ‘Exclude’ to Page > All Pages.
After setting everything up, click on ‘Publish’.
Adding CSS Code
Until now, we’ve published the PHP codes to pull up the Social sharing buttons. Let’s now style the Elements to make it look the way we wanted.
Copy the respective CSS Codes from below given Snippets, and visit your WordPress “Dashboard > Appearance > Customize > Additional CSS”. Scroll to the bottom, paste both the CSS codes and see the Magic!
Code For Floating Share Icons
PHP Code
CSS Code
These were the required codes for the Floating Social share button, Now let’s take a look at the Footer Share icons.
Related: How to Add Verified Badge to WordPress author
Code for Footer Share Icons
PHP Code
CSS Code
So, this was the process of how you can add a social share button without plugins on a WordPress website. Plugins add unwanted features which eventually slows down a website and brings its SERP positioning bottom.
I’ve been writing such articles with which you can get rid of as many plugins as possible, just by adding functionalities with simple code snippets. This way you can improve your website loading speed to the next level.
Let me know if you are facing any issues in the comment section, I will definitely try to solve them as soon as possible.
