Fix WordPress Problems With CSS

No person is perfect and no software is perfect. That’s just the reality of complex systems. That reality can lead to problems, big and small, that sometimes you just want a quick fix to before you tackle the root of the issue.

A quick fix to a small WordPress theme problem is what I want to talk about in this post. As I said in an earlier post, sometimes WordPress and technology in general can cause a certain amount of “headaches”. My theme was causing me a small headache.

The Problem

In this screenshot you can see how on my homepage, which lists my latest posts, that there was a double title.

I went through every setting in the WordPress customizer, both for my theme and the general WP settings, to try to find what setting controlled this text.

It was no use! I looked everywhere and couldn’t find what option to tweak to get rid of this extra title. That was my headache!

So the next logical step was to break out the dev tools. In this case I was using Chrome but I’m sure any browser’s dev tools would have worked.

The Investigation

With devtools open I opened the Elements tab. Then I right-clicked on the unwanted text “DUANE’S BLOG” (circled in red above) and chose Inspect from the browser menu that pops up. Here’s what I saw:

Interesting, right! If possible I wanted to correct this problem at the source and not just apply a “quick-fix” so I searched through several PHP files trying to quickly find how this was generated. In summary I couldn’t find what I was looking for with a quick search and I didn’t want to invest a lot of time. After about 10 minutes I decided that for now I just wanted the “extra” title to disappear.

The Solution

Looking at the above HTML I decided some simple CSS would do the trick. Fortunately the element containing the title also had a class applied to it. We can see from the fact that there’s a single class and from the class name that this class is super specific – “archive-title”.

<h1 class="archive-title">Duane's Blog</h1>

I decided I was just going to “turn off” this title. A little CSS to the rescue

.archive-title {
  display:none;
}

Problem solved! Well at least the immediate problem was solved and the deeper issue of finding how this was being generated could wait until I had more time. I was satisfied that the front page of my site was looking the way I wanted.

To implement this fix I turned to the “Additional CSS” feature in WordPress.

A nice feature of the Geneis theme framework is that your actual theme gets installed as a child theme. So I felt safe making this change without worrying about it getting overwritten on the next update,

Before ending this post I would like to point out that I think the Genesis framework is excellent. It’s powerful and flexible giving it a great deal of extensibility. I’m not a Genesis expert so it’s probable that there is a quick and elegant solution to this that I missed. I think that my solution though is quite focused and has minimal impact to any other part of the theme and hence my site. Mission accomplished!

If you read this far thanks! I hope this wasn’t too detailed a post for such a minor problem and its fix. As always your constructive feedback is welcome via the comments or you may contact me directly.

Leave a Comment