Bespoke Social Media Buttons in WordPress

When designing my photography website (using WordPress with a Photocrati template as a base), I tried a number of different plug-ins for my ‘contact me’ and ‘follow me’ icons without much success. I didn’t find any that did what I wanted them to do – if you want custom buttons in your header like the one on my site then maybe think about this option.

I wanted buttons to view at the top right of the page which meant putting them in the header. I also wanted to have bespoke buttons that matched the feel of my brand. The answer for me was code it myself rather than relying on a plug in. I don’t pretend to be an expert on coding but it has worked for me and perhaps you’d like to do something similar.

WARNING: this involves altering your theme files – make sure you make a copy or backup of your files before altering anything – I take no responsibility for any errors you cause by altering your theme files on you website.

This tutorial assumes you are using WordPress and Photocrati as you base with a similar layout to my website – it worked for me but I can’t guarantee it will work on your site without further work:

1. Decide on the icons you want to use for your buttons and upload them to a folder on your WordPress site (I’m using NextGEN Gallery).
2. Log in to WordPress as Admin and go to Appearance—>Edit Themes then select the Header.php from the list on the right hand side.
3. Take a copy of the header code and save it on your computer in a text editor.
4. Go to my page on how to make follow me buttons in WordPress and copy the first batch of code from that page.
5. Open it in your editor and replace any CAPITAL LETTERS with the relevant URLS for your social media sites and the URLs of the icons you uploaded in step 1. This code has lines for Facebook, Twitter, Pinterest and Email. If you want to add more, just copy the layout of the ones shown, changing the URLs as required. SAVE THIS FILE ON YOUR COMPUTER.
6. Copy the code with your URLs now inserted in it and go back to the Header.php file in step 2.
7. Do a search (cmd F on the mac) for <div id=”branding”>. It should show you only one result, right near the bottom of the file.
8. Paste your new code after <div id=”branding”> and before <div id=”blog-title”>
9. Making sure you did take a back up copy of the header.php code as per step 3, hit the Update File button.
10. Open up your website in google Chrome and select your header with a right click—>inspect element.
11. You should see <div id=”branding”> highlighted. I have reduced the width of this div using some css so the buttons fit in to the right of it as follows:
12. Go back to my page and copy the second bit of code.
13. Paste this code into your custom css (in photocrati go to: Theme Options—>Other Options—>custom Css)
14. Go back to my page and copy the third bit of code.
15. Paste this code into your custom css (in photocrati go to: Theme Options—>Other Options—>custom Css)
16. You will now need to adjust the parameters within the css to position your buttons correctly on the right hand side of your header…it was a matter of trial an error for me.

NOTE: when you update your theme in the future, the header.php file will be overwritten. You will need to go back and repeat steps 6-9 once the upgrade is complete using the file you saved in step 5.

I hope that helps get you started if you are looking for this kind of solution to social media contact buttons – thanks for reading.

–

Bio: Peter Marfleet is a family, maternity and newborn Portrait Photographer in Harrogate, UK.