0

I am familiar with styling specific pages on WordPress by adding a class

.page-id-123

in front of the styled element. However, this doesn't seem to apply to "subpages" (sorry don't know what they are called), when after the page, there is a specific tag (?) added.

Example:

URL: wordpressweb.com/my-account
CSS: .page-id-123 .header { background-color: yellow; }

URL: wordpressweb.com/my-account/?add-new-business=true
CSS: ??? .header { background-color: yellow; }

Is there a way to target these kind of pages with CSS?

2

That is a URL Query String. It's still the same page, not a subpage. You can access this in PHP via $_GET and you can use the body_class hook to look for this query string and add a class accordingly. WordPress won't add classes for query strings, it's not a normal thing to do.

Here's an example of how you can use the body_class hook to add an additional class based on the query string:

/**
 * Look for query string and add an additional class to the body
 *
 * @param Array $classes
 *
 * @return Array $classes
 */
function wpse352069_body_class_mods( $classes ) {

    if( isset( $_GET, $_GET['add-new-business'] ) && true == $_GET['add-new-business'] ) {
        $classes[] = 'add-new-business';
    }

    return $classes;

}
add_filter( 'body_class', 'wpse352069_body_class_mods' );

If that query string exists and IS true then it will add the add-new-business class to the body tag. You can use the CSS below to style it:

body.add-new-business .header { background-color: yellow; }
  • I think $_GET being a superglobal, it always exists and you don't have to check if it is set. Also wouldn't a strict comparison 'true' === $_GET['.. be better? Or, since it only matters if it is set, a if (!empty($_GET['add-new-business'])) { could replace that complete line – kero Nov 7 at 8:58
  • Awesome thank you so much!!! I'm new to php and this was super helpful :) – jade newport Nov 10 at 20:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.