Manage custom CSS for each page/post with reusability feature.
Studio Noir Custom Page Styles allows you to add custom CSS to individual pages and posts, with powerful features for reusability and file management.
Key Features
- Write custom CSS directly in the page/post editor
- Upload CSS and JavaScript files
- Select unlimited existing styles with drag & drop reordering
- Choose header or footer loading for JavaScript files
- Automatically generates CSS files for better performance
- Choose which post types to enable
- Secure and WordPress coding standards compliant
Perfect For
- Adding unique designs to landing pages
- Customizing individual blog posts with external libraries
- Managing page-specific styles without bloating your main stylesheet
- Reusing common style patterns across multiple pages
- Adding JavaScript effects and animations to specific pages
How It Works
- Edit any page or post
- Find the “Custom Page Styles” meta box
- Upload CSS/JS files, select existing styles, or write custom CSS
- Reorder styles by drag & drop to control load order
- Publish and see your styles in action!
Load Order
Styles are loaded in the following order for maximum flexibility:
- Selected styles (base templates)
- Uploaded files (libraries and frameworks)
- Direct CSS (final adjustments and overrides)
Screenshots
Custom Page Styles meta box with file upload interface
Drag & drop reordering of selected styles
Settings page to choose enabled post types
Can I use this on custom post types?
Yes! Go to Settings > Custom Page Styles and select which post types you want to enable.
Will this work with my theme?
Yes, Studio Noir Custom Page Styles works with any WordPress theme.
How many styles can I apply to one page?
Unlimited! You can select as many existing styles as you need, upload multiple CSS/JS files, and add custom CSS – all on the same page.
Can I control the order styles are loaded?
Yes! Use drag & drop to reorder selected styles. The order you set determines the load order.
What file types can I upload?
CSS (.css) and JavaScript (.js) files only. Maximum file size is 5MB per file.
Where should JavaScript files be loaded?
You can choose header or footer for each JS file. Footer is recommended for most cases (default).
Where are the uploaded files stored?
Uploaded files are stored in /wp-content/uploads/sn-cps-styles/{post_id}/ to keep files organized by post.
Does this affect site performance?
No, CSS is generated as separate files and only loaded on the relevant pages, which is better for performance than inline styles.
Can I use this with page builders?
Yes, Studio Noir Custom Page Styles works alongside page builders like Elementor, Gutenberg, and the Classic Editor.
What if the meta box doesn’t appear?
- Make sure the plugin is activated
- Check that the post type is enabled in Settings > Custom Page Styles
- Click “Screen Options” at the top of the editor and make sure “Custom Page Styles” is checked
ChangeLog
1.1.1
- SECURITY: Enhanced path traversal protection in ajax_remove_file()
- SECURITY: Added MIME type validation using finfo_file() in ajax_upload_file()
- FEATURE: Automatic filename conflict resolution (adds -1, -2, etc.)
- IMPROVED: File upload security with comprehensive validation
1.1.0
- NEW: Unlimited style selection (previously limited to 2)
- NEW: Drag & drop reordering for selected styles (ACF-style sortable UI)
- NEW: File upload feature for CSS and JavaScript files
- NEW: Choose header or footer loading for JavaScript files
- NEW: Files organized in post-specific directories
- IMPROVED: CSS load order optimization (selected → uploaded → direct CSS)
- IMPROVED: Security enhancements for file uploads (type validation, size limit)
- IMPROVED: Better UI with visual feedback and file management
1.0.2
- IMPROVED: Style loading priority optimization
- Set
wp_enqueue_scripts hook priority to 20
- Custom CSS now reliably overrides theme styles
1.0.1
- SECURITY: Enhanced CSS sanitization (WP_Error support)
- SECURITY: Additional dangerous pattern detection
- SECURITY: File size limit added (1MB for CSS)
- IMPROVED: Better error handling with Transient API
- IMPROVED: Path traversal attack prevention
1.0.0
- Initial release
- Custom CSS per page/post
- Reuse existing styles feature
- Post type selection
- Automatic CSS file generation
- Security: SQL injection prevention
- Security: CSS sanitization
- Security: File path validation
