wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog WordPress themes How To Remove Left Sidebar of Twenty Fourteen

WordPress themes

How To Remove Left Sidebar of Twenty Fourteen

Last updated on February 18, 2017
Posted on January 13, 2014

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

Twenty Fourteen child with Left Sidebar and not yet centered.
Twenty Fourteen child with Left Sidebar and not yet centered.

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

Remove Left Sidebar Twenty Fourteen
Removed Left Sidebar – Twenty Fourteen

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.

child theme twentyfourteen wp3.8

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← Twenty Fourteen Child Theme
→ Showing “Featured posts” Images in Twenty Fourteen Homepage

Comments

  1. Sasikumar Krishnan says

    February 11, 2014 at 8:44 am

    Thanks for the tips. Great post

    • Kim says

      February 11, 2014 at 9:42 am

      And thank you for stopping by and leaving a comment 😀

  2. Gruffalos says

    March 7, 2014 at 12:22 pm

    Hi, this is great and very helpful. One thing I don’t like about the extended plugin is that you can’t use the default page template if you remove the left sidebar, you have to use the full width page template which means no right sidebar widgets.
    However I would like to be able to remove the left sidebar only on some pages and posts, not site-wide. Are you able to tell me either how to do this or what I should search for to find the answer?

    • Kim says

      March 7, 2014 at 5:36 pm

      Hi Gruffalos,

      You can use page templates, so basically you get the post ID or page ID and define it inside functions.php, then disable from there.

      Here is a good resource: http://codex.wordpress.org/Page_Templates

      And the support forum: http://wordpress.org/support/

      Hope this helps

      Kind regards

      Kimi.

  3. Gruffalos says

    March 7, 2014 at 12:55 pm

    Actually I just thought of a way to do it-make a new page template that has the right sidebar, but remove the left sidebar.

  4. Antorinia says

    December 28, 2014 at 4:37 am

    add

    .main-content {
    min-height: 100vh;
    }

    to your css copy paste

  5. Chris Barmby says

    December 31, 2014 at 9:56 am

    Thank you so much for the tutorial. I have built a couple blogs in the past and used Thesis 1.8 but I have not been able to find it again. Anyways I found the twenty fourteen theme and liked it other than the way it was set up. Looked kinda silly. Thanks Again

    • Kim Muellner says

      January 9, 2015 at 2:14 pm

      My pleasure Chris, Happy 2015 to you and yours 😀

  6. heri says

    April 28, 2015 at 10:40 pm

    hi, i just want to remove sidebar and i want to set full width, not center it.
    can you tell me how to do this?
    thank you

  7. Bill Klinz says

    July 7, 2015 at 3:00 am

    Hi can you upload the html source code of your demo site without sidebar please?

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • Twenty Nineteen theme tutorialTwenty Nineteen Theme Full Tutorial - Creating a Website
  • Twenty Seventeen One Page ParallaxTwenty Seventeen One Page Parallax Scrolling Website Style
  • Twenty Seventeen Proudly Powered By WordPress codeTwenty Seventeen Footer "Proudly Powered By WordPress" Text
  • Where your child theme folder should be located inside themesHow To Create WordPress Child Theme Manually or With Plugin
  • How to Remove Twenty Fourteen Author Name or Link
  • How I add thumbnails with Twenty Twelve theme
  • Change Default Green Color WP 2014 Theme
  • Showing Twenty Fourteen Thumbnail in A Smaller Size
  • How To Style WordPress Caption in WP Twenty Fourteen Child
  • Proudly Powered By WordPress Twenty Fourteen

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2022 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept