Genesis by StudioPress is the best WordPress theme framework available. I have already posted how easy it is to add custom opt-in form in genesis. So, in this post I will be posting an easy way to add custom social share buttons in Genesis without using any WordPress plugin. The problem with using plugins for everything is that, some of them contain extra functions and capabilities which you don’t even require and which you will never use, also some plugins make your WordPress website slow and heavy. I agree that some plugins are necessary for your WordPress site, you can keep your website fast by minimizing HTTP requests, while still using those important plugins. But for adding social share buttons to your WordPress site, you do not need to use any plugin.
This is going to be a very simple tutorial, even if you don’t know anything about PHP and CSS, you can go through this tutorial and copy the code from the bottom of this post, it is as simple as that.
A brief view of the steps that we are going to follow:
- Finding the default share URL structure of social media sites
- Adding the WordPress PHP functions to default URLs
Using the font awesome icons,we will be using default WordPress dashicons instead. Placing the PHP using Genesis Hooks, we will place code directly into functions.php file of child theme.
- Customizing the buttons using CSS
Default Share URLs of Social Media Sites:
WordPress PHP Functions
Replace [TITLE] with
Replace [URL] with
You can replace other text with WordPress functions in the same way. Here is the full list of WordPress functions: http://codex.wordpress.org/Function_Reference
I am using Facebook, Twitter and Google+ share buttons on my blog so After replacing [TITLE] and [URL] by WordPress functions, the share URLs look like the following.
Using WordPress Dashicons to Add Custom Icons
Dashicons are the best way to add different icons on your website. This step is optional, I am using dashicons because it makes your buttons look even better and are already included in WordPress 3.8 and above.
- So, first of all enable dashicons by adding the following code to functions.php file of your child theme.
Placing the PHP Code in Single Posts Using Genesis Hooks
This is how my final code looks after assigning different class to every button. The reason behind different class is very simple, it makes thing easier and you can edit each button separately.
If you are a beginner and have no idea about codes, just use the final two codes below. Place the following code in your site Genesis simple hooks plugin, as explained below.
This is the final code.
Now, simply add the code below to functions.php file of your child theme.
I am using WordPress conditional tag if (is_single() ) here, because I only want to display these buttons only on single posts.
Tip: If you want to use these buttons on posts as well as the pages use this conditional tag instead if ( is_page() || is_single() )
Customizing the Social Share Buttons
If you are familiar with CSS already, you can customize the CSS according to your need. But, this is how I customized my Genesis social shared buttons. Remember the dashicons CSS we added to the blog and the different class we used for every button? That will help us now, customizing the buttons. Place the code below in style.css file of your child theme.
This is the final CSS style.
Add the CSS code to style.css file of your child theme. If your Genesis child theme is responsive, these icons will adjust themselves according to the device’s width. These buttons will not overlap anything unlike those broken social share plugins.
Here is the final outcome
Screenshot from small screen device
These icons will change their width automatically on smaller screens.
If you liked this tutorial, show your love by sharing it with your friends. If you need any help regarding this tutorial feel free to ask in the comments.