Custom CSS for WordPress Pages (4 Methods)

ByJoseph Augustin

Here are 4 different ways to add CSS to WordPress pages or posts.

Each method increases in complexity and development knowledge, but the first two can be done by anyone with WordPress admin access.

Add custom CSS to the theme’s appearance editor

Locate the Appearance->Customize menu item inside the admin area.

Once on the customization page, you will notive a left-hand menu with a number of cascading accordion containers with editing features.

Choose the “Additional CSS” feature and add any CSS you like.

The CSS you add here be output inside a style tag in the header of your site, after any CSS files. This is important to know, because if you use an identical selector to that which exists in a CSS file, the styles you add here will take precedent.

Pros

This is the “quick and dirty” method of adding CSS, and is a nice way to see what changes to CSS will do in a live preview area while writing your own CSS.

Since you aren’t changing any files, you don’t have to worry about breaking your site.
The lightweight editor also picks up on syntax errors.

It can be really handy in a pinch when you don’t have access to the file system and just want to make some small changes without adding another plugin.

Cons

This feature should be used with caution. It can certainly lead to confusion and undesired results if you:

  • don’t have knowledge of CSS selector heirarchy
  • start overriding too many existing styles, creating override hell
  • it becomes confusing why CSS exists in multiple places and what needs updating

If you start to get more than 50-100 lines of CSS in this area, consider transferring the CSS code to a file.

Adding CSS inline in the page or post HTML editor

Since Gutenberg supports an HTML block, you can add CSS by creating an opening and closing <style> tag and adding custom CSS in-between those tags in a block on the page or post.

If you happen to declare a class, such as the one pictured above, you can use that on any block on the page in the sidebar block settings under the advanced tab.

All you need is the ability to edit a post or page, which is available for admins, editors, authors, and contributor roles.

Pros

This is a perfectly acceptable method to add CSS to a single page, but only if it’s a one-time occurrence.

A good use case would be a custom styled HTML table or SVG data visualization which you generated from an online tool and wanted to copy and paste into a page or post as a one-off.

Cons

It can lead to scaling and style management issues.

For example, if you wanted to custom style a table the same way every time, it’s best to include such CSS in a file. Thay way you can make changes in one location and update all table styles at the same time.

Enqueueing a custom CSS file in functions.php

This is the overall preferred method, and is how CSS files are added to custom themes and plugins.

You need access to to your site’s file system, however, so this is mostly a method for developers, but can also be followed by anyone by adding the following code to your functions.php file:

function register_styles() {
	wp_enqueue_style( 'custom', get_template_directory_uri() . '/custom.css', array(), false, 'all' );
}
add_action( 'wp_enqueue_scripts', 'register_styles' );

Finally, upload your CSS file to the server, making sure the path is correct with how you set things up in your functions.php file.

In the above example, we would just need to upload a custom.css file to the root of our theme directory.

You can read more about the different parameters in the wp_enqueue_style function in the WordPress documentation.

If you end up with an incorrect path, you will likely see a 404 not found error in your browsers developer tools.

Adding CSS with a Plugin

There are a number of different ways you could add CSS via a plugin. They will vary in terms of features and methods.

Plugin NameProsCons
Custom CSS Manager1. Easy to use interface
2. Allows you to add custom CSS code directly in the backend		1. Limited options for customizing CSS
2. Does not support live preview of changes
Simple Custom CSS1. Lightweight and fast
2. Supports live preview of changes		1. Lacks advanced features for customizing CSS
2. Does not have a visual interface
Metabox1. Allows you to add custom CSS to individual pages or posts
2. Supports live preview of changes		1. Steep learning curve for inexperienced users
2. Requires knowledge of HTML and CSS to use effectively
Advanced Custom Fields1. Offers advanced options for customizing CSS
2. Integrates with a variety of other plugins		1. Has a steeper learning curve compared to other plugins
2. Requires knowledge of HTML and CSS to use effectively

Adding CSS with a Child Theme

Child themes are always an option, especially if you are hesitant to add or modify any files in your current theme for any reason.

However, most child themes are built on top of frameworks like Genesis. This way, you can take advantage of their theme-specific features, and can benefit from development updates, but keep the theme code separate.

Child themes are all about inheritance, and requires file server access and child theme development knowledge. However, if the parent theme is set up in a minimal fashion, it can be a useful headstart on development compared to creating a theme from scratch.

Similar Posts