Custom Social Share Buttons with Counter in Genesis
2

Custom Social Share Buttons with Counter in Genesis (RainaStudio Map 101)

As StudioPress fanboy, I always keep doing my practice with the Genesis Framework. In a recent project, we have tried trimming down the WordPress plugins list as much as possible. So, we have written a lot of custom functions for built-in features. In this post today, you’ll learn how you add custom social share buttons with a counter in your Genesis Framework child theme.

This article is one of the posts of the RainaStudio Map 101 blog series. You can check out the previous posts of this series from the unordered list below.

Genesis Tutorial: Add Custom Social Share Buttons with Counter

First, I have searched the best jQuery social share buttons with a counter. And I have found the jumboshare jQuery plugin. I use this plugin in this tutorial. Here is the screenshot of the custom social share buttons with the counter in Genesis Framework.

Custom Social Share Buttons with Counter in Genesis

Let’s get hands dirty with some code.

Download or create a jumboshare.js file in your child theme js directory. And add the code above into the file. You can change or modify the username where twitterUsername:"rainastudio" with your website’s Twitter username.

Enqueue JumboShare js file to functions.php

Save the file after updating it. Add the below code into functions.php file of your child theme to call the js file in the footer.

Add CSS code for buttons into style.css

Add the following CSS code to your style.css file of the Genesis child theme.

Due to FontAwesome doesn’t have Buffer icon, we need to put a Buffer icon file with the name buffer-icon.png into child-theme/images Directory. You can download the icon file from here.

The final step, get social share buttons live

Next, we need to echo some HTML markup into genesis_entry_header. Let’s add the following PHP functions to your child theme’s functions.php.

Check out your site’s single post and pages to see social share buttons with the counter. I hope you will see the demo screenshot included at the top.

Conclusion

Share your website content on social media networks using custom social share buttons. Ask anything you need to help with, and I will be in touch within hours. Leave your feedback for this tutorial using the form below. I will catch you. 🙂

Editorial Staff
 

Editorial Staff is an in-house team of native WordPress developer and industry columnists.

  • Reza says:

    the button does not appear bro.

  • >