What’s in This Guide #

This guide shows how to use Content Control to display one header for logged-out visitors and another for logged-in visitors.

We’ll give you a step-by-step demo by editing the Twenty Twenty-Four theme header template part.

Let’s go 😉

What We’re Aiming For #

The logged-out header will have:

• The site logo.
• A title that says “Logged-out Menu”.
• One navigation item that links to the default Sample Page.

Logged-Out Header #

Logged-In Header #

The logged-in header will have:

• The site logo.
• A title that says “Logged-In Menu”.
• Three navigation links: Sample Page, Blog, and Help Docs.

Steps #

Follow these steps to set up your header template part and create the Block Controls that decide who sees the logged-out/logged-in content.

Heads up!
You need only 1 header template part. You’ll use Block Controls inside the template part to display the different headers. That means you don’t need to create 2 separate headers (saves time).

1. Hover over Appearance in the WordPress admin side menu and click Editor #

2. Click Patterns #

3. Click Manage all template parts #

4. Click Header #

In our example, we’re editing the site’s default header template part. If you don’t want to touch that default header, add a new header and edit that new one instead.

5. Create the header content #

Create your logged-out and logged-in content. We suggest using a Row block for each.

In the example below, we have 2 rows. Each row has the site logo, a title, and navigation links. The first row is for logged-out visitors. The second row is for anyone who’s logged in.

You can copy the HTML code for our example up on GitHub.

Let’s set up the logged-out header content first.

6. Click the logged-out content block #

7. Click Enable Controls #

8. Expand User Rules and click Logged Out Users #

Now, let’s take care of the logged-in header content.

9. Click the logged-in content block #

10. Expand User Rules and click Logged In Users #

Keep USER ROLE as Any.

11. Click Save #

12. Click Save to confirm #

13. Test your changes #

Navigate to your homepage while still logged in. You should see the logged-in header.

Now, log out and return to your homepage while still logged out. You should see the logged-out header.

If all that works, congratulations! 🎉

If not, make sure to clear all your caches (site, hosting, CDN, database, and browser).

Still not working? Give us a shout via our support page.

What’s Next? #

You can also restrict your site’s sidebar and footer content. Check out how to do that next.