Customising the WordPress twentythirteen theme

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:

screenshot1

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:

[HTML]/*
Theme Name: grapefruit 2013
Theme URI: http://grapefruitopia.org
Author: benjymous
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.

screenshot2

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"

screenshot3

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.

This is what happens on a the 480×800 screen resolution of a fairly old Android phone.
screenshot5

Ick.  Not good.

It looks like I can scroll horizontally too.  Let’s see what happens

screenshot6

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.

logos

 

So with the Picturefill javascript files copied into the theme’s js folder, and added to header.php, and the single image tag replaced with the <span> markup used by Picturefill, we get the following:

resizing

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.

2 thoughts on “Customising the WordPress twentythirteen theme

  1. I am using the theme on one of my sites and can’t figure out how to change the H1 title tag on single posts to H2? Do you know how?

    1. That should be fairly straightforward – you just need to edit all the content*.php files in the theme and look for lines like this

      <h1 class="entry-title"><?php the_title(); ?></h1>

      and change them to

      <h2 class="entry-title"><?php the_title(); ?></h2>

      (note some content pages have multiple heading lines, depending on the attributes of the post, so you might have to change them in a couple of places)

Leave a Reply

Your email address will not be published. Required fields are marked *