Custom CSS for Post, Page & CPT

How to Add Custom CSS to Individual Posts and Pages in WordPress

Customizing the appearance of individual posts and pages in WordPress can be tricky — especially if you’re trying to avoid modifying your theme files or using a bloated page builder. That’s where the Custom CSS for Post & Page plugin by Xaibi Aslam comes in.

This lightweight and developer-friendly plugin allows you to add custom CSS to individual posts, pages, and custom post types with a simple metabox inside the WordPress editor.

In this post, we’ll explore why per-post CSS is useful, how this plugin works, and how you can start using it in your own WordPress site.

Why You Might Need Per-Post or Per-Page Custom CSS

Sometimes you just want to tweak the design of a specific page without affecting the rest of your site. Common use cases include:

Styling a unique landing page
Fixing layout issues caused by third-party embeds or plugins
Highlighting a particular post with custom styles
Running A/B tests with different styles on different posts

Applying custom CSS globally for such cases is inefficient and potentially risky. A dedicated solution helps keep things clean and organized.

Introducing: Custom CSS for Post & Page

Custom CSS for Post & Page is a free WordPress plugin developed by Xaibi Aslam. It adds a simple, intuitive metabox to your post editor, allowing you to write custom CSS that applies only to that specific post or page.

Key Features

Add custom CSS directly from the post/page editor
Clean metabox interface with full editor width
Output CSS in <head> or before closing <body> tag
Works with any theme or page builder
Supports custom post types
Clean, lightweight code (no frontend assets or admin bloat)
Built with WordPress coding standards in mind

How to Use the Plugin

Using Custom CSS for Post & Page is easy and takes just a few steps:

Install and Activate the Plugin

You can download the plugin from the official plugin page or upload it manually to your wp-content/plugins directory.
Once installed, activate it from the Plugins screen.

Enable Post Types (Optional)

By default, the plugin supports post and page. If you want to enable support for custom post types (e.g., portfolio, product), go to: Settings → Custom CSS Settings
And select the post types where you want to enable the CSS metabox.

Add Your Custom CSS

Edit any post or page, and scroll below the content editor. You’ll find a Custom CSS box. Simply add your CSS code and save the post.

Example:

.single-post h2 {
    color: #0073aa;
    font-weight: bold;
}

Your CSS will be applied only to that specific page.

Benefits Over Other Solutions

While some themes and plugins offer a global customizer or global CSS box, those styles apply across the entire website. This plugin focuses specifically on per-page control, which gives developers and site owners granular styling flexibility — without any risk of affecting the rest of the site.

This is especially useful when:

Working on client projects
Building unique layouts without custom templates
Making quick CSS changes without modifying theme files

Conclusion

If you’re looking for a lightweight, secure, and developer-friendly way to add custom CSS on a per-post or per-page basis in WordPress, Custom CSS for Post & Page is a must-have tool.

It’s simple, clean, and does exactly what it promises — no more, no less.

💡 Pro Tip: Always use properly scoped CSS selectors (e.g., .postid-123) to avoid unintended styling conflicts.