Optimize WordPress speed with custom social sharing icons / WordPress

/ * * Add custom social sharing icons * / function add_social_shared() ?>

Share this article

Final remove HTML comment line from the above code and replace it with HTML code you created in Step 1 with the Social Share Button Generator.

Step 4: Copy the appropriate template file to the child theme folder

By default, single posts are ruled by a template file named menu.php. Sometimes – especially in more modern themes – the structure of menu.php more complicated, as it also loads additional template files. In this step, we need to find the appropriate template file so that the following icons can be added.

To determine the right location for the social buttons, we need to find the template file contains the function to load the content of single articles.

Open the theme editor in the WordPress admin dashboard below Appearance> Editing. In the upper right corner you find a drop down list where you can select the main theme. Below the dropdown you can see all the template files your parent theme contains. Scroll down until you find Single post template (called single.php) and open it.

If the main theme uses get_template_part() WP function in menu.php file means it uses an additional template file to load the content of a post.

First you have to figure out which one is this. The name of the additional template file is the first parameter of get_template_part() function.

In Twenty fifteen it looks like this:

get_template_part ('nội dung', get_post_format ());

The first parameter is ‘Content’ means we find the template file called content.php. You need to copy this file from the root of the parent theme to the root of the child theme to modify it.

Step 5: Add the Action Hook to the correct template file

We have created a function called add_social_shared() in Step 3 and we attached it to a custom action hook called custom_social_share. Now we will have to add this hook where we want the function to be executed.

Here’s the code you’ll need to insert in the right place:

Next, find the right place.

Open the template file you added to your child theme in Step 4 in the code editor or inside the theme editor of the WordPress admin dashboard and search Content() function.

Check if any wp_link_pages() works soon Content() function. If so, the code above appears afterwards; otherwise it follows Content() function.

Step 6: Add CSS code to the child theme

Open style.css file of your child theme in your code editor or in the theme editor of the WordPress admin dashboard, copy the CSS code you created in Step 1, paste it at the end of the file and save it.

We will be adding two additional lines to the CSS file to make the social sharing icons display properly in each theme. Copy and paste the following code at the end style.css file:

 ul.share-nút li a viền: 0;  ul.share-nút li img display: inline;  

Step 7: Upload social media icons to server

Upload the selected social media icon you downloaded in Step 1 to the child theme folder. Connect your server via FTP, create a new folder called Picture inside the root of your child theme folder (/wp-content/themes/your-child-theme/images) and upload the icon located here.

We name the folder Picture because this is the default name of the images folder that Simple Share Button Generator uses.

Step 8: Check the path of the icon file

After you upload your social media icons to your server in Step 7, it is important to check the path of the icon files to make sure they will load.

The path of the image file gives a hint to the browser about its location on the server. Please check the image link inside Functions.php child theme file. Open the file in your code editor and navigate to add_social_shared() function where you need to test the HTML code you created with the Simple Share Button Generator.

In the HTML code you will find a Tag src attributes for each icon. Check if each src properties point to the exact location where your icon set was uploaded in Step 7.

Simple share button generator add relative path to files. Sometimes the browser cannot display the image if you use relative pathso it’s a good idea to use absolute path instead. This way, each browser potentially used by your visitors can be sure of the location of the required icon files.

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

Let’s change src the attribute of each icon for an absolute path means that it will include the full URL of the file.

The above URL will look like this:

Step 9: Upload the modified files and activate the child theme

Connect your server via FTP and upload all the files we created in this tutorial that you haven’t uploaded yet: Functions.phpthe style.cssand the appropriate template file (in this tutorial or menu.php or content.php).

Finally enable the child theme in the WP admin dashboard below Appearance> Themes menu.

Now you are ready with your super lightweight, resource saving, custom social sharing icons. You can go online and check directly on your site.

Conclusion

In this tutorial, I showed you how to add custom social sharing buttons to the bottom of single posts. You can add share icons to any other place on your website with the help of the action hook we created.

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

You will also have to find the correct template file if you want to place the icons elsewhere. Single pages are ruled by a template file named page.phpwhile media attachments such as images are loaded by attachment.php.

If you want to display social sharing buttons in a different location on your site, you can use the WordPress Template Hierarchy to find it.