Gold Penguin Logo with Text

Control User Registration, Roles, Login, and Management With Breakdance

This guide shows you how to set up the login, logout, and registration links using Breakdance. You’ll also learn how to create login and registration forms and custom pages. By the end, you'll have a user-friendly site that’s easy for your visitors to navigate.
Updated November 10, 2023
add login and logout dynamically
add login and logout dynamically
Difficulty: Medium. You should know a normal amount about this tool/topic
Time Required: ~20 minutes

Setting up an e-commerce or membership site?

Then you probably know how important it is to have smooth user navigation. 

When a user visits your site, you want to make sure that all the essential links are easily accessible, such as the registration, login, and logout pages.

In this guide, I’ll show you how to make these links accessible in Breakdance based on the user’s role and login status. We’ll also create a personalized account page to enhance the user experience.

Here’s what you can achieve by the end of this tutorial:

user account page in Breakdance

Setting Up the Plugin and Design Template

1) Install LoginWP

LoginWP, formerly known as Peter’s Login Redirect, lets you set up custom redirects after a user logs in, logs out, or registers, based on their role. 

For example, if you'd rather not display WordPress's default login form after a user logs out, you can redirect them to a custom logout page of your choice.

To install LoginWP, go to Plugins > Add New in your WordPress dashboard. In the search bar, type ‘LoginWP.’

Once you find the plugin, click ‘Install’ and then ‘Activate.’

install LoginWP

After activation, you should see ‘LoginWP’ displayed on the left navigation bar of your dashboard.

2) Select a Breakdance Template

Next, let’s use one of Breakdance’s design templates. Doing so will save you time in designing your pages. 

Just go to Breakdance > Design Library and import a template that you love. In this guide, I’ve picked the ‘Tiny Clothes’ template. 

Breakdance design library

Creating a Breakdance Header Template

1) Edit the Header Template

Every design template in Breakdance comes with its own header. However, in this tutorial, we aim to customize our header a bit more. We'll add links for signing up, logging in, and logging out. Plus, for that personal touch, we'll display the user's name when they're logged in.

Breakdance header template

First, head over to Breakdance > Headers. Here, you should see the template’s default header named ‘Main Header.’ You can open this in the Breakdance editor and edit it. Or, you can also create your own header by clicking the ‘Add Header’ button.

add Breakdance header template

Tip: When creating a new header, make sure to set its priority number higher to override the other existing headers.

Once you’re inside the Breakdance editor, add the necessary text elements for the login, logout, registration, and user name.

2) Add Dynamic Data

We want our header to greet our users with a ‘Welcome back, [user name]’ when they’re logged in.

To achieve this personalized touch, we’ll add dynamic data to our text. 

Start by clicking on the text element where you want the user's name to appear.

On the left sidebar, hover over the text. You'll notice a dynamic icon next to it – click on that. A pop-up window will appear.

insert dynamic data in Breakdance

Then, scroll down to the 'Current User' section and click 'Username'. Since you're logged into WordPress, you'll immediately see your name as a preview.

insert dynamic data in Breakdance

Next, click on the advanced option in the dropdown. Here, prepend your text with ‘Welcome back, ‘ and append it with an exclamation mark ‘!’ to complete the greeting. 

insert dynamic data in Breakdance

3) Add Conditions Based On User’s Logged In Status

Next, we want to control when to display the links ‘Sign up,’ ‘Log In,’ and ‘Log Out’ based on whether a user is logged in or not. Let's set up these conditions.

Start with the 'Sign up' text. Click on it, then go to the settings tab. Here, you'll find a 'Conditions' dropdown. Click on 'Edit Conditions.’

create Breakdance sign up link

In the pop-up, set the 'User Logged In Status' to 'logged out'. Once you click 'Apply Conditions,’ the 'Sign up' text will only be visible to users who aren't logged in.

add conditions on elements in Breakdance

Now, let's apply similar logic to the other text elements.

For the 'Log In' text, I've configured the 'User Logged In Status' to 'logged out'. This means it will only be visible to users who aren't currently logged into the site.

add conditions on elements in Breakdance

