wpthemedetector-logo
WordPress Theme Detector Blog
fourteen-extended-plugin

Customize your Twenty Fourteen theme with Fourteen Extended

45 comments

Do you like the Twenty Fourteen theme but would like your site centered on the screen instead of left aligned?

Would you like to control the content width or even make your posts full width?

And how about doing those modifications and quite a few more without touching a line of code, directly from the theme Customizer?

On my post Changing the colors of the Twenty Fourteen I showed you how to easily customize the colors of the Twenty Fourteen theme with the aid of a plugin. Today I´ll show you how to use another plugin to further customize this theme.

The name of this plugin is Fourteen Extended and is also free and available from the WordPress Plugin Directory.

According to its author, the purpose of this plugin is “to help you customize your Twenty Fourteen run website with ease, while still giving you much of the control“.

New options in your Theme Customizer

As soon as you install and activate this plugin, you will notice that several new options had been added to the Theme Customizer, organized in six new menu sections:

fourteen-extended-options

The first section “TwentyFourteen Starts Here” is really an introduction to the plugin with just one option: You can disable the CSS output of the plugin without deactivating it, while still remaining in the Customizer section adjusting other settings or debugging issues.

General Options

Some of the most interesting options are the ones that are grouped under the following section: “TwentyFourteen General Options”.

fourteen-extended-centered

Here you will find controls for the following options:

  • Center align your site layout.
  • Remove the featured content section.
  • Set the overall max width, with a complete width control from boxed down to 940 px to full screen up to 3200 px.
  • Float Primary Menu to the left, instead of the default right.
  • Remove the left sidebar. This option allows you to hide the left sidebar sitewide.
  • Set the overall content maximum width.
  • Set the overall content image maximum height.
  • Make the post featured images span to 100% width.
  • Remove the background image and color.

Content Options

The next section, “TwentyFourteen Content Options”, also includes a bunch of very interesting options that will help you customize the way your content is to be displayed, such as:

  • Hide the sidebar on the blog feed.
  • Show full width for single posts.
  • Show full width for archives, categories and tags pages.
  • Show full width for Search results pages.
  • Remove the white space above the content.
  • Set the top offset for posts with no featured image.
  • Remove the content separator.
  • Change the opacity of the content separator line.
  • Set the padding to control the space between the featured image and the content.
  • Set the content maximum width.
  • Select a category for the block feed.
  • Switch blog feed to show excerpts, including Archives, Categories, Tags, Author and Search Pages.
  • Set the home excerpt length.
  • Show/Hide Featured Posts in blog feed.
  • Remove the top border of widget titles.

FitVids Options

FitVids is a lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Fourteen Extended allows you to include this script without the need for an additional plugin, thus making your embedded videos truly responsive.

The plugin also gives you a couple of options for the integration of FitVids:

  • Set selector (default is .post)
  • Set custom selector (optional) for other areas like .sidebar or a custom section.

fourteen-extended-fitvids

Mobile Options

The available options in this section allow you to:

  • Show full content on the home page on mobile devices, instead of a list view.
  • Set the featured content mobile layout view. For instance, you can set the desktop view to grid and the mobile view to slider.

Other Options

The last section of options added by this plugin, “TwentyFourteen Optional Scripts”, allow you to load a couple of  JavaScript scripts (Selectivizr.js and Respond.js) in case you need them, i.e for IE8 support.

Conclusion

Fourteen Extended is a free plugin that will fit the needs of those who want to customize the Twenty Fourteen theme only to some extent (for example centering the site layout and controlling the content width), without having to deal with code and without the need to develop a child theme. This plugin will be extremely helpful making things very easy for those users, provided of course that the customization options needed are matched by some of the various options offered by the plugin.

Luis Alejandre

Luis is the creator of the WPThemeDetector tool and the chief editor of this blog. You can read more about Luis in our About page.
Liked this post? Please share it!

