0

I've created a custom template for a custom theme, I need to show the vue app that will manage the front end only to logged users. I've used this code inside my functions.php file and it's supposed that I will have a custom login form.

functions.php

<?php 
/*
* Form customizzato per Login sito OH
*/
function custom_login_form(){
    ?>
        <style type="text/css">
            body {
                background-color: #fff !important;
            }
            #login h1 a {
                background-image: url('...');
                background-size: contain;
                height: 86px;
                width: 320px;
                background-position: center center;
                background-repeat: no-repeat;
            }
            #loginform {
                border-radius: 5% !important;
            }
            #nav {
                display: none !important;
            }
            #backtoblog a {
                display: none !important;
            }
            #language-switcher {
                display: none !important;
            }
        </style>
    <?php   
}
add_action('login_enqueue_scripts', 'custom_login_form');

?>

app.php template file

<?php 
/*
* Template name: App
*/
wp_head();

if( is_user_logged_in() ) {

?>
    <div id="app"></div>
<?php

} else {
    wp_login_form();
}

wp_footer();
?>

Is there something wrong in the code or I need to pass params to wp_login_form()?

login form

1 Answer 1

1

The form appeared un-styled because the login_enqueue_scripts hook does not run on the front-end/non-admin side ( unless you do do_action( 'login_enqueue_scripts' ) in your template ).

So try using wp_head instead: add_action('wp_head', 'custom_login_form');.

You should also add the custom CSS only on the app page, or when the template being used is app.php. For example, you can add this check at the top in your custom_login_form function:

// Do nothing if the template is not app.php.
// This will work the file is at wp-content/themes/your-theme/app.php.
if ( ! is_page_template( 'app.php' ) ) {
    return;
}
8
  • I've tried your suggested solution, but seems not work. If I replace login_enqueue_scripts with wp_head into the functions.php file, nothing change. So I've tried with do_action inside the template into the else block, but nothing. The form will stay unstyled
    – OHICT
    Commented Jul 17, 2023 at 14:14
  • Try again with wp_head and check the HTML source of the page, then see if your custom CSS is in the source, e.g. find #loginform { border-radius: 5% !important; }. If you see it, then it means the CSS is being added, so you just need to tweak your CSS rules. But you'll need to do that yourself.
    – Sally CJ
    Commented Jul 17, 2023 at 14:45
  • The css is added with both the hooks. The problem is that from the wp-login.php page that is where the css works perfectly and the template page where I've added the form, all the html markup of the form is different. Is not possible to have exactly the same default form that will works with login_enqueue_scripts ?
    – OHICT
    Commented Jul 17, 2023 at 15:12
  • The css is used mainly for the wp-login page, but I need to have login page as default index before users can use the vue app that will manage front-end
    – OHICT
    Commented Jul 17, 2023 at 15:13
  • I posted this answer just to let you know that you've used the wrong hook to add your custom CSS. I can't help you with replicating the wp-login.php page, and neither with CSS tweaking, but as for the latter, you could basically add the relevant class/id to your elements and just copy the CSS used on the wp-login.php page to your custom login page.
    – Sally CJ
    Commented Jul 17, 2023 at 23:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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