{"id":20871,"date":"2021-02-27T17:00:08","date_gmt":"2021-02-27T16:00:08","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=20871"},"modified":"2021-03-05T10:24:30","modified_gmt":"2021-03-05T09:24:30","slug":"how-to-remove-sidebar-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-remove-sidebar-in-wordpress\/","title":{"rendered":"How to Remove the Sidebar in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]The sidebar is a very important area on a WordPress website as it can be used for a multitude of purposes. Generally speaking, sidebars are located to the left or right of the main content but they can sometimes be placed below the content as well. Sidebars contain widgets that are essential for the growth of the website or helpful with smooth user navigation through it. Those widgets include call-to-action buttons, newsletter forms, search bars, side menus, banners, and ads, among other things.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, despite the obvious use of sidebars, some WordPress users still choose to disable them on their website, either on certain pages and posts or from their entire site. The reasons why someone might choose to remove their sidebar differ, and we will be taking a look at them, as well as the hows of removing sidebars, in course of this article. And, as this task could become complicated, we have included several methods showing you how to remove the sidebar in WordPress:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#using-theme-options\">Removing the sidebar using theme options<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#using-plugin\">Removing the sidebar using a plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#using-css-code\">Removing the sidebar using CSS code<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#using-custom-templates\">Removing the sidebar using custom templates<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Why remove the sidebar in WordPress?<\/h2>\n<p>[\/vc_column_text][vc_column_text]The most important reason why some WordPress users choose to remove the sidebar is because of how and where it is displayed on mobile screens. As the mobile screen has become the most commonly used viewport, all WordPress website owners should address any potential sidebar issues on mobile displays. Generally, on mobile devices, the sidebar is placed below the page content, which causes the page to be excessively long. This frequently discourages users from scrolling down to the sidebar section. Additionally, since mobile screens are rather small, a typical sidebar layout can lead to users needing to constantly zoom in and out to interact with some of the sidebar widgets.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Apart from that, the sidebar content could distract users from the main page content, thus defeating its purpose. This is very important to avoid on blogging sites\u2014you want your readers to focus on the article content, which is cleanly and neatly displayed. Additionally, some niche-purpose websites like news-aggregating sites or magazines remove the sidebars as they create a sense of clutter in an already content-rich website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">How to remove the sidebar in WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]After seeing why you may want to remove the sidebar, let\u2019s consider how you can achieve it. We will discuss various methods, starting with the easiest ones to apply. Additionally, we will show you how to disable the sidebar for all pages, as well as for a single page or post. Ultimately, the choice of which method to use and for which part of the website is up to you.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"using-theme-options\"><\/a>Removing the sidebar using theme options<\/h3>\n<p>[\/vc_column_text][vc_column_text]The best and the easiest method of removing the sidebar is by using the appropriate option(s) within your theme. All well-coded themes provide a wide array of options that help manage various aspects of the website. Therefore, the chances are very high that your theme contains a subset of options specifically related to the sidebar. As such, you should always examine the options of your current theme in the hopes of finding settings that can help you remove the sidebar.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will show you how to disable the sidebar using the appropriate option within a <a href=\"https:\/\/qodeinteractive.com\/themes-list\/\" target=\"_blank\" rel=\"noopener\">Qode Interactive<\/a> theme, as all our themes allow this. To disable the sidebar globally, <strong>navigate to Theme_name Options &gt; Sidebar<\/strong> and <strong>locate the <em>Sidebar Layout<\/em> option<\/strong>. Alternatively, the correct path could be <strong>Theme_name &gt; Page<\/strong> instead, with the option name remaining the same. Also, the <em>Theme_name<\/em> part will be replaced with the theme\u2019s name and it may contain the word <em>Core<\/em> in some cases (e.g. <a href=\"https:\/\/qodeinteractive.com\/wordpress-theme\/lekker-portfolio-wordpress-theme\/\" target=\"_blank\" rel=\"noopener\">Lekker<\/a> Core). When you\u2019ve located the option, <strong>select the <em>No Sidebar<\/em> setting<\/strong>, and <strong>press the <em>Save Changes<\/em> button<\/strong> to finish.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Theme-Options-Sidebar.jpg\" class=\"attachment-full size-full\" alt=\"Theme Options Sidebar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Theme-Options-Sidebar.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Theme-Options-Sidebar-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Theme-Options-Sidebar-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Theme-Options-Sidebar-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Theme-Options-Sidebar-Layout.jpg\" class=\"attachment-full size-full\" alt=\"Theme Options Sidebar Layout\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Theme-Options-Sidebar-Layout.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Theme-Options-Sidebar-Layout-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Theme-Options-Sidebar-Layout-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Theme-Options-Sidebar-Layout-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Sometimes, you might not want to disable the sidebar for all pages, but only for specific ones. You can do this easily if you\u2019re using one of our themes. All Qode Interactive themes contain an equivalent set of options on individual pages to the ones they have within the global Theme_name Options. Using these page-specific options, you can adjust select options on individual pages. This includes the choice of whether or not the page should have a sidebar. <strong>The same applies to single posts, as they also have the options that let you make individualized adjustments.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Therefore, to disable the sidebar on a single page or post, <strong>click to edit it first<\/strong>, and <strong>scroll down to Theme_name Settings<\/strong>. Then,<strong> locate the <em>Sidebar Settings <\/em>section<\/strong> and <strong>position yourself within that section. Find the <em>Sidebar Layout<\/em> option, set the value to <em>No Sidebar<\/em><\/strong>, and<strong> press the <em>Update<\/em> button<\/strong> to update the page or post. And that\u2019s it\u2014your chosen page or post won\u2019t have the sidebar any longer.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Sidebar-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Sidebar Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Sidebar-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Sidebar-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Sidebar-Settings-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Sidebar-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Update-Button.jpg\" class=\"attachment-full size-full\" alt=\"Update Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Update-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Update-Button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Update-Button-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Update-Button-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"using-plugin\"><\/a>Removing the sidebar using a plugin<\/h3>\n<p>[\/vc_column_text][vc_column_text]If your theme doesn\u2019t have a similar option for removing the sidebar, you will need to try a different method. Another way of removing sidebars includes finding a suitable plugin that offers this possibility. Thanks to the abundance of WordPress plugins, finding one to help you isn\u2019t hard. In this particular case, you should look for plugins that mention sidebars (widget areas) or offer page or post templates that exclude the sidebar.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The plugin we found while searching the WordPress plugins repository is the <a href=\"https:\/\/wordpress.org\/plugins\/fullwidth-templates\/\" target=\"_blank\" rel=\"noopener\">Fullwidth Templates for Any Theme &amp; Page Builder<\/a>. The plugin offers various page and post templates, including the <em>No Sidebar<\/em> template. However, it doesn\u2019t include an option for global application, meaning you would need to choose the appropriate template for each page or post separately.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To remove the sidebar on a page using this plugin, you would need to <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">install it<\/a> first. Then, <strong>click to edit the page<\/strong> and <strong>locate the <em>Page Attributes<\/em> section<\/strong> on the right. <strong>Find the <em>Template<\/em><\/strong> option, <strong>choose the <em>FW No Sidebar<\/em> template<\/strong> as your page template, and <strong>press the <em>Update<\/em> button<\/strong> so that the choice would be saved.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"600\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Plugin-No-Sidebar-Template.jpg\" class=\"attachment-full size-full\" alt=\"Plugin No Sidebar Template\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Plugin-No-Sidebar-Template.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Plugin-No-Sidebar-Template-300x186.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Plugin-No-Sidebar-Template-768x476.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Plugin-No-Sidebar-Template-620x384.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Similarly, to remove the sidebar from a single post using this plugin,<strong> click to edit that<\/strong> post, <strong>locate the <em>Post Attributes<\/em> section, select the <em>FW No Sidebar<\/em> as the post template<\/strong>, and <strong>press the <em>Update<\/em> button<\/strong> to apply that choice.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Single-Post-No-Sidebar.jpg\" class=\"attachment-full size-full\" alt=\"Single Post No Sidebar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Single-Post-No-Sidebar.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Single-Post-No-Sidebar-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Single-Post-No-Sidebar-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Single-Post-No-Sidebar-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This concludes our explanation on using custom plugins for removing the sidebar. You can now go through all the pages and posts where you want to remove the sidebar and do it following these steps.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you weren\u2019t able to remove the sidebar using the two methods we\u2019ve outlined so far, you will need to opt for less beginner-friendly approaches. One of the reasons why you might not have been able to remove the sidebar could be due to an incompatibility between the plugin you found and your theme or the rest of your plugins. Another reason why you might want to try alternative methods of sidebar removal is that you weren\u2019t satisfied with page structure or stylization after using a plugin-supplied template. Whatever the case, you shouldn\u2019t worry. There are additional ways of removing the sidebar that involve the use of code. Let us explore them.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"using-css-code\"><\/a>Removing the sidebar using CSS code<\/h3>\n<p>[\/vc_column_text][vc_column_text]An alternative method of removing the sidebar on your website requires inserting a small bit of CSS code inside Appearance &gt; Customize &gt; Additional CSS. Using this method, you will be able to remove the sidebar on your website or on select pages and posts only, depending on what you need.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, as the CSS code depends greatly on the HTML structure of your pages, it&#8217;s impossible to show a code that works for all websites, given the various themes or plugins being used. Therefore, we will cover this method using an example, while explaining all steps thoroughly. Then, using our guide, you will be able to create similar codes, which will be compatible with the HTML structure of your pages or posts.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To remove the sidebar from all pages using CSS, you will need to inspect one of your pages that contains a sidebar using your <a href=\"https:\/\/qodeinteractive.com\/magazine\/browser-inspect-element-tool-in-wordpress\/\">browser\u2019s inspect element tool<\/a>. To do so, <strong>review one of your pages that contains a sidebar<\/strong> and <strong>right-click on the sidebar<\/strong>, preferably near the top. Then, <strong>click on the <em>Inspect<\/em> option<\/strong> from the menu that appears.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"535\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Inspect-Latest-Posts.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Latest Posts\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Inspect-Latest-Posts.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Inspect-Latest-Posts-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Inspect-Latest-Posts-768x424.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Inspect-Latest-Posts-620x342.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This will open the <em>Elements<\/em> tab of your browser\u2019s developer tools, which shows the HTML structure of your current page. And you will be positioned directly on the element that you right-clicked.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>You will need to go up the HTML structure until you find the HTML element that corresponds to the sidebar. As each element will be highlighted on the website as you go up through the HTML structure, you will simply need to find an element that, when hovered over, highlights the entire sidebar section.<\/strong> Therefore, if you click near the beginning of the sidebar section, it will take less time to find the corresponding HTML element. After locating it, you will use that element to create the CSS code in the form given below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">appropriate-css-selector-corresponding-to-the-sidebar-element {\r\ndisplay: none;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In our example, the HTML element is the third wrapping <a href=\"https:\/\/www.w3schools.com\/tags\/tag_div.ASP\" target=\"_blank\" rel=\"noopener\">div<\/a> above the title we inspected. This div has three separate classes, one of which is sidebar-related and which we will use as the CSS selector. Meaning, we would need the following code to disable the sidebar section:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.qodef-page-sidebar-section{\r\ndisplay: none;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The period is added before the chosen div class to signify that we are using that specific class as the CSS selector.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Css.jpg\" class=\"attachment-full size-full\" alt=\"Css\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Css.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Css-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Css-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Css-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]However, there are two additional issues we need to address. The first is that by simply removing the sidebar, it is most likely that the main content would remain the same and not automatically stretch itself. The second issue concerns the code we mentioned, as it simply might not work if it\u2019s overridden by some other CSS code.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To solve the first problem, you will also need to add the appropriate CSS code that stretches the page content to 100% of its containing HTML element. Therefore, you would need to first figure out what that HTML element is and then add CSS in the form given below.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">appropriate-css-selector-corresponding-to-the-page-content-element {\r\nwidth: 100%;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In our case, the corresponding HTML element is a div directly above the first one.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Css-2.jpg\" class=\"attachment-full size-full\" alt=\"Css\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Css-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Css-2-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Css-2-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Css-2-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Again, we will use the most suitable class of this element as the CSS selector. So, in our case, the appropriate CSS would be:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.qodef-page-content-section{\r\nwidth: 100%;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, to make sure that neither this nor the previous CSS code is overridden by any other conflicting code, we will add <em>!important<\/em> to both code lines. This will make our new CSS code of the highest priority. Therefore, using the code given below, we will solve both potential issues.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.qodef-page-sidebar-section{\r\ndisplay: none !important;\r\n}\r\n.qodef-page-content-section{\r\nwidth: 100% !important;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This concludes the explanation on how to make the CSS code that removes the sidebar on your entire site.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As we mentioned before, the exact code will differ on a case-by-case basis, but if you follow our instructions, you will be able to create an appropriate CSS code for your website, as well.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To create a code that removes the sidebar on a single page, you only need to slightly adjust the previously created CSS. More precisely, you will need to adjust both CSS selectors so that they point to a specific page.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">page-specific-appropriate-css-selector-corresponding-to-the-sidebar-element {\r\ndisplay: none !important;\r\n}\r\npage-specific-appropriate-css-selector-corresponding-to-the-page-content-element {\r\nwidth: 100% !important;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The easiest way of doing so is going up through the HTML structure of the page until you find the <a href=\"https:\/\/www.w3schools.com\/tags\/tag_body.asp\" target=\"_blank\" rel=\"noopener\">body<\/a> tag. Then, within the classes that the body tag has, you will need to find and use one that identifies the current page by using its ID. That class would be <strong>page-id-<\/strong> followed by<strong> the number that represents the ID of the current page<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Css-Page-ID.jpg\" class=\"attachment-full size-full\" alt=\"Css Page ID\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Css-Page-ID.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Css-Page-ID-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Css-Page-ID-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Css-Page-ID-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In our case, the following CSS will remove the sidebar only on the page which has 4972 as its ID.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.page-id-4972 .qodef-page-sidebar-section{\r\ndisplay: none !important;\r\n}\r\n.page-id-4972 .qodef-page-content-section{\r\nwidth: 100% !important;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To remove the sidebar on a single post, you will need to do a very similar thing. However, in this case, the appropriate class of the body tag will be <strong>postid-<\/strong> followed by <strong>the number that represents the ID of the current post<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Css-Post.jpg\" class=\"attachment-full size-full\" alt=\"Css Post\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Css-Post.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Css-Post-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Css-Post-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/02\/Css-Post-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]So, the following CSS will remove the sidebar only on the post which has 3661 as its ID.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.postid-3661 .qodef-page-sidebar-section{\r\ndisplay: none !important;\r\n}\r\n.postid-3661 .qodef-page-content-section{\r\nwidth: 100% !important;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"using-custom-templates\"><\/a>Removing the sidebar using custom templates<\/h3>\n<p>[\/vc_column_text][vc_column_text]The last method for removing the sidebar in WordPress that we will discuss in this article is creating custom templates. These templates would simply omit the code responsible for the sidebar creation.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This method is the most difficult of all those mentioned in this article, and it is only advised for the more WordPress-savvy users as it requires custom coding. However, the advantage of using it is that you can <strong>tailor the template you create to match your needs precisely<\/strong>. For this method, we advise using a <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-create-child-theme\/\">child theme<\/a>. Also, as with any method that includes adding custom code, we advise <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-manually-backup-wordpress-website\/\">making a backup of your website<\/a> before you proceed.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Additionally, in the past, some have advised directly <strong>editing the template files of your parent theme<\/strong> to remove the part that creates the sidebar. However, we don\u2019t suggest doing this as it is <strong>not safe from being overrun by theme updates and it can lead to errors if done incorrectly<\/strong>. Instead, the method that we will discuss includes creating a separate template file with the appropriate code. Then you can upload that file to the directory of your child theme on the server <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-use-ftp\/\">using FTP<\/a>. The result will be somewhat similar to the plugin we used\u2014you will be able to remove the sidebar on individual pages or posts by manually selecting the custom template you previously created.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>When creating a new template, you need to know that it has two distinct sections.<\/strong> One is the template header, which is used to register the template. The other is the code responsible for displaying the content of the page or post.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The template header is a simple comment that specifies the template name, but it can also contain additional information. The template header starts with the label <strong>Template Name<\/strong>: followed by the name of the template. The name you use in the template header is the same one that will display in the <em>Page Attributes<\/em> dropdown menu on the page. For example, if you were to start your template file with this header[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;?php \r\n\/* Template Name: Test Template *\/\r\n?&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]you will be able to choose the <em>Test Template<\/em> from the <em>Page Attributes<\/em>. That is, of course, after creating the file and uploading it to your child theme\u2019s directory.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As for the main part of this file\u2014the code that creates the page content\u2014the easiest way of making it is by copying an existing template file and then editing it to remove the part that adds the sidebar. You can also opt to create the code yourself if you are confident in your programming skills.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you choose to copy and edit the file as suggested, you should look for the page.php file. It is found in the directory of your parent theme. After copying the content of that file into a new file,<strong> look for the code that adds the sidebar section<\/strong> and<strong> remove it from the new file<\/strong>. The code that you will need to remove is the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_sidebar\/\" target=\"_blank\" rel=\"noopener\">get_sidebar()<\/a> function that loads the sidebar template. You will be looking for code matching one of two cases shown below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;?php get_sidebar(); ?&gt;\r\nor\r\n&lt;?php get_sidebar('sidebar-name'); ?&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You need to remove whichever one of them you find to make sure the sidebar won&#8217;t display on your page. The only difference is that the first specifies the regular sidebar while the second displays a specialized sidebar if you have one.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can create custom post templates that would appear as the option in <em>Post Attributes<\/em> in a similar manner. By default, templates are created for pages, so you will need to edit the template header slightly to make it clear that the file is a post template. We will include an example to further clarify this.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;?php\r\n\/*\r\nTemplate Name: Name of your Custom template\r\nTemplate Post Type: post\r\n*\/\r\n\/\/ Code goes here...<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can create new templates for any registered custom post type within your theme by following the structure given above. You only need to replace the post with the slug of the custom <strong>post<\/strong> type for which you wish to create the template. With that being said, to make the main part of the template, you can either create your own code or add an edited version from an existing template file.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you choose to model your code on an existing file, you will need to look for the <strong>single.php<\/strong> file, also located in the directory of your parent theme. <strong>Copy the code into your new file<\/strong> and <strong>remove the part of the code that adds the sidebar.<\/strong> <strong>You will need to remove the same code we mentioned previously<\/strong>, i.e. the two possible instances of the get_sidebar() function.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After editing your new file so that it doesn\u2019t show the sidebar, <strong>save it as a .php file<\/strong> and <strong>upload it to the directory of your child theme<\/strong> via FTP. We advise naming the file so that its purpose is clear (e.g. same as the template name).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you\u2019ve removed the sidebar using this method, you will likely need to make some additional adjustments to the page or post stylization. As the CSS necessary to stylize a custom template is highly individual, we can only share a small piece of advice to help you. This advice is applicable in cases where you copied the code from an existing file while removing the sidebar-related part.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]It is most likely that you will have a blank space where your sidebar previously was, but the main content of the page or post won\u2019t stretch to fill that space. To solve this issue, you will need to find the appropriate HTML element that wraps the main content of your page or post and set its width to 100%. Since we have already discussed this concept in the section on the <a href=\"#using-css-code\">CSS methods of removing the sidebar<\/a>, we advise reviewing it once more to finalize the stylization of your custom template.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]The two major reasons that lead WordPress users to remove their sidebars are issues with sidebar display on mobile devices as well as a sense of a visual overload that the sidebars can cause. Whether it was one of these or something else that drove you to explore removing the sidebar, you can still find a solution among the approaches we presented.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we have shown you how to remove the sidebar in WordPress using four different methods: with theme options, plugins, CSS code, and custom-made templates. Even though these methods vary in difficulty quite a bit, we are sure that one of them will fit your needs and current WordPress knowledge, and help you remove the sidebar without hardship.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>In this article, we&#8217;ll show you how to remove the sidebar in WordPress. Knowing how to do this can help you make polished and professional landing pages. <\/p>\n","protected":false},"author":11229,"featured_media":20935,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-20871","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/20871","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=20871"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/20871\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/20935"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=20871"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=20871"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=20871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}