Tweaking colours in this WP theme

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.