I get why they put a gap at the top of the posts & pages in the Twenty Fourteen WordPress Theme, but it’s a little inconsistent (aesthetically speaking). The gap does make blog posts without a feature image look just right, and fit & flow they way they should.
If, however, your post has a feature image, it just looks awkward (to me, anyway), and as the goal for me is try to to always have a feature image for each blog post, I decided to go ahead and remove the gap.
It’ll also force me to update those older posts at some point to add a feature image.
So, how do you do it?
The easiest and quickest method to switch from the default to getting rid of the gap completely is to use a child theme.
Sure, we could, of course, just edit the CSS file contained within the Twenty Fourteen theme, but with the rate that WordPress have been putting out updates recently, it wouldn’t surprise me if they released an update for Twenty Fourteen that would overwrite your changes and just make you have to do them again.
The instructions for creating a bare basic minimum child theme on the WordPress Codex are rather straightforward and fortunately we only need the bare basic minimum child theme.
We simply make a new folder inside our themes folder with the same name as the theme we wish to override parts of with “-child” appended to the end of it.
So, for “twentyfourteen” we make a new folder called “twentyfourteen-child”. Inside this folder, we create a style.css file, which only has this as the minimum requirement.
/*
Theme Name: Twenty Fourteen Child
Theme URI: http://example.com/twenty-fourteen-child/
Description: Twenty Fourteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfourteen
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fourteen-child
*/
@import url("../twentyfourteen/style.css");
/* =Theme customization starts here
---------------------------------------------- */
Fortunately, the example code is based on the Twenty Fourteen WordPress Theme, so we don’t need to change the URL to the main theme’s CSS file in this case. It’s already been done for us.
Inside this CSS file we just need to add this little chunk below that shown above.
@media screen and (min-width: 846px) {
.content-area { padding-top: 0px; }
.content-sidebar { padding-top:20px; }
}
And with that you’re almost all done. There’s one last thing you need to do. If you go to the themes selector in your WordPress admin, and choose the “Live Preview” mode, you will need to set your menus for the top and left side, otherwise they won’t display.
Now just tell it to save and activate your theme, and you’re good to go.
I still wanted a little gap on the sidebar, as you can see in the CSS, it just looked weird without it, so gave it 20 pixels.
Now I just need to go and sort out feature images for all my other posts.
If you don’t use feature images, it’s not really worth doing, and at some point I will spend a bit more than 5 minutes on it and try to figure out how I can get rid of the gap from posts with feature images, but not remove it from those without.
