CSS + JQuery = Lots of WP Customization [Part 2/2]

In the previous article I discussed the benefits, pitfalls, and reasons behind relying on a lot of CSS and JQuery to customize your WordPress installation. In this article I want to give you a concrete example of how it can be useful.

Let say, for example, that I wanted only the second “Reason” in the Part 1 article of this series to be highlighted like so:

CSS + JQuery in WP :: Highlighted point

To do this I’m going to use the following the procedure employing CSS and JQuery:

  1. Use the browser inspector to map out the relevant HTML elements
  2. Construct a complex CSS selector to target my end element
  3. Apply the stylizing
  4. Copy/paste the complex selector and use it with a JQuery script that checks for a specific URL (so only that page gets the stylizing, and not all the pages).

Easy peasy right? Let’s do it then!

1. Use the browser inspector to isolate my HTML element

It’s always great to anchor off of an id because id’s are unique. That way, you don’t end up having your stylization pop up in other pages and posts. In this case, I want to make only that second “Reason” highlighted, and only on this post. There’s actually an easy way to do this just using CSS! In WordPress, every post has a unique identification number that gets outputted into the HTML as a CSS id. So every post in WordPress has a unique number that you can anchor off of, which means your stylizing doesn’t have to affect the other posts.

HOWEVER….

Since this post is about CSS AND JQuery, I’m going to take the hard route and make like I missed the id. I’m going to work only with CSS classes. Classes can be a bit problematic to anchor off of in WordPress because they are often globally applied on all posts, meaning my stylizing could potentially be applied site wide. In this case, I just want my stylizing to affect one specific post. Nevertheless, let’s live dangerously and code on using classes!

First I have to map things out. The image below will demonstrate all of my targeting using the inspector on Firefox.

using the Firefox inspector for targeting

See, only classes here!

2. Construct a complex CSS selector to target my element

Now that I have isolated the elements I need to work with, I’m going to build out my complex CSS selector.

This is how it looks in the style.css file:

style.css

header.entry-header + div ol:first-of-type li:nth-child(2) {
    background-color: yellow; 
}

This article isn’t about building complex selectors per se, so I’m not going to get into the logic behind this complex selector. I do always use the w3schools.com CSS selector guide to help me build them out though. Check it out here.

The upshot of it here is that you can see that I’ve drilled down the DOM to target a very specific element. Using complex selectors, you can target all kinds of specific elements in pages. The more complex the selector, the less chance there is that your stylization will pop up on another, unwanted page.

Astute CSS coders might have noticed that (depending on certain factors) it may have been possible for me to get away with not even referencing the “header.entry-header” part of the selector. I included it here on purpose though, just to make my complex selector more…well…complex, for the purposes of demonstration.

3. Apply the stylizing

As you read up above I would place this declaration block in the style.css file.

Preferably, I would add it in the style.css file of my child theme, because working with child themes is usually a more robust way of customizing WordPress. There are times, however, when as developers we don’t have the luxury of working with a child theme, and if you have chosen the route of doing as much customization as possible with CSS + JQuery, chances are you’ve made the decision to do so because you are locked out of much of the site. If that’s the case, then you want to place all declaration blocks you cook up at the very bottom of the style.css file of the theme you’re using. You want your declarations to come last.

The cool thing is you don’t even need ftp access to do so. You can access the style.css file under appearance –> editor in the administration side of a WordPress installation. (Definitely NOT recommended, but possible.)

Ok, so once you apply that, the yellow background colour should show up as so.

CSS + JQuery in WP :: Highlighted point

As I mentioned above, if I were anchoring off of an id, so long as my theme page has been properly coded, there is essentially no chance that the stylization will repeat elsewhere, because id’s are unique.

So, yes, if I were anchoring off of an id, my job would be done here, and we could call it a day. I’ve used a class, however, so we have a little more work to do to make my stylization unique to this post.

4. Copy/paste the complex selector and use it with a JQuery script that checks for a specific URL

The last step we need to do is construct the JQuery script that will apply this stylization only on one specific page.

Here’s the code for that:

header.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

header.php

<script>    
        $(document).ready(function() {   
            var url = "http://wordpressgeorge.com/2016/03/09/css-jquery-lots-of-wp-customization/";    
            
                      if (location.href==url) {                  
                        $("header.entry-header + div ol:first-of-type li:nth-child(2)").css( "background-color", "yellow" );        
                    }            
            });    
</script>

And here’s the whole script in context:

CSS + Jquery :: JQuery script in header

Much like with CSS, this isn’t an article about JQuery per se, so I won’t get into the nitty gritty about what’s going on above. Suffice it to say, this script does the following:

  1. Plugs in the base JQuery library
  2. Checks to see if the document has loaded (is “ready”)
  3. Makes a variable out of the URL of my post
  4. Checks to see whether the “location” (address bar) at the top of my browser matches my variable (i.e. that the address bar matches the URL of my post)
  5. If there’s a match, it adds an inline CSS style to the element in question.
Now here are a few kick-a*s things about all of this:
  • I didn’t have to go through the hassle of re-targeting the element. CSS and JQuery work with the same DOM targeting. I just copy/pasted my complex selector from CSS straight into JQuery
  • Now that I’ve taken control of the element using both CSS and JQuery, I can do all kinds of cool stuff: animations, transitions, change its position (i.e. alter all or part of the interface layout) even convert the <li> tag into a completely different tag!
  • Just like CSS, I don’t actually need deeper FTP access to apply all this. So long as I have WP admin access. Everything is essentially an addendum (not a modification) to already existing code, so I can simply add everything inside the <head> of the header.php file, even using WordPress’ own built in editor if I’m in a pinch.

Use your new WordPress God-like powers wisely

Just because the combo of CSS + JQuery can give you loads of control over WordPress customization, all with limited site access, doesn’t mean its always the best route. For reasons why, I’ll refer you back to Part 1 of this article.

With (coding) power comes responsibility, so it’s best to use you’re CSS + JQuery + WP knowledge wisely–mainly to get you out of sticky situations such as stubborn code and/or stubborn clients.

 

Comments

comments

Leave a Reply