Creating Sticky Headers in WordPress Themes
Posted on 21st June 2023
Creating Sticky Headers in WordPress Themes
When it comes to WordPress development, one of the most common requests from clients is the ability to have a “sticky” header on their site – that is, a header that remains at the top of the page, no matter where you scroll.
There are a few different ways to create sticky headers in WordPress themes, but in this article, we’ll focus on two methods: using the code provided by WordPress core, and using a plugin.
Let’s get started!
Creating a Sticky Header Using WordPress Core
The first method we’ll cover is using the code provided by WordPress core. This is the recommended method, as it doesn’t require any additional plugins or code libraries.
To get started, you’ll need to edit your theme’s header.php file and add the following code to the top of the file, just before the tag:
<body >
This code does a few things:
First, it checks if the header should be sticky. You can control this with a new function, is_sticky_header() , which we’ll cover in a moment.
Next, it adds a new class, sticky-header , to the header. This is what we’ll use to style the header when it’s sticky.
Finally, it passes the $classes array into the body_class() function. This is important, as it ensures that any other classes that were already being applied to the tag are still being applied when the sticky header class is added.
Now that the header has the sticky-header class applied when it should be sticky, we can style it using CSS. For example, the following CSS would make the header background color red when it’s sticky:
.sticky-header {
background-color: red;
}
You can style the header however you like, but make sure you’re using the sticky-header class in your CSS selectors.
Making the Header Sticky Based on Certain Conditions
So far, we’ve covered how to make the header sticky based on a single condition: whether or not the is_sticky_header() function returns true.
But what if you want to make the header sticky based on multiple conditions? For example, you might want to make the header sticky on the front page, but not on single posts or pages.
To do this, you can use the same is_sticky_header() function, but with a few additional arguments. For example, the following code would make the header sticky only on the front page:
if ( is_sticky_header( ‘front_page’ ) ) {
// Add the sticky class to the header
$classes[] = ‘sticky-header’;
}
The first argument is the name of the condition you want to check for. In this case, we’re using front_page , which will return true if the header is being displayed on the front page.
You can also pass multiple conditions into the is_sticky_header() function. For example, the following code would make the header sticky on the front page and on single posts:
if ( is_sticky_header( array( ‘front_page’, ‘single’ ) ) ) {
// Add the sticky class to the header
$classes[] = ‘sticky-header’;
}
The conditions you can use are:
front_page – Returns true if the header is being displayed on the front page.
home – Returns true if the header is being displayed on the home page (which is not necessarily the same as the front page).
single – Returns true if the header is being displayed on a single post.
page – Returns true if the header is being displayed on a single page.
singular – Returns true if the header is being displayed on a single post or page.
category – Returns true if the header is being displayed on a category archive.
tag – Returns true if the header is being displayed on a tag archive.
taxonomy – Returns true if the header is being displayed on a taxonomy archive.
archive – Returns true if the header is being displayed on any type of archive page.
search – Returns true if the header is being displayed on the search results page.
404 – Returns true if the header is being displayed on the 404 error page.
Creating a Sticky Header Using a Plugin
If you don’t want to edit your theme’s code, or if you want more control over when the header is sticky, you can use a plugin.
There are a few different plugins you can use, but we recommend the Sticky Header by Themehouse plugin. It’s available for free from the WordPress plugin repository, and it gives you a lot of control over when the header is sticky.
Once the plugin is installed and activated, you can configure it by going to Settings > Sticky Header.
The plugin has a few different settings you can configure, but the most important one is the Enable on screens setting. This setting allows you to choose which screens the header should be sticky on.
For example, if you only want the header to be sticky on the front page, you would choose the Front Page option. Or, if you want the header to be sticky on all single post and pages, you would choose the Singular option.
You can also choose to have the header sticky on specific pages or posts. For example, if you only want the header to be sticky on the home page, you would choose the Home Page option.
Once you’ve configured the plugin, the header will be sticky on all the screens you’ve chosen. You can then style the header using CSS, just like we did in the previous section.
Wrapping Up
In this article, we’ve shown you two different methods for creating sticky headers in WordPress themes.
If you want to use the recommended method, you can add a few lines of code to your theme. Or, if you want more control over when the header is sticky, you can use a plugin.
Do you have any questions about how to create sticky headers in WordPress? Let us know in the comments section below!
