WordPress has many hooks and filters that allow us to modify its behavior or update data before it is passed to another filter.

Here's a video explanation:

How to target an element with CSS

if you're targeting an element with a specific ID (some_id) you just use

#some_id { color: red; }

if you're targeting an element with a specific css class you just use the following. The classes are separated by space

.some_class { background:red; }

How to target an element that's inside another element with CSS ?

If you want to target an element that's within a another element you separate the selectors with a space.

.parent_class .some_element { color: red; }

How to target a specific element/container on a given WordPress page?

Yes. We're getting to it. You need to add this snippet to your custom plugin or functions.php file.

It will add the necessary CSS classes to the <body> element and you can use them to target the desired element.

The css classes will depend on the page links that you've used.

/**

  • This code adds extra CSS classes to the body element. Those classes can be used to target specific elements

  • on a specific WordPress page

  • e.g. Contact form page has a slug (/contact) and an element with a class .msg

  • .contact .msg { background : green; }

  • Customizations: if you want to hire us to customize this code go to https://orbisius.com/free-quote

  • @author Svetoslav (Slavi) Marinov - https://orbisius.com

  • @see blog post link https://orbisius.com/7195

  • @license GPL
    */
    function orbisius_post7195_upd_body_class($classes)
    {
    if (!empty($_SERVER['REQUEST_URI'])) {
    $req_url = $_SERVER['REQUEST_URI'];
    $req_url = strip_tags($req_url);
    $req_url = trim($req_url);

     // no need for the request params ...
 if (strpos($req_url, '?') !== false) {
     $req_url = preg_replace('#\?.*#si', '', $req_url);
 }

 $req_url = trim($req_url, '/'); // no need for leading or trailing slashes

 // the $req_url should be pretty clean by now.
 // e.g. contact or services or products/product123

 $page_slugs = explode('/', $req_url);
 $req_url = str_replace('_', '-', $req_url); // let's make it consistent with dashes
 $page_slugs[] = $req_url; // let's put the full link too and not just its parts

 // sanitization and clean up
 $page_slugs = array_map('sanitize_title', $page_slugs);
 $page_slugs = array_filter($page_slugs); // rm empty elements just in case
 $page_slugs = array_unique($page_slugs); // everybody is unique

 // if using merge we may end up with multidimensional arrays and we don't want that.
 $classes = array_replace($classes, $page_slugs);

    }

    return $classes;
    }

if (function_exists('add_filter')) {
add_filter('body_class', 'orbisius_post7195_upd_body_class', 50);
}

If you need any help implementing any of the steps, contact us (free estimate)

Disclaimer: The content in this post is for educational purposes only. Always remember to take a backup before doing any of the suggested steps just to be on the safe side.
Referral Note: When you purchase through a referral link (if any) on this page, we may earn a commission.
If you're feeling thankful, you can buy me a coffee or a beer