Switch the Sign In and Register tabs in the MyListing Theme

We will tackle a small but significant user experience issue in the MyListing WordPress theme – the order of the Sign In and Register tabs. By default, the Sign In tab comes first, which can be confusing for new users who need to register. Web Squadron will guide you through the process of switching the tabs using custom CSS and JavaScript codes, thanks to the developer Codicts. The result? A more intuitive user experience where the Register tab comes first and is active by default. It’s a simple change that can make a big difference. Dive in to learn more!

Reasons for Switching the Tabs

Imagine this: You’re a new user, eager to add a listing. You see the Sign In tab and start entering your details, only to realize that you actually need to register first. A bit confusing, right? This is why switching the tabs can make a world of difference. It guides new users to register first, which is what we want them to do. And for those who are already signed in, they’ll know where to go.

Steps to Switch the Tabs

Now, let’s get our hands dirty and fix this. We’re going to use a solution provided by a developer named Codicts, who’s known for creating helpful codes for the MyListing theme. Here’s what you need to do:

1. Go to your website and navigate to Theme Tools.
2. From there, head over to Custom Code.
3. Now, you’ll need to insert a specific CSS code. This code will reverse the flex-direction and justify the content to flex-end. Here’s the code:

   .login-tabs {flex-direction: row-reverse !important;
     justify-content: flex-end !important;}

After you’ve done this, take a look at your website. You’ll see that the Register tab is now before the Sign In tab. Pretty cool, huh?

Additional Code for Specific Cases

But wait, there’s more! In some cases, the Register tab might not align correctly to the left. If that happens, don’t worry. We’ve got an extra code for you. This code will adjust the margin and correct the alignment. Here it is:

.login-tabs {
  margin-left: -41px !important;
}

Just add this to your Custom Code, and your Register tab should be perfectly aligned.

Activating the Register Tab by Default

We’re almost there! There’s just one more thing to do. Even after switching the tabs, the Sign In tab might still be activated by default. We want the Register tab to be active instead. To do this, we’ll need to use a bit of JavaScript. Here’s the code:

/**
 * CODICTS - MyListing Register Tab Selected by Default
**/

(function($) {
    $(document).ready(function() {
        setTimeout(function() {
            $('.login-container .login-tabs a[data-form="register"]').trigger('click');
        }, 100);
    });
})(jQuery);

Now, no matter how many times you refresh, the Register tab will always be the first tab and it will be active by default. And of course, you can still go to the Sign In tab whenever you want.

Conclusion

You’ve successfully switched the order of the Sign In and Register tabs and made the Register tab active by default. It’s a small change, but it can make a big difference in user experience. A big shout-out to Codicts for providing the codes. Feel free to share this with your friends who might find it useful. And remember, every little improvement counts!