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:
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.’
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.
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.
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.
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.
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.
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.
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.’
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.
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.
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.
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.
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.
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.’
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.
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.
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.
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.’
This will then take you to the 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.’
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.
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.
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.
Similarly, for the 'Log In' text, input the URL of your login page.
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.
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.
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.
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.
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.’
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.
