‘Once you’ve started, you cannot stop, especially if you are your own client.’ Truer words have never been spoken on theme tinkering.

‘Mbatik. Again. The not-so-new look, twisted.

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' );

only register child’s styling

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' />

child’s style.css is listed twice

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' );

removing 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.

Missing texts in Fira Sans, rendered in Chrome browser. Why?

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 FontsSpecial 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.

By GearedBull Jim Hood – Own work, CC BY 3.0, at wikimedia

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!