AI Assistant

Notifications

Clear all

[Solved] Change Login Button for Cool Effect

✦ Summarize Topic

How-To and Troubleshooting

Last Post by OneBurleson 6 years ago

4 Posts

2 Users

1 Reactions

2,171 Views

RSS

OneBurleson

(@oneburleson)

New Member

Joined: 6 years ago

Posts: 3

Topic starter

Translate ▼

14/02/2020 6:03 am [#5159]

Has anyone ever seen this plugin?

https://wordpress.org/plugins/ajax-login-and-registration-modal-popup/

I'm not associated with it at all, but it is absolutely awesome for keeping folks on the SAME PAGE and getting them logged in rapidly and efficiently.

So, here's a page I've found from their site regarding a bit of help. And I want to share it with you so that we can all see it together.

https://docs.maxim-kaminsky.com/lrm/kb/attach-modal-to-the-custom-link-button-anywhere/

Now here's the awesome part:

We all know that users need to login (usually) to comment on our site, right?

So what would the end snippet be that would allow us to modify WPDiscuz's Login link to use the Login & Registration popup instead?

I've seen this code:

add_filter( 'login_url', 'my_login_linkchanger');
function my_login_linkchanger( $link ) {
  /*whatever you need to do with the link*/
  return home_url( '/my-custom-login-page/' );
}

So what would the full php modified code be so that we could use that awesome popup modal instead of redirecting people to the default WordPress login URL?

Thanks All!

Topic Tags

Elvina

(@elvina)

Support

Joined: 7 years ago

Posts: 1403

Translate ▼

14/02/2020 12:21 pm

Hi @oneburleson,

Please navigate to the Dashboard > Settings > Login/Register modal > Advanced tab put the following code in the "Extra selectors to handle log in modal?" textarea:

#wc_show_hide_loggedin_username a:first-of-type

Save, delete all caches and check again. Everything should work fine.

Also please note you don't need to use any PHP code if you don't want to change the login URL.

OneBurleson reacted

OneBurleson

(@oneburleson)

New Member

Joined: 6 years ago

Posts: 3

Topic starter

Translate ▼

15/02/2020 12:54 am

Here's a test post that we can use to test with

https://oneburleson.com/draft/

Now, I've put the above mentioned into the right spot......

https://prnt.sc/r2hj4r

....yet, it still doesn't appear to be working on the test page.

Are we sure that we've used the correct CSS in the above example? It doesn't seem to match any of the CSS that I'm seeing on the actual page for WPDiscuz.

https://prnt.sc/r2hhno

When I use 'inspect element', I see

#wpdcom .wpd-auth .wpd-login {
    font-size: 14px;
    line-height: 20px;
}

Perhaps I broke the innertubes 😉 But, isn't that the CSS that you're seeing as well?

OneBurleson

(@oneburleson)

New Member

Joined: 6 years ago

Posts: 3

Topic starter

Translate ▼

15/02/2020 1:00 am

https://prnt.sc/r2hncf

Got it. Got it! GOT IT!!! happy dance happy dance happy dance.

Turns out it was the CSS that I pasted above. So, for anyone else using the popup modal login, if you want to change the 'Login' link down in the comment area to use the clean and super slick popup modal login, all you need to do is put this CSS in the area like @elvina mentioned above:

Posted by: @elvina

Please navigate to the Dashboard > Settings > Login/Register modal > Advanced tab put the following code in the "Extra selectors to handle log in modal?" textarea:

and paste this CSS: