[Resolved] Slide down login form:

[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().

[Tom]

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>

[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.

[Tom]

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 🙂

[Daren]

Thanks Tom, working on it now.

[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:)

[Tom]

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! 🙂

[Author]

Posts