Continuing on from the same project where I needed to highlight a parent page in a WordPress menu when on a child page, featured images is another place where I wanted some custom functionality. This custom functionality I’m about to share wasn’t necessarily a requirement but I wanted to make it as simple as possible for the client to edit the site easily while still maintaining the design the designer had created.
As I mentioned in the last post the site was designed to have a handful of top-level pages (parents) with an undefined number of related child pages. This site also uses the static front page option in WordPress. The site’s layout was a top header navbar, then below that a featured image with text overlaid, then the page content below that.
What I wanted to do to implement the featured image was to build in a fallback so that we always have a featured image displayed behind the overlaid text. The other option would be to have a different layout where the featured image is not displayed and the page content contains the overlaid text above the actual page content. The fallback is a bit more graceful so I decided to do that.
Below is my solution for this fallback. First we want to see if the current page has a
post_thumbnail (which is our featured image). If the current page returns a
post_thumbnail we want to use that. The client should be able to specify an image for any page they want. Now if we don’t find a
post_thumbnail on the current page I want to check the topmost parent page for it. This would allow the client to set a featured image for an entire group of child pages. And finally, if a
post_thumbnail was not returned from the topmost parent page we would then check the defined static front page and pull it from there.
More simply the fallback for the
post_thumbnail would be: Child Page -> Parent Page -> Front Page.
It’s unlikely we wouldn’t find a
post_thumbnail like this but we could return a hard-coded default to account for that possibility if we didn’t find one on the front page.