BugWP logo BugWP
Back to Community
Home / Community / Theme → Twenty sixteen

How to Remove or Customize the Sidebar in Twenty Sixteen

24 threads Sep 16, 2025 Theme → Twenty sixteen

Content

Many users of the popular Twenty Sixteen theme find themselves wanting to adjust the sidebar's behavior. Whether you want to hide it on specific pages, remove it from mobile views, or change its position, this guide covers the most common and effective methods based on community solutions.

Why Isn't There a Built-in Option?

Unlike some themes, Twenty Sixteen does not include a built-in visual option in the WordPress Customizer to toggle the sidebar on or off for different pages. The theme's description refers to an "optional" sidebar because its display is controlled by whether or not you add widgets to it. If the sidebar widget area is empty, the theme automatically applies a .no-sidebar CSS class and adjusts the layout to be full-width. This is the theme's built-in method of making the sidebar optional.

Common Solutions for Sidebar Control

1. The Widget Method (Removing the Sidebar Sitewide)

The simplest way to remove the sidebar is to empty the widget area. This method is best if you want to remove the sidebar from your entire site.

  • Navigate to Appearance > Widgets in your WordPress dashboard.
  • Locate the "Sidebar" widget area.
  • Remove all widgets from this area by dragging them out or deleting them.

Once all widgets are removed, the theme will hide the sidebar and expand the content area to full width.

2. The CSS Method (Hiding the Sidebar on Specific Pages)

To hide the sidebar on specific pages while keeping it active on others, you can use CSS. This is a non-destructive method that preserves the sidebar's functionality.

  1. Go to Appearance > Customize > Additional CSS.
  2. Use the following code snippet, replacing 123 with your actual page ID. You can find a page's ID by editing the page and looking at the URL (post=123).
.page-id-123 .sidebar {
    display: none;
}

You can chain multiple page IDs together:

.page-id-123 .sidebar,
.page-id-456 .sidebar {
    display: none;
}

3. The CSS Method for Mobile/Tablet Views

To remove the sidebar only on smaller screens, use a CSS media query. This is a common request as the sidebar can use valuable screen space on mobile devices.

@media (max-width: 768px) {
    .sidebar {
        display: none;
    }
}

4. The Child Theme Method (For Advanced Layout Changes)

For more permanent and complex changes, such as creating a full-width page template, creating a child theme is the recommended best practice. This ensures your modifications are not overwritten by theme updates.

  1. First, create a child theme for Twenty Sixteen.
  2. In your child theme's functions.php file, you can add code to conditionally add a .no-sidebar class to the body tag on certain pages (e.g., everything except the blog homepage).
function mychildtheme_body_classes( $classes ) {
    if ( ! is_home() ) {
        $classes[] = 'no-sidebar';
    }
    return $classes;
}
add_filter( 'body_class', 'mychildtheme_body_classes' );
  1. Then, in your child theme's style.css file, add the corresponding CSS rule:
.no-sidebar .sidebar {
    display: none;
}

5. Moving the Sidebar from Right to Left

To swap the sidebar and main content positions on larger screens, use the following CSS in the Additional CSS section or your child theme's stylesheet.

@media screen and (min-width: 56.875em) {
    .content-area {
        float: right;
        margin-right: 0;
    }
    .sidebar {
        float: left;
        margin-left: 0;
    }
}

Troubleshooting Common Issues

  • Footer moves up on short pages: When you remove the sidebar, a page with little content can cause the footer to appear too high. You can add a minimum height to the content area using CSS to push the footer down: #content { min-height: 550px; }
  • Double sidebars: If a second sidebar appears below your content on single posts, it is likely the "Content Bottom" widget area, not the main sidebar. You can hide it with CSS (.sidebar-content-bottom { display: none; }) or manage its widgets under Appearance > Widgets.
  • Code doesn't work: Always ensure you are adding CSS to the Additional CSS section or a child theme. If another CSS rule is overriding yours, you may need to add !important (e.g., display: none !important;), though this should be used sparingly.

By following these community-tested methods, you can effectively gain control over the Twenty Sixteen sidebar to create the exact layout you need for your website.

Related Support Threads Support