This WordPress theme came with the Jetpack plugin and uses Jetpack’s cute social-media menu feature – when you add links to your Twitter, Youtube, Github, etc. pages to the Social menu, they magically get turned in to pretty little icons which automatically match the site.

But if you add a service that isn’t supported by default, like Mixcloud, you get an ugly crummy generic link icon there instead. That’s no fun.

Those little icons are 24px-square SVG vectors and the image data is actually directly-present in the HTML source of the web page – they’re not PNG/GIF graphics being loaded as an addition request from the server.

Thankfully, a lovely Belgian called Jan has already written up how to solve this – his writeup presumes you’ve created a Child Theme, but luckily I already did that in my last post where I tweaked the colours in the theme I’m using.

To follow Jan’s guide, you will need the free Inkscape vector-graphics software and an understanding that SVG files are a type of XML document – which means you can edit them using a simple text editor. Even Notepad will do, although I used Visual Studio Code.

Both of the snippets of PHP code he provides need to go in the functions.php file of your current theme (creating a Child Theme if you’re using an “off the shelf” theme is probably a good idea, see my last post), changing the 'mastodon.social' => 'mastodon' etc. to suit the domain you want to match and the name you want to use for the icon.

You can copy+paste his sample SVG text in to a blank text file, copy-paste the <path> elements out of your logo SVGs (once you’ve sized them down nicely to 24px square and run them through his suggested optimiser tool) to replace the <path>s, change the symbol id to match the icon name you put in the PHP. Then just save that as something.svg and upload to the path described (you might need to create the assets/svg folders within your child theme).

Thanks Jan, that’s another little annoyance solved!

This blog is using a slightly customised version of the stock “Penscratch 2” theme provided by the Jetpack plugin – it’s pretty much exactly what I wanted, but made just slightly annoying by the choice of color for hyperlinks being hard-set (rather than accessible in the conveniently modern theme Customizer).

Rather than going back to the theme-browsing drawing board to find another theme I liked which had that particular feature built in, I did a tiny bit of digging + learning to find out what the “more proper” approach to dealing with a nearly-but-not-quite Theme would be.

WordPress has a concept of “Child Themes” – where you want to make a new theme based heavily on an existing one, with only certain adjustments. Perfect, all I wanted was to change some instances of one colour to another.

Even more helpfully, there’s a nice plugin called Child Theme Configurator which exists to smooth-over the process of creating a new Child Theme from one you’ve already got loaded and then make the desired changes. I only needed the Free version, although there is a premium-tier offering which can do more-involved stuff that I don’t need.

I’m not going to do a full hand-holding guide, as the website linked above has pretty decent documentation. Instead, here’s the bullet-points:

• Install the Child Theme Configurator plugin
• Go find it in the WP dashboard menu (Tools\Child Themes)
• Create a new Child Theme based on the original one, accepting defaults for everything and ticking the box for “Copy Menus, Widgets and other Customizer Settings from the Parent Theme to the Child Theme“
• Go to the Property/Value tab, type “color” into the box (and select just “color” when it gives you a list of options)
• Scroll down and find the colour I wanted to change (in my case, #1c7c7c) and click the Selectors link in that row
• In the pop-up dialog that comes up, paste my desired new colour (#d00) in to the text field on each row and click Save as I go
• Preview the changes (Appearance\Themes and use the Live Preview button on my new Child Theme)
• Realise my changes had not looked after the Social-Media icons in the footer
• Go back to the Child Theme Customiser, Property\Value tab and this time look for “background-color” and make the relevant color change that shows up there too
• Preview again, be happy, activate my new Child Theme.

That hasn’t quite concluded all of the tweaks I want to make – right now, the social-menu icons in the footer don’t know what pretty icon to display for Mixcloud – but it’s a step in the right direction.