I’ve been blogging on and off for approximately twelve years now, although I’ve been somewhat lapse lately. My old self built blog hasn’t been updated since 2009, and the tumblr I started hasn’t been getting much attention either.
To spur myself on, I figured I’d do something I’ve meant to do for ages – install WordPress. Thankfully this was pretty easy, as I’ve installed it before. After about ten minutes of downloading files and fiddling with mysql admin tools, I had a fresh blog:
This is how it looked out of the box, running the default twentythirteen – just another WordPress site. This won’t do at all.
I decided that I wanted to build my own theme based on twentythirteen, so I made a copy of the ‘twentythirteen‘ folder that lives in wp-content/themes/ and renamed it to ‘grapefruit2013‘ (and why not?)
(I have since found out that WordPress supports “child themes” which let you override parts of the parent theme – I’ll investigate this later and post an update.)
This new theme still shows up with the twentytwelve name in the theme picker. To fix this you need to edit the top of style.css to change the title and information, like so:
Theme Name: grapefruit 2013
Theme URI: http://grapefruitopia.org
Author URI: grapefruitopia.com
Description: hacked version of the wordpress twentythirteen theme[/HTML]
Now that ownership is sorted, we’ll get on to actually customising things. That header text was the first thing to replace. I uploaded an old logo image from the old blog to the wp-content/themes/grapefruit2013/images/ folder, and opened up header.php in an editor. This bit contains the header banner:
<div id="page" class="hfeed site"> <header id="masthead" class="site-header" role="banner"> <a class="home-link" href="<?php echo esc_url( .... <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1> <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
To replace the static text with a custom logo, you just need to swap out the h1 and h2 tags with an img tag pointing to your logo text image. In this case it’s a transparent png, so it’ll sit over the header background nicely.
<div id="page" class="hfeed site"> <header id="masthead" class="site-header" role="banner"> <a class="home-link" href="<?php echo esc_url( .... <img src="<?php echo get_bloginfo('template_directory');?>/images/logo.png"
Note the “<?php echo get_bloginfo(‘template_directory’);?>” bit – that provides the path to the actual theme on the webserver, so that the image can actually be loaded, and saves us needing to work out the correct path ourselves.
That’s certainly showing my image, but it’s looking a bit ugly shoved at the top of the div. We can worry about fixing that properly later – for now just adding some line breaks before it will get it in the right place:
<div id="page" class="hfeed site"> <header id="masthead" class="site-header" role="banner"> <a class="home-link" href="<?php echo esc_url(... <br><br><br><img src="<?php echo get_bloginfo('template_directory');?>/images/logo.png"
Yeah, that’ll do for now.
Now the next thing I wanted to see was how well this renders on different screen sizes – the twentythirteen theme automatically adjusts itself to fit, so I want to make sure my changes do too, since many people will only browse the web from phones and tablets nowadays.
Ick. Not good.
It looks like I can scroll horizontally too. Let’s see what happens
Not good, not good at all!
What’s really needed is something that can automatically select a header logo based on the screen size. A bit of googling found a little script called Picturefill that fits those requirements perfectly. Their demo shows what this does – when you resize the window and you’ll it selects an appropriately sized image based on the visible width.
This gave me the perfect opportunity to fire up Paint.net and create a refreshed version of my logo for 2013. I started with a stupidly big image, so that I’d know it could be resized and stay looking good.
From my base image, I created three smaller versions, called logo-s.png, logo-m.png and logo-l.png (small, medium and large) – note that I cheated with the vertical positioning issue from earlier by just making all three images 220 pixels high, and placing the logo at the bottom of the defined space.
Ok, that’s much better. Thanks to Picturefill, the title image is now selected between three different sizes, based on screen size. You can see this happening yourself if you resize this browser window – the image will snap down to a smaller size as you resize the window. This also works great on phones and tablets, and automatically reacts when the device switches from portrait to landscape orientation.
The theme now feels much more bespoke, but next time I’ll discuss replacing the header background images in a way that won’t break the overall feel of the theme.