Social sharing is one of the best ways to bring more traffic to your website.
Jetpack is one of the most popular plugins which also includes social sharing buttons.
The only problem is, the social buttons by default, are displayed after the content.
This tutorials contains the code for Genesis users and other themes which enables you to reposition the buttons.
Display Share Buttons Before Post Content Using Code
This code will work with any theme.
It displays the buttons both before and after your content.
Paste this code at the end of your child themes functions.php file to display your Jetpack social sharing buttons before your posts content.
Display Share Buttons Before Post in Genesis
Works in Genesis only and only displays the icons before the single post content.
add_action( 'genesis_entry_header', 'reposition_jetpack', 5 );
function reposition_jetpack() {
if ( is_singular( 'post' ) && function_exists( 'sharing_display' ) ) {
sharing_display( '', true );
}
}Remove is_singular( 'post' ) && to also show the icons on archives like this:
add_action( 'genesis_entry_header', 'reposition_jetpack', 5 );
function reposition_jetpack() {
if ( function_exists( 'sharing_display' ) ) {
sharing_display( '', true );
}
}Move Share Buttons After Post in Genesis
This PHP code will actually reposition your Jetpack share buttons after the content. Although this is the default position, this hook position in Genesis is after the after post content hook as you can see in this image.
You can edit this code to display Jetpack buttons anywhere in your theme.
Change Sharing Button Position
All you need to do in if you want to add Jetpack share buttons in another theme location is to change the hook in the code above. Here’s a list of all Genesis hooks as well as a visual hook map which shows you the position each hook executes in your theme.
Note: The above code uses the old XHTML loop hooks so you will need to change the hook if running HTML 5.
If you find this tip helpful, please share it.
25 replies on “Moving Jetpack Sharing Buttons Above Your Posts Content”
Hey Brad,
Just did a search for “how to add Jetpack sharing buttons to the top of posts” (and keep them at the bottom as well) and so glad I came across this post (and your site overall).
I tested both the Jetpack Extras plugin and your functions.php code (for non-Genesis site) and both worked like charm (I went with the functions.php edit; always prefer to keep plugins to a minimum if there’s a reasonable alternative).
I’m non a coder and Jetpack’s own code and instructions on their site left me bewildered. Yours on the other hand was dead simple and literally took me two minutes.
Thanks for the terrific post — most helpful!
Hi Michael
Glad you found it easy to use.
If you ever get sick of Jetpack, you might want to try AddThis.
Fantastic.
Tracked you down form StudioPress forum, and am now working through all your improvements for Genesis.
Thank you!
You’re welcome Mike.
Hello…really helpful post. i did the tutorial but now it shows me the buttons and above and below the post…how can i make it appear only above and not in both post sides? (i use twentyfourteen theme).
That’s exactly what it does Stan.
If you want it to show only above the posts, you will need to modify the code.
thanks for the reply…after too many tries i can’t find what to edit in the code.it would be a great help if you could tell me what specifically to modify in the code.
The code needs to be modified.
I could write the code for you and test it first to make sure it works perfectly.
But i cannot educate you in one comment about how to write and modify PHP code using filters as its not something which you can learn quickly and easily.
Hi Brad i have a question, i did the tutorial and it is great. i am using eleven40 pro theme.
My Purpose is to place sharing buttons on single posts just below title which worked great, but they are also appearing in the genesis featured post in the sidebar, how can i remove the sidebar sharing buttons?
Try adding a conditional tag to this line in the code:
Otherwise you could use CSS code to hide them from the sidebar.
Hi, help me please,
I want to move the position of the YARPP related posts (YARPP is a wordpress plugin). I can see in the info of the plugin that i should put this where i want to display the related posts (inside the wordpress loop, inside the single.php file): related_posts();
My question is if i can put this function in a hook widget area of my functions.php file (for display this after one genesis widget area)… Is possible this?? how i should put (the format??)
Really depends on what theme you’re using because the hooks are all different.
However what you can do is create a new widget and add the YARPP widget to it.
Jetpack Extras by BarryCarlyon is a perfect solution. Thanks!
A quick thanks for recommending ‘Jetpack Extras’! Solved the problem perfectly.
No worries Mark.
Looks like my code was stripped out…maybe I can email you the code if you are able to assist?
Thanks
Hi Tom
You will need custom coding for that.
Please use the contact form on my site.
Hey, thanks so much for this. It is just what I was looking for.
I have added the code to my child theme’s functions.php and it works a treat, however the share buttons are still showing after the post as well – any tips on how to remove them from here? I only want them at the top, and preferably before the content section itself, so really I’d like them to show tucked up under the page title.
I was previously using some other social buttons and I managed to hack them into my custom template in the correct location using this code, but I’d prefer to use the Jetpack buttons, I just can’t get them to show in the correct location:
Many thanks
You will need a custom function which hooks them in below your title and also removes them from after your posts.
Thanks so much – that was all the info I needed to figure it out. I was being a bit dumb..
No worries Tom
Hi Brad
The above / below fold graph is pretty interestind.
Looks as though having those sharing buttons right at the top is a must?
And many thanks for the plugins and code.
I’m assuming that you go with the code, or am I wrong?
Hi Keith
Yes, the code is far more flexible because it uses Genesis hooks.
Thanks for the comment.
Hi Brad,
Thank you very much for the Information, you must have been reading my mind. Just last night I wanted to add new social media buttons to my website, and was trying to figure out which ones to use and where I wanted to place them. I see a lot of websites that place their buttons above the fold, but also in the middle and at the end of their content. I’m going to try use this plugin it sounds like it will help me configure my social media buttons on my site quick, easy and exactly where I want and need to place them.
Thank you again, your blogs have been so helpful to me, being a newbie and all:-)
Keep up the great work and take care.
Stephanie
Hi Stephanie.
Nice to hear from you.
Where is your Gravatar naughty girl! hahaha
You’ll need to install Jetpack first and then the extra’s plugin.