Conversely, for the 'Log Out' text, I've set its 'User Logged In Status' to 'logged in'. This ensures that only users who are logged in will see the option to log out.

add conditions on elements in Breakdance

And for our personalized greeting, 'Welcome back, [user name],’ I've set the 'User Logged In Status' to 'logged in'. This way, only logged-in users will see this warm greeting.

After you've made all these adjustments, don't forget to click save.

Adding a Breakdance User Registration Form

Breakdance templates often come with a suite of predesigned pages, including a registration form. This is a great starting point, but you might want to tweak it to better suit your needs.

Just go to the 'Pages' tab and search for the registration page. Open it in the Breakdance editor to make any desired changes.

adding Breakdance register form

But if you prefer more customizations, you can start fresh with a new page. Again, head over to ‘Pages’ and click ‘Add New.’ Enter a title, click save, and publish. Then, open the page in the Breakdance editor.

On the left side menu, you'll find the 'Register Form' element. Drag and drop it onto your page.

adding Breakdance register form

Now, you can adjust the form to your liking. Change up the labels, set a custom success message, and more.

Don't forget to add a login button on this page. This provides a quick way for existing users to log in. We'll link this button to the login page shortly.

Add style to your page. Adjust the layout, font styles, colors, and padding. Be creative.

Once your registration page is ready, you need to ensure users can actually register on your site.

Back to your WordPress admin area, go to Settings > General Settings.

Here, you'll find the ‘Membership’ section. Tick the box labeled ‘Anyone can register.’

enable WordPress registration

Just below that, there's an option for ‘New User Default Role.’ This determines the role new users are assigned when they register. Set this to either ‘Subscriber’ or ‘Customer,’ depending on your preference.

With those settings in place, scroll down to the bottom of the page and click ‘Save Changes.’ 

Adding a Breakdance User Login Form

Breakdance templates also offer a predesigned login page, ready for you to use. 

But there's always room for customization to make it uniquely yours.

If you're content with the predesigned login page, you can search for it on the 'Pages' tab and make any necessary tweaks in the Breakdance editor.

add Breakdance login form

If you prefer to start from scratch, just click ‘Add New’ on the ‘Pages’ section. Add a page name, click save, and then publish. Open your new page in the Breakdance editor.

For this tutorial, I've used the 'Login Form' element, which you can easily access from the left navigation bar. Drag and drop it onto your page.

add Breakdance login form

Now, adjust the labels, set a custom success message, and modify the submit button text. However, hold off on setting the redirect URL for now; we'll come back to it after setting up the user's account page.

Next, add a button that will eventually link to the registration page. We'll also revisit this later to add the correct URL.

As always, give your form a polished look by adjusting the layout, font styles, colors, and padding.

Once you're satisfied with the look and feel of your login page, save your changes.

Adding Custom Logout Pages

Custom logout pages could be any pages you want.

In this tutorial, I’m going to set the home page as the logout page.

Again, you can use the predesigned home page from the Breakdance template, or create your own custom page.

create custom logout pages

Normally, a user can log out from a WordPress site by clicking the logout link on the admin bar. You’ve probably done this before - just click your profile picture in the top right corner and select ‘Log Out.’

WordPress logout link

This will then take you to the WordPress login page.

WordPress login page

But we don’t want that unless the user is the site administrator. Instead, we want to redirect users to the home page upon logout. You can achieve this by adding a custom code. Or, using plugins like LoginWP.

Let’s use the plugin to make our life easier.

Follow these steps to add URL redirects to your WordPress site:

1) From your WordPress dashboard, go to LoginWP > Redirection Rules. Click ‘Add New.’

LoginWP redirection rules

2) Under the ‘Rule Condition,’ select the ‘User Role’ from the dropdown. Then, choose ‘Customer’ (or ‘Subscriber’) on the next dropdown field.

3) In the 'Redirect URLs' section, input the URL of the desired page under the login URL. This is where users will be directed post-login. For this tutorial, we're using the user's account page.

4) For the logout URL, input the URL of the page where you want users to land after logging out. Here, we're using the site's home page.

