How to Customize WordPress Site with CSS

CSS stands for Cascading Style Sheet. It is designing language that controls the overall look and presentation of a web page. Things like colors, fonts, layout, spaces and even images are applied using CSS. How your webpage looks from the front-end is completely depended on CSS. By default, WordPress keeps its main CSS stylesheet inside the style.css file. If you want to implement your own design or change the look of your website, then you will need to create a custom CSS file. This article shows how customize WordPress Site with CSS.

How to Customize WordPress Site with CSS

Implementing the custom CSS is much simpler than you might believe. You can do the same task of adding your CSS design in number of ways. Here are few ways to add CSS in your theme .

Method 1: Editing Your Theme’s style.css File

For many designers directly modifying the default style.css file is the easiest way to add their design. One way to get access to style.css file is from the admin dashboard. Just go to ‘Appearances’ and then ‘Editor’.
How to Customize WordPress Site with CSS

By default this should open the style.css file. But if your style.css file is not open you can go to the right side file list and under Styles heading click Stylesheet(style.css).
How to Customize WordPress Site with CSS

Now in Stylesheet (style.css) file you can add/edit CSS code and implement your design. Make sure you create a backup before making any changes.
How to Customize WordPress Site with CSS

The other way to find stylesheet is to login to your host cpanel and locate theme folder. Once you locate the theme folder you can find style.css easilyAlthough this way looks easier, it has its own drawbacks. If you decide to change theme, you will need to create another CSS. Every theme has a their own CSS file and you will have to code different CSS for different theme.

Method 2: CSS Theme Modification with WordPress Customizer

Most theme will allow you to change some designs of your website from Customization area. The customization area works from the Child CSS file in co-operation with the primary stylesheet. To reach customization area go to ‘Appearance’ and then ‘Customize’ from the dashboard.
How to Customize WordPress Site with CSS

This will open the customizer from where you can easily change the look and design of your website.
How to Customize WordPress Site with CSS

However this customizer allows only the limited sets of changes. Also you will lose the changes when you change theme.

Method 3: CSS Plugins for Customizing WordPress

There are many CSS plugins to make life easier and to add CSS code easily in the theme. The benefit of using plugin is that the design changes in one theme will work for other themes as well. Plugin will automatically save the code of one theme and use it in other theme during theme change. For beginner CSS coders, plugin is a great way to add CSS in WordPress without the fear of crashing the site. Here is a list few popular plugins you can try:

Also Read:   Create XML Sitemaps using Google XML Sitemaps Plugin

Method 4:  Adding Styles to WordPress with Enqueuing

If you are creating your own theme, you may want to add your own custom CSS. While adding styles it is absolutely necessary to add stylesheets using standard WordPress Methods. Using enqueue in function.php to load your stylesheet is the right way since it allows your styles to work with harmony with the existing themes and plugins.

Here is a simple example of adding the stylesheet name custom.css using enqueue. You can add this function in the function.php file with the parameters properly specified.

wp_enqueue_style(custom, get_template_directory_uri() . 'custom.css');

Here wp_enqueue_style() is a function which takes two parameters. The first parameter is the name of the CSS file and second parameter location of the file.

If you have basic understanding of how coding works, using CSS is a great way to take control of overall appearance of your website. No matter which theme you use the above mentioned methods will help you to easily implement the custom CSS in your theme easily.

The following two tabs change content below.

Kantiman Bajracharya

Kantiman Bajracharya is a freelance web developer. He is a computer geek who has a Bachelor’s degree in Computer Engineering. He has earned lots of satisfied customers while working for numerous successful projects. He is also a WordPress theme creator and web article writer. On free time he likes reading philosophy books, traveling and playing chess.

Share This Post