How To Remove Left Sidebar of Twenty Fourteen

In this tutorial, we are going to remove the left sidebar of Twenty Fourteen.

But first, what you will need is creating the child theme, click here, if you don’t have one yet.

Although this default theme is extremely great for mobile devices because it’s made to be mobile responsive.

However, I personally, don’t really like the left sidebar which is glued on the left side of my screen in Desktop view.

The look of the original left sidebar of Twenty Fourteen

Below is the look of the site with no left sidebar, and center aligned to page, after doing these steps

The process will be a little bit longer, as shown also in the video tutorial, but if you don’t have time for it, then just copy the code below, for functions.php and the style.css.

Alternatively, you can modify it fast and easily with the plugin, called, Twenty Fourteen extended (Update 22 July 2014 – the plugin is apparently removed from WordPress plugin directory).

I did also try this awesome plugin, however I find one small drawback which is to me, personally important. When I view the page source, the long css code is added to my header area, which I personally prefer it to be clean. So it is a personal preference.

Twenty Fourteen Child Theme

Also in the video, I mentioned, the other way, is you can install the plugin, copy and paste the added css file after modification, and add it manually to your child theme style.css file. And then deactivate the plugin.

So it is up to you, let’s move on the way how I remove Twenty Fourteen left sidebar.

Steps to remove the left sidebar of Twenty Fourteen child theme.

• Is my site loading fast? I use this shared hosting
• Try my theme >

1. Go to and read this removing sidebar codex. If you want faster way, copy the functions.php and style.css code below.

2. Inside your child theme folder, create a new file, name it, functions.php (if you followed my tutorial, then you only have style.css there). And add this code there, and save.

<?php
	// Removing left sidebar of Twenty Fourteen
function remove_left_sidebar(){
	unregister_sidebar( 'sidebar-1' );
}
add_action( 'widgets_init', 'remove_left_sidebar', 11 );
?>

Note: if you already have some codes in your functions.php, add it before php closing tag ?>.

3. Then inside your style.css, add the code below and save. (you can delete the background color modification, I forgot to mention it in the video 🙂

@media screen and (min-width: 783px) {
	 .primary-navigation {
		 float: right;
		 margin-left: 20px;
	        }
		}

.site {
		margin: 0 auto;
        }
@media screen and (min-width: 1110px) {
	.archive-header,
	.comments-area,
	.image-navigation,
	.page-header,	        
	.page-content,
	.post-navigation,
	.site-content .entry-header,
	.site-content .entry-content,
	.site-content .entry-summary,
	.site-content footer.entry-meta {
		padding-left: 55px;
	        }
        }
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
		max-width: 874px;
        }
.comments-area {
		max-width: 874px;
        }
.post-navigation, .image-navigation {
		max-width: 874px;
        }

.site:before,
#secondary {
		width: 0;
		display: none;
	    }
.featured-content {
		padding-left: 0;
        }
.site-content, .site-main .widecolumn {
		margin-left: 0;
        }
.hentry {
		max-width: 900px;
        }
.post-thumbnail img {
		width: 100%;
		}

Your site will have no left sidebar, and it’s aligned to the center of the page.