Hide the Sidebar Only on Mobile in WordPress: If you’ve ever opened your WordPress site on a phone and felt like things looked too tight or cluttered, the sidebar is probably to blame. Sidebars are great on desktops they help with navigation, showcase widgets, and add extra info but on mobile, they often get in the way.

In this guide, I’ll walk you through how to hide your sidebar only on mobile (and optionally tablets) while keeping it intact on desktops. I’ll share multiple methods using PHP, CSS, or theme settings so you can choose what suits your setup and skill level.

Why Hide the Sidebar on Mobile?

Here are a few good reasons to consider removing the sidebar from small screens:

• Better User Experience: On smaller screens, users want clean layouts. Sidebars can crowd the view and distract from the main content.
• Improved Page Speed: Fewer elements = faster load times, especially on slower mobile networks.
• More Readable Content: Readers can focus on your posts instead of scrolling past widgets.
• SEO Benefits: Google prioritizes mobile-friendly designs in search rankings, and clean mobile layouts help with that.

Method 1: Using PHP to Hide the Sidebar Only on Mobile in WordPress

If you’re comfortable with adding code, this is a lightweight and effective approach. Here’s how:

Step-by-Step Instructions:

1. Log into your WordPress dashboard.
2. Install a plugin like Code Snippets (or any other code manager that lets you safely add PHP).
3. Add a new snippet and paste this code:

function remove_sidebar_on_mobile() {
    if (wp_is_mobile()) {
        echo '<style>#secondary { display: none !important; }</style>';
    }
}
add_action('wp_head', 'remove_sidebar_on_mobile');

👉 Important: The #secondary selector is commonly used for sidebars, but your theme might use a different ID or class. To check, right-click your sidebar and select Inspect in Chrome. Replace #secondary with the correct selector if needed.

Prefer not to use a plugin?
You can also add this code directly in your theme’s functions.php file by going to:
Appearance → Theme File Editor → functions.php

Method 2: Hide Sidebar with CSS Media Queries

If PHP feels a bit too technical, CSS is an easier alternative and just as effective.

Steps:

1. Go to Appearance → Customize → Additional CSS
2. Paste this code:

@media (max-width: 768px) {
    #secondary {
        display: none !important;
    }
}

Again, double-check that #secondary matches your theme’s sidebar selector. Some themes use .sidebar, #sidebar, or even custom classes.

🛠️ Use Chrome Developer Tools to inspect your sidebar and identify the exact ID or class.

Method 3: Use Theme Settings (If Available)

Some WordPress themes offer built-in controls for showing or hiding sidebars on different devices. It’s worth checking before diving into code.

How to Check:

1. Go to Appearance → Customize
2. Look for Layout Settings, Sidebar Settings, or similar.
3. If there’s an option to hide the sidebar on mobile, enable it and save.

This method is ideal for beginners or anyone using premium themes that support responsive layout controls.

FAQs – Hiding Sidebar on Mobile in WordPress

Final Thoughts

Hiding the sidebar on mobile devices can seriously boost the usability and readability of your WordPress site. Whether you prefer editing CSS, inserting a PHP snippet, or toggling a theme setting, there’s a method for every level.

Personally, I recommend the CSS method for most users it’s quick, non-invasive, and doesn’t require extra plugins. But if you’re building a custom layout or want more control, PHP gives you that flexibility.

If you found this guide helpful, feel free to bookmark it or share it with someone who’s optimizing their WordPress site. And if you have questions, I’m always here to help.