Tech Tips: How to Hide Double Widget Titles on the Foodie Pro Recipe Index

A quick tutorial for how to hide double widget titles on the Foodie Pro Recipe Index.

Hey there! I’ve been wanting to start a Tech Tips Thursday series over here on Powersful Studios for a while now. I often work with bloggers or other designers who have specific projects for me, and sometimes I end up with code snippets and solutions that would be useful for anyone using Genesis. I am hoping to start sharing those here as a resource for others, and if you have any ideas for future posts you want to see, feel free to leave them in the comments below!

Today’s tutorial is a quick bit of code for getting rid of the double widget title I’ve been seeing around the web on blogs with Foodie Pro and a few other Genesis themes.

What does the issue look like?

Most of the time you see this issue in the Recipe Index like this:

Not so great right? And if you just delete the titles you’ve typed into the widget, or remove them in the code, you get this:

Also not so great. What we actually want is this:

Why is this happening?

There is actually a little bit of text encoded into some of the WordPress default widgets called “Screen Reader Text.” Like the name implies, it’s there to help users who may be using some assistive technology (like a screen reader) know and describe what’s on the screen when their device reads the page. This is especially useful for someone with low-vision who needs help interpreting what’s being displayed on the monitor. Similar to a closed captioning system printing dialogue on televisions for people who are hard of hearing. Most themes include some CSS styles to modify this screen reader text and visually hide it from view unless you’re using a screen reading device. Please correct me if I’m wrong, but that style rule doesn’t seem to be included in the current version of the Foodie Pro theme, so we are all seeing double: Widget Title Text and Screen Reader Text.

How Do We Fix It?

Thankfully, this is a super easy fix. All you need to do is add this bit of code to your theme’s style.css file somewhere before the section title that says “Media Queries”, save the file, and you’re good to go!

Did this tutorial help you? If so, I’d love to hear from you in the comments!

Linked up with Motivational Mondays.