How to Easily Customize Your Themes Style Sheets Like a Pro

Styling your WordPress theme using CSS code can be achieved the easy way or the hard way. You can either learn CSS coding or you can simply edit your themes existing code.

If you need to customize your WordPress site and style it to your own unique look & feel, there’s a simple way to do it. Problem solved however your changes will be lost when you update your theme so i have a solution for this also.

In this tutorial for beginners, i’ll show you the easiest way to customize the appearance of your site and you can also view a video at the end of this post which shows you from a different perspective.

Create a Folder for Your Customization

As mentioned previously, in order to avoid losing your custom changes, you need to create a child theme.

A child theme is a separate file folder directory for all your custom coding so when you update your theme, your custom coding won’t get overwritten. If you edited the core files of your parent theme, you would lose any customization after updating your theme.

Another option you may have is to use your parent themes custom-style.css file if your theme includes one. Either way, you are creating a separate file folder to save you customization from being lost when you update your theme.

Copy Parent Themes CSS Code

Once you have setup your child theme, copy the CSS code you want to change from your parent themes style.css file to your child theme style.css file.

You don’t need to copy all your parent themes CSS code, you can simply find the block of code which you want to change and make the changes in your child theme.

Caution: Its industry best practice to download a copy of the files you will be working with as backup in case you make a mistake. This way you can easily upload the original file to the correct location and quickly restore your site to normality.

Sometimes, no matter how many design options premium themes offer, you may find you still need to change a particular part of your site that’s not covered in the design panel.

Custom Styling Example

I wanted to change the color of the RSS Subcribe links from the default color, orange to white. There is no way to do this in the themes design options so i simply copied the line of code from the parent themes style.css file to the child themes style.css file and changed the hex code from orange to white.

Copy Parent Themes CSS Code to Child Themes Style.css File

Parent Themes Style.css File

Child Themes Style.css File

I copied Line 208 from the parent themes style.css file to my child themes style.css file and changed the color from #c63foo to #ffffff

Line 41 in the child themes style.css file is the same as Line 208 in the parent themes style.css file except for the change i have made to the hex colour.

Your child theme will overwrite your parent themes style.css file when it loads so all your custom coding appears.

Here’s an excellent video which explains custom styling using two different methods.

Theme Customization Video

Best practises for customizing your WooTheme

Changing Parent Theme Style.css

The above method can be used on any theme you like to fully customize your parent theme using your own styling and decoration preferences.

Some themes also provide a custom.css folder created for the same reasons as a child theme. If you only want to makes changes to your CSS code, you can use the custom css file, if your parent theme includes one. The other option is to create a child theme like i have written about previously.

You can also add custom CSS code which isn’t included in your parent theme to either your parent themes custom.css file or child themes style.css file.

I’ll be writing more tutorials about the easiest and best ways to customize WordPress themes soon.