First of all, you need to enable user registration in WordPress. Go to Settings General Membership and enable Anyone can register.
Next step. You can enable theme’s login section in header or menu (optional).
For this, go to Theme option User options and enable User login modal.
How to show Login Button in header
Now, we can add login button to site. There are many ways to do this. In most cases such button will be good in header and you can add this button in several places: top line, logo line, main menu line.
In Header section
This is the best place. There are special two header layouts which supports login in header section: Customizable header (has Login button) and Shop/Comparison header (has login icon). To enable them, go to theme option – header option – header layout. You can set this also from Customizer to check realtime changes and configuration.
Both header layouts have option to enable/disable icons
You can also choose padding in header for logo section and enable some additional elements
Enable additional button in header. This will add additional button. Usually I use it with link on page where user can submit post. You can also add label for button, link, choose color of button. One more option – Enable login Popup for non registered users. Use this if you want to show login/registered Popup instead of link of button when non registered users click on button.
Enable search form in header – enables compact search form near buttons
Enable additional menu near logo – enables additional menu near logo. Don’t use big menus, because maximum width is 300px of this section. Use it for important parts of site. For example, group archives, shop page, etc. You can create additional menu in Appearance Menus .
Top line
Check select in Theme options User option Add additional login icon in header . Choose In top line.
For this line, you must have also enabled Top line section in theme option – header and menu option – Top line
Main menu
Check select in Theme options User option Add additional login icon in header and choose In main menu.
User Dropdown
If you enabled our login button or icon, after login, user will see dropdown. By default, dropdown has only avatar, name and log out. If your site has vendors, they will see link to their dashboard. if you have Buddypress, they will see link on Profile edit page. Dropdown also show notificators from Buddypress, MyCred points, etc
If you want to add custom items in Dropdown
If you want to hide “Manage your Shop” link in dropdown user menu, use code
.user-editshop-link-intop{display:none}
If you want to hide Manage your order link for customers, use code
.user-dropdown-intop-menu .user-editorders-link-intop.menu-item {display: none !important;}
you can place this in theme options – general options – custom css
Changing Login and Registration Logic for popup
In many situations you, maybe, need to change logic of popup login/register. The most common case is when you want to use custom register form, custom register emails, etc. For example, for any vendor site or shop, it’s better to send users on Woocommerce registration page. For community sites, it’s better to send users to Buddypress Page. First of all, create your registration pages. Woocommerce default page is /my-account and for Buddypress is /register.
You can find registration page and it’s link for Woocommerce: Settings – Advanced – My account page. For Buddypress: Settings – Buddypress – Pages. I recommend to edit page and set special Page layout
Next, set custom register URL in Theme option User option Add custom register link . You can still keep login popup for users or you can redirect also login button to your custom page in the same place.
If you have some custom social login plugin, you can take shortcode from plugin and place it in login popup. For this, add shortcode to theme option – user option – Add custom message.
Add custom redirect after login URL. You can also activate redirect after login in Theme option User option Add custom redirect after login URL .
BuddyPress email activation. By default, BuddyPress send activation email for users. You can disable this in Theme option User option Synchronization between login popup and BP . However, for any community site on Buddypress, it’s better to use Registration form of Buddypress than popup registration.
Logged in conditional menu
One more tip. You can change your top menu for logged in users. For example, default menu will be visible for guests, and another menu will be for logged in users. For this, create new menu in Appearance Menus and add it to User Logged In Menu location. Then enable this option: Theme options Header and menu Replace top menu when user logined .
Helper shortcodes
Also, I added additional helper shortcodes which you can use inside Custom areas in header to show some additional links.
[wpsm_is_user]Your content[/wpsm_is_user]
Such content will be visible only for logged in users.
[wpsm_is_guest]Your content[/wpsm_is_guest]
This content is only for guests. More advanced shortcode can be found in article about conditional membership shortcodes for buddypress
Email activation problem
Login modal and register doesn’t send any email confirmation as well as WordPress. But, some plugins can overwrite this option and this will create a problem, because registration popup doesn’t send activation emails, but plugin requires it. Usually, this happens when you install Buddypress.
For Buddypress, you can enable sending email activation from popup
Theme option User option Synchronization between login popup and BP
If you still have a problems or you want to use custom plugins for activation/registration, you should redirect registration from popup to custom page. Please, check how to do this above
How to add additional fields to Registration form
If you use Buddypress plugin, you can create custom fields for user profiles in Users – Profile fields
Such new fields will be available in User Profile, but you can also populate them in register form. For this, enable option in Theme option – Buddypress option – Add xprofile fields to register modal form?
You can also populate such fields into Woocommerce registration form on My account page. For this, enable option in theme option – shop settings –
Add xprofile fields to register form?