How to Add Custom CSS Styles to WordPress Header

Adding Custom CSS to WordPress Header

Method 1: Using functions.php (Recommended)

Add this code to your child theme's functions.php file to properly enqueue your custom CSS:

function my_custom_header_styles() {
    wp_enqueue_style(
        'custom-header-styles',
        get_stylesheet_directory_uri() . '/css/header-styles.css',
        array(),
        '1.0.0'
    );
}
add_action('wp_enqueue_scripts', 'my_custom_header_styles');

Create a file named header-styles.css in your child theme's /css/ directory and add your custom CSS:

/* Example header styles */
.site-header {
    background: #f5f5f5;
    padding: 20px;
}

.site-title {
    color: #333;
    font-size: 24px;
}

.main-navigation {
    background: #ffffff;
}

Method 2: Using wp_head Hook

Add inline CSS directly to header using wp_head hook. Place this in functions.php:

function my_inline_header_styles() {
    ?>
    <style>
        .site-header {
            background: #f5f5f5;
            padding: 20px;
        }
        .site-title {
            color: #333;
            font-size: 24px;
        }
    </style>
    <?php
}
add_action('wp_head', 'my_inline_header_styles');

Method 3: Using Customizer API

Add customizable header styles through the WordPress Customizer. Add to functions.php:

function my_customizer_header_styles($wp_customize) {
    $wp_customize->add_section('header_styles', array(
        'title' => 'Header Styles',
        'priority' => 30,
    ));

    $wp_customize->add_setting('header_background_color', array(
        'default' => '#f5f5f5',
        'transport' => 'refresh',
    ));

    $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'header_background_color', array(
        'label' => 'Header Background Color',
        'section' => 'header_styles',
        'settings' => 'header_background_color',
    )));
}
add_action('customize_register', 'my_customizer_header_styles');

function my_customizer_header_output() {
    ?>
    <style>
        .site-header {
            background-color: <?php echo get_theme_mod('header_background_color', '#f5f5f5'); ?>;
        }
    </style>
    <?php
}
add_action('wp_head', 'my_customizer_header_output');

Plugin Solutions

If you prefer using plugins:

1. Simple Custom CSS - Adds a dedicated area in WordPress admin for custom CSS
2. Custom CSS Pro - Includes visual CSS editor with syntax highlighting
3. Elementor - Full page builder with custom header builder and visual styling options

Best Practices

• Always use a child theme when making custom CSS changes
• Enqueue styles properly using wp_enqueue_scripts hook
• Use specific class names to avoid conflicts
• Consider mobile responsiveness in your CSS
• Use CSS specificity wisely to override theme styles when needed

Choose Method 1 for permanent custom styles, Method 2 for quick changes, or Method 3 for client-friendly customizable options.