Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Slide down login form:

Home Forums Support Slide down login form:

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #392304
    Daren

    Hi Tom, I would like to create a slide down login form. Here is a link to an image of what I am looking to accomplish. https://s26.postimg.org/4bc0qdg21/slide_Down_Login.jpg. What I want to do is have the login button on the right activate the login form to slide down from under the header. Click it again and it slides back up. I only want it to appear on the front page, I think the PHP is is_front_page().

    #392961
    Tom
    Lead Developer
    Lead Developer

    Hi Daren,

    jQuery is necessary for something like this.

    For example, build your button:

    <a class="form-toggle" href="#">Toggle me!</a>

    And then your form container:

    <div class="form-container closed">
        Stuff in here
    </div>

    Then some CSS:

    .form-container.closed {
        display: none;
    }

    Then your jQuery, which you can add into the wp_footer hook in GP Hooks:

    <script>
        jQuery( document ).ready( function($) {
            $( '.form-toggle' ).on( 'click', function() {
                $( '.form-container' ).toggleClass( 'closed' );
            } );
        } );
    </script>
    #392989
    Daren

    Thank you Tom, appreciate the help.

    So I am not a programmer, yet, so I want to be clear where I build this. The CSS I think I have a handle on, I can put that into simple CSS. Right? But the other code I don’t know. Where do I build the button code and the container code that is the login form. Since I want the button to be part of the menu navigation, can I add the code in the customizer > Menus > Primary and then put it in the Navigation Label field of my menu item and then style it in simple CSS?

    One more thing, the jQuery, since I want this field to appear under the header can I put it into the After Header Content hook in GP Hooks?

    Sorry, I know I’m asking a lot.

    #393247
    Tom
    Lead Developer
    Lead Developer

    The button and the form code would ideally go into GP Hooks where you want the form/button to display.

    If you want the button in the navigation, try giving your menu item the form-toggle class: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

    The jQuery should go into the wp_footer hook.

    Let me know if you need more info 🙂

    #393529
    Daren

    Thanks Tom, working on it now.

    #393636
    Daren

    And it’s done. Works just as I was hoping it would. Thank you, again. It’s not live on the site yet, still waiting for client approval but when it is I will share the link here so you can see how it looks.

    Just trying to wrap my head around hooks, how do they work? Does each hook refer to a specific part of the PHP or HTML code? I started taking a course on Udemy by Zack Gordon called WordPress Development but his hooks section is still as of now unpublished. Coming soon.

    Have you considered creating a WordPress course? If what you’ve done here is any indication I think you’d get a lot of people signing up. I now I would.

    Thanks again Tom, my clients think I know what I’m doing:)

    #393649
    Tom
    Lead Developer
    Lead Developer

    Awesome!

    That’s right, hooks are sprinkled through the theme HTML in specific locations, which means we can insert code into those areas without editing core theme files.

    I’ve thought about WP courses, but simply don’t have the time. Maybe one day in the future! 🙂

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.