Avoid These 7 Mistakes When Writing CSS for a WordPress Theme

John Berry

Senior Developer

One of the great things about WordPress is that it has an overabundance of themes. This makes it easy to choose a style that reflects the personality of the site you are building. WordPress also lets you customize the theme as you move further along in the design process. To execute these small adjustments, all you need to do is moderate your theme’s CSS.

Before you get started writing CSS for a WordPress theme, check out these seven common mistakes and how to avoid them. Saving time and frustration is worth this quick read!

1. Overlooking ground rules for selectors

Selectors are codes that websites use to make changes in how things appear. When you’ve chosen which selector to use, you can target it with CSS and adjust how it displays. This is why it’s important to know which selectors to use and their respective ground rules. To help with this, use your browser’s development tool to view the code for the page.

2. Ignoring the differences between browsers

Not all browsers are the same. They view websites differently, which means that your website might appear fine in one browser and not in the other. To avoid this from happening, stick to the CSS standards when writing the CSS stylesheet for the WordPress theme. If you don’t, you could be looking at erratic texts and links, inconsistent layouts, and even missing information.

3. Making spelling mistakes

Spelling errors can cause problems in your content and your WP theme. When working with CSS, it’s possible to incorrectly spell some common terms, such as 20pc instead of 20px. Sure, the eyes get tired and we don’t always catch these mistakes, but they can cause major errors in the CSS stylesheet. Fortunately, CSS Validators catch misspellings that you might otherwise miss.

4. Assigning information to numerous references

Typically, this happens out of habit. Some WordPress developers end up assigning one piece of information to multiple references, confusing the CSS. Design errors occur as a result. Because this is more common when using your own stylesheet, we recommend using a new CSS stylesheet.

5. Not understanding file placement

Before you start working in CSS, it’s worth your while to get a firm understanding of file placement. Included in the WordPress theme’s folder are all the CSS styles, as well as some PHP files. Additionally, you can find the HTML code for the theme tucked inside the theme’s index.php.file. Understanding file placement helps you make changes only when necessary and without touching the files.

6. Incorrectly styling the blockquote element

In HTML, a blockquote element is a section that is quoted from another source. Styling the blockquote element can be tricky, which can lead to mistakes. One of the best ways to avoid styling errors is by adding specific margins and using a unique font to make the quote stand out in the content.

7. Customizing the wrong template module

Be smart about the template module section that you customize when working in the WP theme. Sometimes, developers might choose the wrong template module section, leading to unwanted effects in the design. To safeguard yourself, always backup your CSS stylesheet. If anything happens, you can restore the original version.

Conclusion

There’s a reason why WordPress offers so many themes and options for customization: they want you to use them! However, with more options come the possibility of making more mistakes. Hopefully, you have a better idea of the common mishaps that rookie - and even seasoned - developers make and how to avoid them. The fewer the problems, the smoother the transition!

 
About the Author: John Berry

John is a former financial professional turned software developer. He has a passion and talent for creating innovative, beautiful software solutions. John is always striving to learn new software technologies and remain on the edge of industry solutions for his clients. He prides himself on being a team player who does whatever it takes to get the job done. In his spare time he enjoys cooking, the beach, and playing on the floor with his daughter.

Talk With Our Team to learn more about this...

Comments?

We Love to Educate

Get our stellar design & marketing
tips sent right to your inbox.