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

Developers don’t often realize just how much control they have over customizing a WordPress theme simply by using CSS and Jquery. They often assume that they need to dig deep into PHP or into the HTML of highly modularized templates to do what they need.

The truth is, however, you can accomplish a good (let’s say) 80% of what you need just by honing your CSS and Jquery skills. You can even go as far as rearranging the position of elements (i.e. actually re-jigging the layout) without touching HTML! You could even arguably do all this without the need to create a child theme, and still be safe for theme updates.

Let’s look at a few aspects of working mainly with CSS and Jquery to customize the front end.

Reason you’d want to do it this way:

  1. You only have limited access to files. Perhaps you were approached with this project from a non-industry person who doesn’t know how to relay FTP credentials to you, or perhaps you only have WP admin access and need to work off of the built-in editor and with plugins.
  2. You’re working with another author’s code, and you don’t have documentation
  3. You’re working with a complex, premium theme which charges you if you want to create a child theme.

The benefit of doing it this way:

  1. It’s a very modular method. Once you build the CSS and Jquery files right, you can just plug and play them.
  2. It’s pretty safe. You’re not meddling with the base code. Since it’s modular, you can always unplug your module (i.e. your file) if things get tangled or go sideways.
  3. Only one DOM to learn. One of beauties of Jquery is that it targets with CSS’s selectors and operators. Once you build your target in CSS to isolate an element. You can just copy/paste that complex selector right into Jquery to work on the behaviour of that same element.

The problem with doing it this way:

  1. You suppress or modify something that has already been defined.
  2. You can easily forget what’s influencing what when you revisit the site 3 months down the road–which will screw over the next guy working on it, or your future self (so keep development notes!)
  3. Too much double defining and overriding could cause issues with lack of efficiency and speed, if the site is deployed on a mass scale and really high bandwidth.

How much customization you do with CSS and JQuery, or whether or not you choose to use it exclusively depends on what the job demands. If you have back end demands, obviously they won’t suffice. If you have clear access to the theme files, sometimes altering their HTML and PHP is the easier and more accessible approach.

To keep things brief, I’ll leave this analysis as Part 1 for now. In Part 2 of this series, I’ll walk you through a process of how to effectively customize your theme with CSS and JQuery.





Leave a Reply