August 1, 2023

Switch the Sign In and Register tabs in the MyListing Theme

Play Video

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);

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.


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!

Required Resources

MyListing Logo
Payment required
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Switch the Sign In and Register tabs in the MyListing Theme
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.