Add Custom CSS to WordPress Posts and Pages

Method 1: Add Custom CSS to Individual Posts/Pages Using Custom Fields

Add this code to your theme's functions.php file to enable custom CSS per post/page:

// Add custom CSS metabox to posts and pages
function add_custom_css_metabox() {
    add_meta_box(
        'custom_css_metabox',
        'Custom CSS',
        'render_custom_css_metabox',
        ['post', 'page'],
        'normal',
        'high'
    );
}
add_action('add_meta_boxes', 'add_custom_css_metabox');

// Render the CSS input field
function render_custom_css_metabox($post) {
    $custom_css = get_post_meta($post->ID, '_custom_css', true);
    wp_nonce_field('custom_css_nonce', 'custom_css_nonce');
    echo '<textarea style="width:100%; min-height:150px;" name="custom_css">' . esc_textarea($custom_css) . '</textarea>';
}

// Save the custom CSS
function save_custom_css($post_id) {
    if (!isset($_POST['custom_css_nonce']) || !wp_verify_nonce($_POST['custom_css_nonce'], 'custom_css_nonce'))
        return;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
        return;
    if (isset($_POST['custom_css']))
        update_post_meta($post_id, '_custom_css', wp_strip_all_tags($_POST['custom_css']));
}
add_action('save_post', 'save_custom_css');

// Output the custom CSS in the header
function output_custom_css() {
    if (is_singular()) {
        $custom_css = get_post_meta(get_the_ID(), '_custom_css', true);
        if (!empty($custom_css)) {
            echo '<style type="text/css">' . esc_html($custom_css) . '</style>';
        }
    }
}
add_action('wp_head', 'output_custom_css');

Method 2: Add CSS Classes to Specific Posts/Pages

Add this code to your theme's functions.php to enable custom CSS classes for posts/pages:

// Add custom CSS class field to posts and pages
function add_css_class_field($post) {
    $value = get_post_meta($post->ID, '_custom_css_class', true);
    ?>
    <div class="misc-pub-section">
        <label>Custom CSS Class:
            <input type="text" name="custom_css_class" value="<?php echo esc_attr($value); ?>">
        </label>
    </div>
    <?php
}
add_action('post_submitbox_misc_actions', 'add_css_class_field');

// Save custom CSS class
function save_css_class($post_id) {
    if (isset($_POST['custom_css_class']))
        update_post_meta($post_id, '_custom_css_class', sanitize_html_class($_POST['custom_css_class']));
}
add_action('save_post', 'save_css_class');

// Add custom class to post/page body
function add_custom_css_class($classes) {
    if (is_singular()) {
        $custom_class = get_post_meta(get_the_ID(), '_custom_css_class', true);
        if (!empty($custom_class)) {
            $classes[] = $custom_class;
        }
    }
    return $classes;
}
add_filter('body_class', 'add_custom_css_class');

Plugin Solutions

1. Simple Custom CSS and JS - Allows adding custom CSS to specific posts/pages
2. Advanced Custom Fields - Can create custom CSS fields for posts/pages
3. SiteOrigin CSS - Provides a visual CSS editor with per-page options

Additional Tips

• Use the WordPress Customizer API for site-wide CSS changes
• Consider using CSS Custom Properties (variables) for consistent styling
• Always backup your theme files before making changes
• Test your custom CSS in different browsers and devices
• Use specific selectors to avoid conflicts with theme styles

The code solutions provided above create either a dedicated CSS input field in the post editor or allow adding custom CSS classes to specific posts/pages. These methods don't affect other content on your site and provide granular control over individual post/page styling.