Buy ExternalDocuments.com

WordPress: Show or Hide Nav Links Based on Logged In or Out

A quick and dirty hack to create two classes that will show and hide navigation links depending on the login state. First, copy this into the “Additional CSS” field:

nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .show-when-logged-in {
    display: none;
}
nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .hide-when-logged-in {
    display: initial;
}
body.logged-in nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .show-when-logged-in {
    display: initial;
}
body.logged-in nav.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .hide-when-logged-in {
    display: none;
}

That creates two classes, show-when-logged-in and hide-when-logged-in, that you can add to your links to show or hide them when logged in.

I haven’t tested this on any theme except twenty-twenty-three.

How it Works

This uses the WordPress dynamic body classes. When the user is logged in, WordPress adds logged-in to the body’s classes.

The selectors in the CSS are specific so they will override the standard WordPress CSS. (Their selectivity score will be higher.) I just copypasted them from the developer tools, and added my extra selectors.