We all like sharing stuff online, and if we’re building a web page, making sharing easier is providing a good service to our users. There’s a reason that it’s become a standard for blog entries to have clickable icons that share the article to different platforms. There are a lot of different ways to do this, integrations have been developed for most popular systems. It isn’t necessary to use a plugin, and I’ve come up with some good plug-and-play code chunks for adding social share buttons in WordPress.

Getting Started

This tutorial assumes that you have a working familiarity with PHP, and are comfortable with variables, arrays and loops. If this is all gibberish to you, chances are you’re not quite ready to edit a WordPress theme just yet.

First up, you will need Font Awesome under the hood of your project. If you are not already using this, you should consider it (unless you still enjoy cutting out icon png’s, in which case be free). There’s even a CDN available for it so you don’t have to clutter up your spartan file structure.

Let’s start with a little PHP. First, we’ll capture the page URL and the permalink as shortened variables. We have a main array, each entry corresponds to a social link we’ll be spitting out. Each of these is a child array, with values for the icon, the title for the link, and the url. In the example, I have set up Facebook, Twitter, LinkedIn and Google Plus. Removing one is as easy as deleting the array item, adding one is just as easy.

Here’s what that looks like in code:

Notice that we’re using the title and permalink variables in the entry arrays, we’re passing them into the appropriate places in the URL structure so that we get platform-compliant links in the output.

Drawing Icons From Our Array

We’ve got our nested array structure, now we’ll use a foreach loop to iterate through each item and draw out the social links. We’re using the variation that includes an integer in the loop, more on that in a sec. This is my general methodology for WordPress — get all that pulled content into an array and loop through that junk. Here’s the foreach in action:

This creates a long string that includes: an optional <ul> that wraps the entire piece, a list of <li> pairs, wrapping <a> pairs, these wrap the <i> pairs that Font Awesome hooks into. Then we dip into the child arrays to get the values we load into the href and title attributes for the <a>‘s, the icon value is dropped into the <i>‘s class attribute completes the Font Awesome definition that calls in that icon. Then we spit it all out with an echo, but that’s only one method.

First, let’s clean it up.

Straighten Your Tie

If you’re dropping this code into a theme, chances are it’s going to look janky. How about a little CSS to clean things up? Just some good general rules that will look good anywhere:

First up, we set our <ul class="share-links"> to display:inline-block, width:auto. This means the item will only stretch out to the required width, as opposed to display:block that pushes width to the max available. We also zero out any padding or margins on the <ul> in base styles, you may need to do the same for the <li>‘s. Those we set to display:block and use to define our icons’ collective width and height, line them up with a float:left.

The <a> and <i class="fa"> tags are dialed into and also given a display:block and maxed out to available width and height. The <i class="fa"> is given a line-height and text-align to center the icon in the link. We use the <a> to get our color rules in place, margin is placed on the <li> to space them out. Things should be looking better now:

Getting Other Items In Around the Loop

Sometimes there will be “permanent” links that you want to add to the set, things that will never change. For example, let’s say you’ll want to include a link for someone to send you an email. It doesn’t need to go through the rigamarole of the array and the loop, it’s always going to be that mailto: link going to your email with the envelope icon.

We can go ahead and hard-code the link, putting it in just above our foreach:

Before $stra hits the loop, we tuck in another <li> element with a li > a > .fa set that matches the existing structure. You could also have arrays and loops in parallel, to gather values from different sets. I have it set up this way on my portfolio site, the distinction is links to my social accounts versus links to the sites under thecruzat.com. The two arrays can be used to populate the same <ul> element.

Where And How to Drop in WordPress

Now we’ve got our basic setup figured out using arrays and loops, we have our share url’s dialed in, and we have styles that make them look halfway decent. And you can drop all of this into single.php and get it functioning, but what if the design also calls for the share option in the listings? You’d have to copy the same stuff into archive.php, index.php, search.php, and possible front-page.php. Each will require its own loop.

Ugh. And then what if you want to tweak it later? You have to go back and rework all those loops. Of course you don’t.

We can wrap this whole structure in a PHP function, to output it with ease wherever we need it in the theme. WordPress is set up to allow us a central dumping ground for custom functions, handily enough in functions.php (this file should exist in the root of your theme). So here is the chunk of content that you will want to copy and paste into that file:

First, we get the page link and page title tucked into shortened variables. These get woven into the $shara array along the templates for popular platform share links. We have a function wrapping the list, so we need to bring $shara into the function scope. We use a string variable to store the pieces of the list, beginning with the parent <ul class="share-links">. We add an email link before the main loop, all stacking on our $str string variable. We wrap up the loop and return the variable.

Then, it’s as easy as this to drop it into the theme:

This will work anywhere in the theme where the if while loop is running and $post reflects the post you’re targeting, like a stack of articles on an archive.php or a search.php.

In Conclusion, Have Cookies

Here is the fileset reflecting all of the code in this tutorial. There are copy-and-paste chunks ready for functions.php and your SASS set, old-fashioned CSS, a standalone HTML and a PHP file ready to stand up in MAMP or EasyPHP.

Gimme a shout if you have any issues with the code.

And let’s have another taste of that ice cream. To share is to care.