6 Basic Errors to Avoid When Writing CSS to Customize your Wordpress Theme

Finding a suitable theme for your Wordpress site kickstarts your designing journey. Your next step is to customize the theme and make it suitable to your needs. Interactive and responsive websites are the demand of the hour, and you will need to design your Wordpress site in a way that both these demands are completely fulfilled.

The word customization for a WP theme directly relates to writing CSS. It is at this point that you are bound to make mistakes. Let’s understand how you customize a theme. You initiate the custom file editor, create the required changes and save the changes. When you initiate changes in this manner, you cause broken links in CSS which causes major errors in the theme. You cannot initiate customization in this manner. There are quite a few errors that you make while customizing in the custom file editor. Let’s look at the 6 common errors that most of you make while customizing your themes in this manner.

Tweaking with an Incorrect Selector

Whenever you wish to alter the design of your theme, you tend to open the custom file editor, and create the changes in the design using #content selector instead of the #content-text selector. Instead of altering the layout, this brings forth all the unwanted changes to the theme thus disturbing your design completely. A simple solution to this problem is to cut-paste the designs to the relevant tag, while deleting the designs from the #content tag. This way your design would be customized as per your design needs.

Ground Rules for Selectors

Many times when writing CSS for your Wordpress theme, you tend to forget some basic rules. An excellent example of this would be running through the vital details for selectors. Every selector should have an identifiable CLASS or ID except for those which are identified as HTML tags. An ideal way of defining selectors while writing CSS would be as follows

{property: value; property:value}

For example you want to align your text left and attribute a red color to the text. The selector rule as applicable would be

p{
text-align: left;
color: red;
}

The semi colons and colons along with the open-close braces should be properly placed while writing CSS using selectors.

Choosing the Wrong Template Module

When customizing your theme, you need to be very careful on the template module section you are trying to alter or customize. Many times, despite having the advantage of new modular templates, developers make the mistake of choosing the wrong template module section.

An excellent example of the same would be modifying the template module comments.php instead of comments-popup.php. Altering the correct module section is important. But, just in case you have made the mistake of altering a different module section, you can always use your backup file and restore the default.

Common Spelling Errors

While writing CSS with a purpose of customization, you should know which spellings are applicable and accepted by CSS. A classic mistake developers make is misspelling pixel in CSS. While some write pc others write px. It is best to use CSS validators if you want to refrain from these common mistakes.

Same Information, Multiple References

This is called the comedy of errors in simple language. When you assign a single information to different references, out of habit, CSS gets confused while choosing a particular reference thus causing design errors. This generally arises whenever you try to use your own stylesheet in place of the new stylesheet.

Erroneous File Placement

CSS is very particular about file placement, and as a developer you should have a good idea about it right at the beginning. Before you start customizing, get a good idea on what you are planning to change and where the files are located. The CSS files are placed in styles.css while HTML code is generally found in index.php file. Just locate the CSS selector you want to alter within a particular PHP file and start making the changes. This will save you from causing errors in the main PHP file.

Indeed avoiding these common mistakes while altering CSS to customize your theme will help refrain from spending a lot of time on customization.


Author Bio :

Deepa works as a technical content writer at Silver Touch Technologies. With a B.E. plus MBA combination, and a love for writing, she comes up with fresh and engaging technical content on trending topics especially in web, mobile and ecommerce genres. You can reach out to her if you wish to Hire Wordpress Developers.