How to Use Kadence Conditional Headers (Full Tutorial)

Kadence Conditional Headers are finally here! This has been one of the top requested features in the Kadence community since the Kadence Theme was released.

With conditional headers, you can take your website built with the Kadence Theme to a whole new level.

Some common use cases of Kadence conditional headers include:

• For blog sites, show a different header on your website depending on which blog post category the user is reading
• For membership sites, show users who are logged out a header and then show a different header once the users sign into your site
• For WooCommerce sites, simplify the header during the checkout experience so that the user stays focused on purchasing

In this tutorial, I’m going to teach you exactly how to use Kadence conditional headers on your website to create a unique experience for your visitors.

Without further ado, let’s get right into it.

Use the Kadence conditional headers tutorial guide below to jump around as you need.

1. Enable Kadence Conditional Headers

First and foremost, you’re going to need to enable Kadence conditional headers.

The conditional headers feature in Kadence requires the Kadence Pro Theme to be enabled, so if you haven’t already, make sure to purchase Kadence Pro and get it activated in order to see “Conditional Headers” appear in your Kadence configuration settings.

You can read all about the extra features that the Kadence Pro Theme provides in my full Kadence Theme review.

With Kadence Pro activated, go to Appearance → Kadence to see a list of all the Pro Addons that you can enable.

Find Conditional Headers and click the toggle to turn the feature on.

2. Add New Conditional Header

Now that you have enabled the Kadence Conditional Headers feature, it’s time to create a brand new conditional header to use on your website.

Go to Appearance → Customize to open up the WordPress customizer.

Once you have the Kadence customizer open, click on “Header” to open up the header customization options.

Scroll to the bottom of the header section and you will see a brand new item called “Conditional Header” underneath “Transparent Header” and “Sticky Header.” Choose that option.

You’ll be brought to a new screen where you can configure all your Kadence conditional headers.

Let’s quickly go over what we’re looking at here.

There is a label that says “Current Previewing Header” with a dropdown that shows “Default” in it.

This means that you’re currently viewing the default header that your website uses (the one you initially set up and use throughout your website).

In order to create a new Kadence conditional header, click the “Add Header” button and you’ll be presented with three options to choose from:

• Start Basic – This option allows you to start with a basic header and design a new header as you go. This option is best for if you want to create a new header that is much different than your default header.
• Copy Default – This option allows you to copy your entire default header that you already use on your website and use that as a starting template. This option is best if you want to create a header very similar to your default header but you want to swap out a few pieces such as a new CTA button, new menu options, etc.
• Import – This option allows you to import in a header. This option would be used if you want to take a predesigned header and import it into your website very easily.

For this Kadence conditional header tutorial, I’m going to choose “Copy Default” to copy the default header for my site.

You’ll see a new conditional header show up in your customizer called “Copy Default Header 2.”

Depending on if you chose to start basic or import a header instead, this may be a slightly different name, but it should look similar.

Now that we have learned how to add a new Kadence conditional header, let’s dig into how to configure your new header.

3. Rename New Conditional Header

Once you have a new conditional header in your customizer, the next step is to rename your header to a more user-friendly name.

Click the arrow dropdown icon next to your header and it will open a tray of options.

The first section that shows up says “Header Label.” This is where you can rename your Kadence conditional header to a more friendly name.

For example, say you have a health coaching website that contains blog posts in a number of various categories such as nutrition and fitness.

One great use case would be to create a header that has a different CTA button in your header – a button to book a call for nutrition coaching if the blog post is in the nutrition category and then a button to book a call for personal training if the blog post is in the fitness category.

With Kadence conditional headers, this is now extremely easy to do and opens up a massive amount of possibilities to give your users a unique, more personalized experience.

For this tutorial, I’ll name my new conditional header “Fitness Header” so that we can show this header on every page with the category “Fitness” (which I’ll cover how to do shortly).

You’ll see the title of your conditional header change as you type in the “Header Label” box to rename your header.

You should obviously name your header whatever makes sense for your use case.

4. Configure Display Settings

By this point, you have added a new Kadence conditional header and renamed it to a more user-friendly name.

The next step is to configure the display settings which is where you are able to specify exactly where you want your new header to show on your website.

