How to Create a Custom Login and Registration Page on Oxygen Builder

Want to replace WordPress’ boring default login page with your own branded version? If you’re using Oxygen Builder, you have total control over your design! Meaning, you can create a beautiful, functional login and registration page that fits your website perfectly.

At Right Padding, we build custom client dashboards, membership sites, and user portals using Oxygen Builder, and this step-by-step guide shows exactly how to set up your own custom login and registration pages with zero bloat.

🎥 Watch the full step-by-step tutorial on YouTube:

⚙️ Step 1: Create a New Login Page in WordPress

1. Go to Pages → Add New.
   
2. Name your page something like Login or Sign In.
   
3. Publish it (don’t worry about design yet).
   
4. Click Edit with Oxygen to start customizing.
   

Now you’ve got a blank canvas ready for your custom login layout.

🎨 Step 2: Design Your Login Page Layout

Inside Oxygen Builder:

1. Add a Section and set your desired background (solid color, gradient, or image).
   
2. Inside that section, add a Div to hold your login form.
   
3. Adjust width and padding (e.g., 400px max-width, centered alignment).
   
4. Add a Heading (e.g., “Welcome Back” or “Sign in to your account”).
   

Use Oxygen’s design tools to apply your brand fonts, colors, and spacing for a consistent look.

🧾 Step 3: Add the WordPress Login Form Shortcode

To embed the actual login functionality, use the built-in WordPress shortcode:

[login_form]

Here’s how:

1. Add a Shortcode element inside your Div.
   
2. Paste [login_form] in the code box.
   
3. Style the form elements using custom CSS inside Oxygen or your stylesheet.
   

If you want to redirect users after login, you can modify it like this:

[login_form redirect=”https://yourwebsite.com/dashboard”]

💡 Pro Tip: Always redirect to a page that makes sense for the logged-in user, like a dashboard or member area.

🧩 Step 4: Create the Registration Page

1. Add another new page and name it Register or Sign Up.
   
2. Open it in Oxygen Builder.
   
3. Add your layout and styling (similar to the login page).
   
4. Use this shortcode to display the registration form:
   

[register_form]

However, this shortcode doesn’t exist by default in WordPress, so you’ll need to enable it through a plugin or a custom snippet.

Recommended plugins:

• User Registration – WP Everest
  
• ProfilePress
  
• WPForms User Registration Add-on
  

Each of these gives you a shortcode to embed the registration form directly in Oxygen.

🧠 Step 5: Add Links Between the Two Pages

Make sure your users can easily navigate between login and register pages:

• On your Login Page, add a text link below the form:
  
  “Don’t have an account? Register here”
  
  
• On your Register Page, add:
  
  “Already have an account? Login here”

This improves user experience and keeps your flow intuitive.

🔐 Step 6: Secure Your Pages

Use a plugin like WP Hide Login to change your default WordPress login URL.

This prevents users from accessing the wp-login.php page directly.

Then, use a redirect rule to send logged-in users away from the login page (e.g., back to their dashboard).

You can add this snippet to your functions.php file or your custom code plugin:

function redirect_logged_in_users() {

  if ( is_user_logged_in() && (is_page(‘login’) || is_page(‘register’)) ) {

    wp_redirect(home_url(‘/dashboard’));

    exit;

  }

}

add_action(‘template_redirect’, ‘redirect_logged_in_users’);

🧩 Step 7: Test Everything

Before launching:

• Test both login and registration forms.
  
• Make sure redirects are working.
  
• Confirm that form errors display correctly.
  
• Test responsiveness on mobile and tablet views.
  

Everything should feel seamless, from signup to login to redirection.

✨ Bonus Tip: Create a Custom Logout Button

You can add a logout button anywhere on your site using this shortcode:

<a href=”<?php echo wp_logout_url( home_url() ); ?>”>Logout</a>

This will log users out and return them to your homepage.

With Oxygen Builder, you’re not limited to the default WordPress look. You can design fully branded, dynamic login and registration pages that feel like a natural part of your site.

No more mismatched colors or generic forms, everything reflects your brand, down to the last pixel.

At Right Padding, we love Oxygen Builder because it gives complete freedom over design without sacrificing speed or simplicity.