Resize the Twenty Eleven Theme

We have seen a number of solutions to resize the WordPress twenty eleven theme, there are a number of considerations when resizing the theme, like the built in headers and content area, we thought we would add our own solution to the mix.

Changing the header height is not that hard to do using a function and the after_setup_theme hook, but what if we want a wider theme, the headers will still show but will be stretched, the default header will still be the parent themes header, so lets look at the steps we take in changing our child theme.

Considerations

If we are making the theme wider the headers will stretch to the new width, in the download we have changed the header height and width, removed the default parent headers, creating some sample headers that will dynamically be registered so they are selectable from Appearance Headers.

Always test downloaded themes on a local install before deplying to a production website!

Twenty Eleven Wide Child

Widen the Theme

The WordPress Twenty Eleven theme is what is know as a responsive theme, this has meant that the fixed width for a lot of theme elements has changed, from fixed pixels to percentages, we can see this by looking at the twenty ten style.css compared to the twenty eleven style.css

Twenty Ten style.css

#content {
    margin: 0 280px 0 20px;
}

Twenty Eleven style.css

#content {
   margin: 0 34% 0 7.6%;
   width: 58.4%;
}

With the WordPress twenty eleven theme when the browser is resized the theme will become responsive, fluid and proportional, however there are a couple of values we still need to change that fix the themes maximum width, lets make our download child theme 1140 pixels wide.

/*
Theme Name: Raindrops Wide Theme
Theme URI: http://www.digitalraindrops.net
Description: twentyeleven wider child theme
Author: Digital Raindrops
Template: twentyeleven
Version: 1.2
*/

/* =Do not add styles before the Stylesheet import
-------------------------------------------------------------- */
@import url('../twentyeleven/style.css');

/* =Make our page layout wider
-------------------------------------------------------------- */
#page {
   max-width: 1140px;
}
.featured-posts,
#ie7 article.intro {
   max-width: 1140px;
}

In the twenty eleven parents functions.php the content width is set a 584, in our child theme we will change this value, in the child themes functions.php

// It's a wide layout so make the content wider by 140px
if ( ! isset( $content_width ) )
   $content_width = 724;

Compare the two images below to see the changed width.

wide-theme-1

wide-theme-2

That was all we needed to do to make our theme a little wider, as the WordPress styles have been changed to percentages in the twenty eleven theme we do not have loads of style elements to change, we have nothing else to do!

Changing Default Headers

The twenty eleven headers are nice but they do take a lot of screen space, what if we also wanted to change the width and height of the headers, we can do this with a post_theme_setup hook function, do have a look at the functions.php in the child theme download for the full code.

To redefine the header height and width we have to change the filters, this code is only a snippet from the child themes functions.php file, and must be wrapped in a post_theme_setup function hook.

/**
 *Changes the height and width of our custom header.
 *Add a filter to twentyeleven_header_image_width
 *and twentyeleven_header_image_height to change the values.
 *Header Image code from http://wordpress.org/support/profile/ov3rfly
*/
function dr_header_image_width($size) { return 1140; }
add_filter('twentyeleven_header_image_width', 'dr_header_image_width');
function dr_header_image_height($size) { return 150; }
add_filter('twentyeleven_header_image_height', 'dr_header_image_height');

This will allow the admin to upload new headers with different heights and widths, it will not resize the existing headers we will have to upload our own headers and crop them before the changes take effect.

The twenty eleven headers are now redundant, we can unregister them to remove the headers from the admin section, we do this with another post_theme_setup function, this code is only a snippet from the functions.php file, and must be wrapped in a post_theme_setup function hook.

/* Remove the twenty eleven default Headers */
function raindrops_remove_twenty_eleven_headers(){
   unregister_default_headers( array(
       'wheel',
       'shore',
       'trolley',
       'pine-cone',
       'chessboard',
       'lanterns',
       'willow',
       'hanoi')
   );
}
add_action( 'after_setup_theme', 'raindrops_remove_twenty_eleven_headers', 11 );

Registering The New Headers

In the download we have added a couple of new folders, /images/headers/, inside the folders we will find three new headers, 1140px * 150px, also three header ‘-thumbnails’ at 400px wide, you can replace these with your own and add more, there is a new function in functions.php that you can add to any child theme, where the folders exists as it will return an array of headers dynamically if it finds a header ‘-thumbnail’, and there is a call to register the new headers without us having to create the array.

// Register default custom headers packaged with the child theme.
$headers = raindrops_list_headers();
if( $headers ) register_default_headers( $headers );

Lets have a look at the Admin > Appearance > Headers section of our WordPress, we can see the three new headers, and that the default headers have gone.

wide-theme-3

If we then visit our site we will see the new header.

wide-theme-4

This post and download are meant as learning aids and not as full solutions, the working download is so you can see that the code does work with the twenty eleven theme!

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

3 thoughts on “Resize the Twenty Eleven Theme

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Tips

colorizer-1_thumb.png

We thought we would use the WordPress Twenty Eleven theme and the the Farbtastic color picker to colorize our theme from the website front page instead of the admin area. We have been looking at the $_SESSION variable, so we thought … Continue reading

Read More

Posted in Twenty Eleven

pluggable-image2_thumb.png

In April 2011 we wrote a post on pluggable functions, since then we have been looking at other functions like post classes, which we used in the first release of our photo blogging theme. While loitering over on the WordPress … Continue reading

Read More