{"id":4583,"date":"2017-01-19T02:29:18","date_gmt":"2017-01-19T08:29:18","guid":{"rendered":"https:\/\/weblizar.com\/?p=4583"},"modified":"2025-08-13T10:48:56","modified_gmt":"2025-08-13T05:18:56","slug":"customize-wordpress-site-adding-custom-css","status":"publish","type":"post","link":"https:\/\/weblizar.com\/blog\/customize-wordpress-site-adding-custom-css\/","title":{"rendered":"How To Customize WordPress Site By Adding Custom CSS"},"content":{"rendered":"

<\/del>Many times we want things according to our way, especially when we are paying for the things. WordPress themes are one of them and it consists of a deep and dense jungle of thousands of line of code which makes one perfect theme. It’s pretty hard for a non-techy\u00a0person to crawl into this web of code and customize it according to its own need. In this article, we will show you how to customize wordpress site by adding custom CSS without editing any theme files.<\/p>\n

There are two ways to which we can add a custom CSS to our wordpress theme,<\/p>\n

1st Method: Using Theme in-built Options<\/span><\/h3>\n

As soon as WordPress 4.7 (Vaughan) launched it brought along a lot of new changes and adding a custom css is one of them, users can now add custom CSS directly from WordPress admin area.\u00a0This is extremely easy to do and as usual, users can now see the live preview as soon as they are making any changes to the website.<\/p>\n

Head over to Themes \u00bb\u00bb\u00bb Customize<\/strong> page.<\/p>\n

\"themecustomize-How-To-Customize-WordPress-site-By-Adding-Custom-CSS\"<\/a><\/p>\n

 <\/p>\n

As soon as you’ll click on customize,\u00a0WordPress theme customizer interface will be launched.<\/p>\n

You will see your site\u2019s live preview with a bunch of options on the left pane. Click on the Additional CSS tab at the last in the left pane.<\/p>\n

\"additional-css-files-How-To-Customize-WordPress-site-By-Adding-Custom-CSS\"<\/a><\/p>\n

 <\/p>\n

Through this tab, you can add your custom CSS and as soon as you add a correct CSS rule, you will be able to see the changes on your website\u2019s live preview box on the right.<\/p>\n

\"css-preview-How-To-Customize-WordPress-site-By-Adding-Custom-CSS\"<\/a><\/p>\n

You can add multiple custom CSS code, to make changes to your website. Add the code until the site becomes as you want it to be, but don’t forget to hit the ‘Save and Publish’ button once you are done with your changes.<\/p>\n

Note:<\/strong> Any custom CSS that you add using theme customizer is only available with that particular theme. If you would like to use it with other themes, then you will need to copy and paste it to your new theme using the same method.<\/p>\n

2nd Method: With The Help Of Plugin<\/span><\/h3>\n

As method name suggest, we will require a plugin to help us edit our websites CSS. It is majorly useful for users who using the previous version than WordPress 4.7.<\/p>\n

The first thing you need to do is install and activate the Simple Custom CSS<\/a> plugin. Upon activation, you need to go to Appearance \u00bb\u00bb\u00bb Custom CSS<\/strong>\u00a0and paste or write down your CSS code.<\/p>\n

\"custom-css-plugin-How-To-Customize-WordPress-site-By-Adding-Custom-CSS\"<\/a><\/p>\n

 <\/p>\n

Always remember to press the \u2018Update Custom CSS\u2019 button to save your CSS.<\/p>\n

The custom CSS that you have implemented is now live, you can see it in action on the live version of your website.<\/p>\n

Note:<\/strong> Another sure shot advantage of using this method is that your custom CSS will be available even when you change your theme.<\/p>\n

Using a Custom CSS plugin vs Adding CSS in Theme<\/span><\/h3>\n

Both methods described above are recommended for beginners as advanced users have the privilege to add custom CSS directly to their themes as they have sound knowledge of the consequences they can bear if a single piece of code goes wrong.<\/p>\n

However, adding custom CSS snippets into your parent theme is not recommended. Your CSS changes will be lost if you accidentally update the theme without saving your custom changes.<\/p>\n

The best way to get rid of all problems at once is to implement changes on a child theme. However, many beginners don\u2019t want to or don’t know how to create a child theme<\/a>. Apart from adding custom CSS they really don\u2019t know how they will be using that child theme.<\/p>\n

Added advantage of using custom CSS plugins is that it allows you to store your CSS away from your main theme so that in the case of any updates, there will be no harm either to your CSS files or to your main theme. This way you can easily switch themes and your custom CSS will still be there.<\/p>\n

Another great way to add custom CSS to your WordPress site is by using the CSS Hero<\/a> plugin. This wonderful plugin allows you to edit almost everything in your WordPress site without writing a single line of code. Sounds interesting, isn’t it!<\/p>\n

There is a video guide of this blog post, for people who find reading as their last hope, do check out this video<\/a>.<\/p>\n

We hope this article helped you to learn how to customize wordpress site by adding custom CSS. You may also want to see how our guide on how to setup Google AMP ( Accelerated Mobile Pages)<\/a> on your website as the new google search update demands it or in that case learn about some SEO tips to follow for 2017<\/a>.<\/p>\n

If you liked this article, then please subscribe to our YouTube Channel<\/a> for more amazing WordPress video tutorials. You can also find us on Twitter and Facebook<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Many times we want things according to our way, especially when we are paying for the things. WordPress themes are one of them and it consists of a deep and dense jungle of thousands of line of code which makes one perfect theme. It’s pretty hard for a non-techy\u00a0person to crawl into this web of<\/p>\n","protected":false},"author":5,"featured_media":4607,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[35,20,24],"tags":[277,278,279,280,281,282,283,284,285,286,287],"class_list":["post-4583","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-cms","category-themes","category-word-press","tag-add-css","tag-css-editor","tag-css-stylesheet-editor","tag-css-themes","tag-css-wordpress","tag-custom-css","tag-custom-css-wordpress","tag-how-to-edit-css","tag-wordpress-css","tag-wordpress-cutom-css","tag-wordpress-edit-css"],"yoast_head":"\nHow To Customize WordPress Site By Adding Custom CSS<\/title>\n<meta name=\"description\" content=\"Customizing your WordPress Site according to your needs is one tough job. Learn How To Customize WordPress Site By Adding Custom CSS through easy steps.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/weblizar.com\/blog\/customize-wordpress-site-adding-custom-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Customize WordPress Site By Adding Custom CSS\" \/>\n<meta property=\"og:description\" content=\"Customizing your WordPress Site according to your needs is one tough job. Learn How To Customize WordPress Site By Adding Custom CSS through easy steps.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/weblizar.com\/blog\/customize-wordpress-site-adding-custom-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Weblizar Blog\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/www.facebook.com\/weblizarwp\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-19T08:29:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-13T05:18:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/weblizar.com\/blog\/wp-content\/uploads\/2017\/01\/css-style-edit.jpg?fit=550%2C306&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"550\" \/>\n\t<meta property=\"og:image:height\" content=\"306\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Danish Ansari\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@weblizar\" \/>\n<meta name=\"twitter:site\" content=\"@weblizar\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Danish Ansari\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Customize WordPress Site By Adding Custom CSS","description":"Customizing your WordPress Site according to your needs is one tough job. Learn How To Customize WordPress Site By Adding Custom CSS through easy steps.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/weblizar.com\/blog\/customize-wordpress-site-adding-custom-css\/","og_locale":"en_US","og_type":"article","og_title":"How To Customize WordPress Site By Adding Custom CSS","og_description":"Customizing your WordPress Site according to your needs is one tough job. Learn How To Customize WordPress Site By Adding Custom CSS through easy steps.","og_url":"https:\/\/weblizar.com\/blog\/customize-wordpress-site-adding-custom-css\/","og_site_name":"Weblizar Blog","article_publisher":"http:\/\/www.facebook.com\/weblizarwp","article_published_time":"2017-01-19T08:29:18+00:00","article_modified_time":"2025-08-13T05:18:56+00:00","og_image":[{"width":550,"height":306,"url":"https:\/\/i0.wp.com\/weblizar.com\/blog\/wp-content\/uploads\/2017\/01\/css-style-edit.jpg?fit=550%2C306&ssl=1","type":"image\/jpeg"}],"author":"Danish Ansari","twitter_card":"summary_large_image","twitter_creator":"@weblizar","twitter_site":"@weblizar","twitter_misc":{"Written by":"Danish Ansari","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/weblizar.com\/blog\/customize-wordpress-site-adding-custom-css\/#article","isPartOf":{"@id":"https:\/\/weblizar.com\/blog\/customize-wordpress-site-adding-custom-css\/"},"author":{"name":"Danish Ansari","@id":"https:\/\/weblizar.com\/blog\/#\/schema\/person\/d317218747ba5e5aa51886062ac0b628"},"headline":"How To Customize WordPress Site By Adding Custom CSS","datePublished":"2017-01-19T08:29:18+00:00","dateModified":"2025-08-13T05:18:56+00:00","mainEntityOfPage":{"@id":"https:\/\/weblizar.com\/blog\/customize-wordpress-site-adding-custom-css\/"},"wordCount":831,"commentCount":2,"image":{"@id":"https:\/\/weblizar.com\/blog\/customize-wordpress-site-adding-custom-css\/#primaryimage"},"thumbnailUrl":"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2017\/01\/css-style-edit.jpg","keywords":["add css","css editor","css stylesheet editor","css themes","css wordpress","custom css","custom css wordpress","how to edit css","wordpress css","wordpress cutom css","wordpress edit css"],"articleSection":["PHP CMS","Themes","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/weblizar.com\/blog\/customize-wordpress-site-adding-custom-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/weblizar.com\/blog\/customize-wordpress-site-adding-custom-css\/","url":"https:\/\/weblizar.com\/blog\/customize-wordpress-site-adding-custom-css\/","name":"How To Customize WordPress Site By Adding Custom CSS","isPartOf":{"@id":"https:\/\/weblizar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/weblizar.com\/blog\/customize-wordpress-site-adding-custom-css\/#primaryimage"},"image":{"@id":"https:\/\/weblizar.com\/blog\/customize-wordpress-site-adding-custom-css\/#primaryimage"},"thumbnailUrl":"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2017\/01\/css-style-edit.jpg","datePublished":"2017-01-19T08:29:18+00:00","dateModified":"2025-08-13T05:18:56+00:00","author":{"@id":"https:\/\/weblizar.com\/blog\/#\/schema\/person\/d317218747ba5e5aa51886062ac0b628"},"description":"Customizing your WordPress Site according to your needs is one tough job. Learn How To Customize WordPress Site By Adding Custom CSS through easy steps.","breadcrumb":{"@id":"https:\/\/weblizar.com\/blog\/customize-wordpress-site-adding-custom-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/weblizar.com\/blog\/customize-wordpress-site-adding-custom-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/weblizar.com\/blog\/customize-wordpress-site-adding-custom-css\/#primaryimage","url":"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2017\/01\/css-style-edit.jpg","contentUrl":"https:\/\/weblizar.com\/blog\/wp-content\/uploads\/2017\/01\/css-style-edit.jpg","width":550,"height":306,"caption":"css-style-edit"},{"@type":"BreadcrumbList","@id":"https:\/\/weblizar.com\/blog\/customize-wordpress-site-adding-custom-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/weblizar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Customize WordPress Site By Adding Custom CSS"}]},{"@type":"WebSite","@id":"https:\/\/weblizar.com\/blog\/#website","url":"https:\/\/weblizar.com\/blog\/","name":"Weblizar Blog","description":"Update yourself with all the latest tech news revolving around wordpress all at one place","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/weblizar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/weblizar.com\/blog\/#\/schema\/person\/d317218747ba5e5aa51886062ac0b628","name":"Danish Ansari","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/8578053f8112ac6a0c136fbc87a10af48375433622bcb3df612e573bd2513ef6?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8578053f8112ac6a0c136fbc87a10af48375433622bcb3df612e573bd2513ef6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8578053f8112ac6a0c136fbc87a10af48375433622bcb3df612e573bd2513ef6?s=96&d=mm&r=g","caption":"Danish Ansari"}}]}},"_links":{"self":[{"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/posts\/4583","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/comments?post=4583"}],"version-history":[{"count":0,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/posts\/4583\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/media\/4607"}],"wp:attachment":[{"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/media?parent=4583"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/categories?post=4583"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/weblizar.com\/blog\/wp-json\/wp\/v2\/tags?post=4583"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}