When Technologies Collide: Finding the Right Pieces for the Puzzle

When Technologies Collide: finding the right pieces for the puzzle

It’s a wise thing to understand your website’s technology. Then when the technology behaves unexpectedly, it’s easier to both understand why and find a solution.

An example is the header images in the Kahuna Theme. What if you want to control the images for each page individually? Is there a hole?

WordPress has functions for Posts, Pages, Media Libraries and Post Categories in the default install. The first thing to understand is that, while each of the structures has similarities, they are all run by different templates. That means that something you can do in one may not be available in another … or, they may work in both. And, it’s best in the long run, if a theme writer uses the core WordPress functionality, but that functionality may not do precisely what the theme writer … or the website owner … wants.

An Example Using the WordPress Kahuna Theme

This article is a WordPress Posts. WordPress Posts can have Featured Images. This is where you add a Featured Image.

I received an email from a client Dorothy Patent who is learning how to work on her own WordPress site. Dorothy asked, “I’ve been successful in getting a banner image (not one I’ll keep there, but succeeded in getting it there!!) for my Nonfiction Minute page, … However, I can’t figure out how to get a banner image of my choice for the “Category” for the dog blog home page. There doesn’t seem to be a way to get an image of choice for the banner for a “category” page …”

The key here is that Posts, Pages and Categories all run on different template files (single.php, page.php and archive.php). In the Kahuna theme, both single.php and page.php pick up the Featured Image and use it as the banner image. But, there is no Featured Image option for Categories in the WordPress Dashboard. So, we can pursue several possible solutions 1) the Kahuna theme has to provide a way to control the banner image for Categories, 2) a plugin can work with the Kahuna theme to attach a photo to a Category, or 3) images can be coded into a child theme. If Possibility 1 exists, it is the only solution that we can be sure that the code is already written.

The skill levels of the possibilities listed here go from WordPress Power User to WordPress Coder

Possibility 1: Does Kahuna Have a Way to Control Banner Photos for Category Pages?

The only option I have seen in the Customizer for Kahuna to select a banner image is in Appearance -> Customizer -> Site Identity -> Header Media. This function is very limited. It allows you to set a default image for the header. You can override the default image on individual Posts and Pages by adding a Featured Image, but Categories don’t have a Featured Image.

The only advantage you have gained is in controlling what image shows on all of the Category pages. For Montana Webmaster, an image of people using a laptop and electronic device is appropriate. But, it’s not relevant to a site about dogs.

Dorothy and I tested this method for her site yesterday (11/8/18) and found that it will meet her immediate needs. Now, she needs to go through the process of finding a suitable image.

But, what if you want to choose a different image for each Category, the way you can for Posts and Pages?

Possibility 2: Would Kahuna pick up a category image if there were one?

The Category Images plugin adds an image field to Categories. The images are added through the Media Library, and the plugin adds a record to the database to connect the image to the Category. In order for Kahuna to allow a different image for each Category, it would either have to duplicate a process like this itself or it would have to have code that matches the exact code for the plugin.

Since the Kahuna theme and the Category Images plugin are written by different people, it is not likely that these two technologies would work together this way. More than one plugin may be available to do the job; new plugins may be written and existing plugins may become unsupported.

In the case of the Category Images plugin adds a record to the options table in the database for each image added to a Category. The Kahuna theme writers would have to write code to test for the presence of that plugin and would also have to write code to find and use field values, if they exist. So, Possibility 2, isn’t really a possibility.

Possibility 3: Coding in the Child theme

With the use of code for each Category in the child theme, you should be able to override the parent theme programming to control which image goes with which Category. But, every theme has its own file and function patterns within a few requirements from the WordPress core. So, the first step is figuring out where the changes need to be made.

The child theme and parent themes are found in the wp-content/themes folder.
Before you can add code to the child theme, you have to track through the files in the parent theme to find what code to change.
There are two places where the banner image could be. Theme writers choose how they structure their files. The first place could be in header.php. If the code is in header.php, the code has to differentiate between the various types of content so that the Home Page, Category pages and Posts/Pages can each have different banner images. The second place the banner image code could start is in archive.php.
Opening the header.php file, we find the following code on line 61 that looks promising.
<div id=”header-image-main”>
<div id=”header-image-main-inside”>
<?php cryout_headerimage_hook(); ?>
</div><!– #header-image-main-inside –>
</div><!– #header-image-main –>
There are two ways to test whether this is the right place in the code. The code in #4 includes the PHP code. The code here shows the HTML and CSS code that results from the server processing the PHP code.
1. First, we can use the CSS <div id=”header-image-main-inside”> and check whether the default image is inside it. Sure enough! The default image lunch.jpg is inside the div!
  <div id=”header-image-main-inside”>
  <div class=”header-image” style=”background-image: url(https://montanawebmaster.com/wp-content/themes/kahuna/resources/images/headers/lunch.jpg)” >
  </div>
  <img class=”header-image” alt=”Category: Business Topics” src=”https://montanawebmaster.com/wp-content/themes/kahuna/resources/images/headers/lunch.jpg” />
2. Second, we can add test text. I changed the first line of the code in A to <div id=”header-image-main-inside”>testing the header. The text shows that I have the correct piece of code … for a starting place!
But, finding that <?php cryout_headerimage_hook(); ?> is the correct code is only a starting place because this code is just a function call. In fact, it is likely that we will have to track through several files to find the code that actually does the work. Now, we have to find the cryout_headerimage_hook function. One way to do that is with a site search of the code. I will do that in the Sublime Text tool.
A search on the themes folder shows 2 additional instances of cryout_headerimage_hook() in two different files. The files are in kahuna/includes/core.php and kahuna/includes/hooks.php.
The hooks.php file connects the Kahuna code to WordPress, but does not have the working pieces. So, we can assume that the next file we need to look at is core.php.
1. In core.php, the following code, starting on line 125, is a likely candidate for adding code to switch images in Categories. The code already makes a difference for the home page with if(is_front_page() … We can add further elseif’s for the Categories.
  /**
  * Header image handler
  * Both as normal img and background image
  */
  add_action ( ‘cryout_headerimage_hook’, ‘kahuna_header_image’, 99 );
  if ( ! function_exists( ‘kahuna_header_image’ ) ) :
  function kahuna_header_image() {
  $header_image = kahuna_header_image_url();
  if ( is_front_page() && function_exists( ‘the_custom_header_markup’ ) && has_header_video() ) {
  the_custom_header_markup();
  } elseif ( ! empty( $header_image ) ) { ?>
  <div class=”header-image” <?php echo cryout_echo_bgimage( esc_url( $header_image ) ) ?>></div>
  <img class=”header-image” alt=”<?php if ( is_single() ) the_title_attribute(); elseif ( is_archive() ) echo strip_tags( get_the_archive_title() ); else echo get_bloginfo( ‘name’ ) ?>” src=”<?php echo esc_url( $header_image ) ?>” />
  <?php cryout_header_widget_hook(); ?>
  <?php }
  } // kahuna_header_image()
  endif;
Now that we have a possible location to put code, we need to think through the code. If we want a different banner image for each category, we have to tie an image to each category individually. That means that each category has to have it’s own code.
1. There is one banner template file that runs all the pages. So, we have to test for each category. We can use the is_category() function in the WordPress core.

Resources

https://code.tutsplus.com/tutorials/a-guide-to-overriding-parent-theme-functions-in-your-child-theme–cms-22623

How to override parent theme functions in a child theme