Custom Classes
Overview
Custom Classes adds a small box to the post and page editor where you can type extra CSS class names for that one page. Those classes are added to the page's <body> tag, so a stylesheet — your theme's, or one added through Smart CSS — can target that page specifically.
Every post also gets the slugs of its categories added automatically as classes, with no need to turn this on. (Pages do not have categories, so this does not apply to them.)
Getting set up
Step 1: Open a post or page for editing
Go to Posts or Pages and open the one you want to style. The Custom Classes box appears automatically in the right-hand column of the editor for every post and page — there is nothing to switch on first. It sits low down in that column, so you may need to scroll.
Step 2: Add your class names
In the CSS class names field, type one or more class names, separated by spaces — for example highlight-page term-dates.
Step 3: Publish or update
Select Publish or Update as normal. The class names are saved with the post or page — there is no separate save button for this box.
Settings
Where to find it: the post or page editor, Custom Classes box (in the right-hand column)
| Field | What it does | Default |
|---|---|---|
| CSS class names | Space-separated class names added to that page only | Empty |
Whatever your theme or Smart CSS styles then apply to those class names will apply only to pages carrying them.
Troubleshooting
My class doesn't seem to do anything
Why it happens: Custom Classes only adds the class name — nothing styles it until a stylesheet (your theme's, or one written in Smart CSS) has a rule that targets it.
How to fix it: Add a style rule for that class name. If you don't have access to Smart CSS yourself, ask Realsmart.
Every post already seems to have a class I didn't add
Why it happens: This is expected — the slug of each category a post belongs to is always added as a class as well, automatically, alongside anything typed into CSS class names.
How to fix it: Nothing to fix — this cannot currently be turned off. Bear it in mind when naming your own custom classes, so they don't accidentally clash with a category slug.
A class I added to one post also appears on the news page
Why it happens: On a page that lists several posts — such as your news page or a category page — the classes from the first post in the list (its CSS class names and its category slugs) are added to that listing page too.
How to fix it: Make your style rules specific enough that they only match where you intend — for example by combining your class with a class that only the single post page carries — or ask Realsmart for help writing the rule.
Did this work for you?
If a step looked different on your site, tell us and we'll update the screenshots.
Thanks for your feedback.