{"id":572,"date":"2022-01-09T04:03:35","date_gmt":"2022-01-08T22:33:35","guid":{"rendered":"https:\/\/basicwebguide.com\/?p=572"},"modified":"2022-01-09T04:03:35","modified_gmt":"2022-01-08T22:33:35","slug":"how-to-change-the-background-color-of-a-single-page-in-wordpress","status":"publish","type":"post","link":"https:\/\/basicwebguide.com\/how-to-change-the-background-color-of-a-single-page-in-wordpress\/","title":{"rendered":"How To Change The Background Color Of A Single Page In WordPress?"},"content":{"rendered":"<p>There are specific conditions when you want to know how to change the background color of a single page in WordPress. For example, when you want to display a special message like a warning page, franchise page, etc., you would like to <strong>create a page with color<\/strong> or change the background color of a single page in WordPress.<\/p>\n<p>The color transformation of the WordPress page can be done through the plugins as well as with the inherent features of WordPress itself. Although the safest and easiest method is to do this with WordPress, so I will discuss this method here. It could be long, but it is useful.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_61 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/basicwebguide.com\/how-to-change-the-background-color-of-a-single-page-in-wordpress\/#What_are_WordPress_Pages\" title=\"What are WordPress Pages?\">What are WordPress Pages?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/basicwebguide.com\/how-to-change-the-background-color-of-a-single-page-in-wordpress\/#How_to_change_the_background_color_of_a_single_page_in_WordPress\" title=\"How to change the background color of a single page in WordPress?\">How to change the background color of a single page in WordPress?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/basicwebguide.com\/how-to-change-the-background-color-of-a-single-page-in-wordpress\/#Step_1_Find_Your_Specific_Page_ID\" title=\"Step 1: Find Your Specific Page ID\">Step 1: Find Your Specific Page ID<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/basicwebguide.com\/how-to-change-the-background-color-of-a-single-page-in-wordpress\/#Step_2_Find_color_code_for_background\" title=\"Step 2: Find color code for background.\">Step 2: Find color code for background.<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/basicwebguide.com\/how-to-change-the-background-color-of-a-single-page-in-wordpress\/#Step_3_Add_Page-Id_to_Custom_CSS_code_of_WordPress\" title=\"Step 3: Add Page-Id to Custom CSS code of WordPress\">Step 3: Add Page-Id to Custom CSS code of WordPress<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/basicwebguide.com\/how-to-change-the-background-color-of-a-single-page-in-wordpress\/#Final_Words\" title=\"Final Words\">Final Words<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_are_WordPress_Pages\"><\/span><strong>What are WordPress Pages?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>WordPress pages are an essential part of a Website and reflect your mission, vision, and contact details. These pages are <strong>About us, Contact us, Privacy Policy, GDPR, etc<\/strong>. You can <strong>create and edit<\/strong> as many pages as you want, and they are not a ranking factor.<\/p>\n<p>You can create a WordPress page by following steps:<\/p>\n<ul>\n<li>First, log in to your <strong>WordPress account<\/strong> with your username and password.<\/li>\n<li>On the left side, you will find various options. Locate the <strong>pages<\/strong> button and click on the <strong>new page<\/strong> option.<\/li>\n<li>Next, give a title and body to your page, whatever page you want to create.<\/li>\n<li>Next, you can add images, videos, and links to the page for a powerful message.<\/li>\n<li>Finally, tap on the <strong>Publish<\/strong> button on the right side of the page.<\/li>\n<\/ul>\n<p>It is the simplest method to create a page, and similarly, you can also edit any page. Although I already had discussed <strong><a href=\"https:\/\/basicwebguide.com\/how-to-edit-pages-in-wordpress\/\">how to edit WordPress pages<\/a> for a detailed guide<\/strong>, you must read it.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_change_the_background_color_of_a_single_page_in_WordPress\"><\/span><strong>How to change the background color of a single page in WordPress?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To change the background color, you need to follow two steps very carefully; otherwise, everything could be messed up. These two steps are:<\/p>\n<ol>\n<li>Get the <strong>page ID<\/strong> whose color you want to change.<\/li>\n<li>Find color code for background.<\/li>\n<li>Add the page ID to <strong>CSS code<\/strong> to change the background color.<\/li>\n<\/ol>\n<p>I am going into detail for these two steps to change the background color of a single page in WordPress. Follow strictly to avoid any errors.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_1_Find_Your_Specific_Page_ID\"><\/span><strong>Step 1: Find Your Specific Page ID<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To find your specific page ID, you again have two methods; One from the <strong>Page section<\/strong> of WordPress and the Other from the <strong>page source code.<\/strong><\/p>\n<ul>\n<li><strong>Page Section<\/strong>: Go to the pages section in your WordPress dashboard and open all pages. Here select any of the pages whose color you want to change. To get your Page ID,<strong> hover your mouse on the edit option<\/strong> and stop there. At the bottom of the page, you can see a code displayed, which also holds your Page ID. It would be written as <strong>post=id&amp;action,<\/strong> and at the place of id, your page id number will appear. Note it to the notepad or remember it for future reference.<\/li>\n<\/ul>\n<p style=\"text-align: center;\"><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-578 size-full\" src=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-08-121637.png\" alt=\"change the background color of a single page in wordpress\" width=\"799\" height=\"184\" srcset=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-08-121637.png 799w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-08-121637-300x69.png 300w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-08-121637-768x177.png 768w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-08-121637-20x5.png 20w\" sizes=\"(max-width: 799px) 100vw, 799px\" \/><\/p>\n<ul>\n<li><strong>Page Source Code<\/strong>: To access page source code, open any page whose color you want to change by clicking on a <strong>view<\/strong>. Perform right-click with your mouse, search for <strong>view page source,<\/strong> and click on it. The source code of the page appears on the new screen. Hit <strong>Ctrl+F<\/strong> to find the page ID by typing <strong>page-id<\/strong> and hitting enter. The page id will be displayed as shown below.\n<p style=\"text-align: center;\">\n<\/li>\n<\/ul>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"aligncenter wp-image-579 size-full\" src=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-07-192304.png\" alt=\"how to change the background color of a single page\" width=\"1012\" height=\"348\" srcset=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-07-192304.png 1012w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-07-192304-300x103.png 300w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-07-192304-768x264.png 768w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-07-192304-20x7.png 20w\" sizes=\"(max-width: 1012px) 100vw, 1012px\" \/><img decoding=\"async\" class=\"aligncenter wp-image-580 size-full\" src=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-07-192117.png\" alt=\"change the background color of a single page in wordpress\" width=\"1548\" height=\"405\" srcset=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-07-192117.png 1548w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-07-192117-300x78.png 300w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-07-192117-1024x268.png 1024w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-07-192117-768x201.png 768w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-07-192117-1536x402.png 1536w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-07-192117-20x5.png 20w\" sizes=\"(max-width: 1548px) 100vw, 1548px\" \/><\/p>\n<p>These are the methods to find the source code; you need to copy this page id and use it as CSS code in further steps.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_2_Find_color_code_for_background\"><\/span><strong>Step 2: Find color code for background.<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>I would suggest using an <a href=\"https:\/\/htmlcolorcodes.com\/\" target=\"_blank\" rel=\"noopener\"><strong>HTML color code<\/strong><\/a> website, the easiest and free website to find different color codes. You can select any color of your wish from the 16.7 million color and color codes.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-587 size-full\" src=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-08-184306.png\" alt=\"how to change the background color of a single page in wordpress\" width=\"616\" height=\"301\" srcset=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-08-184306.png 616w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-08-184306-300x147.png 300w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-08-184306-20x10.png 20w\" sizes=\"(max-width: 616px) 100vw, 616px\" \/><\/p>\n<p>Hover your mouse over the colors and adjust the <strong>color beam<\/strong> to find the color of your choice. Once you find the perfect color for the page, note down the color code with #, and this will be used in step 3. In our example case above, the color code is <strong>#CA2209.<\/strong><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_3_Add_Page-Id_to_Custom_CSS_code_of_WordPress\"><\/span><strong>Step 3: Add Page-Id to Custom CSS code of WordPress<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Now you need to add your <strong>page id to the CSS<\/strong> to change the background color of a single page in WordPress. To locate the CSS, follow the below steps:<\/p>\n<ul>\n<li>Log in to your WordPress account and heads to the <strong>Appearance<\/strong> at the left sidebar.<\/li>\n<li>Here you can see various options under Appearance; tap on the customize option.<\/li>\n<\/ul>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-581 size-full\" src=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-08-162315.png\" alt=\"how to change the background color of a single page in wordpress\" width=\"487\" height=\"241\" srcset=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-08-162315.png 487w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-08-162315-300x148.png 300w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-08-162315-20x10.png 20w\" sizes=\"(max-width: 487px) 100vw, 487px\" \/><\/p>\n<ul>\n<li>The new page will open that displays the homepage of your website, and at the left sidebar, you can access various settings.<\/li>\n<li>Scroll down, and you will find the <strong>Custom CSS<\/strong> at the bottom of the page, click on that.<\/li>\n<li>You can see the page&#8217;s code here, scroll down and find the <strong>existing page id<\/strong> adjacent to the background color.<\/li>\n<\/ul>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-586 size-full\" src=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-08-181733.png\" alt=\"how to change the background color of a single page in wordpress\" width=\"448\" height=\"117\" srcset=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-08-181733.png 448w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-08-181733-300x78.png 300w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-08-181733-20x5.png 20w\" sizes=\"(max-width: 448px) 100vw, 448px\" \/><\/p>\n<p>You need to <strong>replace the existing page id<\/strong> with the id and background <strong>color code<\/strong> (starting from #) that you find above in <strong>step 1.<\/strong> You can also create a new<strong>\u00a0CSS code<\/strong> and use any background color you want.<\/p>\n<p>Once you make changes, tap on the top of the <strong>Publish<\/strong> button and check the color. If you find any issues in changing color, I will suggest deleting the cache and trying again.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Final_Words\"><\/span><strong>Final Words<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>It is all about <strong>how to change the background color of a single page in WordPress<\/strong> in simple steps. We learned first how to find the page id of a particular page using the page section and source code.<\/p>\n<p>In the 2nd step, we learned how to get <strong>background color codes<\/strong> for a page, and in the 3rd step, we used the above two steps to change the color of a particular page.<\/p>\n<p>I recommend following each step carefully as described because a bit of mistake can mess all the colors; however, you can <a href=\"https:\/\/basicwebguide.com\/how-to-undo-changes-in-wordpress\/\">undo a change in WordPress<\/a>, as I discussed in the previous article.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are specific conditions when you want to know how to change the background color of a single page in WordPress. For example, when you want to display a special message like a warning page, franchise page, etc., you would like to create a page with color or change the background color of a single [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":590,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[362],"tags":[751,741,736,755,754,734,731,753,752,756,757,738,748,747,749,746,730,750,745,739,737,732,742,735,744,740,733,743],"_links":{"self":[{"href":"https:\/\/basicwebguide.com\/wp-json\/wp\/v2\/posts\/572"}],"collection":[{"href":"https:\/\/basicwebguide.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/basicwebguide.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/basicwebguide.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/basicwebguide.com\/wp-json\/wp\/v2\/comments?post=572"}],"version-history":[{"count":9,"href":"https:\/\/basicwebguide.com\/wp-json\/wp\/v2\/posts\/572\/revisions"}],"predecessor-version":[{"id":591,"href":"https:\/\/basicwebguide.com\/wp-json\/wp\/v2\/posts\/572\/revisions\/591"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/basicwebguide.com\/wp-json\/wp\/v2\/media\/590"}],"wp:attachment":[{"href":"https:\/\/basicwebguide.com\/wp-json\/wp\/v2\/media?parent=572"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/basicwebguide.com\/wp-json\/wp\/v2\/categories?post=572"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/basicwebguide.com\/wp-json\/wp\/v2\/tags?post=572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}