Display Social Media Icons at Top and Bottom of WordPress Post

Today, I’ve been trying to figure out how to put Jetpack’s social media icons both above and below my posts (which tend to be quite long) and I’ve found several sites that address removing the icons from the bottom of a post and putting them at the top of the post but none that address fully how to put them both places.

It’s important, in my mind, to put them both places so that if a reader already knows they want to share a post before they read an article (maybe they read it already or they’re sold after the first couple of lines) they don’t have to scroll ALL the way to the bottom to share your post.

If you are TOTALLY new to WordPress and/or coding, this may take a little bit of work. To understand this post, knowledge of HTML and CSS is necessary. You also need to know how to upload and download files via FTP (I use Filezilla to transfer my files to and from the web but many web hosts have a built in FTP area in the cPanel so you can edit and save files without using FTP software.) For the very beginners, FTP stands for File Transfer Protocol.

The way WordPress works is to assemble each of your pages/posts through a series of PHP scripts combined with HTML which generate a basic template to display content.  Once all the pieces are put together, the pages/posts are delivered to your browser as standard HTML pages. The PHP prints the HTML to the assembled page on the fly. So if you look at a WordPress page’s source code, it will look like the source of any HTML page. The PHP is not visible.

Ideally, in order to make the changes outlined in this article you will use a child theme. If you don’t know how to create a child theme, check out this video from wp-beginner.com. If that doesn’t help you, there are plenty of YouTube videos that give basic instructions.

Using a child theme is important because it allows you to keep customizations to your theme which will generally be erased every time you update WordPress which is often done automatically by your web host. If your head is hurting, don’t worry. Creating a child theme SOUNDS like a lot of work but it’s really very simple.

Generally, a child theme has two basic files: style.css (your custom stylesheet) and functions.php that allows you to alter some minor functionality of WordPress to suit the needs of your site.

But you can also alter other PHP files and place them in your child theme. In this example, I’m going to alter the content-single.php file from my parent theme and upload it to my child theme folder. That way when a visitor requests my site, it will use the content-single.php from my child theme and NOT the one from my parent theme.

I’m using a theme called GeneratePress (which I highly recommend). Now if you want to REMOVE the social icons from the bottom of your posts/pages, that’s a little trickier and involves altering your functions.php file. Check this out if that’s your aim.

Below is the code you’re going to want to insert into your content-post.php file (if you want to alter this in your pages too, you’ll need to do the same thing to your content-page.php file. These files are all located in wp-content/themes/YOURTHEME).

<?php if ( function_exists( 'sharing_display' ) ) {
sharing_display( '', true );
}
if ( class_exists( 'Jetpack_Likes' ) ) {
$custom_likes = new Jetpack_Likes;
echo $custom_likes->post_likes( '' );
}?>

So now the question is, where do you put this? Many resources assume you know more of what you’re doing than you actually do so if you’ve been looking for answers on Google and finding only pieces of what seems like a much larger puzzle, you’re not alone.

Note: If you COPY the code above, make sure that when you paste it into your content-post.php file that the less-than and greater-than signs (a.k.a. angle brackets) appear in the code as they appear above. If you have something that looks like an < or > those are HTML special characters used to display the code without actually running the code. Without them, the code above could potentially run.

Here is an image of what MY content-post.php file looks like. Yours may look different unless you’re using the same theme or it may be the same. I use Adobe Dreamweaver to edit PHP and JavaScript because it let’s you know you have errors. If you upload a PHP file to your WordPress site that has errors, you may get locked out of the admin area so be sure you have a backup copy of the unaltered content-post.php file to upload to your site to replace the altered version in the event of an error.

In that event, you’re going to want to put the unaltered parent version in the child theme folder to regain control of the admin panel. You can do this through your web host’s FTP area or using Filezilla (or other FTP software).

Here you can see the HTML mixed in with the PHP calls to the server. Notice that there are parts missing. There’s no head section or opening or closing body tags. This PHP file ONLY controls how the content within a post is displayed. The head and body tags along with the divs that contain any widgets are in SEPARATE PHP files.

The opening tag on this page is the article tag. This code is going to generate the content within your post.

I wanted to place my social sharing bar UNDER the entry title and the entry date. Look at line 13. On line 12, a div is created called “entry-meta”. What does meta mean? Metadata is data about data. So it’s a good bet that this div is going to display data about the content (data) of your post. Sure enough, line 13 has a PHP script asking the server to perform a function called “generate_posted_on()”. It’s a good bet that this function will generate the date the post was written by retrieving it from the database in which all the information about your WP site is stored.

These are things to look for when perusing other people’s code. Programmers are usually good about naming things so other programmers will recognize what purpose the code serves.

So I want to post my social icons AFTER the date but BEFORE the main content of the article. The header tags you see on lines 10 and 15 serve as the beginning and end of the introductory segment to your article. You see the title of your article on line 11 and on 13, the date. So I want to paste the code after line 13. You could put the code after the closing header tag but then your icons would appear as part of your article rather than as part of the introduction to your article.

So put your cursor at the end of line 13 and hit return. Paste the code snippet given to you above. As long as you don’t have any &lt; or &gt; you should be good to go. If you do, replace the lt’s with < and gt’s with >.

Here is the final code. The changes are in the cyan box. Now, upload this file into your child theme folder.

You don’t need Dreamweaver to edit this file. You can use Notepad (not ideal), Notepad++, TextPad, or TextWrangler (for Macs). These are all free. Notepad++ is my favorite. Each of these will color code your code if you select a language (in this case, PHP even though you also have HTML elements).

Hope this helps. There may be other more effective solutions out there but I know this one works. I am not a WordPress expert so if anyone has a better way, feel free to post in the comments section.

[jetpack-related-posts]