Optimize WordPress Speed with Custom Social Sharing Icons
It may seem to be an easy task but adding well-behaving social sharing buttons to a WordPress site can be a hassle. When I say well-behaving I mean simple, lightweight, resource-friendly, fast – most social sharing plugins out there are not like that. They tend to eat up resources like crazy, and why would anyone want to increase the plugin load time by 25-35% just to display some icons on their site?
The good news is that you don’t necessarily need a plugin to accomplish this task. In this tutorial, I will show you how you can easily add custom social sharing buttons to the end of the posts on your WordPress site with just a few lines of code.
Step 1: Generate the Social Sharing Buttons
We will use the Simple Sharing Buttons Generator, a handy and easy-to-use web tool to generate the sharing icons. The main advantage of this app is that the buttons it generates run on the frontend, therefore they won’t burden your server and you can also keep your users’ activities private.
To generate your custom buttons, go here and press Begin. Choose 1 from the 6 different button styles. Click next and tick the social networks you want to add to your site. When you are finished, you will have to fill your website’s info.
On this screen (below), you will find two options: ‘No JavaScript’ and ‘JavaScript’. Tick JavaScript, as it will enable the browser to detect the URL dynamically therefore your visitors will be able to share each post individually not just the URL of the home page.
Finally take a look at the live preview, download the chosen icon set, and grab the code you generated.
Step 2: Create a Child Theme
Now you will have to add the generated icons and code to your site. First of all you will need to create a child theme.
You can easily create a WP child theme with the help of our tutorial, or you can follow the steps of this WP Codex article. If you already have one, you can jump to Step 3.
The child theme relates to the theme you currently use – in a somewhat similar way as a child relates to his parents. It inherits everything (style and functionality) from the parent theme but you can add extra functionality to it.
In our case the extra functionality will be the custom social sharing buttons.
Step 3: Create a Custom Function that Displays the Icons
We will add a custom function to the child theme’s functions.php file.
With the help of this function you will be able to add the social icons wherever you want on your site by using a custom action hook. If your child theme doesn’t have a functions.php file yet, create a blank text file in your child theme’s root folder with the name functions, and change its extension to .php.
Insert the following line of code into this blank file:
<?php
When your functions.php file is set up add the following code snippet to it:
function add_social_sharing() { ?>
<h3>Share this post<h3>
<!-- Comment: here comes the generated HTML code -->
<?php
add_action( 'custom_social_share', 'add_social_sharing' );
Finally delete the line of the HTML comment from the code snippet above and replace it with the HTML code you generated in Step 1 with the Social Sharing Buttons Generator.
Step 4: Copy the Appropriate Template File to the Child Theme Folder
By default, single posts are ruled by a template file called single.php. Sometimes – especially in more modern themes – the structure of single.php is more complicated, as it also loads additional template files. In this step we need to find the appropriate template file where we can add the icons later.
To locate the right spot for the social buttons we need to find the template file that contains the function that loads the content of the single posts.
Let’s open the theme editor in the WordPress admin dashboard under Appearance > Editor. On the top right hand corner you find a dropdown list where you can select your parent theme. Below the dropdown you can see all the template files your parent theme contains. Scroll down until you find the Single Post template (called single.php) and open it.
If the parent theme uses the get_template_part() WP function in the single.php file that means it uses an additional template file to load the content of the single post.
First you have to find out which one is this. The name of the additional template file is the first parameter of the get_template_part() function.
In Twenty Fifteen it looks like this:
get_template_part( 'content', get_post_format() );
The first parameter is ‘content’ which means we look for the template file called content.php. You need to copy this file from the parent theme root folder to the child theme root folder so as to modify it.
Step 5: Add the Action Hook to the Right Template File
We created a function called add_social_sharing() in Step 3, and we attached it to a custom action hook called custom_social_share. Now we will have to add this hook to the spot where we want the function to be executed.
Here is the code snippet you will need to insert to the right place:
<?php do_action( 'custom_social_share' ); ?>
Next, let’s find the right place.
Open the template file you added to your child theme in Step 4 in a code editor or inside the theme editor of the WordPress admin dashboard, and look for the the_content() function.
Check if there is a wp_link_pages() function right after the the_content() function. If there is, then the code snippet above comes after that; otherwise it follows the the_content() function.
Step 6: Add the CSS Code to the Child Theme
Open the style.css file of your child theme either in your code editor or in the theme editor of the WordPress admin dashboard, copy the CSS code you generated in Step 1, paste it to the end of the file, and save it.
We will add two extra lines to the CSS file to make the social sharing icons properly display in each theme. Copy and paste the following code snippet to the end of the style.css file:
ul.share-buttons li a {
border: 0;
}
ul.share-buttons li img {
display: inline;
}
Step 7: Upload the Social Media Icon Set to the Server
Upload the chosen social media icon set you downloaded in Step 1 to your child theme folder. Connect your server via FTP, create a new folder called images inside the root of your child theme folder (/wp-content/themes/your-child-theme/images) and upload the icon set here.
We name the folder images because this is the default name of the image folder the Simple Sharing Buttons Generator uses.
Step 8: Check the Path of the Icon Files
After you uploaded the social media icons to your server in Step 7, it’s important to check the path of the icon files to make sure they will be loaded.
The path of an image file gives a hint to the browser about its location on the server. Let’s check the image paths inside the functions.php file of the child theme. Open the file in your code editor, and navigate to the add_social_sharing() function where you need to check the HTML code you generated with the Simple Sharing Buttons Generator.
In the HTML code you will find an <img> tag with an src attribute for each icon. Check if each src attributes points to the exact location where your icon set was uploaded in Step 7.
The Simple Sharing Buttons Generator adds relative paths to the <img> files. Sometimes browsers can’t render the images if you use a relative path, so it’s a good idea to use absolute paths instead. This way each browser potentially used by your visitors can be dead sure about the location of the required icon files.
The relative image path added by the generator looks something like this:
<img src="https://assets.hongkiat.com/uploads/wordpress-speed-optimization-social-sharing-icons/flat_web_icon_set/color/Twitter.png">
Let’s change the src attribute of each icon to an absolute path which means it will include the full URL of the file.
The URL path above will look like this:
<img src="http://wwww.your-wp-site/wp-content/themes/your-child-theme/https://assets.hongkiat.com/uploads/wordpress-speed-optimization-social-sharing-icons/flat_web_icon_set/color/Twitter.png">
Step 9: Upload the Modified Files and Activate the Child Theme
Connect your server via FTP and upload all files we created in this tutorial that you haven’t uploaded yet: the functions.php, the style.css, and the appropriate template file (in this tutorial either the single.php or the content.php).
Finally activate the child theme in the WP admin dashboard under the Appearance > Themes menu.
Now you are ready with your super-lightweight, resource-saving, customized social sharing icons. You can go online and check it live on your site.
Conclusion
In this tutorial I showed you how to add the custom social sharing buttons to the end of single posts. You can add the sharing icons to any other locations on your website with the help of the action hook we created.
Just add the code we used in Step 5 to the spot where you want the buttons to be displayed:
<?php do_action( 'custom_social_share' ); ?>
You will also have to find the right template file if you want to place the icons somewhere else. Single pages are ruled by a template file called page.php, while media attachments like images are loaded by attachment.php.
If you wish to display the social sharing buttons on a different spot on your website, you can use the WordPress Template Hierarchy to find it.