connection ?omputer telephone tablet black

Modify the Width of the New WordPress Twenty Twelve Theme

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:

/* =Notes
--------------------------------------------------------------
This stylesheet uses rem values with a pixel fallback. The rem
values (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:

/* 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:

	.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:

/* =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:

.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!

/* 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:

	// 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:

// CHANGE DEFAULT THUMBNAIL SIZE
function 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:

/**
 * 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:

/**
 * 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:

//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:

/**
 * 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:

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:

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?

86 thoughts on “Modify the Width of the New WordPress Twenty Twelve Theme”

  1. I am having a challenge getting this to work. I have tried many different ways to plug in the code and it doesn’t seem to respond. When I reload my modified php and css files my website goes white/blank. Any ideas?

    1. As always, there will be more tutorials as I decide I need to change things here on VoodooPress! That’s how all my tutorials go, I decide to change something, figure out how to do it, then post what I learned!

      1. I’m having that same problem. How do I show you the code or get your help?

        I feel like it has to do with the way you named your files “voodoo”. I’ve been trying to adjust that but nothing seems to be working. I just replaced voodoo with twentytwelve but that doesn’t seem to help.

        I’ve never worked with php. I know there’s something obvious I’m missing but I can’t figure out what.

        1. Looks like I replied to the wrong thing. And it looks like you’re not responding to recent comments. I’m going to try emailing you and also leaving the code here.

          This is the current site. The css changes worked:
          http://allworlddance.wpengine.com/

          Here’s the php code I uploaded. I basically just substituted voodoo with twentytwelve. In a couple of lines that meant I had twentytwelve_twentytwelve. I also tried leaving out the first twentytwelve in those cases but nothing I tried worked.

          1110,
          ‘height’ => 228
          );
          add_theme_support( ‘custom-header’, $header_args );
          }
          add_action( ‘after_setup_theme’, ‘twentytwelve_custom_header_setup’ );

          Any help you can give would be greatly appreciated.

          1. Cutting and pasting the code didn’t work. I’m at a loss. If you can help, thanks.

            Otherwise I’m going to pull the css and just accept a less than optimal site.

            Here’s where I need to just pay somebody but I don’t know who to work with.

  2. Thanks for the info. Twenty Twelve seems a lot more difficult to customize than previous default themes, the rem values can cause confusion for beginners.
    Overall I think it’s a great looking and functional theme, but it’s taking more effort getting child themes to override things that were easy to change in 2011 and 2010.

    1. I think, from a technical aspect, things might actually be a bit easier to modify. But, it’s definitely different. So I agree that learning how to modify 2012 takes more effort upfront – it’s a different way of thinking, the theme works in a different way than 2010 and 2011 did. It took me a little bit to wrap my mind around it all. The rem values definitely threw me for a curve.

  3. Thanks for the tutorial on changing widths. Learning about rems has been interesting. I like Twenty Twelve, but am not sure about how the menu reverts to the mobile button in IE 8. I know this is an old browser, but it is the version that Windows XP users run and there is still quite a few of them out there. What do you think about this?

    1. To be honest, I kind of hate that behaviour. I am stuck on IE8 at work, and I hate looking at VoodooPress and thinking it looks terrible! I mean, it looks great on modern browsers. I was thinking of patching it, or completely modifying the menu, but just haven’t gotten around to it yet – but I’ll definitely make some sort of changes – just so I don’t have to look at an ugly menu at work.

      1. I hope this is the right place to ask this,I have a 2012 child theme where I managed to get pretty much all I wanted done with it; what puzzles me is the site is wider in firefox but looks normal in all other browsers (IE,Opera,Chrome) I have double checked every line in the child theme but cant see where width change has been implimented-I don’ recall making such a change!). I find it strange for Firefox to be the odd one out when normally its IE

  4. i am using twenty twelve….but i still dunt know how to implement your lecture above…the whole stuff keeps spinning my head. I cant iincrease my width

  5. It’s a great info what you publish here. I did use some of this on my page; I did change my page to a 1280px width. Still there is something I want to do to continue with the “Modify the Width of the Theme exercise”
    1 – How to do for the 40px margin to be respected even in a 1280 screen, when using white color for the background.
    2 – I want to change the Content area to 840px, the widget area (sidebar) 400px, so I get a space in between of 40px.
    3 – How can I change the Menu and the footer to be aligned to the right side?

  6. I’m not getting the initial width increase. I have plugged the first section of code into my child style.css and saved. But no difference on my site. Seems pretty straightforward but I am no pro, soo… hm. Am I not putting the code in the right place?

  7. IT looks like the margins for the overall site are set in line 526

    .site {
    	padding: 0 24px;
    	padding: 0 1.714285714rem;
    	background-color: #fff;
    }
    

    currently set to 24px, you would just modify that in your child theme.

    As for setting content size and margin size…. if you change those to px values, the theme will no longer be responsive. Is that really your intent? Everything is percentage based for a reason, setting to hard px will ruin the theme functionality. You’d need to remove all the responsiveness, or else it will not look good.

    1. What do you feel doesn’t work about the featured image? What behaviour are you expecting? The image associate with this very post IS a featured image, so it works here – it doesn’t work the same as 2010 or 2011 if that is what you are expecting.

  8. Awesome write up, I really appreciate all the tutorials and work you have done! I am trying to make adjustments right now, I just want to clarify how to do it.
    Do I literally just copy and paste the code for the Style.CSS change any where into that file? Or am I going to each line and adding/modifying that specific code?
    I tried to add the 13 line code you provided into the style.css using the built in editor in WordPress, but did not notice a change to my site and so I didn’t proceed to the next step yet.

    Thanks,
    Brandon

    1. You copy and paste the 13 lines of code into your child theme!
      Do you have a child theme? If not you can download a basic one I offer here:

      http://vudu.me/2012child

      You just install the child theme, and then add the code to style.css.
      All of my tutorials revolve around child themes, as we would never want to modify 2012 (or pretty much any theme) directly.
      kttp://vudu.me.child
      explains the retionale for that

    1. 2011 and 2012 both have that feature built in, but it must be turned on. Here’s the trick, you need to make one post as a different author! The themes are set up to recognize when there is more than one author and then automatically display the profiles of the authors.

  9. Any idea on setting the minimum width? I’ve tried just adding min-width to the .site but it ignores it. I’m using woocommerce and it gets really messy, as does twenty twelve itself when the page is too small.

  10. I have been trying to use your content_width Function (modified slightly) to increase the width of the content container when my custom template is being used. I have this code in my child folder in the child’s functions.php file but it doesn’t seem to trigger the widening of my content area. Seems to be stuck on the default content width. Am I missing something? Sorry no URL, using a MAMP server.

    function twentytwelve_content_width() {
    if ( is_page_template( ‘page-templates/my_custom_template.php’ ) || is_attachment() ) {
    global $content_width;
    $content_width = 1000;
    }
    }
    add_action( ‘template_redirect’, ‘twentytwelve_content_width’ );

  11. Does anyone has a good tip on how to dequeue the default font and attach a custom one to a child theme? I use the following without success:

    // delete default font
    function remove_open_sans() {
       wp_dequeue_style( 'twentytwelve-fonts' );
    }
    add_action('wp_print_styles','remove_open_sans'); 
    
    //add custom fonts for example
    function sourcesans_font () {
    	$fonturl = "<link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'>";
    	echo $fonturl;
    }
    add_action('wp_head', 'sourcesans_font');
    1. //remove default twenty twelve font
      function mytheme_dequeue_fonts() {
      	wp_dequeue_style( 'twentytwelve-fonts' );
      }
      add_action( 'wp_enqueue_scripts', 'mytheme_dequeue_fonts', 11 );//end

      I just found the above in twenty twelve theme and it’s working pretty well.

      1. Everything is working well for you? I haven’t had much time to keep up on my site lately – I’m in the process of changing jobs. But yeah, WordPress default themes (2010, 2011, 2012) all have pretty good commenting within the files which cn often get you started on handling customization!

    1. What exactly is in your functions.php file? It shoudl start as an empty file – it then needs to be opened with an opening php tag and then your custom code. To post code examples on here, you need to wrap it in language tags within square brackets. You would post like:
      [ php ]
      all your code
      [ /php ]
      Just like that, but take the spaces out – I had to put those there or the tags would activate.

      Now, your functions.php file should look like:

      <?php
      //it starts with that opening php tag
      //these are php comments
      
      function some_example() {
               $your_code;
               goes=here;
      }
      
      function keep_adding() {
              more=code;
              $as_needed
      }
      

      That’s just some generic advice, I’m not sure how to help further unless I see your actual code.

  12. Rev. Voodoo. I come to worship at your temple. I started this development website (http://50.87.18.118/) in TwentyTen over a year ago and am now trying to update it to 2012 on my local site. I’m having trouble having the header image be full length while keeping the margins for the rest of the page. Also, I can’t get my background to line-up as before. sigh :)

      1. Here’s a better example of where I’m at with the process of making the header image full width and at the top of the page (The link in my previous entry was my twentyten based child theme before changing it to twentytwleve),

        I’m attempting to get the header image to blend in with the background image so there’s a solid red header block across the entire screen. Here’s the link: http://schulmansat.awakenedwebdesign.com/

        1. Take a look at my test site… test.rvoodoo.com Just by swapping a couple things in header.php I’ve busted the header out of the site’s constrictions, so-to-speak. I have not touched any CSS, so it isn’t pretty or anything, it needs padded, etc to get the text off of the edge of the screen, but I could now easily colour that top bar to be any colour, etc. Is this a start to the direction you want to go?

  13. I’m already realizing I shouldn’t have switched from Blogger. I’ve always hated WordPress as it takes forever to ‘code’ something that I could do in a Blogger template in 2 minutes.

    Now I’m using Twenty Twelve which, quite frankly, is pretty poorly designed as even basic modifications have been disabled. (And what’s with the HIDEOUS menu at the top above the banner?)

    I’m already thinking “Screw this” I’m going back to Blogger, and I only switched to WP yesterday :) It’s always surprised me what a nightmare it is to do anything even basic in WP, a blog platform that so many people use but don’t know how to use correctly as the designers just make it too difficult.

    1. It seems you are approaching things in quite an awkward manner…. If you have to code something, you probably haven’t looked for the appropriate solution. There are millions of themes available for WP and just as many plugins. The only time you should need to code is if you are moving beyond what’s available, or if you need something really custom. 2012 doesn’t have basic modification disabled, as with any theme it is highly customizable using a child theme. But again, if you are feeling the need to completely modify 2012, why are you using it? There has got to be a theme more suitable to your needs. Just like Blogger is a closed, hand holding type environment, WordPress can be as well. Switch to using wordpress.com and you don’t have to do any code or customizing. .COM can be the simpler environment you may be looking for. Using .ORG opens the flood gates so to speak. You are given unlimited power over the website, but you must learn how to use it.

      As for the menu on 2012, I’m quite fond of it! BUt again, if it isn’t to your liking, 2012 is probably the wrong theme for you! There are many themes out there with tonnes and tonnes of options for customizing. The default WP themes (2010, 2011, 2012) tend to be lightweight themes, with little bloat. They are just designed to look and behave a certain way to show what WP does out of the box. They aren’t ever intended to be flashy themes with tonnes of options.

  14. Man…I had it just the way I wanted and then my hosting site removed some sort of malware, and now all of my adjustments are gone. The site is back to being narrow again. Do you know what could have happened?

    I see the above code in my child theme still… yet no width adjustment.

    1. Man, changing jobs is hard! I just don’t have much time to log on here lately. Sorry for such a delay on my reply. Have you sorted things out yet? You said all of your mods are still in your child theme, is it actually active?

  15. My child team already has a lot of code that was changed and it would be a nightmare to go trough the custom css it uses.

    My solution was to add the custom css via Jetpack. I’m sorry if anyone has already posted this, but for those really coding challenged, install Jetpack plugin and just copy and paste the css at “appearance > edit css”. Jetpack has also a lot of features and the kitchen sink, so its’ not like you’re going to add a bunch of useless functions for nothing.

    1. Adding custom CSS to jetpack does the same thing as adding it to the bottom of your style.css in your child theme. So either way, you are good. I do like the Jetpack plugin, but specifically with the custom CSS I’ve run into a couple of problems. 2 times now, my custom CSS has just disappeared and I’ve had to rewrite it.

  16. This is a really helpful and descriptive tutorial, thank you so much VoodooPress!

    I was also hoping you could help me iron out a rem mystery? I made your adjustments inside a child theme and I set the new max-width to 1024px and the rem to be 1024 divided by 14. I used the below code:
    max-width: 1024px;
    max-width: 73.1428571rem;

    This however did not actually make the site width 1024px, it was narrower that it should be.

    I understand that by increasing the rem it will increase the width so I tried the below code and it DOES output the width to 1024px:
    max-width: 1024px;
    max-width: 84.10000rem;

    However, I am worried about why the ‘divide by 14′ is not giving me the rem that should be equal to the pixel width. I am also worried that if I leave it at 84rem, it might stuff up the theme’s responsiveness. I realise this also affects the rem used elsewhere, such as in the margins where I have a pixel defined, eg 120px/14 = 8.57142857rem, and then the result does not reflect the actual 120px.

    If you wouldn’t mind having a look, I’d really appreciate your advice! The site is: http://unknownjourney.com.au

    I’d really like to understand rem better before moving on with developing the site. Thanks in advance for any feedback. :)

  17. Hi,

    I would like to change the centre background from white to a lighter blue here on my blog set up two days ago: http://www.classicmoviesofyesterday.com

    I went into:
    Appearance – Editor – Twenty Twelve: Stylesheet (style.css)

    Scrolled down to:

    /* Page structure */
    .site {
    padding: 0 24px;
    padding: 0 1.714285714rem;
    background-color: #fff;

    I changed the #fff to the hex code i wanted, but no good. Am I even in the right place?

    Thanks

    James

    1. Hopefully I can catch you early enough… I don’t want you starting off on the wrong foot – which you are! We would never ever want to modify any code within a theme that ships with WordPress, such as 2012. Check out my article at http://vudu.me/child and also click on the codex link in that article about child themes. We need to get you running on a child theme. The article is about the 2010 theme, but the concept is the same. Editing 2012 directly is bad news, your changes would end up getting lost. Once we have you on a child theme, I can help you further!

  18. OK Thanks,

    1/ So if modify a theme and i do an update for it later, all the modifications are lost and it is reverted back to default…i.e. you have to then go back in and change it to your custom settings all over again? Hence a child theme where the changes are saved on a ‘copy’? Is that correct.

    2/ Now if i don’t make any changes to the theme in the css files, which i haven’t. (i have added a banner/background colour in the appearance admin settings section only), i assume there is no need for a child theme, as you aren’t touching any code?

    1. Right, if you modify a theme and update it, you lose your changes. But the important thing to remember that always trips folks up, with WP themes like 2010, 2011, 2012, etc. If you upgrade WordPress iteself, the themes may get upgraded as well – losing your changes. When you say you are adding css in the appearance admin section, to what exactly are you referring? If you click appearance -> editor, then you are editing your theme. That is your theme files. If you have a tab for specifically adding custom css, a functionality that comes with the jetpack plugin, that is different.

  19. After Login – Click on ‘appearance’ in left menu – a subsection appears – click on ‘Header’ (here you can download your banner). I download the banner – Save.

    Next ‘appearance’ again – click on ‘Background’ – Select Colour with their Hex Colour chart – Save.

    At no time in that ‘modification’ in appearance do you see css files/codes etc. It is just the basic/limited options to alter the theme in admin without messing with codes.

    I am not changing any codes under: Appearance – ‘Editor’: Twenty Twelve: Stylesheet (style.css). I have stayed away from that section.

    So at worst upon update down the line, i may have to just re-add the colour background/re-upload banner when updates are done (about 2 minutes max work). I assume though as these are done in the above sections / not the css as you mention, they should in fact come along unchanged to the next update?

    They are the only customizations i will be doing/have done to the theme, nothing else.

    I am appreciative of you helping us wordpress beginners out, it is good to confirm these issues with someone advanced.

  20. Hey.

    I’m having trouble with changing my site’s width. I’m actually trying to make it smaller (890px), but when I use the rem size, it comes out as 970px? I haven’t made any previous changes (fresh new theme). Something appears to be wrong. Is there something in functions.php I need to change?

  21. Apologies if this has already been said, but if you’re going to modify the WordPress CSS it’s both easier and safer to do it in Appearance >> Edit CSS. That file overrides the style.css file.

    If you modify the style.css file it will probably be overwritten after WordPress updates.

    All I did was add this to the custom CSS:

    .site {
    max-width: 80rem;
    }

    1. The edit CSS option doesn’t exist in WordPress by default – you are most likely using a plugin which gives you that option. I’d venture a guess that you have jetpack installed. Most people wouldn’t want to do that as it slows a site way down. Also, your little bit of CSS there is a good start for sure, but it is definitely not enough. You will find that portions of your responsive structure will not line up. Also, without doing any work in functions.php your embeds will not line up appropriately. I always recommend that you edit style.css and functions.php within a child theme which will never be written over on upgrade. Finally – the edit CSS option in jetpack has failed on many readers who have lost their changes when upgrading jetpack.

  22. Your tutorials have helped me so much today – my first day of attempting WP customisation at all!

    But I’m a little stuck with the functions.php changes explained in this tutorial… I’ve added the CSS to the style.css in my child theme and it did change the widths on my site (I want 1090 overall, with 700px wide content area and 250px wide sidebar).

    However, when I try to finish the tutorial with the changes to the child theme’s function.php it doesn’t work and I keep getting either the code appearing at the top of my website, or the wordpress white screen of death.

    This is the code I’ve tried putting in my child theme’s functions.php that I’ve created via FTP.

    1090,
    ‘height’ => 250
    );
    add_theme_support( ‘custom-header’, $header_args );
    }
    add_action( ‘after_setup_theme’, ‘twentytwelve_custom_header_setup’ );
    }

    My site is http://www.herewemakebelieve.com

    I’m enjoying learning this so much, but really want to get it right and not lose the responsiveness of the Twenty Twelve theme. Any help would be GREATLY appreciated!!!

        1. I’m in a super duper hurry right now, but I took a quick look. Are you copying the functions from 2012 and then just editing them? I am just on my phone right now and can’t check the files, but the functions need to be named differently in your child theme than in 2012. That’s why in most of my tutorials I add the prefix voodoo_ in front of everything such as

          function voodoo_twentytwelve_width {
                           code=goes here;
          }
          
          1. I hadn’t copied the functions from 2012, I had just put the code that you suggested. I’ll copy them over, edit the changes, and try to figure out the file names and see how I go. Thank you for your reply!

  23. I am reading through css and different articles, but still cannot find a graceful solution to my style problem, I have a slight overlap between the adsense on main content and the side-bar. I just need to adjust padding (don’t really want to increase the overall width). Is there a padding or margin on the left side of the main content (right side of the side bar) that I can decrease to eliminate the overlap? Here is what i am talking about (problem is on ‘pages’ as well as on the posts):
    http://www.theindiansabroad.com/welcome/

  24. Hi Rev.,

    First of all, thank you very much for writing all of this up in a way that makes sense. It helps a lot. I do have one question though.

    After I make the changes you recommend, the “large image size” parameter of my wordpress install (set via settings > media) gets overwritten (obviously because I changed the thumbnail size via set_post_thumbnail_size to YYY).

    INow, if I want to include media into my content that is wider than YYY, I have to go for the full size image, which I would like to avoid. Ideally, I would like the large’ media size to be 1000 pixels wide in stead of YYY pixels. Should I set this width via set_post_thumbnail_size or is there another way to solve this?

    1. Changing the thumbnail size via set_post_thumbnail has no effect on the media sizes in settings->media. set_post_thumbnail only affects images that are called up by code within your template. You could add further thumbnail sizes in the code there, and call them in various places through a template if desired. But the settings->media business is for embedded images, not ones called in code. I believe the bit of code which might affect that large image size is: content_width = 1100 — that defines the maximum width for embedded images, which would make sense. So you could probably just adjust that bit of code and be all set.

  25. Hi,

    I am trying to set the width exactly as you have done above. Edited the .css and that seems ok. Then copied and pasted from above into functions.php

    function voodoo_twentytwelve_setup() {
    	set_post_thumbnail_size( 709, 9999 ); // Unlimited height, soft crop
    	}
    	add_action( 'after_setup_theme', 'voodoo_twentytwelve_setup', 11 );
    	
    //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 );
    
    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' );

    not seeing anything change on the site but not sure if i need to restart anything or if I am missing something obvious.

    Ian

  26. Thanks Rev. Voodoo, I changed my child style.css file, but not its functions.php file, and everything looks great. No problem with my header image. I don’t have yet featured images or photo/video embeds.

    I tried to make a child functions.php file by copying your three chunk of codes one after the other, but all it does is that the text of that functions file is copied at the head of my site when I go and have a look at it!!!

    So, I am not using any child functions.php file for now. But I don’t feel secure about the future. I would like to have a functions file like you describe, but obviously I am lacking something.

    Could you post your complete child functions file, in only one chunk instead of three? Should I let the term voodoo in it, or change it for my theme child name?

  27. Hello Everyone,

    I did the implementations that Rev. Voodoo suggests here, and I think you must put a closing php sign at the bottom of your php file so that it works and does not show up on your page when you reload it. Also, after making your changes to the files, clear your browser cache to see the changes. Thank you Voodoo for this great tutorial, which is still way far advanced than where I am at the moment with conditioning my theme. So, I hope you get settled in that new job soon and post some new modifications for the twenty twelve theme. You don’t really practice voodoo do you? Scares me…)

  28. hey there I am new to the wordpress world and have run into a problem with no success of getting an answer from the wp forum. I would having the leave a reply link imbedded into some of my pictures on each post – sometimes it was in the middle of a picture. I don’t know how it happened but I deleted the following and it went away.
    <?php comments_popup_link( '’ . __( ‘Leave a reply’, ‘twentytwelve’ ) . ”, __( ’1 Reply’, ‘twentytwelve’ ), __( ‘% Replies’, ‘twentytwelve’ ) ); ?>
    I tried to put it back because I do want a leave a reply or a comment box of some sort – my users want to leave a reply/comment. so far no luck with putting it back into the comments.php. I just need something where my readers can comment – can you help. http://www.modernpropertydesign.net

Leave a Reply