Rotating Header Images in WordPress Theme – Twenty Eleven

Loving the Twenty Eleven theme on WordPress, but want to make the rotating header images your own?

Get your photos out, crop them to 1000:288 ratio, then resize each one to 1000×288 pixels and 230×66 pixels. Name them [yourimage].jpg and [yourimage]-thumbnail.jpg

Upload these pictures to /wp-content/themes/twentyeleven/images/headers

In your dashboard, under Appearance -> Editor -> Theme Functions (functions.php), find the following lines.


'wheel' => array(
'url' => '%s/images/headers/wheel.jpg',
'thumbnail_url' => '%s/images/headers/wheel-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Wheel', 'twentyeleven' )
),
...
...
...
'hanoi' => array(
'url' => '%s/images/headers/hanoi.jpg',
'thumbnail_url' => '%s/images/headers/hanoi-thumbnail.jpg',
/* translators: header image description */
'description' => __( 'Hanoi Plant', 'twentyeleven' )
)

Then comment them out, just in case you want to revert.


// Stock Headers
// 'wheel' => array(
// 'url' => '%s/images/headers/wheel.jpg',
// 'thumbnail_url' => '%s/images/headers/wheel-thumbnail.jpg',
// /* translators: header image description */
// 'description' => __( 'Wheel', 'twentyeleven' )
// ),
// 'shore' => array(
// 'url' => '%s/images/headers/shore.jpg',
// 'thumbnail_url' => '%s/images/headers/shore-thumbnail.jpg',
// /* translators: header image description */
// 'description' => __( 'Shore', 'twentyeleven' )
// ),
...
...
...
// 'hanoi' => array(
// 'url' => '%s/images/headers/hanoi.jpg',
// 'thumbnail_url' => '%s/images/headers/hanoi-thumbnail.jpg',
// /* translators: header image description */
// 'description' => __( 'Hanoi Plant', 'twentyeleven' )
// )

What you will need to do at this point is to make a copy of the header snippet for each new image you have in the array. Then make 4 changes as highlighted below. Take note here that the last closing parenthesis does not have a comma.

My headers now rotate images from our travels. Enjoy!

1 thought on “Rotating Header Images in WordPress Theme – Twenty Eleven

  1. Pingback: TWIB – Week 28 of 2012 | The Mad Edition

Leave a Reply