What is wrong with code added to functions.php to selectively show styles based on login state

Question

When I try to add the following code to functions.php I keep getting errors (site goes down, seeming to indicate a php error). I've stared at this code forever and can't seem to figure out why it should give an error when it's added to functions.php.

Any suggestions for what I should change? Thanks!

function hide_prompt() {
   if(is_user_logged_in()) {
    echo '
    <style> .app { display: none!important; } </style>   
    ';  
   }
}
add_action('wp_footer', 'hide_prompt');

Answer 1

You are using the wrong hook, and you are doing it the wrong way. Sorry to be clear.

Adding stylesheet to the footer is no good style at all and rather a beginner mistake. Have a look at loading scripts correctly.

You need to add that stylerule the to html-head of your login page/hook.

Since you want to edit the login form, the correct hook, which you need to use is login_head

See Codex: Login Hooks

Also see: Login Head

something like this (functions.php):

function se_css_output_hide_promt() { ?>
    <style type="text/css" id="se-answer-customized-css">
        <?php
        //switch to php to check the login status, add css when true
        if(is_user_logged_in()): ?>

        .app { display: none!important; }

        <?php endif; ?>
    </style>
<?php }
add_action('login_head', 'se_css_output_hide_promt');

I bet !important is no longer needed in case you are doing it this way. This css will be added right before the ending html-head, very close to your html. Meaning that your !important is propably no longer necessary.