Right then, ready for something that seems like it ought to be super easy, but is infact a complete pain in the backside? Good, because in today’s post we are going to add a custom social icon in to display in the standard WordPress social icons block.
No plugins needed! That’s a bonus.
But you will need a touch of patience and some custom CSS. This one fits somewhere between hack and bodge. I’ll let you decide where.
What We Are Trying To Achieve
The aim here is to add in a custom social icon, beyond the ones WordPress allows by default.
What I want to do is add in the Strava logo, because my site is about sports and that’s a good social icon to share. The end result should look something like this:
The first three, Facebook, X (Twitter, ffs), and LinkedIn all come as standard. If you just need them, you’re good to go.
Here’s how this looks behind the scenes, before the icon is added:
And we can see that if we type in Strava, nothing shows up:
Right, so now what?
Adding A Custom Social Icon
You can probably find a bunch of plugins to handle adding custom social icons. Adding a full on plugin to show a single image seems like standard WordPress insanity to me. So I’m going to skip that approach.
The WordPress docs have an solution, which isn’t ideal, but it will give us enough of a starting point to actually achieve the desired outcome.
Here’s what Matt Mullenweg suggests:
The suggested solution is we use a generic link icon, if the one we actually want is not available.
Boo.
Boo and hiss.
However, we do need to do this as a starting point. So let’s add that in, set our link, and we end up with this:
OK, so this is ‘good enough’ to publish and get the link / icon live on the site.
There are two further steps.
The first is to find the social icon we actually want, and to upload that as a media file. I used iconfinder but there’s loads available if you google “your social site icon”.
Once you have the image, you need to upload it in the media section of your WordPress site:
The important part is the URL of the uploaded image, which you can find by clicking on the image and then getting the File URL.
Mine is:
https://www.bikeclimbs.com/wp-content/uploads/2024/01/strava-logo.png
OK, perfect.
The next step depends on how you manage your custom CSS.
If you’re using a child theme / know about that sort of thing, you should probably add the custom CSS to your child themes CSS file.
I’m going to not do that, because I am a highly lazy slapdash amateur, and there is an easier solution.
Providing you are logged in to your WordPress site as an admin, or a user with the necessary permissions (no idea what they are, I am the only user of my sites), when you browse to pages on the front end of your site, you should see something like this:
The key thing is the Customise menu option.
Click on that.
That then loads up a new view where you have a side menu.
Yours might look a bit different, but it should be mostly the same. I think your theme and plugins affects what you see here.
You want to click on Additional CSS.
Here’s where we add our hack / bodge:
.wp-block-social-links:not(.is-style-logos-only) li:nth-child(4) {
background-color: transparent;
}
.wp-block-social-links li:nth-child(4) svg {
display: none;
}
.wp-block-social-links li:nth-child(4) a {
display: inline-block;
width: 36px;
height: 36px;
margin-top: 10px;
background-image: url('https://www.bikeclimbs.com/wp-content/uploads/2024/01/strava-logo.png');
background-size: cover;
}Code language: CSS (css)OK, so let’s break this down because whilst we are doing some bodgery, it’s useful to know exactly what we are bodging.
The way this works is by using CSS selectors to hone in on precisely which social icon(s) we want to change.
The idea is that we will replace the existing generic SVG link icon with our own custom PNG icon. There may be a better way to do this using SVG, but frankly I don’t know what that is, nor is this worth the amount of time it would take me to investigate that. Now you could argue that time would have been less than it took to write this post, but then I am not the most logical person in that regard.
Anyway, the trick to finding out this stuff is by using your browser developer tools. So go ahead and open them up.
To open the developer console in Google Chrome, open the Chrome Menu in the upper-right-hand corner of the browser window and select More Tools > Developer Tools. You can also use Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux).
You can open the Firefox Developer Tools from the menu by selecting Tools > Web Developer > Web Developer Tools or use the keyboard shortcut Ctrl + Shift + I or F12 on Windows and Linux, or Cmd + Opt + I on macOS.
Once you have the dev tools open, you want the little pointer icon:
Then with that enabled, mouse over your generic icon:
And then click it, which will take you to the HTML that makes up this element:
OK, let’s quickly recap the relevant CSS:
.wp-block-social-links li:nth-child(4) svg {
display: none;
}Code language: CSS (css)We are targeting a very specific element here. Notice the top level ul element has, amongst other classes, the class of wp-block-social-links.
Whilst it’s possible this might occur multiple times on the page, so long as we are sure it doesn’t then we can use this almost like an id.
Stage 1 of the bodge is underway.
Then, inside that ul we are looking for the fourth li element.
This may be different for you. I have four social icons in my list, the Strava icon will be the last, so it is the fourth / li:nth-child(4). Obviously you need to change the number accordingly. This number starts from 1.
Nested inside that li is the link icon / SVG, so we hide that with display: none;:
The element remains in the HTML. We just hide it.
At this point we have something like this:
The SVG is gone, but the grey background remains.
We get rid of that with this CSS:
.wp-block-social-links:not(.is-style-logos-only) li:nth-child(4) {
background-color: transparent;
}Code language: CSS (css)We’ve covered most of this already, but the :not(.is-style-logos-only): uses the pseudo-class :not()to select elements that do not have the class is-style-logos-only.
The crazy part about this is I don’t fully understand how this works. It does work. But where this style comes from is confusing me.
I found it in the dev tools, but it’s seemingly not in the HTML:
I’ve selected the LinkedIn social icon here, and you can see this additional pseudo selector giving a background-color style. The same applies for the generic icon, so that’s where this comes from.
But yeah… not fully understanding this. Bodge stage 2!
Lastly, we need to replace the element with our custom social icon.
This is the easiest CSS of the lot, because it’s CSS that seems like most normal CSS I encounter:
.wp-block-social-links li:nth-child(4) a {
display: inline-block;
width: 36px;
height: 36px;
margin-top: 10px;
background-image: url('https://www.bikeclimbs.com/wp-content/uploads/2024/01/strava-logo.png');
background-size: cover;
}Code language: CSS (css)The only tricky parts here were getting the width, height, and margin-top set to fudge the alignment.
After that, it pretty much works as intended.
So yeah, that’s how to hack in a custom social icon in waaaay more work than it ought to have been to add a link like… no one is ever going to click. Sigh.