I have a site and there is a login button on the site which points to mydomain.com/wp-login.php
However, I would like to create a button to login to the site but I wish to make it like how it works in wordpress forum as below.
https://wordpress.org/support/plugin/instagram-feed/
It creates the link something like below.
Instead of mydomain.com/wp-login.php
This will automatically redirect to the previous page after logged in.
Can you guide me how to make this kind button?
Thank you
You can try one of these 2 solutions. The first solution create a shortcode that returns a url that you can put on your button, teh second creates the entire button and url for the login. If the person is already logged in nothing shows, if not the button shows. The first option shows the button even if hte person is alreayd logged in, to fix that you can target your button using css to hide it if the user is not logged in. Create the button and give it a classname or id like this:
Then you can hide that button of the person is already logged in:
.logged-in .my_custom_login_button {
display: none;
}
That will hide the button to a person who is logged in. If someone is logged in on WordPress the .logged-in class is applied to the body tag. You can also hide a button to someone that is not logged in like this:
/* Hide the button by default */
.your-button-class {
display: none;
}
/* display the button when a user is logged in */
.logged-in .your-button-class {
display: inline-block; /* or block, inline, flex, etc., depending on your layout */
}
Step 1: Create a Shortcode Function Add this code to your theme's functions.php file or in your custom plugin file. This function will generate the login URL with the redirect to the current page.
function wpb_custom_login_shortcode() {
// Check if the user is already logged in
if ( is_user_logged_in() ) {
return ''; // Return empty if the user is logged in
}
$redirect_url = urlencode( get_permalink() ); // Get the current page URL
$login_url = wp_login_url( $redirect_url ); // Create the login URL with the redirect
return esc_url( $login_url ); // Return the login URL
}
add_shortcode( 'custom_login_url', 'wpb_custom_login_shortcode' );
Step 2: Use the Shortcode Now you can use the shortcode [custom_login_url] in your posts, pages, or widgets. To include it in an existing button, you would typically do something like this in your editor:
<a href="[custom_login_url]" class="your-button-class">Login</a>
Or, if you are using a drag and drop page editor that has a button you can put the shortcode in the link part of the button: [custom_login_url]
If you're using a page builder like Elementor, you can insert the shortcode in a text or HTML widget and link it to your button.
Step 3: Ensure Proper Rendering Some page builders or contexts might not automatically parse the shortcode when used in attributes. If the shortcode doesn't work directly in the href attribute, you might need to use it in the content area and then use JavaScript to set the button's href. Here's a basic example:
jQuery(document).ready(function($) {
var loginUrl = $('#login-url').text(); // Assume the shortcode is in an element with ID 'login-url'
$('.your-button-class').attr('href', loginUrl); // Set the href of your button
});
And in your WordPress content:
<span id="login-url" style="display:none;">[custom_login_url]</span>
Step 4: Styling and Testing Ensure your button is styled according to your site's design. Test the shortcode in various scenarios to ensure it works as expected. This approach allows you to use the [custom_login_url] shortcode wherever you need the dynamic login URL, giving you the flexibility to add it to any existing button or link on your site.
Ok, so now that I have said all that if it were me I would create a shortcode that shows a button if the person is not logged in, otherwise nothing shows. here is how to do that:
Step 1: Add Shortcode Function to Your Theme's functions.php or Custom Plugin Open your theme's functions.php file or a custom plugin file, and add the following code:
function wpb_custom_login_button_shortcode() {
// Check if the user is already logged in
if ( is_user_logged_in() ) {
return ''; // Do not display anything if the user is logged in
}
// Define the URL to redirect after login
$redirect_url = urlencode( get_permalink() );
$login_url = wp_login_url( $redirect_url );
// Define the HTML for the button
$button_html = '<a href="' . esc_url( $login_url ) . '" class="custom-login-button">Login</a>';
return $button_html;
}
add_shortcode( 'custom_login_button', 'wpb_custom_login_button_shortcode' );
In this code, the wpb_custom_login_button_shortcode function checks if the user is logged in. If not, it creates a login button with a URL that redirects back to the current page after login.
Step 2: Style the Button Add CSS to style your button. You can add this in your theme’s style.css file:
.custom-login-button {
/* Add your button styling here */
padding: 10px 20px;
background-color: #0073aa;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
display: inline-block;
}
To create a shortcode in WordPress that outputs a complete HTML button for login, which only displays when a user is not logged in, follow these steps:
Step 1: Add Shortcode Function to Your Theme's functions.php or Custom Plugin Open your theme's functions.php file or a custom plugin file, and add the following code:
function wpb_custom_login_button_shortcode() {
// Check if the user is already logged in
if ( is_user_logged_in() ) {
return ''; // Do not display anything if the user is logged in
}
// Define the URL to redirect after login
$redirect_url = urlencode( get_permalink() );
$login_url = wp_login_url( $redirect_url );
// Define the HTML for the button
$button_html = '<a href="' . esc_url( $login_url ) . '" class="custom-login-button">Login</a>';
return $button_html;
}
add_shortcode( 'custom_login_button', 'wpb_custom_login_button_shortcode' );
In this code, the wpb_custom_login_button_shortcode function checks if the user is logged in. If not, it creates a login button with a URL that redirects back to the current page after login.
Step 2: Style the Button Add CSS to style your button. You can add this in your theme’s style.css file:
.custom-login-button {
/* Add your button styling here */
padding: 10px 20px;
background-color: #0073aa;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
display: inline-block;
}
Adjust the styling as needed to match your site's design.
Step 3: Use the Shortcode You can now use the [custom_login_button] shortcode in your posts, pages, or widgets. When added, it will display the login button if the user is not logged in. If the user is logged in, nothing will be displayed.
Example of using the shortcode in a post or page:
[custom_login_button]
Step 4: Test the Shortcode Check the shortcode in different scenarios (logged in and logged out) to ensure it behaves as expected. Verify the button styling and functionality on various devices and browsers. This shortcode provides a simple way to add a login button to your WordPress site, which is only visible to logged-out users.
