There is a lot to love about the WordPress Kahuna theme. But, one of the things I don’t like is that the inside page titles are over the banner image. I can customize the code with a child theme, so it’s not a big problem. Or is it? The quick and dirty fix I did for visual appeal messes with both the SEO and the UX (User Experience) of my site. But, when I started the fix to do it right, I uncovered more than I expected.
Fix This: The Placement of the Page Title in the Kahuna Theme
In the Kahuna theme, the page title is placed over the top of the banner image on all pages. At first glance, it is an appealing design, but is the title specifically noticeable and readable? My dislike does not apply to text over banners or other images in general, only for the usability of the page title.
At this point, I haven’t found documentation that supports my dislike, but I have the following objections:
- A title should be close to the text it belongs with.
This is the principle of Proximity. “Items related to each other should be grouped together.” ~ The Non-designers Design Book by Robin Williams. - If the text has a subtitle, the subtitle can be understood to be the title.
- There are so many little blocks and images with text on websites in general, a reader might not associate it with the page content at all.
- The fact that there are numerous articles about how to make text over an image more readable. Mostly, the existence of those articles point out that there is a problem.
What’s Wrong with a Quick and Dirty Fix?
So, I fixed the offending overlay with the quick and dirty trick of hiding the title with CSS. And, I made a bigger mess for myself.
How Did I Hide the Page Title (H1)?
Hiding the page title (the H1) is just a line of code, if your site already has a child theme in place. (The creation of child themes is a different topic.) The page title is added to the page by the code of the parent theme. I didn’t remove it, I just hid it. All I did was add the following code to the file called style.css in the child theme:
#header-image-main-inside #header-page-title
{
display: none;
}
Because it’s only hidden with CSS, the page title is actually still there in the HTML that the server sends to the Viewer’s computer. You can see this by going to View Source in your browser. One article I read, suggested this very method of removing a page title from view. But, really, it’s just a hack, not a best practices solution.
Why Is this a Problem
Hiding the H1 tag is a problem because then there isn’t a Page Title for the viewer. So, the viewer can not even see what the article is about without reading the content. Oooops! Egg on my face.
The Right Fix
The right fix is to move the code to the content area, right above the content itself. This process is done in the child theme. Kahuna is a somewhat complicated code base, so the first step is to track down the code that puts the title on the post and pages.
Step 1: Find the Code in the Theme Files
The first question is where the code is that puts the title over the banner image. Each theme has its own code patterns. Learning to code in one WordPress theme does not mean that the next theme’s code will be obvious. A well written theme will have comments that help, but many coders do not think about the people who have to read their code. So, you have to go on a hunt!
We already have a couple of clues above. The code from the CSS and the screenshot of the HTML both show that there are layers called #header-image-main-inside and #header-page-title. The coder did give us clues as to which file to open because of the word header in the layer names. The first place we should look is header.php.
Sure, enough. There it is at the end of the <header> layer.
<div id=”header-image-main”>
<div id=”header-image-main-inside”>
<?php cryout_headerimage_hook(); ?>
</div><!– #header-image-main-inside –>
</div><!– #header-image-main –>
</header><!– #masthead –>
Well, not so quick. It really isn’t the code that puts the Page Title over the image, it’s a call to the function that puts the Page Title over the image. Our hunt is not finished. Now, we need to find the function cryout_headerimage_hook(). A function in WordPress is a block of code that does a specific task of creating something for your website. You can tell it’s a function because of the () at the end.
Where is it likely to be? The simple solution would be the functions.php file, but this theme does not work on simple solutions. Opening up the file, we find that function is not in functions.php.
Looking at the name of the function cryout_headerimage_hook(), it seems that the code might be in the cryout folder, but the cryout folder has many files. Instead of looking through all the files, I can do a find on the file structure with the tool I use for writing code. The Find function shows that the most likely location is themes\kahuna\includes\core.php. And, sure enough, a look at the file shows that is where the banner image code it, But, it takes some further digging to find the banner title.
Most often there are several functions that make an area of a website. In this case. there are the following:
- function kahuna_header_image_url()
- function kahuna_header_image()
- function kahuna_header_title_check()
- function kahuna_header_title()
- function kahuna_title_and_description()
Step 2: Reconsidering my Plan
Each one of the functions listed above creates a different part of the banner image area. But, do I really want to change the whole banner image area? No, what I really want to do is jut move the title out of the header and into the content area. So, that could mean just commenting out code in the header and adding a line of code that puts the title in the content area, instead of moving code from the header. The code in the header is tied to a lot of complication and the code to add the header is just one core function call: get_the_title() or the_title().
Step 3: Finding Where to Put the Title in the Content Area
The code trail for posts starts with the single.php file.The function get_the_title() has to be in the loop, so I look for the loop in single.php.
Reading the code in that file, I found something unexpected. I found that the Kahuna theme already has a function call in single.php that seems to include the title where I want it. The question is, why isn’t that code doing anything? Generally, code is there for a reason, and that reason is that there is a setting that I missed somewhere in the Customizer.
Digging down further, I found that Titles can be set up in three different places in the Customizer. Each title function is activated by different settings in the Customizer. The main site title, which would normally appear on the Home page is set in Dashboard -> Customizer -> Site Identity -> Site Identity (yes, it really is twice). …
The problem here isn’t code, it’s a poorly designed Customizer. Coding isn’t needed to make the fix, but tracking down the code helped me figure that out. This goes to show that software development teams have different strengths. UX is not a strength in the Kahuna Team.