Can Twenty Fourteen be adapted to full browser width?

Posted on

“A beautiful magazine theme” is the site description of Twenty Fourteen, the brand new default WordPress theme that is shipping with the upcoming version 3.8.

And at first sight it is beautiful indeed!
It is definitely different from the past few default themes and if Twenty Thirteen was extreme in its own kind of way, I think this is even more radical.

But what’s with the width of this theme?

I’ll admit, I have a 21″ screen and I like to have a large viewport, but it’s not even full screen and nowadays there are far bigger screens than what my iMac shipped with in 2009; you can have a look at the header image of this post to see how weird it looks for me.

The maximum width of the site is set to 1260px and as the whole lot floats left you will end up with quite a bit of white space on the right, depending of course on the width of your viewport.

To make a child theme “quick, easy and functional” however is not likely to happen any time soon.

I tried to adjust things here and there to give a child theme of Twenty Fourteen full browser width, but very quickly you start running into a whole range of other issues. Issues like image width (you can fix that with adjusting the default post_thumbnail size), all kinds of adjustments with default content width, sidebar width, different templates, the output of the WordPress Ephemera widget (not very easy to adjust the iframes output of for example videos) and then to make it all look good for the no less than 12 breakpoints for media queries.

Twelve Breakpoints???

Are you serious??? How is this theme suitable for child theme development? That is just a ridiculous number! And why again has nothing been made suitable for mobile devices? Or is that where the 1260px maximum width comes from perhaps? With a mindset like “tablets are almost at 1260 pixels and I don’t care about smartphones“?

There is actually a lot more wrong with this theme. Try using a very long title for a blog post. You will notice that with a viewport of around 750px all of a sudden there is horizontal scrolling! Since when do long titles break the layout of a WordPress default theme? Since the Twenty Fourteen lead developer cannot be bothered and chooses to be completely ignorant about the fact that English is not the only language in the (WordPress) world.

The theme also comes with a background image uploader. The reason for that is beyond me, because with it you only emphasize the fact that the theme fills only half the viewport. Anyways, enable it and then have a look at your site from a mobile device. The background image is completely hidden behind the content, but… wait for it… it of course still loads all of its pixels on your mobile data plan.

Same goes for the optional header image with the only difference that it is actually visible with all its 1260 pixels horizontally, no matter how narrow your viewport is.

Alternatives

Okay, the title of this post is a bit misleading perhaps, because it will take considerable time and effort to give Twenty Fourteen full browser width and keep it functional.

My conclusion is that it will take considerable time and effort to give Twenty Fourteen full browser width and keep it functional at the same time. You can seriously ask yourself the question why you would want to spend so much time on that in the first place.

However, James Yeo of VoodooPress recently wrote a post on how to make Twenty Fourteen wider; it’s not going to be full browser width, but wider at least.

And via the comments Zulfikar Nore shows that he has gone the extra mile to make both a full browser width theme based on Twenty Fourteen (not a child theme) and a functionality plugin for Twenty Fourteen.

If this is the way default WordPress themes are going – mind you, Twenty Thirteen already has 6 breakpoints and also without any optimization for mobile – then a better way of developing child themes would in my opinion be to restrict developers to just “paint the box” as Justin Tadlock explains about his latest parent theme development.

And for those who are not interested in a magazine theme after all, there are 4 other default themes to choose from that are not only beautiful, but also functional.

Share your thoughts in the comments below.

11 comments on “Can Twenty Fourteen be adapted to full browser width?

    • Hi John, thanks for commenting.

      Why is this so difficult?

      Not sure to whom you have directed this question as I have tried to give the answer to that question above :)

  1. I really haven’t looked into the design of this new theme very much or tested it completely on mobile devices.

    The large empty space to the right really does stand out, so the first thing I did was to center the theme.

    You’re right about it not being “suitable for child theme development” I don’t consider Twenty Thirteen suitable either unless you just want to change a couple of colors.

    I really think default themes should be more user friendly when it comes to customizing them, not everyone is a designer, and any questions on the WordPress forums regarding modifying the default themes are immediately responded with a copy and past “Use a child theme”

    My Favorite default theme was Twenty Twelve (other than the clunky mobile menu, but hey it worked), I found it very easy to work with, next would of been Twenty Ten had it been mobile friendly out of the box.

    • Hi Scott, thanks for your comment. I also would not very quickly use Twenty Thirteen to base a theme for a client on, much rather Twenty Twelve or indeed the “golden oldies” Twenty Ten and Twenty Eleven.

      To be honest, I think Twenty Fourteen is a horrendous theme at best. The only use it will have for me is to hopefully grab some functions that have been used in it to implement on sites I build…

    • Thanks for your comment Mouath, yes the title is a bit misleading, hence the “disclaimer” at the end of the post that says:

      Okay, the title of this post is a bit misleading perhaps…

  2. I agree on the point that the theme is isn’t [see correction] very child theme friendly – I noticed that very early on when it was released and opted for two options.

    I created a derivative theme to get that full width look and get rid of all that wasted space. I released in to the repository recently – search for Ridizain.

    Back to the child theme topic – I found a lot of users who wanted to do mods to the theme were actually struggling getting them to work in a child theme. So to combat this I went with my second option which was to create a functionality plugin instead of a child theme and it has turned out pretty good….. For the plugin search Fourteen Extended in the repository.

    Even though the title may have been misleading at first but it did ask a very important question – and the answer is “Yes” it can be done but as you stated it does take some effort and time and many users are not designers let alone being developers.

    • Hi Zulfikar, thanks for your comment. You have done some hard work with the theme and the plugin and you indeed show that it is possible to make Twenty Fourteen full browser width! I have edited your comment by adding the links to both your theme and the plugin. Thanks!

      • Cheers for the links and the kind words – I had omitted them as I didn’t want the comment to come across as spammy :)

        And a correction on my comment, I had meant to say “I agree on the point that the theme isn’t very child theme friendly”

        • Thanks for your correction, Zulfikar, that makes much more sense now :)

          PS I saw that your theme has been featured over at WP Tavern, so that will give some great publicity!

Comments are closed.