How to Hide/Remove Archive Headlines in Genesis

I’ve seen this question several times in the past few months, more often from people who have been using Genesis for a while and change to a new child theme. Here’s what’s happened: they install their new theme and discover that at the top of category archives, or custom post type archives, or their blog page, there are now archive headlines where there did not used to be. They don’t want them there, so ask for help removing them. There are a few ways to tackle this, and some are better than others, so let’s talk about what the options are, and the best way to handle the issue.

I think the first and most important step is to ask, “Why is this happening?” If you’ve been using Genesis themes for a while, you may scratch your head on this, because it is relatively new behavior. Although it’s always been the case that you could add an archive headline, in the past, it’s been something you’ve had to add on your own, and has not displayed automatically. So something has changed, but what is it?

When Genesis 2.2 was released, the end of summer 2015, it implemented a significant number of changes, many of which were not visible or readily apparent to most users. Adding archive headlines is likely one of the more visible results, and it’s disconcerting to some users who don’t expect it, and if they’re used to the older way of doing things, they’d like to get rid of them. What are these changes and why were they added? They were added to make the Genesis Framework and child themes accessible.

What does that even mean? Accessibility isn’t a new idea, but it’s one that is really starting to gain traction in web development. One of my favorite definitions of accessibility comes from Robert Jolly’s presentation at WordCamp Tampa 2015:

While we might be tempted to think of accessibility as a minor issue, I’ll suggest that accessibility can affect many of us, sometimes more than others, both online and off:

• Visual: users with no vision, or limited vision (raise your hand if you wear glasses), or color blindness, who need well sized text alongside graphics online or on signs, or the audible beep signaling that it’s safe to use a crosswalk
• Physical: users with limited mobility, who might not use a mouse, or need help opening a heavy door due to weakness or pushing a stroller
• Hearing: users with partial or total deafness, or who are in a loud coffee shop, or who need captions on video because they can’t hear, babies are sleeping, or because they read better than they listen
• Cognitive: users with dyslexia, ADD, or aging related issues, who need clearer or larger fonts, or louder volume, or slower speech
• Situational: users with noisy children, or sleeping babies, or a wrist brace, or who haven’t slept in two days, or who are accessing your site using a small device, such as a phone

So what’s relevant for us today is that these archive headlines are intentionally added in newer Genesis child themes because they’re adding specific support for accessibility. They help all users know where they are on the site, what the topic of the archive is, and what to expect from the posts or content below. If you really don’t want the headlines to show, here are some different ways to hide or remove them.

Option #1: Hide it completely with CSS

This is the absolute worst option, and if you’ve done it yourself, or someone has done it on your behalf, please take steps and immediately fix it. This is the display: none; option. I see this CSS too often (once is too often, and yes, I just ran across this on a site last week):

/* Never, never, never do it this way: */
.entry-title, .archive-title, .archive-description {
	display: none;
}Code language: CSS (css)

Although there is a time and a place to use it (I’m thinking of elements which might start out hidden, but be revealed on hover or click, such as navigation), I’m going to go out on a limb and say this:

When it comes to text on your site, display: none; is never okay.

Yes, it will hide the text visually, but it also hides it from users using assistive technology such as screen reader software. So you’ve taken something important, like a sign, and essentially removed it.

Option #2: Hide it visually with CSS

On the surface, this may sound similar to option #1, but it’s a much better approach, although will take some work. The newer Genesis child themes include CSS for a class called screen-reader-text, which hides text visually, but leaves it accessible for assistive technology:

/* CSS for screen reader text support */
.screen-reader-text,
.screen-reader-text span,
.screen-reader-shortcut {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}Code language: CSS (css)

So you could take the selectors for the archive titles and style them with the same rules:

.entry-title, .archive-title, .archive-description {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}Code language: CSS (css)

This option is better, because the headline is still actually there.

Option #3: Hide it visually with PHP

A similar option to #2, without having to add the CSS rules to every kind of title, would be to use Genesis’ attributes filter and add a screen-reader-text class to all of the archive titles:

// Add screen-reader-text class to archive titles
add_filter( 'genesis_attr_archive-title', 'leaven_hide_archive_titles' );
function leaven_hide_archive_titles( $attributes ) {
	$attributes['class'] = 'screen-reader-text';
	return $attributes;
}Code language: PHP (php)

Since your theme already has the CSS for screen reader support, your headlines will be hidden visually, but available for screen readers. One disadvantage with options 2 and 3 is that the markup for the headline and description will still be present, so you may be left with an empty block of space that needs to be adjusted with CSS.

Option #4: Remove the archive titles

Another option would be to remove the headings from the accessibility support in your theme, or to remove accessibility altogether. Here’s how accessibility support is added in a child theme, and why you’ll see this behavior in the newest Genesis child themes, but not some of the older ones, unless they’ve been updated since Genesis 2.2 was released:

// Add Accessibility support
add_theme_support( 'genesis-accessibility', array(
	'404-page',
	'drop-down-menu',
	'headings',
	'rems',
	'search-form',
	'skip-links'
) );Code language: PHP (php)

These are all options for accessibility support, and each element in the array handles different things on your site. If your theme has this line, or a similar one, it’s adding Genesis’ support for accessibility. The archive headlines are added by the headings line. You can remove that line (or the whole add_theme_support, which would remove all accessibility support). This would set your archive headlines back to only being added if you intentionally add them yourself, and archives without intentional headlines won’t have them.

What this option does is to remove the headline for everyone–users using assistive technologies, visual users, search engines–everyone. It’s not just these archive headlines, either–this also affects visually hidden headings for navigation menus, sidebars, comment sections.

However, headlines/headings are an important part of your site structure and can help guide your users, no matter how they’re accessing your site, so let’s look at the final option.

Option #5: Leave the archive headlines in

This is my recommendation: accept that headings and headlines are useful signs for your website, and that by using them, you’re helping make the internet a better, friendlier place to be. If you don’t like the automatically created headlines (usually just the term/post type/page name), go ahead and create your own and make it whatever you like. For bonus points, add a brief description.

If you find the headline to be a distraction, I would ask why. Is it visually inconsistent with your site? Then style it. Do you think it’s nonsensical? It’s possible that it’s exposing an organizational weakness of your site structure.

Headings guide your readers through your site and content, not only for accessibility, but also for organization. If supporting accessibility highlights where your content may be less than organized, view it as an opportunity to improve your site for everyone.