Add a sitewide banner to the top of the page - WordPress Tutorial

- [Instructor] Let's say we have a short promotion we want to run, and we want to advertise that on every page on our site. We are going to add a site-wide banner to the top of every page. So here are the requirements. The CSS and HTML are provided. You'll need to determine the proper actions for inserting both into the site. But there is a caveat. Right now, the CSS is completely fixed, but this will cause an issue if a user is logged in and displaying the WordPress admin bar on the front end. So be sure to create a CSS exception to account for that. As a reminder, the admin bar is 32 pixels tall. Let's take a look at our starter code. So again, we have our output functions and you can see that the site-wide banner is actually echoing the banner with the class banner. And our banner styles function is just printing the styles in line. And again, as I said, this is fixed to both the top left and right, so we want to make some adjustment here. Our goal is to find the right actions to add this banner to our website properly. So pause the video here and unpause when you're ready to see the solution. (upbeat music) (tones echoing) Welcome back. First, let's add the action. So we'll say add_action. And we want the banner styles to go in the actual header. So we'll say wp_head and then we'll call our function lil_banner_styles. This will print the CSS in the head of our page. We also want to add the HTML but there's no discreet action to place it above the header inside the template, as we don't really know, based on the theme, what that would look like. So instead, we're going to add this to the footer. This is why we have our position fixed here, because no matter what our theme looks like, our banner will always display at the top of the page. So we'll say wp_footer, and then lil_sitewide_banner. So let's save this here and see what our site looks like. But before we do that, let's actually add the s. We got to make sure that these functions match. Now let's save our file and see what the site looks like. So you can see when we're logged out, this looks great. We see our banner. It says, "Join Us for Our Free Webinar!" But when we're logged in, we only see half of the banner. So how do we fix that? Let's go ahead and make an exception for our top position. So let's create a variable called top and we'll say top gets, and then we'll do a conditional assignment. So we'll say if is_user_logged_in, and if they are, we'll make top 32 pixels the height of the banner. And if they're not, we'll make it zero. So now we will replace the zero in top with our top variable. We will save this. We'll refresh. And now we see our full banner.