Adding Header Image Metadata to Front Page with WordPress Twenty Seventeen Theme

I wanted to customize things after seeing the latest WordPress Twenty Seventeen theme out of the box and tinkering with random header images.  I wanted to leverage the ability to not only use the out of the box ability to randomize images but display the header image metadata, including description and caption in a div along the top.

The images I use for this theme are various photos taken with basic point and shoots or cell phones.  But it’s the locations and time stamps I wanted to list out in a div at the top of the header.

End result of header image metadata displaying in wordpress theme

This enhancement requires going beyond CSS edits and into the PHP in order to achieve the desired results.

Create Child Theme

First step was to create a Child Theme based on the parent Twenty Seventeen.  Several plug-ins exist to make this an easy process.   I used Child Theme Wizard.  One thing to note is that copying a theme versus copying a theme and its existing settings are two different paths.  So if your blog has settings already configured, there are better plugins to perform child theme creation.  Second, go to Appearance > Themes and activate your new child theme.

Working with functions.php

Now head to Appearance > Editor in WordPress Admin.  You should see at least two files – functions.php and styles.css.  Open functions.php, this is where we will add a filter for “get_header_image_tag” as shown below.

Below the add_filter you will see the callback function that will get called EACH time the function get_header_image_tag is called in WordPress.  Notice in my custom function I need to check if the page making the call is the front page.  (My future plan is to use the else block to provide a link to a photo gallery where more information on photo is posted)

In our extended function we take the header object, which is given to us from the parent call to get_header_image_tag and determine it’s attachment id.  Then we use that attachment_id to go get all of the metadata and write it out to the screen in a div.  Finally, and most important, is that we continue to lifecycle of the original call and return the formatted html to the front page to display the header.

Helper Function for Getting Attachment Attributes

BTW If you are wondering about the wp_get_attachment() function, look at end of this post for information.  I’ve included it here as a snippet but read link below for details on how it works.

CSS Tweaks

In addition to this PHP extension in the child theme’s functions.php, we add some CSS markup to make the div look somewhat good.  My CSS skills are zero to negative a bigger number, so what is below may be unnecessary and overdone, but at end of the day it works.

If you’re testing and having issues, remember to not only flush your local browser’s cache but also WordPress’ cache.  Also many online hosts, such as GoDaddy, have their own caches that need flushing to see changes take effect.

Putting It All Together

Now upload a few header images and then via WordPress Admin add some metadata to the caption field, HTML is acceptable.

Clear cache(s), reload and the header image metadata will display.

zoomed in end result of header image metadata displaying in wordpress theme


Additional References:

Leave a Reply

Your email address will not be published. Required fields are marked *