zed's dead baby, zed's dead

Menu

Monthly Archives: March 2013

Tonight I did a little bit of theme development in wordpress. A long time ago, I looked into developing my own theme from scratch. I followed a tutorial on the web and whilst it gave me some knowledge of how to do bits and pieces, I never got round to developing my own.

Far more easier is to create a child theme from an existing one. At the time of writing, I’m using the 2012 theme, so I created a folder and named it twentytwelve-child and added a css file inventively named style.css. The important step in creating a child theme is to add the a reference to the original theme via “Template:”, and in the comment below you can see I’m referencing the twentytwelve theme, mavellous!

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

/*

Theme Name: zedzdead

Theme URI: http://zedzdead.net/

Description: Child theme for the Twenty Twelve theme

Author: zedzdead

Author URI: http://zedzdead.net/about/

Template: twentytwelve

Version: 0.1.0

*/

@import url("../twentytwelve/style.css");

.entry-header h1.entry-title {

font-family:haettenschweiler,Georgia,Verdana,sans-serif;

font-size:2em;

}

To adopt the original css file as the starting point, the @import rule is essential. If you do this you will have to think about how you overwrite the original rules, if that’s your intention.

I uploaded everything, checked it looked OK and kinda left it there, to watch Poirot, or Elemetary or something. When I got to work the next day, I had another quick look only to find out that haettenschweiler wasn’t loading. At first I thought this was because my work laptop didn’t have the font loaded. So off I went to have a look at loading fonts.

I had a swifty at Google Web Fonts, but when all the fonts rendered as a sans-serif, I decided something funny was going on that I didn’t much care about in work. But, my interest if typography had been piqued.

So back home, I chose two fonts from Google and dropped them into my new stylesheetwith a bit of text-shadow thrown in for the headings, you know the one I created for my child-theme, so now I have:

CSS

1

2

3

4

5

6

7

8

9

10

/**/

.entry-header h1.entry-title {

font-family:'Pinyon Script',cursive;

text-shadow:4px4px4px#aaa;

font-size:2.5em;

}

body.custom-font-enabled {

font-family:'Sintony',sans-serif;

}

Now, I’m reading about eots, woffs, and ttfs. I think more fonty stuff will follow.