As someone who’s absolutely thrilled about creating a web design using WordPress, there’s a good news for you. WordPress comes equipped with a wide collection of interactive theme that can add that much-needed tint of elegance to your WP site/blog. Moreover, the best part is that you can easily perform some simple tweaks to these themes for making them suit your preferences in the best manner. You can go ahead with modifying the look and feel of your site’s layout by making changes to the theme’s CSS file(also known as style.css). While your entire journey of working on CSS file might be filled with lots of creativity, there are situations when you might end up making mistakes. This post has been written to make you familiar with 8 such mistakes that are commonly committed by WP users who’re intending to moderate their theme for an enhanced visual appearance and overall functionality. So, let’s get started!
-
Forgetting critical details about CSS
- 8 Commonly committed mistakes while writing CSS for WordPress theme
Even after being immensely creative in modifying the CSS, there are situations when developers tend to forget the ground rules. For instance, there is a rule as per which it is mandatory for every selector to be uniquely identified as a CLASS or ID unless it is an HTML TAG. Additionally, the format for this selector should be like this:
selector { property: value; property: value; }
In the above format, the braces, colon and semi-colon must not be skipped. Thanks to CSS Validators which catch up all the minute details that you tend to forget about moderating the CSS stylesheet.
-
Choosing a wrong selector for your design
There are situations when even after putting in your best efforts into creating a brilliant design, the same fails to work in the desired manner. This is a CSS issue which arises out of placing the selector in a wrong selector. For example, placing the design in “#content” instead of “#content-text” would affect the layout negatively. An easy solution to this problem is cutting and pasting the design in the correct tag. After having placed the design in the appropriate tag, don’t forget to delete the design that has been placed into the wrong selector.
-
Choosing an incorrect template module
There are times when WordPress developers might perform modifications in comments.php file instead of comments-pop-up.php file. Hence, it is recommended to double-check the template that you’re supposed to be working on. This is mandatory for eliminating any chances of messing up the entire WordPress theme customization project.
-
Ignoring the styling of Blockquote element
There’s no need for getting into hassles for styling the blackquote element. All you need to do is simply add certain margins and opt for a non-regular font for adding weightage to the visual appeal of your theme. By using an attractive image for your background, it becomes convenient to take your site/blog to new heights of excellence.
-
Ignoring the spelling errors
As a designer struggling hard to meet the project deadlines, you might have definitely made some or the other spelling mistakes. This is something which is a common component of WordPress theme moderation projects as well. For example, writing 35ps instead of 35px for setting the margin in CSS will make things bad for your layout. It’s quite common to overlook such missed spellings, but thanks to CSS validators, you can stay updated about any bugs cropped in due to missed spellings.
-
Maintaining a single reference for every selector
Under a scenario wherein you’re interested in overriding the new CSS style sheet on the original stylesheet, CSS might find it quite challenging to detect the selector via single reference. Therefore, it is recommended to use multiple references for every single selector that you use for customizing your WordPress theme.
-
Conflicts arising out of multiple choices in terms of references for selector
WordPress users often tend to assign same information to more than one reference. This makes it difficult for CSS to determine as to which reference it should use, which results in errors. Such a CSS issue is encountered every time you’re trying to utilize the original CSS stylesheet instead of the new one.
-
Ignoring the browser bugs
The bugs introduced by browser will probably steal away the “uniqueness’ from your design. This is simply because different browsers will view your web page differently and hence you can’t afford to miss out on any of the CSS standards that need to be followed while working on your WordPress theme’s CSS style sheet. Listed below are a few CSS issues which tend to crop in as a result of not paying attention to the browser-compatibility factor:
- The text jumps around as the user scrolls down the page
- Text and links jump all around as the mouse is moved over a certain link
- Layout appears differently, when viewed via different browsers.
- The extra effects included within the WordPress theme don’t look similar and often disappear for a specific set of browsers.
We’re done!
Conclusion
So those were the 8 common mistakes which are being made every WordPress user who’s performing the task of tweaking the CSS stylesheet for his/her website/blog. Stay alert about these mistakes and you’ll be able to shape up your WP theme in the desired manner.
Author Biography:
Jack Calder is a prominent web developer in Markupcloud Ltd, A leading psd to html service company. Jack also shares particular knowledge of any technological topic on the web.
