{"id":114558,"date":"2023-01-23T16:53:45","date_gmt":"2023-01-23T16:53:45","guid":{"rendered":"https:\/\/wpsimplefix.com\/?p=114558"},"modified":"2026-09-24T17:42:00","modified_gmt":"2026-09-24T17:42:00","slug":"wordpress-custom-css-codes","status":"publish","type":"post","link":"https:\/\/chkserv.com\/blog\/wordpress-custom-css-codes\/","title":{"rendered":"WordPress Custom CSS Codes"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">There are many plugins out there to customise your website, but you can edit a lot of things by using CSS code. So, let&#8217;s see some examples on what you can do and used to improve your website, without installing half a dozen plugins.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why are these codes used?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">They are used in WordPress and page builders; such as <a href=\"https:\/\/www.elegantthemes.com\/gallery\/divi\/\" target=\"_blank\" rel=\"noopener\">Divi<\/a>, <a href=\"https:\/\/be.elementor.com\/visit\/?bta=207785&amp;nci=5383\" target=\"_blank\" rel=\"noopener\">Elementor<\/a> and <a href=\"https:\/\/www.brizy.io\" target=\"_blank\" rel=\"noopener\">Brizy<\/a>, to change the visual appearance of your website. Sometimes you want to change some design feature what&#8217;s not possible with your theme, but with a bit of CSS code, you can do it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Can&#8217;t I just download that cool plugin what can do it?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Well, no one is stopping you, go right ahead, but plugins can weigh your site down with unnecessary bloat, and you&#8217;re not learning. Using a plugin for one small change is not worth the performance drop, so instead just use CSS codes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, the feature you want may not have been made into a plugin, so you have no choice to learn CSS to accomplish these for your unique website design. You could learn how to make a plugin for your needs and share it with others either a free or paid plugin.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Hide Header<\/h2>\n\n\n\n<pre class=\"wp-block-preformatted has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-1\"><code readonly=\"true\">header{<br>display:none;}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Hide Add to Cart Button in Woocommerce<\/h2>\n\n\n\n<pre class=\"wp-block-preformatted has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-2\"><code readonly=\"true\">.single_add_to_cart_button.button{<br>display:none;}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Hide Breadcrubs<\/h2>\n\n\n\n<pre class=\"wp-block-preformatted has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-3\"><span style=\"font-size: inherit; background-color: rgba(255, 255, 255, 0.2);\">.woocommerce-breadcrub{<\/span><code readonly=\"true\"><xmp>display:none;}<\/xmp><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Remove <post-name> navigation buttons<\/post-name><\/h2>\n\n\n\n<pre class=\"wp-block-preformatted has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-4\"><code readonly=\"true\">.single .post-navigation { display: none;}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Remove Powered by WordPress<\/h2>\n\n\n\n<pre class=\"wp-block-preformatted has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-5\"><code readonly=\"true\">.site-info { display: none;}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Remove reCAPTCHA Logo (Bottom Right)<\/h2>\n\n\n\n<pre class=\"wp-block-preformatted has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-6\"><code readonly=\"true\">.grecaptcha-badge{display:none;}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Remove Back to the top button \/ arrow<\/h2>\n\n\n\n<pre class=\"wp-block-preformatted has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-7\"><code readonly=\"true\">#toTop {<br>display: none !important;}<\/code><\/pre>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">A few ways to add CSS to your website.<br>\n<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I&#8217;ve provided you with some examples you can use CSS for, but you will need to know how to apply them to your website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. Theme Customiser<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Go to <strong>Appearance &gt; Customize &gt; Additional CSS<\/strong> to open the style editor. Then paste your CSS scripts here.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/01\/css-screenshot-1.png\" alt=\"css\" style=\"aspect-ratio:0.5684575389948007;width:328px;height:auto\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2. Child Theme CSS file<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This can only be done if you have a child theme. Although, it won&#8217;t stop you putting it into your main theme style.css file, but when it updates by the developer, it probably will over-right that file, losing your customisation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Go to <strong>Appearance &gt; Theme Files Editor<\/strong>. Now, open the Stylesheet or the style.css file of the child theme.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/chkserv.com\/blog\/wp-content\/uploads\/2023\/01\/childtheme-css.png\" alt=\"childtheme-css\" style=\"aspect-ratio:1.927710843373494;width:800px;height:auto\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are many plugins out there to customise your website, but you can edit a lot of things by using CSS code. So, let&#8217;s see some examples on what you can do and used to improve your website, without installing half a dozen plugins. Why are these codes used? They are used in WordPress and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":121195,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[13,48,49,7],"class_list":["post-114558","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-css","tag-css-codes","tag-custom","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/posts\/114558","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/comments?post=114558"}],"version-history":[{"count":2,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/posts\/114558\/revisions"}],"predecessor-version":[{"id":136707,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/posts\/114558\/revisions\/136707"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/media\/121195"}],"wp:attachment":[{"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/media?parent=114558"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/categories?post=114558"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chkserv.com\/blog\/wp-json\/wp\/v2\/tags?post=114558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}