Beginner's Guide: How to customize CSS with WordPress

web design, wordpress 946 Comments

CSS, abbreviated for Cascading style sheet, is a 'beautiful language'. In that it's responsible for a lot of the aesthetic appeal any WordPress website interface (front end, that is) can possibly have. Unless you are deliberately going for absolutely tasteless, you will have to write and customize some CSS on your WordPress website.

See Also: Why You Should Use CSS in Website Creation

WordPress CSS takes care of basic style elements like colors, positioning of interface elements, whitespace (padding) between said elements, fonts, even animation and effects (in some cases), etc.

In this post, I have listed some of the ways with which you too can customize CSS with WordPress. Here you go:

Beginners Guide: How to customize CSS with WordPress

1. Style.CSS

Every website, be it WordPress or not, has a style.CSS file that contains the programming language equivalent of 'style guide' which your web pages' elements have to follow across the website.

In WordPress, you can find this file via your admin dashboard - go to Appearance > Editor and on the right hand side of the resulting screen, you will see a list of all the theme files.

Scroll until you find the file this point is named after (style.CSS) and click it. This will open the central stylesheet that dictates the presentation of elements on your WordPress website (changes with every theme).

You can edit this file right here on the screen, although it is not recommended for a variety of reasons I'll illuminate in a moment.

Edit Style.CSS

Another way to get to this stylesheet is via your installation directory (FTP client necessary to access). You will need to go to path wp-content/ themes, find the directory named after the theme (that you want to customize) open it, and find style.CSS for that specific theme.

If you required permission from your web host (some hosting providers forbid users from editing directory files), you can open and edit the style.CSS file with snippets or with the help of a WordPress developer.

2. Child Theme

This is the recommended method if you want to make any changes pertaining to your WordPress theme.

To visualize, imagine a car, with WordPress as the engine, and your WordPress theme as the body. Now, in this particular analogy, a child theme will be the equivalent of any changes/ customizations you can make to the body of the car without changing it irreversibly. This will include a paint job (chrome optional), leather seat covers, tinted windows, and assorted accessories.

Since WordPress themes have their own bevy of features, a child theme for that specific theme can override those features if you so wish. A child theme is loaded before the (original) parent theme. So to your visitors, your theme's features and appearance will look as directed in the child theme (assorted customization of the car in our analogy) while the parent theme will still retain all its features and most of all - the code (the actual body of the car).

Now, if your parent theme is updated (when an update is available from the WordPress development company who authored the theme) your changes will still be there and the update will still go without removing any of them from existence.

Child Theme

Theme frameworks like Genesis, Cherry, Hybrid Core, etc. all work on this principle, which is why you need to buy the $100 theme+ Genesis framework combo at least once before you can simply opt for the 'child' theme variants that StudioPress has to offer.

You can find instructions on how to create a WordPress child theme in minutes anywhere you look on the web.

3. CSS Editing Plugins

WordPress plugins solve everything.

Adding custom CSS to WordPress themes using plugins is easy and actually saves a lot of time and effort. It's one step above creating your own WordPress child theme, for sure. Take a look at some of the plugins you can use to this effect:

3.1) Simple Custom CSS

Simple Custom CSS is a popular plugin that will let you add custom CSS to your WordPress theme. It currently has over 200,000 active installs and a user rating of 4.9 stars out of 5, which means you can rest assured of the plugin quality and trustworthiness.

Simple Custom CSS WordPress Plugin

It's a basic and lightweight plugin which theme developers can put to good use when they customize CSS with WordPress.

3.2) Theme Junkie Custom CSS

Theme Junkie Custom CSS is good for those who pay attention to nuances and want to see their changes in action in real time.

Theme Junkie Custom CSS WordPress Plugin

The plugin appears as Custom CSS manager in your WordPress admin dashboard and will let you not just customize your CSS but also create child themes at the click of a button.

It's also very well used and highly rated WordPress plugin.

End Note

It's important for WordPress beginners to keep in mind that while customizing CSS with WordPress, the best approach is to start not with frameworks, but with self created child themes of WordPress default themes like Twenty Fifteen.

This will teach you much about WordPress CSS (and other language specific) coding standards and good practices.

themeforest banner
elegant themes banner

Related Articles:

You may be interested in:

This post is brought to you by Tracey Jones, a professional web developer for HireWPGeeks Ltd. which provides custom WordPress theme development services for businesses. Apart from all these things, she is a serial blogger who loves to share her innovative ideas with readers on the web.

Would you like to contribute to this site? Get started ยป
Rate this article:
(5.0 rating from 2 votes)

Comments