‘Once you’ve started, you cannot stop, especially if you are your own client.’ Truer words have never been spoken on theme tinkering.
I thought I wouldn’t do much: just adding scroll-to-top function, fleshing out image slider (with flexslider), and changing typography. Yet somehow, I ended up with a child theme file that was almost as big as its parent theme. Another disheartening fact was some very unhealthy practices to get customisation I wanted.
“Is this the peril of adopting ‘child-theme-ing’?” I wondered. So I changed strategy.
Creating ‘another’ child theme
I copied the parent theme’s style.css
to child theme directory and made changes to it. The result fared well below the size of the previous two files (parent’s style.css
and child’s style.css
) combined.
In child theme‘s functions.php
, I only registered the child theme‘s style.css
.
function my_theme_enqueue_styles() { wp_enqueue_style( 'child-style', get_stylesheet_uri(), array()); } add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
While creating child theme I realised that the child theme’s style.css
was called/listed twice, one with id='child-style'
and another with id='{{parent-theme-name}}_style-css'
. The latter was called by a function parent_load_style
in parent theme’s functions.php
.
<link rel='stylesheet' id='child-style-css' href='{{site-domain}}/wp-content/themes/{{child-theme-name}}/style.css?ver=4.5.2' type='text/css' media='all' /> <!-- ... --> <link rel='stylesheet' id='{{parent-theme-name}}_style-css' href='{{site-domain}}/wp-content/themes/{{child-theme-name}}/style.css?ver=4.5.2' type='text/css' media='all' />
It was possible to strip away one style.css
by excluding child-style
from function my_theme_enqueue_style
. However, I preferred having style.css
called first before the rest of css bundles, which comes from plugins and others. I had to remove parent theme’s function parent_load_style
so I added remove_parent_actions
in child theme’s functions.php
.
function remove_parent_actions() { remove_actions( 'wp_print_styles','parent_load_style'); /* other actions to be removed */ } add_action( 'init','remove_parent_actions' );
This solved the problem of child theme’s style.css
being called twice.
Typhography and CSS: a missing font and double-storey ‘a’s
There is a little history in creating a child theme of Garfunkel for this site.
Garfunkel uses Fira Sans, Crimson Text, and Playfair Display from Google Fonts. Funnily enough, my Chrome browser cannot show texts using Fira Sans from Google Fonts but does show ones using Fira Sans from Typekit. This rendering failure, and why it only happens in my Chrome browser on my current laptop, is still a mystery to this day.
A change in fonts was in order. I settled with Roboto, Quicksand, and ‘Love Ya Like a Sister’ to replace Crimson Text, Fira Sans, and Playfair Display on first ‘attempt’. Upon revisiting, however, I realised that I’d made too many !important
statements to override parent theme css rules.
To minimise rewriting rules and loading time, this time, I decided to use two fonts instead of three. First choices were Google Fonts‘ Special Elite for blog title and Hind for the rest. I like Hind‘s letter proportions and weights (as well as quote symbols) but it has no italic fonts. The faux italic forced by browsers messes with letter spacing. So here comes another dilemma: keep it and its faux italics or look for similar fonts that have italic sets.
- double-storey a
- a lowercase a comprised of a closed bowl and a stem with a finial arm over the bowl creating a partially enclosed area above the bowl (aperture).
- also known as upright finial a
desktoppub.about.com mentions that fonts with double-storey ‘a’ often use single-storey ‘a’ in its italic counterpart. Yet, I found a font that uses double-storey ‘a’ for its normal and italic sets: Europa at Typekit —there’s Europa italic alternate set that uses single-storey ‘a’ but none is found at Typekit. It has interesting features (x-height, ascender, and descender), weights (from light to bold), and simple symbols.
I stripped away all font-family
declarations but one to simplify control. At the moment of writing this, I am still tinkering with font sizes and letter-spacing but overall, I like the effect of Europa to this site.
Notes on the little things
- Doing this ‘refactoring’ reminded me time and again of the first rule in coding: do explicit variable initialisation. Most javascript errors and warnings I found stem from improper variable initialisations.
- I needed to deal with WordPress and its seemingly never ending security issues. Most notable is the
xmlrpc.php
exploit that floods spam log. Access to said file had been banned. - On making it ‘responsive’, it’s a battle of perspectives on going up or down in resolution that decides the implementation.
- Just as in previous attempt, the blog title’s styling still leaves a lot to be desired.
The ideal way would be to write my own theme. I am getting there, and hopefully sooner. In the meantime, I think this version would suffice. And stop now, HH!
1
Comments by HH
‘Pagi-Pagi Lari’, A Podcast Project
Hmm... Saraga, ya? Lari? Atau "lari"? Hahaha. Bisa jadi ...
‘Pagi-Pagi Lari’, A Podcast Project
Lari di sekitaran Bandung aja sih. Terutama sih yang ...
‘Pagi-Pagi Lari’, A Podcast Project
Hey! Apa kabr! tepatnya.. pagi-pagi lari dari kenyataan...