This is where the real power lies. You could show a header on a specific WordPress category, certain landing pages, your home page, your entire site, and so much more.

Click the arrow dropdown to the right of “Display Settings [UNSET]” to open up the Kadence conditional headers display settings.

Also, keep in mind that the “[UNSET]” label means that you still have settings to set before the header will work correctly.

Once we successfully configure our display settings, that “[UNSET]” label will go away.

After the display settings options are showing, you’ll see a section that says “Show On” with a dropdown.

This “Show On” dropdown is where you can specify exactly which pages you want your new header to show up on.

Here’s a list of all the page options you can have your element Show On:

If you’ve ever used the Kadence hooks feature, then these options should look very familiar to you.

I wrote a detailed post on how to use Kadence element hooks for endless customization on your website if you want to learn more.

Going back to my example of wanting this new header to show only on blog posts with a category of “Fitness,” I’m going to choose “Single Posts” for the “Show On” dropdown which refers to all blog posts.

However, we don’t want our header to show on all blog posts. We only want this header to show on blog posts with a category of “Fitness.”

Here is where we can get very specific and choose certain Groups or Individual posts to show your header on.

To solve this issue, all you have to do is choose the “Group” option under the label that says “Select Post By.”

Then, you’ll see a dropdown for “Select Taxonomy” show up where you can choose between “Categories” or “Tags.” For this example, I’ll choose “Categories.”

Lastly, another dropdown will show where you can click and choose whichever categories you want this header to show on. I chose my “Fitness” category.

How powerful is that?! You have the ability to drill down and choose exactly which pages or posts you want this new header to show on.

From there, you can use the “Add Rule” button if you want even more conditions. Say you want to show this header on blog posts with a category of “Fitness” AND a tag of “coaching.” You can do that as well by adding even more rules.

Once you have configured your display settings for your conditional header, it’s time to move on and choose which users are going to see your header.

5. Configure User Settings

Now let’s choose which users will be able to see your newly created Kadence conditional header.

The “User Settings” section adds yet another layer of customization.

If you open up the “Visible to” dropdown, you will see a set of users and roles that you can show your conditional header.

Here’s the list of users and roles that you can make your conditional header Visible to:

• Basic
  • All Users
  • Logged out Users
  • Logged in Users
• Specific Role
  • Administrator
  • Editor
  • Author
  • Contributor
  • Subscriber

For example, if you use the Account feature from Kadence Pro in your header, users will be able to sign in and out of your website.

You can choose to show a certain element to All Users, Logged out Users, or Logged in Users.

NOTE: If you don’t have the “User Settings” configured yet, you will see [UNSET] show next to User Settings which means you need to choose an option before your conditional header will work. After you choose an option, the [UNSET] label will disappear.

Also, you can specifically choose to show your conditional header to various roles on your site such as an Administrator, Editor, Author, Contributor, or Subscriber.

This is an excellent feature especially if you have a membership type of site where users need to login to your site including any custom membership roles you create.

For example, you could use a WordPress membership plugin and create different membership levels and then show a different header depending on which level the user is.

6. Set Expires Settings (optional)

The “Set Expires Settings” section is completely optional, but this feature is extremely powerful.

Say you create a Kadence conditional header that contains some time-sensitive information in it. For example, a banner with an offer on it, a CTA button that needs to expire, etc.

By using the expires settings, you are able to specify a date and a time that you want your header to expire.

When that time is hit, your entire header will expire which should bring it back to the “default” header that your site uses.

In order to use Expires Settings for your Kadence conditional header, you simply have to toggle on the “Enable Expires” option and then set a date and a time that you want your header to expire.

Then, when the header expires, it will be removed from your site. Easy peasy!

7. Build Conditional Header

Okay, so now that you have your Kadence conditional header settings all configured including your display settings, user settings, and optional expires settings, it’s time to actually build out your header to look the way you want.

The very first thing we have to do before we can edit your conditional header is to preview your new header.

In order to do this, go to the top of the conditional header options in your Kadence customizer and find the section that says “Current Previewing Header.”

Click the dropdown and choose your new conditional header. In my example, I’m going to choose the “Fitness Header.”

