We just recently switched over to the new Twenty Twelve theme on VoodooPress, and it’s quite a nice theme! But one thing I saw immediately, it’s too narrow! I have been on a kick lately of trying to get all my sites to have nice, lightweight, clean themes. Twenty Twelve fits the bill. But it seems that everyone wants really narrow websites. A lot of folks have bigger monitors, I want to use some of that real estate. I’m not going to cover anything drastic here, but you can go as big or as small as you want with some careful planning. Note that, even though I’m showing how to make the theme wider, this will also work to make the theme narrower. Let’s dig in!
Twenty Twelve appears to be built on a mobile first philosophy. And there are a lot of other really neat features built into this theme from a developer standpoint, such as the ability to change Google fonts from a child theme quite simply. All in all, Twenty Twelve is a fantastic theme to create a child theme for. If you don’t know how to create a child theme, read that link, and the links to the codex contained within (or ask in the comments, I’m happy to help). Now, you can either code up your child theme before installing, or if you are brave, work on the one you have installed. It’s not a great idea since you can kill your site, but it’s normally what I do when playing around – just make sure you are confident you can un-break your site!
We are going to have to add code to our style.css file, and our functions.php file to properly adjust the width of our theme. So make sure you actually have those files! Now, take a look through the same files within the parent theme, Twenty Twelve. We obviously won’t ever edit those, that is the whole point here. But it’s good to know what you are working with – don’t be scared, get familiar with what’s in there. 2012 is well commented and can help guide you.
For instance, almost right off the bat in style.css we see:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
/* =Notes--------------------------------------------------------------This stylesheet uses rem values with a pixel fallback. The remvalues (and line heights) are calculated using two variables:$rembase: 14;$line-height: 24;---------- Examples* Use a pixel value with a rem fallback for font-size, padding, margins, etc. padding: 5px 0; padding: 0.357142857rem 0; (5 / $rembase)* Set a font-size and then set a line-height based on the font-size font-size: 16px font-size: 1.142857143rem; (16 / $rembase) line-height: 1.5; ($line-height / 16) |
Well, what the heck is a rembase? What is rem? I’ll be honest, I had no idea what any of that meant (I work at a nuke plant – REM is something very different there). Well, you can Google it to learn what rem measurements are, but I didn’t bother. Those comments were enough for me to understand what to do. And they will be for you too momentarily.
We need to cruise through 2012’s style.css and find all the width settings. You are about to be pleasantly surprised! Twenty Twelve is much easier to modify that Twenty Eleven or Twenty Ten. I think this is due to the mobile first approach, but we don’t have to mess with tonnes of margins or anything. So I read through style.css to find where in the theme the width was set and found these blocks:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
/* Footer */footer[role="contentinfo"] { border-top: 1px solid #ededed; clear: both; font-size: 12px; font-size: 0.857142857rem; line-height: 2; max-width: 960px; max-width: 68.571428571rem; margin-top: 24px; margin-top: 1.714285714rem; margin-left: auto; margin-right: auto; padding: 24px 0; padding: 1.714285714rem 0;} |
Came first at line 595, and then:
|
1
2
3
4
5
6
|
.site { margin: 0 auto; max-width: 960px; max-width: 68.571428571rem; overflow: hidden;} |
Shows up at line 1365, but that had me a bit puzzled, it’s way down in the media queries, which is the opposite of how 2011 was set up. You find it inside of the query for:
|
1
2
3
4
5
|
/* =Media queries-------------------------------------------------------------- *//* Minimum width of 600 pixels. */@media screen and (min-width: 600px) { |
Strange right? Well not really once you figure it out. The theme is designed to work small, and it’s designed to be responsive. So at smaller sizes, everything can work out in percentages and what not. Once we hit a screen size of 600px or larger, this code tells the theme not to expand beyond 960px. There is one further relevant block of css:
|
1
2
3
4
|
.ie .site { margin: 48px auto; max-width: 960px;} |
Down at line 1664 which I’m sure is there to deal with some internet explorer flakiness. So, believe it or not, that is the entirety of the css we need to concern ourselves with when it comes to making our theme wider or narrower. So now, I’m going to make my theme 1100px wide. Here’s the code, then we discuss!
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
/* This Block Adjusts the Overall Theme Width */footer[role="contentinfo"] { max-width: 1100px;}@media screen and (min-width: 600px) { .site { max-width: 1100px; max-width: 78.571428571rem; }}.ie .site { max-width: 1100px;} |
That is seriously all of the code we need to add into our child theme’s style.css to completely change the width! How easy is that? So I’m pretty sure the code changes we made to the footer block and to the ie block are self-explanatory, we just changed it to our desired width. But what about that media query? Especially that rem number… where’d it come from?
Well the media query itself is just a copy from the parent theme, I just want my code to kick in where it would have in 2012, any size monitor 600px and up. Now the rem number, remember up above when we were looking at the block of commenting from 2012, and I mentioned the rembase? Take a look again. The rembase is 14. My desired width was 1100px, 1100 divided by 14 is 78.571428571! So the px value divided by the rembase is the rem value! Just a little math!
That is phase one out of the way. If you take a look at your site right now, you should be pretty pleased! Everything has moved out to your width and you don’t have any strange gaps or margins to worry about. The mobile first approach on 2012 allows everything to just grow to fit your new theme width! But a few things will be out of whack! Your featured images won’t be the right size, your header image won’t be the right size (if you have one assigned), and video/photo embeds won’t be the right size. Let’s hunt those down now and set that straight!
We’re working in functions.php now. Let’s deal with the featured image first. Starting on line 24, within 2012’s twentytwelve_setup function, we can find:
|
1
2
3
|
// This theme uses a custom image size for featured images, displayed on "standard" posts.add_theme_support( 'post-thumbnails' );set_post_thumbnail_size( 624, 9999 ); // Unlimited height, soft crop |
So we need to override that from our child theme, which is as simple as:
|
1
2
3
4
5
|
// CHANGE DEFAULT THUMBNAIL SIZEfunction voodoo_twentytwelve_setup() { set_post_thumbnail_size( 709, 9999 ); // Unlimited height, soft crop}add_action( 'after_setup_theme', 'voodoo_twentytwelve_setup', 11 ); |
We just build our own function, and redeclare the size of set_post_thumbnail_size within a function that runs on after_setup_theme, just like twentytwelve_setup did. The difference here is the number 11 on ours. That’s simple really, normally a child theme’s functions.php file runs before a parent theme’s. Within WordPress, unless otherwise specified, php functions run at a priority of 10 – the priority is the order the code runs in. So by assigning our function the priority of 11, we tell it to run after 2012’s function runs. That way 2012 adds thumbnail support and sets it’s size, which we then override with our size. How did I know to change from 624 to 709px? Lucky guess! I’m sure there’s a way to figure out what will be perfect there, I guessed, and nailed it!
OK, so thumbnails are done, next up let’s take care of those media embeds. Right at the beginning of 2012’s functions.php file (line 25) we can find:
|
1
2
3
4
5
|
/** * Sets up the content width value based on the theme's design and stylesheet. */if ( ! isset( $content_width ) ) $content_width = 625; |
And cruising right along we also have:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
/** * Adjusts content_width value for full-width and single image attachment * templates, and when there are no active widgets in the sidebar. * * @since Twenty Twelve 1.0 */function twentytwelve_content_width() { if ( is_page_template( 'page-templates/full-width.php' ) || is_attachment() || ! is_active_sidebar( 'sidebar-1' ) ) { global $content_width; $content_width = 960; }}add_action( 'template_redirect', 'twentytwelve_content_width' ); |
At line 403. Those take care of adjusting the size of embedded media for layouts with and without sidebars. The first one can be redeclared as it is pluggable, and the second we just run over with our own function, so here is that code:
|
1
2
3
4
5
6
7
8
9
10
|
//Override content width (for photo and video embeds)$content_width = 710;function voodoo_content_width() { if ( is_page_template( 'page-templates/full-width.php' ) || is_attachment() || ! is_active_sidebar( 'sidebar-1' ) ) { global $content_width; $content_width = 1100; }}add_action( 'template_redirect', 'voodoo_content_width', 11 ); |
That’s our embeds taken care of. Which just leaves us one more thing to deal with, the headers. Looking through functions.php, on line 80 we can find:
|
1
2
3
4
|
/** * Adds support for a custom header image. */require( get_template_directory() . '/inc/custom-header.php' ); |
Which sends us running to a file buried away. You will actually need to have the theme downloaded to your computer to be able to inspect this code, since custom-header.php is tucked away in the inc directory. That file sets up everything for the custom headers to work, we are concerned with the block starting on line 21:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
function twentytwelve_custom_header_setup() { $args = array( // Text color and image (empty to use none). 'default-text-color' => '444', 'default-image' => '', // Set height and width, with a maximum value for the width. 'height' => 250, 'width' => 960, 'max-width' => 2000, // Support flexible height and width. 'flex-height' => true, 'flex-width' => true, // Random image rotation off by default. 'random-default' => false, // Callbacks for styling the header and the admin preview. 'wp-head-callback' => 'twentytwelve_header_style', 'admin-head-callback' => 'twentytwelve_admin_header_style', 'admin-preview-callback' => 'twentytwelve_admin_header_image', ); add_theme_support( 'custom-header', $args );}add_action( 'after_setup_theme', 'twentytwelve_custom_header_setup' ); |
This sets up all the parameters for our header image. The add_theme_support used with custom-header is new as of WordPress 3.4. I had not yet had a chance to play with it, and tried a few solutions. I finally got myself some assistance since it was the end of the day and this was the last thing my theme modification needed. Here is the resulting code where I modify my height and width of the header image:
|
1
2
3
4
5
6
7
8
|
function voodoo_custom_header_setup() { $header_args = array( 'width' => 1110, 'height' => 228 ); add_theme_support( 'custom-header', $header_args );}add_action( 'after_setup_theme', 'voodoo_custom_header_setup' ); |
And there we have it. That is my first modification to the Twenty Twelve theme. I’m quite happy with it. Like I said, I really like the theme, but I just wanted it to be bit wider. I think it really looks great now. It might even look a little better on mobile if you haven’t tried that out!
What do you think? Do you like 2012? Are you going to give it a go? What sort of plans do you have for your child theme?