WordPress: How to Add CSS to a Specific URL

This is an interesting topic. A WordPress/WooCommerce client could not add CSS via the usual way. In fact, Gravity Forms plugin (and in particular the “directory” extension), stores entries in the database BUT the directory page and the entries filtered list have the same classes, ids, and cannot be “targeted” with CSS.

Long story short, and Gravity Form or not Gravity Form, here’s the snippet you can use to add CSS to any WordPress page as long as you know its URL.

Let’s say I want to apply some red font to the page title if the URL contains the string “yo”. All I need is the snippet below, where I use “yo” as the search string. That’s it!

PHP Snippet: Apply CSS to a WordPress URL That Contains “abc”

/**
 * @snippet       Apply CSS if URL contains "abc" - WordPress
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 8
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

add_action( 'init', 'bbloomer_apply_css_if_url_contains_string' );
 
function bbloomer_apply_css_if_url_contains_string() {
   $url = $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
   if ( false !== strpos( $url, 'abc' ) ) {
      echo '<style>.entry-title { color: red }</style>';
   } 
}

View Source

Post Views: 44