As soon as you choose to preview a header that is different than the current header you are previewing, you will get a message that says:

“Previewing another header requires reloading the customizer in a preview mode. Click confirm below to save your settings and enter into preview mode.”

Click “Confirm, Save Settings.”

This will save your settings and reload the page so that you are now editing your new conditional header.

To confirm that you are now editing the correct Kadence conditional header, you’ll see an informational message at the top of your customizer that says “Previewing Header: [Header Name].”

Great! We are now previewing your new conditional header and can now build it out to look exactly the way you want.

In your customizer, you will see all of the header elements available to use.

Also, make sure you have the “Header Addons” feature enabled from back in step 1.

Kadence Pro unlocks many more header elements for you to use in your header which allows you to create very customized, robust headers to show your visitors.

With all these header elements available to you, you can then use the Kadence header builder to drag and drop your elements onto and build out your new conditional header however you would like.

Keep in mind that there is a tab to build out the desktop version of your Kadence conditional header along with a tab for tablet/mobile.

After you have built out your header to look the way you want, make sure to click the blue “Publish” button in the upper-right of your customizer to save your changes.

We’re almost done! There’s only one more quick step to do before our new conditional header is fully working.

8. Activate Conditional Header in Customizer

The very last step we have to do before your new conditional header will be live on your Kadence site is to activate the header in the customizer.

Assuming you just got done building out your new header using the Kadence header builder, you’ll want to go back into the “Conditional Header” section where we configured your conditional header from before.

From there, all we have to do is click the toggle on your new header to activate the header on your site and then click the “Publish” button.

Congratulations! You have successfully activated and published your new Kadence conditional header on your website!

Kadence Conditional Header Use Cases and Configuration

Let’s go over several Kadence conditional header use cases and what you would choose for your “Display Settings” and your “User Settings” to configure it correctly:

• Show your conditional header to all logged out users
  • Display Settings: Entire Site
  • User Settings: Logged out Users
• Show your conditional header to all logged in users
  • Display settings: Entire Site
  • User Settings: Logged in Users
• Show your conditional header on all blog posts with the category of “Fitness”
  • Display settings: Single Posts → Group → Categories → Fitness
  • User Settings: All Users
• Show your conditional header on all pages with a tag of “marketing”
  • Display settings: Single Pages → Group → Tags → marketing
  • User Settings: All Users
• Show your conditional header on the front page of your site only
  • Display settings: Front Page
  • User Settings: All Users

Hopefully these examples help you better understand how to use the “Display Settings” and “User Settings” to show your Kadence conditional header on the correct pages of your website.

How to Delete a Kadence Conditional Header

If you are wondering how to delete a Kadence conditional header from your customizer, it’s very easy to do.

Follow the steps below to delete a Kadence conditional header:

1. Navigate to the “Conditional Headers” section in your Kadence customizer
2. Expand the conditional header settings for the header you want to remove
3. Click the “Remove Header” button

After you choose to remove your Kadence conditional header, you’ll receive a confirmation message that says:

“Note, this will permanently remove all the header settings connected to this conditional header.”

As long as you are okay with the conditional header and all of its settings being removed, click “Confirm, Remove Header.”

How to Import/Export a Kadence Conditional Header

In this section, I’ll teach you how to import and export a Kadence conditional header.

Follow the steps below to import a Kadence conditional header:

1. Navigate to the “Conditional Headers” section in your Kadence customizer
2. Click the “Add Header” button
3. Choose the “Import” option
4. Use the file uploader to choose your Kadence conditional header file
5. Click “Import and Create New“

Follow the steps below to export a Kadence conditional header:

1. Navigate to the “Conditional Headers” section in your Kadence customizer
2. Expand the conditional header settings for the header you want to export
3. Click the “Export Header” button

A file will be downloaded to your computer that you can then take and import in on another website of yours or you can send it to someone else so that they can import your conditional header on their site.

Conclusion

That’s it! I hope this Kadence conditional header tutorial helped you learn how to unlock the power of conditional headers on your website.

The Kadence Theme keeps getting more and more powerful with each of these feature releases.

What are you using Kadence conditional headers for on your website? Let me know in the comments below!

Until next time,
Jake ✌️