Blocksy tutorial: using Account Header Element to achieve the front of the site login and registration function

Blocksy The "Account Header Element" that comes with the theme is the WordPress Users are provided with a simple, secure and powerful login and registration portal. It not only supports basic login, but also incorporates WooCommerce, custom jump, social login and captcha plugins for a complete user management experience.

This article describes the complete setup process for this feature, including login state switching, registration form optimization, and plugin integration.

图片[1]-Blocksy 账户元素使用教程:实现 WordPress 登录注册与社交登录集成

I. Introduction to Account Element

The account element is Blocksy A built-in feature of the theme which can:

  • Add a login portal to the site header
  • Popup login box (modal window support)
  • Guide users to register and retrieve their passwords
  • Display different content according to the login status (e.g. jump to the WooCommerce (Account page or WordPress dashboard)

II. Adding and configuring account elements

1. Adding account elements to the header

go into WordPress Backend > Appearance > Customize, select any row of header area, click Add Element and select "Account".

图片[2]-Blocksy 账户元素使用教程:实现 WordPress 登录注册与社交登录集成

2. Configure login status logic

The Account element supports two states:

  • Not logged in status: click to bring up a modal window, jump to a customized login page, or go to the WooCommerce Self-contained account page
图片[3]-Blocksy 账户元素使用教程:实现 WordPress 登录注册与社交登录集成
  • Logged In Status: Click to be redirected to your WordPress profile page,WooCommerce Dashboard or direct logout
图片[4]-Blocksy 账户元素使用教程:实现 WordPress 登录注册与社交登录集成

You can set the jump targets for different states separately.

III. Enabling user registration

Go to Backend > Settings > General, check the box "Anyone can register" and set the default registration role (e.g. Subscriber or Customer).

图片[5]-Blocksy 账户元素使用教程:实现 WordPress 登录注册与社交登录集成

At this point, the visitor will be able to switch to the registration option in the login window.

IV. Optimizing the registration process (in conjunction with WooCommerce)

If you have installed WooCommerceThe registration process experience can be further enhanced using their account settings:

  • Go to Back Office > WooCommerce > Settings > Account & Privacy
图片[6]-Blocksy 账户元素使用教程:实现 WordPress 登录注册与社交登录集成
  • Uncheck the following two items:
    • Automatic generation of user names
    • Automatic generation of passwords
图片[7]-Blocksy 账户元素使用教程:实现 WordPress 登录注册与社交登录集成

This allows users to fill in their own username and password when registering.

图片[8]-Blocksy 账户元素使用教程:实现 WordPress 登录注册与社交登录集成

After saving the settings, the registration window will display the full form fields, which is more intuitive and easy to use.

V. Enhancements: Integration of social login and authentication code

Blocksy Pro Compatible with multiple third-party plug-ins to enhance the account system experience:

1. Social Login (recommended plugin: Nextend Social Login)

  • Supported by FacebookRegistration and login with Google and other accounts
  • Integration into Blocksy login window without complex configuration

2. Captcha plug-ins (supporting plug-ins such as Captcha 4WP, Wordfence CAPTCHA)

  • Enhanced security to prevent machine registration
  • Can be embedded in login and registration forms
图片[9]-Blocksy 账户元素使用教程:实现 WordPress 登录注册与社交登录集成

After installing and enabling these plugins, the Blocksy login window automatically displays social icons or a CAPTCHA field.

VI. Recommendations for advanced settings

If you want to hide it further WordPress The default login address (e.g. /wp-login.php), can be used:

Plugin Recommendation: WPS Hide Login
The plugin replaces the login address with a custom path to improve site security.

VII. Summary

Blocksy's account element provides a powerful and flexible login registration solution for WordPress websites for:

  • WooCommerce shopping center
  • Membership System
  • Educational platforms or community-based websites

Functional features include:

  • Login/Register Modal Window
  • Independent setting of login and logout status behavior
  • Social Login & Captcha Plugin Integration
  • be in favor of WooCommerce account and privacy settings

Even novice users can set it up in minutes. If you need to build a modern website with login functionality, theBlocksy Account Element is a worthwhile module.

Recent Updates


Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!
客服微信
Customer Service
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) E-mail: [email protected]
Working hours: Monday to Friday, 9:30-18:30, holidays off
© Reprint statement
本文作者:托尼屎大颗
THE END
If you like it, support it.
kudos2.4W+ share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments