Context Dependent WordPress Banner

Note: I will be conducting a sexy SEO title writing workshop in the near future.

Goal

We’re moving our documentation.¹ We want to warn people of that fact just in case they’ve done something odd like bookmark a particular page, are referring to a link from an old email, etc. etc. The main DLINQ site uses the Avada theme and the items we want to target with the “we are moving this” banner are portfolio post types in a particular category.

Where am I? How do I know?

It’d be easy to staple this banner all over the place. I wanted it only on the Avada portfolio post type and only for a particular category (Tech) since we use that post type for other things.

First, I had to find out what the post type was. Looking at it I just guessed ‘portfolio’ but that was wrong. It was ‘avada_portfolio’ and I could find that out by echoing out get_post_type() on the kind of page I wanted to know about.

Then I needed to get the category the avada portfolio post type was in. If it was in a normal category I could use in_category to see what was up. This was in a custom taxonomy so I needed to see what my options were. I could do this by running get_terms. I then found out the custom taxonomy was ‘portfolio_category.’

I can now check to see if I’m in a custom post type called portfolio_category AND if that post is in the portfolio_category named Tech Resources.

Make it work

This chunk of PHP does what we want.

function dlinq_doc_change ( $content ) {
    $post_id = get_the_ID();

    if ( get_post_type() == 'avada_portfolio' ) {     
        $terms = get_the_terms( get_the_ID(), 'portfolio_category' );
        $tech = false;
       foreach ( $terms as $term ) {
            if ( in_array( $term->name, ['Tech Resources'] ) && $tech == false) {
                $tech = true;//great category found in object
           }
        }

        $cats = get_the_terms( get_the_ID(), 'portfolio_category' );
        if($tech == true){
            $alert = "<div class='doc-alert'>? We're moving our documentation to a new system on July 1. <a href='https://dlinq.middcreate.net/documentation/'>Check out the new version now</a>. ?</div>";
            return $alert . $content;

        } else {
            return $content;
        }
       
    }
 
    return $content;
}
add_filter( 'the_content', 'dlinq_doc_change');

//find match in object of terms returned
function array_match($needle, $haystack){
        $haystack =  (array) $haystack;
        $needle =  (array) $needle;
        foreach ($needle as $key => $value) {
            if( trim($value) != trim($haystack[$key]) ){
                return false;
            }
        }
        return true;
    }

Make it pretty

The next step was to draw some attention to the banner without going overboard. This CSS does a color fade animation and fixes it to the bottom of the page. Hopefully enough going on to draw attention but not so much that it is a pain.

.doc-alert {
	position: fixed;
	text-align: center;
	padding:  18px;
	 -o-animation: animaniacIt 5s ease-in-out; 
	animation: animaniacIt 5s ease-in-out; 
	width:  100%;
	bottom:  0;
	left:  0;
	z-index: 10000;
	background-color: #e5f1fa;
	border-left: 20px solid #0d395f;
	border-right: 20px solid #0d395f;
	transition: all .2s ease;
	font-size: 1.2rem;
}

.doc-alert a {
	text-decoration: underline;
}

@-o-keyframes animaniacIt {
  0%   { background-color: #FFFFFF; 
  		border-left: 0px solid green;
	  	border-right: 0px solid green;
  }
  50%  { background-color: #e5f1fa; 
  	border-left: 50px solid green;
  	border-right: 50px solid green;
  }
  100% { background-color: #FFFFFF; 
  	border-left: 20px solid green;
  	border-right: 20px solid green;
  }
}
@keyframes animaniacIt {
  0%   { background-color: #FFFFFF;
	  	border-left: 0px solid green;
	  	border-right: 0px solid green; 
  		}
  50%  { background-color: lime; 
  	border-left: 50px solid green;
  	border-right: 50px solid green;
  }
  100% { background-color: #e5f1fa; 
  	border-left: 20px solid green;
  	border-right: 20px solid green;
  }
}