2

So I have the following code:

        <h3>
             <div class="sellertitle"><a class="allseller" href="#">Something</a> </div>

             <?php if ( is_user_logged_in() ) { ?>          
                     <div class="otherseller">  <a class="allotherseller" href="#">Else</a> </div>
             <?php } ?>
        </h3>

Then, for the "sellertitle," I have the following CSS:

<--logged in-->
.sellertitle {
  float: left;
  width: 49%;      
}

As you can see, "Something" is always visible and "Else" is only visible when the user is logged in.

However when the user is logged out, I want the "sellertitle" CSS to be "float:none"

<--logged out-->
  .sellertitle {
   float: none;
   width: 49%;      
 }

What would be the best way to achieve this?

10

Here is another CSS-only approach, without any inline-PHP and needless CSS-spam in the head. If your theme is correctly using body_class() and a user is logged in, Wordpress adds a class "logged-in" to the body-element, so we can use this in our stylesheet:

<--logged out-->
.sellertitle {
  float: none;
  width: 49%;      
}

.otherseller {
  display: none;
}

<--logged in-->
.logged-in .sellertitle {
  float: left;     
}

.logged-in .otherseller {
  display: inline;
}
| improve this answer | |
  • 1
    Smart approach. Use what is already there by default :-). +1 – Pieter Goosen Mar 19 '15 at 12:05
  • 1
    I would add that this answer needs that the theme correctly use body_class() function, just for users who don't know about it. +1. – cybmeta Mar 19 '15 at 12:25
  • @cybmeta indeed,you are right... in most cases I'm using _s as a base for my themes, which sets body_class() by default :) – Rafael Mar 19 '15 at 12:32
  • ha! another one added to my "aha!" moment.. this should be marked as the answer. :) – Reigel Mar 19 '15 at 16:37
  • Awesome approach. I am going to try this.:-) I thanks guys – Steve Kim Mar 19 '15 at 17:01
3

you could try something like this... this will add css on the head

add_action('wp_head', 'add_css_head');
function add_css_head() {
   if ( is_user_logged_in() ) {
   ?>
      <style>
          .sellertitle {
             float: left;
             width: 49%;      
           }
      </style>
   <?php
   } else {
   ?>
      <style>
          .sellertitle {
             float: none;
             width: 49%;      
           }
      </style>
   <?php
   }
}

another is to change class if logged in...

so you will have two css

.sellertitle {
  float: none;
  width: 49%;      
}
.sellertitle.logged {
  float: left;      
}

then on your div something like this...

<div class="sellertitle <?php if ( is_user_logged_in() ) {echo 'logged';}">
| improve this answer | |
  • added another option... and I think is best approach.. ;) – Reigel Mar 19 '15 at 6:04
  • I see. That's something I never tried. Thanks for the info! =) – Steve Kim Mar 19 '15 at 6:07
  • Not really smart adding styles directly to wp_head. Create a custom stylesheet and use wp_enqueue_scripts to load your custom stylesheet. This way, plugins and child themes can override these styles if needed with ease. Also, check out the other answer which uses what is given by default :-) – Pieter Goosen Mar 19 '15 at 12:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.