How to Add CSS to a Specific Page URL in WordPress

How to Add CSS to a Specific Page URL in WordPress
On this page
  1. Why You'd Need This Approach
  2. Step 1: Add the URL-Detection Snippet
  3. Troubleshooting
  4. Frequently Asked Questions
  5. Conclusion

To add CSS to a specific page URL in WordPress when there’s no unique class or ID available to target, check the current URL in PHP and conditionally print inline CSS via wp_head — this works even on pages generated by a plugin where every instance shares identical markup.

Why You’d Need This Approach

  • Some plugin-generated pages (directory listings, form results) render identical classes/IDs across multiple URLs
  • The usual body-class targeting technique doesn’t work when every page looks the same in the markup
  • You need a styling fix for one specific URL without editing a template file

Step 1: Add the URL-Detection Snippet

PHP
/** Apply CSS only when the URL contains a specific string */
add_action( 'wp_head', 'apply_css_for_matching_url', 0 );

function apply_css_for_matching_url() {

    $current_url = $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];

    if ( false !== strpos( $current_url, 'staff-directory' ) ) {
        echo '<style>.entry-title { color: #b5121b; }</style>';
    }
}
Add CSS to a specific page URL in WordPress: the page before adding the code
Before
Add CSS to a specific page URL in WordPress: the page after adding the code
After

Replace staff-directory with any distinctive fragment of the target URL (a slug or query parameter), and swap the CSS selector/rule for whatever you actually need to style on that page.

Why wp_head Instead of init

Hooking to wp_head with an early priority (0) guarantees the <style> tag lands correctly inside the document’s <head>. Printing markup on the init hook runs before any HTML output has started, which can result in invalid placement.

Troubleshooting

The CSS Applies to More Pages Than Intended

Because this checks the URL globally via strpos(), be careful your search string isn’t accidentally present in an unrelated URL or query string — a generic word like “shop” could match far more pages than you expect. Use a more specific, unique fragment of the URL if this happens.

Nothing Changes After Adding the Snippet

The only thing that should need changing is the search string itself — double-check you’re not accidentally editing the $_SERVER variable names, which should stay exactly as shown.

Frequently Asked Questions

Is this better than using the page’s ID as a body class?

Not generally — if a unique body class like page-id-9 is available, that’s simpler and more reliable. This URL-detection method is specifically for cases where that class doesn’t exist or isn’t unique enough.

Can I target a query string parameter instead of the path?

Yes — since REQUEST_URI includes the full path and query string, matching against a parameter like ?filter=staff works the same way.

Will this slow down my site?

No — a single strpos() check on every page load has negligible performance impact.

Conclusion

When there’s no reliable class or ID to hook into, checking the URL directly is a practical way to add CSS to a specific page URL in WordPress. Keep the search string as specific as possible so the rule doesn’t accidentally apply somewhere unintended.

See also How to Get the Draft Product URL in WooCommerce. Then read How to Redirect a WooCommerce My Account Tab to a Custom URL.

Prefer no code? All-in-One Utilities Woo Add-on adds over 50 WooCommerce features, so you can switch them on without code.

Leave a Reply

Schedule a call