voodoochild2014screen

Use More Screen Real Estate by Making Twenty Fourteen Wider

We spent yesterday figuring out how to get rid of all the green in 2014 and set up a new colour. I like the looks of that, but there is still one more thing bugging me. I’ve had several posts over the years about the same thing. I don’t like how narrow things are in the theme! Well, here’s a quick fix to change that!

I only just set this up and haven’t thoroughly tested every little detail. Everything looks good to me right now, but as always, if you find I missed something feel free to leave me a comment and I’ll get adjust my code on here!

There’s just a little thinking to do here, we need to come up with our numbers. I’ll give you the defaults along with my changes and you can make your own decisions. Now a bit of a disclaimer again, I’m almost certain there is some ratios and formulas that were used in the development of the original theme – I didn’t use any. I just set things where I wanted them and guessed at the rest. That 786px for hentry is the width I needed to make sure my featured images touched up against the left sidebar – I found this number through trial and error to be honest (I had started at 752, but th eimage had a gap, so I increased until it was perfect).┬áIt looks good right now, but there might be slight adjustments needed to my numbers.

  • The overall default maximum width is 1260px, I increased this to 1420px
  • The content area (hentry) column is 672px, I increased this to 786px
  • The actual content is 474px, I increased this to 654px

So now I just cruised through the CSS looknig for any of the default entries and changing them to mine. Here’s what I came up with:

.site {
	max-width: 1420px;
}

.site-header {
	max-width: 1420px;
}

.hentry {
	max-width: 786px;
}

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
	max-width: 654px;
}

.post-navigation,
.image-navigation {
	max-width: 654px;
}

.archive-header,
.page-header {
	max-width: 654px;
}

.contributor-info {
	max-width: 654px;
}

.comments-area {
	max-width: 654px;
}

.site-main .mu_register,
.widecolumn > h2,
.widecolumn > form {
	max-width: 654px;
}

That goes into your child theme’s style.css file under the @import line (if you are unfamiliar with child themes, see my writeup here). You can save that and refresh your page to check it out. It looks pretty good, but we have one more thing to take care of.

In your child theme’s functions.php file you will need to add this

$content_width = 654;

// CHANGE DEFAULT THUMBNAIL SIZE
function voodoo_twentytwelve_setup() {
	set_post_thumbnail_size( 786, 410, true );
}
add_action( 'after_setup_theme', 'voodoo_twentytwelve_setup', 11 );

somewhere after the opening php tag. This takes care of adjusting the thumbnail/featured image as well as any embeds. Feel free to tweak that image height of 410 to suit your needs.

There we go with another quick tweak. Everything looks good on my end so far! So, do you plan on adjusting anything with the 2014 theme? Did I miss something? Feel free to let me know in the comments!

12 thoughts on “Use More Screen Real Estate by Making Twenty Fourteen Wider”

  1. Hi thanks for the guide. I’m about editing mine.
    But please can you tell me the plugin you used for: The share this below your post, the short link, and the related posts?
    In addition how did you add both previous and next post on the Page link plus. i tried finding the option i cant see it.
    When i’m done with mine, widening the screen size, i’ll give you my thoughts.

    1. Well, the ‘share This’ feature comes from the Jetpack plugin. I use that plugin for tonnes of functionality on my sites. The short link and related post feature is something I coded up in my iown functionality plugin – I run it on every site. I’ve probably posted how to do that on here before, I can try to find some links for you if you’d like? As for the previous and next post thing, I’m not sure hwat you are asking? The previous and next post links under my post are part of the 2014 theme. I don’t use page links plus at all.

  2. I used the above modification, and it seems to work well. I’d already changed the standard Twenty Fourteen theme to reduce the padding/margin around the page content block. However, your modification assumes there will still be the standard approximate 1″ margin to the left, top, and right. After implementing your CSS change (and making it 1260 rather than 1420 to preserve my header image), I notice there’s my smaller margins on the left and right, but still a larger space between the main text and the right column. Any advice on how to fix that and make the gap there smaller?

  3. Thanks MAN!!!!!
    I was looking for this and asking in forums with no reply.
    Its working great in chrome, but in IE there are still a few pixels missing to get rid of the horizontal scrolling bar. you can see it here: http://silentcrash.com/admin-books

    I will be glad if you could help with this.
    thanks again

  4. hi
    thanks for reply
    i copy the style to style.css

    .site {
    max-width: 1420px;
    }

    .site-header {
    max-width: 1420px;
    }

    .hentry {
    max-width: 786px;
    }

    .site-content .entry-header,
    .site-content .entry-content,
    .site-content .entry-summary,
    .site-content .entry-meta,
    .page-content {
    max-width: 654px;
    }

    .post-navigation,
    .image-navigation {
    max-width: 654px;
    }

    .archive-header,
    .page-header {
    max-width: 654px;
    }

    .contributor-info {
    max-width: 654px;
    }

    .comments-area {
    max-width: 654px;
    }

    .site-main .mu_register,
    .widecolumn > h2,
    .widecolumn > form {
    max-width: 654px;
    }
    and on functions.php
    <?php
    /**
    * Enqueues scripts and styles for front end.
    *
    * @since Twenty Fourteen 1.0
    *
    * @return void
    */

    $content_width = 654;

    // CHANGE DEFAULT THUMBNAIL SIZE
    function voodoo_twentytwelve_setup() {
    set_post_thumbnail_size( 786, 410, true );
    }
    add_action( 'after_setup_theme', 'voodoo_twentytwelve_setup', 11 );

    /*

    and stell the image dont look good mybe i need special image size??

    http://www.bestwatch.co.il/luxurywatches/audemars-piguet/

    thanks
    shlomi

  5. This is a good start for making the site wider, but it doesn’t go far enough.

    If you are using the featured content as a slider rather than grid, there is an ugly gap on the right side of the image.

    the size of the image seems to be set in the functions.php file with:
    add_image_size( ‘twentyfourteen-full-width’, 1038, 576, true );

    However, increasing this doesn’t make the image any bigger.

    any assistance would be much appreciated.

Leave a Reply