Featured Image Fallback for Child Pages

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.

Highlighting parent page in WordPress menus

Menus in WordPress are a really simple and easy way to manage various navigation bars in a theme. wp_nav_menu() does a lot of the work automatically and includes a number of CSS classes for styling. Highlighting the current page is especially useful using .current-menu-item and .current-menu-ancestor classes.

There was one issue I recently ran into though. In order for the top-level page to be highlighted when a sub-page has been selected, you must have the sub-pages added into the navigation. This makes sense but for a recent project I wanted to make it easy for the client to add sub-pages to the site without having to also add the pages to the WordPress navigation menu for parent-menu highlighting. I wanted top-level pages to have the .current-menu-ancestor to be added regardless if it was in the a sub-menu.

Below is a solution for this problem. With the way I setup my project was a handful of parent pages with an undefined number of child pages. I then added the parent pages to the Menu. We didn’t want a dropdown menu.

Here we add a filter to the classes generated during the generation of the menu. First we check if we’re on a page with is_page(), if not we don’t filter anything. If we are on a page we access the current post from the global $post variable and look for the topmost parent, if we don’t find one the current post is not a child and we don’t filter anything.

If we’re on a page and we found a topmost parent we then check if the current menu $item being generated matches the topmost parent we found. If so we add the .current-menu-ancestor CSS class.

Such a simple solution which makes the editing experience easier for the client when working with a custom theme.

Self Doubt

I was a person who always had excitement and passion in my career. I was excited when I got my first job as a web developer and I pushed myself hard to learn everything I could to be knowledgeable in everything I did. For years I would have ideas and build them, find new tech and try them. But things happened along the way and I lost my passion.

I’m taking it back.

Looking back at the beginning of my career I had a lot of confidence. I also had no idea what kind of effort things took. I would say something as silly as “I could build that  e-commerce system in 3 weeks!” only for it to take a year to build and then never launch. I was audacious, willing to dive into something I knew nothing about in an effort to force myself into a sink or swim situation. I grew quickly that way and stayed afloat more often than not.

My confidence allowed me to have strong opinions about work, the industry, and running a business. If I had a strong opinion I would share it and if things continued in a way I didn’t agree with I moved on. If someone told me I couldn’t do something or something wasn’t possible my response was always “watch me”. People telling me “no” was a great driving force for me, I wanted to prove them wrong. Go too far though and you become an asshole. I might have gone a bit too far in that direction at times.

I know I can get my confidence back, it’s the self-doubt that holds me back. I’ve had plenty of ideas in the past of things I’d like to build: just for fun ideas, business ideas, startup ideas, etc. Some of them I’ve developed the concepts without any polish, others I’ve designed the visuals or the database/api structure, and some are just sketches in my notebook. The thought of “does this even matter?” has kept me from finishing them. Some of these ideas I’ve actually seen come to life by others.

Why does it even have to matter? I think I’ve too often judged the validity of my ideas on the basis of how the startup world always talks about disruption or changing the world. Setting the bar like that causes a sense of embarrassment inside me for even wanting to share the idea if it doesn’t disrupt or change the world in some significant way. I know it doesn’t have to but there is also a feeling of personal validation for what I’ve built. In a way building the ideas that “change the world” are also building my identity and recognition in the communities I’m involved in. That doesn’t sound very humble at all. I think everyone is looking for some form of recognition in what they do but I don’t believe our identities should be shackled to the things we did.

Today I’m making a change. For too long I’ve been stuck in self-doubt. It’s suffocated my confidence. Writing this post alone took me all week to do and even now I’m still considering if I should post it or not. Publishing it is my step towards acknowledging and breaking this cycle. I’ve got a couple ideas I’ve been thinking a lot about that I’m starting to work on and even blocked out Friday’s completely to focus on them without any interruptions, to start writing again, and getting involved in the community.

I’m going to build things for the joy of building things again.

Smoked integrated taillight

via Instagram
via Instagram

This thing is gonna be all blacked out! The light is a lot brighter than my previous one and has a couple different features. First is that when the brake is applied the light flashes bright a few times before holding bright as a warning to drivers behind me that I’m braking. This gives better visibility and makes it that much safer. It also has sequential turn signals, meaning that the turn signal blinks from the center and on to the outside to indicate direction. Below is a video of how it works on a newer bike: