WordPress Speed Optimization with Custom Social Sharing Icons

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.

In our case the extra functionality will be the custom social sharing buttons.

IMAGE: pixabay

Step 1: Generate the Social Sharing Buttons

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.

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.

We name the folder images because this is the default name of the image folder the Simple Sharing Buttons Generator uses.

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.

Step 2: Create a Child Theme

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.

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.

<?php

When your functions.php file is set up add the following code snippet to it:

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.

Step 3: Create a Custom Function that Displays the Icons

Just add the code we used in Step 5 to the spot where you want the buttons to be displayed:

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.

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.

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.

Insert the following line of code into this blank file:

Step 4: Copy the Appropriate Template File to the Child Theme Folder

 /* * Adds the custom social sharing icons */ 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.

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.

Here is the code snippet you will need to insert to the right place:

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.

<?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.

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.

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.

Twenty Fifteen File Location

Step 5: Add the Action Hook to the Right Template File

The relative image path added by the generator looks something like this:

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.

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.

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.

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.

Action hook in the Twenty Fifteen theme

Step 6: Add the CSS Code to the Child Theme

In Twenty Fifteen it looks like this:

Download the HTML and CSS codes

The URL path above will look like this:

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:

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.

Step 8: Check the Path of the Icon Files

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.

<?php do_action( 'custom_social_share' ); ?>

Next, let’s find the right place.

<img src="http://media02.hongkiat.com/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.

Finally activate the child theme in the WP admin dashboard under the Appearance > Themes menu.

Finally take a look at the live preview, download the chosen icon set, and grab the code you generated.

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?

<img src="http://wwww.your-wp-site/wp-content/themes/your-child-theme/http://media02.hongkiat.com/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).

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.

We will add a custom function to the child theme’s functions.php 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.

The result in the Twenty Fifteen Theme

Conclusion

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.

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.

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.

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.

  • Download Source


Leave a Reply