Adding to or overriding the styling of your WordPress theme or a particular plugin, means writing some custom CSS (cascading stylesheet) rules. But how do you get these rules to apply to your site?
Child Themes
One way is through a child theme. In fact, customized styling is often the main reason for creating these special themes that are basically like an add-on to the original theme. The idea is that the parent theme never gets altered, and any changes, including style changes, are made through the child theme.
This isn’t the place to go into details – you can read about child themes in the WordPress Codex – but for our purposes here, the custom CSS rules would be placed in the child theme’s style.css file.
Custom CSS File
Some WordPress themes contain an empty CSS file – often called custom.css – where you can place custom style rules. In theory, these files should not be overwritten when you update the theme, but even if the file survives updates, any rules in it will no longer apply if you switch themes.
Custom CSS Theme Options
WordPress themes sometimes have a Custom CSS box in the Appearance -> Customize section or under Appearance -> Theme Options. Like the custom CSS file, any styles you put in this box will be lost when you switch themes, and even if you have a copy of the rules, the new theme may not have either a custom CSS box or a custom CSS file.
Custom CSS Plugins
The answer is to use a custom CSS plugin, so your customizations will be independent of any theme.
If you’re using JetPack, there’s a custom CSS module included with it, so simply activate it.
If you’re not using JetPack, the standalone plugin I would recommend is My Custom CSS. There are two reasons I suggest it over other custom CSS plugins:
- It adds its own stylesheet rather than putting all the CSS into the head section and bloating your HTML
- It adds the stylesheet at the very end of the head section, which means its rules can override any other CSS, including other plugins.
You’ll find the link for JetPack under the Appearance section of the WordPress admin menu, while My Custom CSS creates its own menu section.
In both cases what you get is a basic text editor with syntax highlighting which makes it easier to read your stylesheet.
Jet Pack’s Custom CSS screen
My Custom CSS’s screen
Plus, both Jetpack and My Custom CSS keep revisions of your stylesheet so you can revert back or find old rules if you need to.
Hi, I want to add ‘author name’ below page heading using jetpack stylesheet editor, so how can I do this?
There is no way to add the author’s name below the page title using just CSS. Your two options would be:
1. Work with a child theme and add the author name below the title in the page template
2. If the author name is already somewhere on the page, you could use Javascript to move it below the page title