Often after spending your valuable time in creating one-of-its-kind of WordPress website layout may not produce the expected outcomes. Wondering what would have gone wrong? You may rack your brains thinking of the possibility that caused your layout to appear in the incorrect manner, but odds are that you’ll immediately look into your CSS to find the mistakes you’ve made.
Through this post, I would like to tell you about 10 of the most common CSS mistakes designers or developers often make when customizing a WordPress theme.
1. Spelling mistakes
No matter, whether you’re a novice or an experienced designer one common CSS mistake you’ll most likely make is missed spelling errors. Customizing your theme via CSS isn’t an easy task, as it requires you to focus on several aspects. And so, it’s easy to make spelling errors. For example, it’s pretty common to write “right” as “rightt”, or you may enter margin as “5pc” when it needs to be defined as “5px”. Thanks to CSS validator, you can easily know about the missed spelling mistakes you’ve made.
2. Putting your designs in the wrong selector
Aren’t you able to view the changes you made to your WordPress theme layout? One possible reason behind this could be that you’ve put your design in the wrong CSS selector. For instance, placing your design in #content when it needed to be placed within #content-design won’t let you view the tweaks made to the layout. You can fix this issue, simply by cutting and pasting your design from the wrong selector to the right tag.
3. Not creating a backup
Even though, you’re following some precautions when making tweaks to your WordPress theme’s stylesheet, you can still make mistakes leading to loss of data. But, creating a backup of your CSS files can help you recover all your data. Moreover, considering the fact that even making a little mistake such as the misplacing of a comma or semicolon in the stylesheet can make your theme layout a mess, it is very important that you should maintain regular backup of the files.
4. Modifying the wrong template module
WordPress contains new and remarkably useful modular templates, however, developers often make mistake when modifying the module template. This happens, as the template files have resembling names. For example, when customizing the sidebar of your WordPress theme, it’s too easy to make all the changes within the sidebar.php when they’re meant to be made within the sidebar1.php file. This is where a backup will come in handy. You can run the backup to recover the lost code.
5. Not following the CSS ground rules
Irrespective of being a highly skilled creative with CSS, you can still forget to abide by the ground rules. The basic rule, you can’t afford to miss out when working on a stylesheet is that every selector needs to be determined as an ID or CLASS excluding the HTML Tag. Besides this, it is imperative that the selector is defined in the below given format:
selector { property: value; property: value; }
Make sure that all the little details which includes the braces, colon and semi-colon ought to be incorporated within your CSS selectors. That’s because, even missing out one of those detail won’t let your CSS to work properly. Luckily, CSS Validators once again can help you overcome this problem, by letting you know about the little details that you’ve forgotten.
6. Inadequate knowledge of file placement
In case you have just started working with CSS, one important thing you should become familiar about is file placement. While CSS styles are usually saved in the style.css file of your WordPress theme’s folder stored in the path: wp-content/themes/themename. However, the HTML code is kept in the index.php file. So, in order to make changes to the CSS selector tags, you just need to locate the styles.css or the stylesheet.css file in your theme’s folder.
7. Multiple choices
At times, developers create two different references for the same CSS selectors, containing conflicting information. Sadly, CSS cannot read a user’s mind, and fails to decide which reference needs to be used first. This issue usually crops up when an existing CSS stylesheet resides on the top of a new one. For example, if you’ve added a h2 heading in your stylesheet and nothing changes, you should search the stylesheet thoroughly to see whether it contains any second reference to the selector you’ve used.
8. Inadequate comments and description
Though documentation seems a little boring at first, but it proves a lot useful for beginners willing to learn about the code you’ve included in your CSS. Well, there could be situations when your CSS files need to be worked upon by some other designer. In that case, adding comments and brief description within your CSS files can guide other professionals to work in the right direction.
9. Unfamiliarity With CSS Selectors
In order to be able to customize your WordPress layout in the right manner without having to write long line of code, it is very important for you to know about the different CSS selectors that can be implemented in your stylesheet.
10. Redundancy
Redundancy means writing repetitive code in your CSS. This is a common problem that you won’t encounter when writing or modifying the CSS file of your WordPress theme, but also in other CMS platforms as well. It’s a known fact that repetitively writing the code leads to wastage of time. Let’s look at an example:
.some-title { font-weight: bold; }
.some-other-title { font-weight: bold; color: yellow }
As you can see in the code above, “ font-weight: bold” is getting repeated twice. You can avoid the redundancy by grouping them as shown in the following lines of code:
.some-title, .some-other-title { font-weight: bold; }
.some-other-title { color: yellow; }
Wrapping Up!
Hope that going through this post will help you avoid the CSS mistakes you can make when customizing your WordPress website theme.