How to avoid basic errors when you're customising a WP theme.
Irrespective of how widespread the use of WordPress has been, a lot of users are still making simple mistakes while writing the CSS for WordPress themes. In this article, we'll take you through six common mistakes which we've found being made even by professional developers. Firstly, let's get a clearer picture of what we mean by CSS errors in WordPress theme customisation projects.
Consider a scenario where you've found your favourite WordPress theme and have installed it, realising that it requires some small changes. Now, what you do? You simply open the custom file editor and make the changes, followed by hitting the 'Save' button. It is only now that you realise that your website has broken down. The reason for this is some or the other mistake made while writing the CSS for the installed WordPress theme.
Let's now look at some of those mistakes.
01. Opting for the wrong selector
While tweaking the layout of your WordPress theme, there might be situations when you choose to put all your designs in #content instead of #content-text. Doing this won't help your layout in any way. All the unwanted changes made to the theme using such an approach will be visible once the theme is being previewed. The simple fix for this is cutting and pasting these designs in the appropriate tag, in addition to deleting the designs from the #content tag.
02. Incorrect template module
Often, WordPress developers tend to make modifications in the comments.php file instead of comments-popup.php file. Therefore, even with the existence of multiple modular templates in WordPress, there are chances for messing up everything. It is advised to double-check the modular section you're supposed to be working on throughout your WP theme customisation project.
03. Forgetting vital details about CSS
Despite being amazingly creative with the CSS, there are times when developers tend to forget the ground rules they ought to follow. For example, it is mandatory for every selector to be identified as an ID or CLASS unless and until it is a HTML TAG. Plus, this selector must be laid out in the format shown below:
selector { property: value; property: value; }
Here, the braces, colon and semi-colon must be included without fail. Missing even a single detail can make things go awry. Fortunately, the CSS Validators will catch up all the little details that you tend to forget but it is better to get it right in the first instance.
04. Placing the files incorrectly
If you're new to CSS then it's a good idea to get a good understanding of file placement. You need to know about the files that you'll be working on. With all the CSS styles being available in the style.css file of the WP theme folder, you must be familiar with the fact that the HTML code can be found in the index.php file and also the PHP files stored in the theme's folder. So, you can easily make changes to specific CSS selector tags within your PHP files, instead of touching your PHP files.
05. Spelling mistakes
Just as some use 20pc instead of 20px, there are many spelling mistakes which have become a common component of every CSS writing project. Even if you are an expert, everyone can make typos. In simple terms, using 20pc for a margin won't fetch you any results but 20px will. Since it is quite easy to overlook spelling errors, I recommend you using the CSS Validators which will easily catch a majority of spelling mistakes you've made.
06. Multiple choices
As a WordPress developer, you may have made the mistake of assigning more than one reference to a single selector. This is a situation where multiple selectors get loaded with some conflicting information, making it quite challenging to decide which one to use for fetching the desired results. This problem occurs when you intend to bring your default/original style sheet over a new one.
Words: Emily Heming
Emily Heming is a professional WordPress developer for a leading PSD to WordPress conversion company. She also provides conversion services like HTML to WordPress theme and more.
