To display a registration or login form in a custom location on a WordPress site, you can use shortcodes, widgets, or embed the code directly into theme files. Here are some methods:
1. Using a Plugin
The easiest way is to use a plugin such as User Registration, WPForms, or Theme My Login. These plugins provide shortcodes that you can place anywhere on your site.
Example:
[theme-my-login]
2. Displaying Forms Using WordPress Functions
If you prefer not to use plugins, you can leverage WordPress’s built-in functions to display forms.
Login Form
Use the wp_login_form()
function to display a login form:
<?php
wp_login_form(array(
'redirect' => home_url(), // URL to redirect after login
));
?>
To create a shortcode:
function custom_login_form_shortcode() {
ob_start();
wp_login_form(array(
'redirect' => home_url(),
));
return ob_get_clean();
}
add_shortcode('custom_login_form', 'custom_login_form_shortcode');
Insert [custom_login_form]
into the WordPress editor.
Registration Form
For a registration form, you can use:
<?php
echo '<form method="post" action="' . esc_url(site_url('wp-login.php?action=register', 'login_post')) . '">';
echo '<p><label for="user_login">Username</label><br>';
echo '<input type="text" name="user_login" id="user_login"></p>';
echo '<p><label for="user_email">Email</label><br>';
echo '<input type="email" name="user_email" id="user_email"></p>';
echo '<p><input type="submit" value="Register"></p>';
echo '</form>';
?>
3. Adding the Form to a Theme File
If you want to place the form in a theme template, add the following code to the desired file (e.g., header.php
, page.php
, or sidebar.php
):
<?php if (!is_user_logged_in()): ?>
<div class="custom-login-form">
<?php wp_login_form(); ?>
</div>
<?php endif; ?>
4. Using Widgets
If your theme supports widgets, you can add the “Meta” widget, but it includes extra links. For a custom display, use a shortcode (as shown above) in a text widget.
5. Styling and Customizing the Forms
You can style the forms with CSS or override default templates for full customization.
Example CSS for wp_login_form
:
.custom-login-form form {
max-width: 300px;
margin: 0 auto;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
}
.custom-login-form input {
width: 100%;
margin-bottom: 10px;
padding: 10px;
}
Choose the method that suits your project best and customize it as needed!