Custom Social Sharing Buttons Using Dashicons

In this tutorial, i’ll show you how to use Dashicons, which are included in the WordPress core, to create your own custom social sharing buttons like this example:

You’ll then be able to choose from different methods for displaying your buttons anywhere in any theme.

Here’s the steps involved:

• Create main function and template tag for buttons
• (Optional) Add basic Javascript file for pop up sharing window
• (Optional) Create shortcode for displaying buttons
• (Optional) Hook in Buttons using WordPress or theme specific hook in custom function
• (Optional) Add template tag to themes template file

Create Template Tag

The first step is to create a template tag for the icons which you can hook in or add to a file:

Enqueue Dashicons

Copy the code from the view raw link in the Gist and paste it at the end if your child themes functions file.

Dashicons will display on the front end when logged in without this code but they will not once you log out.

Pop Up Window – Javascript

This step is optional. If you want to include a pop up window when a reader clicks on any sharing icon, add this Javascript to a new file named social.js and upload to the js folder in your child theme.

Here’s a basic example of the pop up window generated by the Javscript when you click the Twitter icon.

add_action( 'wp_enqueue_scripts', 'enqueue_script' );
function enqueue_script() {
wp_enqueue_script( 'social-icons', get_bloginfo( 'stylesheet_directory' ) . '/js/social.js', array( 'jquery' ), '1.0.0' );
}

Add the code above to load the jQuery from your child themes js folder.
Whats Next?

The next 3 options show you the different methods for displaying your buttons in your theme. You can use all of them at the same time if you like.

Create Shortcode

Here’s 2 methods you can use to create a shortcode to display your buttons within post content or anywhere you can’t using a template tag.

All code should be pasted at the end of your child themes functions.php file.

Basic WordPress Shortcode

Genesis Shortcode

Custom Function To Hook In Buttons

This code enables you to hook in your sharing buttons using any theme specific or WordPress hook via your child themes functions.php file.

Basic Template Tag

For template coders you can simply add this template tag in any template file to display your buttons.

Make sure you copy over the template file from your parent theme to your child theme if using this method otherwise any parent theme modifications will be lost when the theme is updated.

<?php wpsites_social_share_buttons(); ?>

Style & Change Size

Use this sample CSS in your child themes style.css file to change the size and colors of your icons.

.wpsites-social .dashicons {
font: normal 100px/1 'dashicons';
padding: 50px;
margin: 60px;
}

Related Tutorials

• Social Follow Buttons Using Custom Menu In Split Footer of Genesis Sample