45 Comments

  1. Thank you so much, i really enjoyed using this plugin. I was really worried about the slider taking up too much space, now its small and even automatic.

  2. Well, its a nice plugin, Just install and found it very easy to use and worthy. Thanks Luis 🙂

  3. Ive got one for you Luis, when using the slider on a static front page you can tag pages instead of posts. So adding a featured image using dashboard/pages/edit page/add featured image will add the image to the slider and to the page that is being tagged. Lets say a person doesnt want that image on the page that is being tagged but wants it in the slider. How can you remove or hide the image from the page that the slider is referencing??

    • You can create your own custom page template for that purpose. As usual, I strongly recommend using a child theme (you can read more about them in our Child Themes Tutorial Series).

      Once you have created your child theme, copy the files page.php and content-page.php from Twenty Fourteen to your child theme folder, and rename the copied files, for example to “page-no_image.php” and “content-no_image.php”.

      Now in your new page-no_image.php file change this lines:
      * The template for displaying all pages -> change to -> * Template Name: Page No Image
      get_template_part( 'content', 'page' ); -> change to -> get_template_part( 'content', 'no_image' );

      And, in content-no_image.php, delete the following line:
      twentyfourteen_post_thumbnail();

      That´s it! Now go edit whatever page for which you don´t want the featured image to be displayed, and you´ll only need to select (under “Page Atributes”) the template “Page No Image” that will be one of the options available.

      • Im gonna try this tonite. Thanks Luis!!!

        • Sorry for the delayed response. This worked perfectly. I more than appreciate your help.

          • No problem. I´m happy it was what you needed.

  4. Im going to install this, Il let you know how it goes. Its been driving me mad trying to get the layout right and centralize it, I cant understand why they didnt put this feature in there in the first place. anyhow, thanks for the plugin.

  5. Great plugin! It’s one of the reasons I went back to using a WP theme instead of the many premium themes that, oddly, have less functionality.

    Is there a way to add padding beneath posts on home pages that use excerpts? My text seems to get cutoff by the image from the post beneath it. http://ryanmdanks.com

    Thanks,

    Ryan

    • I took it off excerpt mode, but the padding is still very close in the full view. Any advice on fixing that?

      • Hi Ryan,

        Try this: add the following to your style.css (of course change the padding value to whatever number of pixels you want):
        article:after {
        padding-bottom: 50px;
        }

        • That worked a charm.

          Thanks!

          Loving this plugin, now. It’s giving me everything my previous premium themes did.

  6. Yes Twenty fourteen is a great free theme by WordPress team. I am always looking for customizing that theme easily and here i find one such a great plugin for this. Which is fourteen extended. Thanks

  7. Dear Luis,
    Thank you for this great great plugin!

    I have only one question. Is it possible to get all posts to look like the thop one?
    With the excerpt over the featured image?
    I have been playing with the css, and I can get the excerpt to move, but it is underneath the featured image instead of on top of it.
    Can you please help me solve this?

    Thanks in advance,

    Kindest regards,
    Caroline
    The Netherlands

  8. Hi Luis,

    Loving the plugin! It’s made my website so much better. But one question I had was how can I make my blog feed NOT display the featured image in full size (way too big). I want the featured image to work nicely with my slider (and it does). I want the featured image to also be full size when people click into the single post to read the entire article. But I DO NOT want the blog feed to show these posts where I have added a featured image to show that image in full size. It visually competes with the slider. Is there a way I can make the blogroll show small thumbnails (preferred) or even no picture at all (not as preferred) next to the excerpts of my posts on the blog feed?

    Here is the problem I’m talking about: http://www.youngprodigy.com

    Thanks!

    • Also, it seems like changing the “Enter the desired home excerpt length (numbers only!) default is 55” setting to a different number italicizes all the text in my sidebar. How can I stop the italicizing?

    • Hi Peter,

      You will need to create your own custom page template, like I suggested on an earlier comment to this post, but in your case for the blog feed instead of the individual posts (for which you want the image to be displayed).

      • Thank you, Luis! I’m very untechnical when it comes to writing code. Would you be able to help me so I know what exact steps I have to take and what lines of code to use? I looked at that previous post you are talking about.

        Also, any way to get the italicized sidebar from happening if I change the “Enter the desired home excerpt length (numbers only!) default is 55″ setting to a different number?

        Thanks again!

  9. Hello again Luis, as you already helped me with my problem i would like to ask another small one, how can i arrange the post in my Category and tag pages to look like a gallery.. for example
    this guy’s genesis theme category – http://www.beingdexter.com/category/trending/

    my website category – http://cyberreaper.com/archives/category/shows-and-entertainment

    i tweaked my theme with CSS code and programming couple of times, still can’t figure it out.
    Child theme – Sequel

  10. I hope you guys understand that is is not possible for me to help everybody develop their individual sites. I just don´t have the time to focus on specific tweaks, I wish I had.

    Also, please take into account that at this moment I´m not using TwentyFourteen in any of my sites or my clients´sites, so whenever I want to chek whether a particular tweak would work, I have to implement it and try it in a test site. Like I said, I wish I had the time.

    Nevertheless, from time to time I manage to check some of the things you´re interested in and I may come out with the answer to your needs, but I can´t promise anything.

  11. Hi , We have used your plugin, works fantastic. As today I recommend to my friend however the plugin seems to disappear from the download sections?

    • Hi, this is not my plugin but you are right: it is not in the WordPress Plugin Directory at this moment. I´ll try to find out.

  12. Oh okay , i ran into your blog while searching what happend.. Its strange, just seems vaporized on the web 😮 Just yesterday i downloaded it

  13. Awesome,thanks for the tips. I seem to be stuck with a fixed image size no matter how big I make it on one of my pages when using this theme, I wonder if there is a way to make the images use the default size I have then loaded as. I editied the height/ width info in the text portion of the page but that does’t solve the issue … any ideas ?

  14. Hi, this plugin not found in http://wordpress.org/, said:

    We couldn’t find that plugin. Maybe you were looking for one of these?

    • Hi Tomas,

      You can get the plugin from Github now. You´ll find the link a couple of comments above yours, it was shared by Tom.

      • I downloaded it and now I can see it between the other plugins. But when I activate it nothing changes in the dashboard?

        • You´ll see all the new settings not in your dashboard but in the Customizer.

  15. how do we change each of the main page’s headers say home static page with “Home” & new logo/photo for ea ch page. Is it possible? lowerclarencepresbyterian.com

  16. hi! when i change the full width of the posts, the text and post itself changes to full width, but my images stay the same (so now they look way too small) – the images are sized correctly before uploading. any idea how to fix this?

  17. I cant find this plugin. Has it been removed?

  18. can i change mobile view by some coding…

  19. No more Fourteen Extended found in plugins…why?

  20. Hey Luis, your plug-in looks awesome ! Unfortunately I guess it isn’t more available for WP v4.2.2 ?

    Are you going to keep developing for the subwritten version ? Thank you for your answer.

    Have a great day. Julien

  21. Hi Luis. Just wondering if there’s a way to add an extra grid display under a featured post? ie: The default theme shows a grid display at the top of the home page. I want to retain this, but add a second grid display at the bottom of the page, with a featured post in between.

    Cheers!
    rolanstein

  22. The plugin is gone now? It is no longer found at wordpress.org.

  23. I could not get the plugin. Please give me a genuine link to download it.

  24. I would love to use Fourteen Extended but don’t see it on the plugin directory. Is it safe to use it from Github?

Trackbacks/Pingbacks

  1. Customize your Twenty Fourteen theme with Fourteen Extended | Wow, I Didn't Know That! - […] Customize your Twenty Fourteen theme with Fourteen Extended. […]

Submit a Comment

Your email address will not be published. Required fields are marked *