5) In the 'After Registration' field, specify a URL to redirect users to post-registration. If your registration form already redirects to a specific page, you can skip this step.

LoginWP login logout URLs

6) Once all details are in place, click 'Save Rule'.

Tip: If you’re not sure where to find the URL of your page, simply open the page from your WordPress dashboard. On the right side, you'll find the page's URL. Copy it and paste it into the appropriate field in the LoginWP settings.

copy WordPress page URL

Adding Links to the Header

Now that we’ve created the home, login, and registration pages, let’s go back to the header template and link these pages.

First, let’s link the ‘Sign Up’ text to the registration page. Click the text element and, on the ‘Edit’ tab on the left, add the URL of the registration page.

add sign up link

Similarly, for the 'Log In' text, input the URL of your login page.

add login link

Then, for the ‘Log Out’ text, add the logout link. Here, you’ll need to make sure that the user is completely logged out and not just redirected to another page.

add logout link

Here’s the logout link I’ve used:

http://your-domain.com/?customer-logout=true 

Remember to replace ‘your-domain’ with the actual name of your site.

This link ensures users are logged out and, thanks to the LoginWP plugin, they'll be redirected to the home page post-logout.

Another way is to use WordPress’s default logout URL:

http://your-domain.com/wp-login.php?action=logout

However, this link will take the user to the warning page, as shown below. 

The user needs to click ‘log out’ to confirm if they truly wish to log out. It's a bit more cumbersome, as it interrupts the user experience with a default WordPress page.

Finally, test your links on the front-end. Once you’re satisfied, click save.

View Account Page After Login

Now, let’s try to redirect the user to their account page post-login.

Again, the Breakdance template provides a predesigned account page. You can modify it as needed to align with your site's aesthetics and functionality.

If you’ve installed WooCommerce, you can also use their default account page or dashboard. All you need to do is add a shortcode. The only downside of this is that it isn’t customizable within the Breakdance editor. 

For this guide, I’ve designed a custom account page, as shown below. 

create user account page

While this example is static (in contrast to WooCommerce's dynamic dashboard), it serves our purpose of focusing on the login and logout functionality.

Given that we've already set up redirect URLs in the header, there's no need for additional URL configurations at this stage.

After saving, always preview your page on the front-end. This ensures that everything appears and functions as intended from a user's perspective.

Final Output

This is the final look of our home page.

Let's walk through the end-user experience based on the setup we've created:

First, open your WordPress site by launching an incognito window (or use a different browser). Then, click ‘Log In.’

Assuming the user is not registered yet, let’s click the register button. Fill in the required details: username, email address, and password. After clicking 'Register,’ a success message should confirm the registration.

Breakdance register page

To make sure the registration process works flawlessly, open another browser window or tab. Log into your WordPress site as the administrator. Then, go to Users > All Users. From here, you should see all the users, with their respective roles, that are registered to your site.

WordPress site list of users

Now, back to the incognito browser, let’s try to log in using the account we’ve just registered. 

Upon successful login, the site should redirect you to the account page. On the header, you should see the personalized greeting and the ‘Log In’ link changed to ‘Log Out.’

create login page in Breakdance

Wrapping It Up

You’ve just learned how to manage user registration and logins with Breakdance. Hopefully, you’ve found this helpful.

If you want more customizations to your site, check out our guide on Working with Custom Post Types in Breakdance Builder. Here, you’ll learn a lot about creating custom post types to organize your content better.

If you’ve enjoyed this walkthrough, don’t forget to share it with your network. Or if any of the steps above are not clear, let us know in the comments.

Want To Learn Even More?
If you enjoyed this article, subscribe to our free monthly newsletter
where we share tips & tricks on how to use tech & AI to grow and optimize your business, career, and life.
Written by Christy Cañete
Christy Cañete is a software engineer who's passionate about front-end web design. Not only can she code, but she writes too! She loves breaking down technical topics into super easy tutorials. If you're looking to learn without the jargon, she's your go-to.
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Join Our Newsletter!
If you enjoyed this article, subscribe to our newsletter where we share tips & tricks on how to make use of some incredible AI tools that you can use to grow and optimize a business
magnifiercross