Posts

Highlighting parent page in WordPress menu’s

Menu’s 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.

<?php

/**
 * Add the 'current-menu-ancestor' class to a parent page menu item where the child page is not part of the menu.
 *
 * @param array   $classes The CSS classes that are applied to the menu item's <li> element
 * @param WP_Post $item    The current menu item
 *
 * @return array The filtered CSS classes.
 */
function active_parent_in_menu_for_page( $classes, $item )
{
    global $post;

    if ( !is_page() ) {
        return $classes;
    }

    $page_parents   = get_post_ancestors( $post );
    $topmost_parent = array_pop( $page_parents );

    if ( empty( $topmost_parent ) ) {
        return $classes;
    }

    if ( $topmost_parent == $item->object_id ) {
        array_push( $classes, 'current-menu-ancestor' );
    }

    return $classes;
}

add_filter( 'nav_menu_css_class', 'active_parent_in_menu_for_page', 10, 2 );

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

Problem Solving

“Software is messy because it reflects our evolving understanding of the problem as we wrote it.”

– Sarah Mei

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: