Often people choose a WordPress theme because they want to avoid having anything to do with code. But the reality is if you don’t know any code, you’re going miss out on a lot of ways to get your site just the way you want it to be. And even if you know just a little bit of code, it can have a substantial impact on how you can make your site look.

As an example, I’d like to show you how to update the look of the site title and tagline. These instructions assume that you have already looked into or are currently looking into the Big Bob theme customizer. The easiest way to understand what I’m writing about is to open your site in a new browser window and perform the commands as I reference them.

Suppose you have a logo, but the logo doesn’t adequately explain what your website is for. So you decide to click the checkbox marked as “display site title and tagline” in the site identity section of the customizer. You have now solved the problem of people understanding the nature of your site, but now you don’t like the look of your new homepage, but you realize that you can change the look of your new text using the Additional CSS section of the customizer.

First you realize that you don’t know how any of the elements on the screen are defined so you right click on the title then you scroll down and click inspect element (or it may just read as inspect). You see what you’re looking for highlighted in the new window.

You don’t think that you need the title because the title is explained in the logo. You see in the new development tools window that the title is defined by the class “site-title”. So to get rid of the title, you add the following code to the Additional CSS section of the customizer:

Great. The title is gone.

But you still don’t like the way it looks. The picture underneath the text is dark, so you don’t think you need the background shadow. And you think that the remaining description would be better if it is bigger and bold. And you think the text should be extra big on bigger screens.

You look up all the classes in the developer tools of your browser. You can tell which class belongs to which because when you hover your mouse over the class name the corresponding section on your site screen becomes highlighted.

The only other problem is you can’t remember any of the css property names to make the changes, but you also know that information is easy to search for on the internet, especially if you look it up in W3 Schools.

Once you’ve found all the information you need, you add the following code:

Looks pretty cool, huh?

Of course, you may be wondering why I didn’t just add these features to the customizer options. You make a fair point. But there’s a reason why WordPress added the Additional CSS section to every customizer. The problem is I can only do so much to anticipate what people are looking for and create a generalized set of options with a user interface until I reach a point where a generalized set of options either isn’t satisfying or is more complicated for the user to figure out then just teaching the user how to enter the information manually.

Then again. Maybe this particular case is a case where I should add it as a customizer option. We’ll see.

Author’s note: Version 1.1 of the Big Bob theme provides a feature similar to the one described above in the site identity section of the customizer.

Oh, by the way, if you can’t figure out how to close that new developer window just hit the f12 key.