How to apply different stylesheets based on user on wordpress

Question

I have a Wordpress self-hosted website for extra content about a series of books. On the near future, I intend to let the user declare which book(s) from the series he/she has read - and whilst it would be just for fun, I thought I could take this idea further.

The thing is, since some content on generic pages might be considered spoilers if they haven't read some of the books, I would like to apply a different stylesheet based on logged in user - so if the user has read up until book 2, a stylesheet would be loaded in such a way that any paragraph with the class "book3" or higher would be automatically converted into a hidden paragraph with a spoiler alert. But if the user has already read book 3, a different stylesheet would be loaded; one that wouldn't do that, and would let the user see the content normally.

I reckon this could also be done with javascript, but I suppose CSS would be easier? I'd be up for answers based on both methods, of course (including jQuery regarding javascript).

Answer 1

You can accomplish this without javascript.

One way to do this would be to add an additional class to the body if a user has read a particular book. For example, if a user has read book 1 you would want to add the class 'read-book-1' to the body. You can accomplish this in WordPress using the body_class filter.

https://codex.wordpress.org/Plugin_API/Filter_Reference/body_class

Here is a stripped down example:

add_filter('body_class', function($classes) {
    if(/* if user has read book 1 */) {
        $classes[] = 'read-book-1';
    }
    return $classes;
}

Then, assuming your markup looks like this:

<p class="spoiler book-1">...</p>

You could override your spoiler style if the user has read book 1:

p.spoiler {
    visibility:hidden;
}

.read-book-1 p.spoiler.book-1 {
    visibility:visible;
}

Note that I'm just assuming you're using visibility: hidden; to hide spoiler text. There is more than one way to do this.

If you wanted to incorporate additional features, such as a link to reveal spoiler text, then you would need javascript. If you just wanted to reveal spoiler text on hover you can do it with just css:

p.spoiler:hover {
    visibility:visible;
}