How to Add CSS For Specific Page in WordPress ?

When building WordPress sites, sometimes you want to apply custom CSS to a specific page instead of affecting the entire site. This can be useful for adding banners, changing styles for certain sections, or customizing a landing page differently from the rest of your website.

In this post, we’ll show you a simple method to add CSS for a specific page using WordPress functions.

Solution: Add CSS For a Specific Page in WordPress

This code displays a banner at the top of the content, which is visible only on the page ID 769, which is defined in the code.

// 1️⃣ Enqueue page-specific CSS
function ts_enqueue_page_specific_css() {
    $page_id = 769; // Replace with your actual page ID

    if ( is_page( $page_id ) ) {
        wp_enqueue_style( 'theme-style', get_stylesheet_uri() );

        $custom_css = "
            .custom-banner {
                background-color: #87ceeb; /* sky blue */
                color: #000;
                padding: 15px;
                text-align: center;
                font-weight: bold;
                margin-bottom: 20px;
            }
        ";
        wp_add_inline_style( 'theme-style', $custom_css );
    }
}
add_action( 'wp_enqueue_scripts', 'ts_enqueue_page_specific_css' );

// 2️⃣ Add the banner to page content
function ts_custom_page_banner( $content ) {
    $page_id = 769; // Replace with your actual page ID

    if ( is_page( $page_id ) ) {
        $banner = '<div class="custom-banner">🚀 Special Announcement: Free shipping on this page only!</div>';
        $content = $banner . $content;
    }

    return $content;
}
add_filter( 'the_content', 'ts_custom_page_banner' );

Output

When you visit the WordPress page with ID 769, you’ll see a sky blue banner with the text “ Special Announcement: Free shipping on this page only!” displayed at the top of the content. The banner doesn’t appear on other pages since the CSS is applied specifically to this page.