On WordPress sites that allow users to login you may want to style elements based on user status of logged-in or logged-out. Or you may want to simply hide or show elements on the page based on the same user status. What most people don’t know is that WordPress automatically adds a .logged-in class to the body for those users logged into the system. Below are some examples of how that might work.

Style elements based on user status

Example: Style post header based on user status

.post-title {
    border-left: 20px solid red;
}
.logged-in .post-title {
    border-left: 20px solid green;
}

Hide or Show elements based on user status

Example: Hide comments form for non-logged in users.

.comment-form {
    display: none;
}
.logged-in .comment-form {
    display: block !important;
}