How To Change CSS on a Single Post or Page – No Child Theme Required!

Have you ever wanted to add or modify CSS for a single post or page?

Editing the theme stylesheet is a bad idea. When the theme is updated, your changes will be lost.

A child theme is a better approach, but creating a child theme is overkill for most users. Suddenly we’re talking about FTP, text editors, template files, etc. It’s too much.

Luckily there’s a plugin that can help us out.

The CSS Plus Plugin

CSS Plus Plugin

CSS Plus adds a CSS editor to the Edit Post and Edit Page screens.

CSS Plus also supports inline LESS, which lets you add functions, variables, mixins, and operations to your CSS.

You can learn more about LESS CSS on the LESS website.

Setting Up CSS Plus

From your dashboard, mouse over PLUGINS and click ADD NEW.

WordPress > Plugins > Add New

We’re looking for the “CSS PLUS” plugin. Click SEARCH.

WordPress > Plugin Search > CSS Plus

The CSS Plus plugin should be the first result – the author of the plugin is Paulo Calixto.

Click INSTALL NOW.

After the plugin has been installed, click ACTIVATE PLUGIN.

Using the CSS Plus Editor

There is no sidebar entry or settings screen for CSS Plus. To use the editor, simply edit a post or page.

The CSS editor appears below the Visual Editor. It looks like this:

CSS Plus Editor Box

Add your CSS rules and Publish or Update the post/page to save the changes.

Your CSS will be included in the <head></head> of your post or page.

Kudos to the plugin author, Paulo Calixto (@PauloKlixto), for creating CSS Plus. According to the CSS Plus blog on WordPress.com, this is Paulo’s first-ever plugin. Very, very handy – thanks, Paulo!

About the author

9 responses to “How To Change CSS on a Single Post or Page – No Child Theme Required!”

  1. Kamrul says:

    Thanks. Very useful plugin

  2. Adam says:

    Thanks for the tip 🙂

  3. Puru Chitte says:

    Hello!
    I’m creating a website for my client and he doesn’t want to display main nave on some pages. So what I need to know that is this plugin just apply css to specified page only or to overwrite the css for all website? Thank you!

    • Jorge says:

      Dont use css for that, just create a custom template that oad a header without nave and choose that template for the page

    • MagHow.com says:

      You need to apply for home page only not to overwrite for all website css. If you do all css will make no sense and your page will look different than before.

  4. Hello! I could have sworn I’ve visited this site before but after looking at many of the
    posts I realized it’s new to me. Anyhow, I’m definitly delighted I came
    across it annd I’ll be bookmarking it and checking back
    regularly!

  5. Jesus says:

    Thanks for the post, It has saved me a lot of work!!

  6. Megan says:

    Can you advise why i can only see this on a new page, not on existing visual editor on a home page?
    Thanks

  7. Ben Fox says:

    Hi Megan,

    I think that’s a great question for the plugin author. You can submit questions to them directly on their plugin page at wordpress.org/plugins/css-plus (you need to be logged in with a wordpress.org account).

    Ben

Leave a Reply

Your email address will not be published. Required fields are marked *