How to Deal with WordPress Custom CSS

Tiny pieces of code have the power to beautify and stylize websites and make them stand out, be it a WordPress website or a web-designer made one. 

CSS styling allows you to change just about any element of your website. You can add features, colors, space, or design a whole new layout! In fact, everything complex and interactive on the web was built with CSS (with a spice of Javascript)

So, how to deal with WordPress custom CSS? 

This guide is a perfect start! 

 

What is CSS?

Before you jump into understanding how to deal with custom CSS in WordPress, let’s first cover the basics. To figure out how CSS works, we need to back up a little and say a few words about HTML. 

Hypertext Markup Language (HTML) is the primary language used to develop WordPress websites. It works by telling web browsers about the different elements of your content. For example, it tells the browser which element of your page is a heading, paragraph, image, link, and so on.

HTML defines all the content, text, images, and links. HTML alone is not capable of creating complex and interactive websites. That’s when CSS steps in to bring the styling to the website.

We’ll be covering some other aspects of HTML & WordPress in our next blog article.

Cascading Style Sheets (CSS) is a web language that dictates how HTML elements appear on your web page. This includes sizes, layouts, fonts, colors, and other design characteristics of the web elements. 

CSS and HTML always come in tandem. CSS can’t live without HTML as there would be nothing to style without it. 

How to edit WordPress theme CSS in the dashboard? 

The easiest way to access CSS is through your WordPress dashboard. You can find the editor when you go to the menu and click Appearance → Theme Editor. 

Sometimes, a warning will pop up, telling you not to make direct edits to your theme, but create a child theme. If you want to proceed further, click I understand, and it will take you to the stylesheet.

Besides style.css, you will also get access to template files, including single.php, header.php, and functions.php. 

Keep in mind that any changes in the stylesheet you make through the dashboard will be global. Changing one element will impact every single page on your website. So, if you want to customize styling on specific pages, you will need to use special syntax. 

Keep in mind: Before you make any major changes to the core files, always make sure to backup your website. 

Editing theme files via FTP

If you can’t access the Theme Editor or your theme or plugins disable the backend editor, you can still connect to your website through a File Transfer Protocol (FTP). FTP is a standard network protocol that allows you to remotely access and modify your website’s files. 

Now, let’s move on to the fun part.

2 ways to add custom CSS in WordPress 

Custom WordPress CSS allows you to add custom CSS code snippets and modify the appearance of your WordPress website. 

Here’s how you do it:

1. Adding custom CSS with a dedicated plugin

One way to add custom CSS is by downloading a dedicated plugin. The main benefit of using a dedicated plugin is that styles and changes usually stick even when you update or switch themes. 

Also, you can enjoy the plugin’s user interface or additional features. Some plugins allow you to add CSS through dropdown menus, rather than having to write it manually. 

Here are some popular plugins used for adding custom CSS. 

The downside of using plugins, is that they can affect website speed…so use them wisely!

2. Adding WordPress custom CSS within the Customizer 

Another way to add custom CSS is by accessing the stylesheet through the WordPress Customizer. 

Here’s how it works. 

Go to your WordPress dashboard and click Appearance → Customize. Under General Settings locate the Additional CSS box at the very bottom of this menu.

When you click to open this box, you should see a new screen with a code input field and instructions. If the code is correct and doesn’t contain any errors, any changes you make will automatically appear in the preview area on the right. 

When you finish writing code, you can publish your new code, schedule when it will go live, or save it as a draft for further development. 

This method is perfect if you want to make various changes, including removing the page or blog titles. Check here to learn more about how you can modify CSS to remove the page title in WordPress. 

Which method is better?

When you add CSS code using either of the two methods, it’s a lot easier to access and maintain CSS. There’s no need to worry about putting your new CSS in the wrong place or misplacing it. Also, the code you add with these methods won’t get lost when you update your theme. Yet, it may still disappear when you change themes. 

So, which method is better? If you’re looking to make major changes to your website’s styling, consider using WordPress Customizer. On the contrary, if you want to make sure that all changes will be saved after moving to a new theme, you should go with a dedicated plugin. 

 

CSS syntax

CSS allows you to play with:

• backgrounds
• colors
• positioning
• borders
• text appearance 
• and more.

 

Usually, you start with identifying the HTML element you’re trying to style, an ID or class that you assign to certain elements.

You can find the most common CSS uses here. Once you get the hang of it, the world is yours!

I definitely recommend you start with a CSS course so that you do not depend on developers for tiny styling changes.

 

Common custom CSS in WordPress issues 

When you add custom CSS code to WordPress, you may run into some unexpected problems. Let’s quickly overview the most common custom CSS issues and see how you can deal with them. 

• Changes are not appearing 

Sometimes, the changes you make fail to appear due to the cache. If you’re using a caching plugin or browser caching, it may cause the problem. This happens because some plugins cache some resources to increase the website’s speed and lower resource usage. 

How to solve this issue? 

Clear your WordPress cache or disable a caching plugin when you make changes to your website’s styling.  

• Misspelled CSS syntax 

Spelling errors are so easily overlooked. Even the smallest mistake in your CSS syntax can prevent the code from displaying properly. 

How to solve this issue? 

Try to locate and fix any spelling errors yourself. If you fail to identify misspelled syntax, run your code in a CSS validator tool. 

 

Main Takeaways

Originally developed for bloggers, now WordPress offers countless customization features to help users build and maintain complex and interactive websites. 

When it comes to customizing your WordPress website with CSS, the sky is truly the limit. 

Before you go, let’s quickly wrap up what you’ve learned today about dealing with custom CSS in WordPress. 

• HTML and CSS are languages used for developing web pages. 
• CSS works by dictating the appearance of different HTML elements on web pages. 
• You can edit CSS code in WordPress at theme level, or more granular levels. 
• If you need to add custom CSS code, you can either download a dedicated plugin or make changes with WordPress Customizer. 

For more information and useful tips, use dedicated CSS learning resources, like Stack Overflow and W3school. Keep exploring CSS, and good luck applying the newfound insights! 

Now, if you liked this article, and you want to learn more about how to design a WordPress website, make sure to subscribe to our Youtube channel and follow us on Twitter and Facebook!

 

[sibwp_form id=1]