WordPress member login page

WordPress member login page

The Login Form is your gateway to using and configuring the WordPress publishing platform. It controls access to the Administration Screens, allowing only registered users to login.

Contents

How to Login

If you installed WordPress in your website’s root directory, your login page is:
http://example.com/wp-login.php

If you installed WordPress in its own subdirectory, e.g., /directory, your login page is:
http://example.com/directory/wp-login.php

If you have a problem logging in, try the Login Trouble suggestions.

The Login Form

At the top of login page is the WordPress logo and link, followed by the login form, with:

  • Input fields for «Username» and «Password.»
  • A «Remember Me» checkbox. If checked your browser keeps you logged in for 14 days. (If unchecked you’re logged out when you quit the browser, or after two days.)
  • The «Log In» button for submitting the form data.

Below the form are two links: One is for registered users who’ve forgotten their password. The other goes to the front page of your WordPress site.

This one login form can do three things:

  1. Log into a site (by filling in a valid Username and Password).
  2. Email a password to a registered user (by clicking the Lost your password? (link: wp-login.php?action=lostpassword).
  3. Register new users (who’ve arrived at this form by clicking a Register (link: wp-login.php?action=register).

Customizing the WordPress Login

Much of WordPress login page can be easily changed with WordPress Plugins (search for «login»). It can also be changed by manually adding code to the WordPress Theme’s functions.php file.

To change the WordPress logo to your own, you will need to change the CSS styles associated with this heading:

WordPress uses CSS to display a background image — the WordPress logo — in the link ( ) inside the heading tag (

The size of your logo should be no bigger than 80 x 80 pixels (though even this can change with custom CSS). Adjust the above padding-bottom value to the spacing you want between your logo and the login form.

To change the link values so the logo links to your WordPress site, use the following WordPress hooks example; edit it and paste it below the previous in the functions.php:

Styling Your Login

You can style every HTML element on the WordPress login page with CSS. To add styles to the of your login page, use a function like the above my_login_logo. Styles declared within the head element of a page are called an "embedded style sheet" and take precedence over styles in linked external style sheets.

If you have a lot of login page styles, you may want to make your own custom login style sheet. This code, added to your functions.php file, would load a CSS file named style-login.css, stored with your active Theme files:

WordPress links two of its own external style sheets to the login page: wp-admin/css/colors.css and wp-admin/css/wp-admin.css (since Version 3.8, previous versions used wp-admin/css/color/color-fresh.css, wp-admin/css/login.css). You can override the WordPress default styles by making your style declaration more "specific" -- when two styles apply to the same element, CSS gives precedence to the more specific selector.

Here's some helpful, highly specifc CSS selectors for the login page:

WordPress uses the CSS style sheet wp-admin.css to insert the logo and to hide the heading text with text-indent:-9999px;:

Using a more specific selector in your custom style sheet overrides the above background-image value, inserting your logo instead:

The default login page style in colors.css sets the text color of the links below the form:

To override that, increase the specificity and include !important:

Login Hooks

The image to the right shows where several of the hooks can add content.

The above hooks run when using the form to login. Others are meant for registration, password retrieval, and WordPress Plugins.

The WordPress file wp-login.php generates the HTML, containing the location and sequence of all the login page hooks.

Make a Custom Login Page

So far you've seen how to customize WordPress' built-in login page. You can also create your own custom login Page by using the wp_login_form function in one of your WordPress Theme's Page Templates:

The function has several parameters to change the default settings. For instance, you can specify: the ID names of the form and its elements (for CSS styling), whether to print the "Remember Me" checkbox, and the URL a user is redirected to after a successful login (default is to stay on the same Page):

If the user is already logged in, the form does not print; instead they see two links: Log Out | Site Admin .

This login form has the filters: login_form_top, login_form_middle, and login_form_bottom. Each can print text in the form, as shown in the image on the right.

Источник

How to Build a Membership Site Login Page in WordPress (3 Steps)

October 4, 2022 by John Hughes

Table of Contents

If you’ve ever wanted to create a membership site with a login page in WordPress, you’re not alone.

A membership platform can help you share quality content while also generating income. However, building this type of site can seem intimidating.

Fortunately, you don’t have to be a tech expert to set up your own membership site. By using MemberPress and tweaking a few settings, you can start building an exclusive community for your biggest fans.

In this article, we’ll start by exploring a few of the ways you can benefit from a membership site with a login page. Then we’ll walk you through the three basic steps for launching your own. Let’s dive right in!

Why You Might Want to Build a Membership Website

Websites have always been an effective medium for sharing information. Whether you want to advertise your accounting services or simply find like-minded people and start a community, the open forum of the internet can help.

However, you might not want everything you create to be open to the general public. There are plenty of reasons to create a website with membership and user login rules, including:

  • Wanting to ask for payment in exchange for your content
  • Curating a specific audience of hand-picked people
  • Selling specialized services and experiences to a limited number of customers

Whatever your reasoning might be, a membership site can help you create a community on your own terms. You might also find that membership adds more value to your site.

Members often find a sense of community with each other, especially if the site is based on a common interest or need. By requiring users to log on, you’ll be encouraging them to build more connections through your website.

Fortunately, reaping these benefits doesn’t have to be a struggle. By choosing the right software and establishing some simple settings, you can get your membership site off the ground quickly.

How to Build a Membership Site with a Login Page in WordPress (In 3 Steps)

Without further ado, let’s dive right into starting your own membership website. Make sure you have a WordPress website up and running before you begin.

Читайте также:  Картридж для canon 4330

Step 1: Set Up MemberPress on Your WordPress Website

First things first, you’ll need a dependable tool to create your membership infrastructure. This can be the difference between a frustrating experience and a fast, effective launch. We recommend our MemberPress plugin for this purpose:

MemberPress is a powerful piece of software that’s easy to use. We’ve designed it to be as streamlined as possible. That way, you can start taking advantage of your membership site’s benefits right away.

You can begin by checking out a few of our pricing plans. Whether you’re looking to support a single basic site or several advanced ones, there’s probably an option for you.

After you’ve downloaded your copy, install and activate it on your site. If you want to spend some time exploring your options, now might be a good time to do so.

However, if you’re ready to build your new membership site with login features, you can jump right in.

Step 2: Create Your Membership Levels

Now that the program’s all set up, you can start creating the building blocks for any limited community site: membership plans. These tiers can control anything from how much your users pay to what kind of content they can access. Thus, they’re worth spending a bit of time on.

Start by going to MemberPress > Memberships > Add New. You should see the following screen:

From here, you can fill in the fields to fit your needs. First up is the membership title. This will be the main way that users can identify your plans, so we recommend keeping it short and effective.

You may also want to adjust the pricing settings. If you just want to restrict access to your site for registered users only, you can simply create a free plan. Otherwise, go ahead and choose the billing cycle and total cost.

After that, you can scroll down to find a few other membership options. For example, you might choose to provide newly registered users with a custom thank-you or welcome email. We recommend that you take advantage of these features, because they can help personalize the membership experience.

You might also want to fill out the Price Box tab. This can be an easy way to highlight what you have to offer. As a bonus, it can also be a useful resource for influencers you might work with, who can easily display this information on their own pages.

When you’re all done, save your work. Then repeat this step as many times as you need to in order to create a full suite of pricing plans. After you have your tiers set up, you can continue on to the last stage.

Step 3: Customize Important Membership Pages

A website with membership and user login features is a bit different from its open-access counterparts. As such, there are a few important pages that you may want to pay attention to before you go live.

Fortunately, MemberPress comes complete with some pre-made pages already. Just go to MemberPress > Settings > Pages:

From here, you can choose which pages MemberPress uses as your thank you, login, and account areas. These should have been automatically generated. However, you can always visit those pages to change them, or use your own custom pages instead.

As for the other settings, the defaults will work just fine for most sites. However, there are a few features that you might want to enable.

For example, your site will normally show unauthorized users a default message and a login screen. This can be convenient for your already signed-up members who just need to enter their information.

However, you might want to check the Redirect unauthorized visitors to a specific URL box instead. This will enable you to show visitors something specific, such as your pricing page (to encourage signups).

You might also want to take this time to create a members-only page with information on your affiliate program. That way, you can advertise influencer opportunities to users who are already invested in your content.

Optional: Set Up Some Access Rules

As we said, the default settings should get you up and running just fine. But you’ll eventually want to customize access to your content. You can do this sort of drilled-down paywalling with MemberPress Rules.

To find Rules, navigate to MemberPress > Rules > Add New:

Here, you can choose the content you want to protect. Just click on the drop-down and choose from the various options (things like categories, tags, page types, and post types).

Next, you’ll select the membership category or specific members that’ll have permission to access the content you selected. When you’re ready, click on Save Rule.

For example, you could restrict your online course content to members on higher-level subscription packages.

Anytime you want to adjust your paywall or add new rules, just head back to this page and make updates.

Conclusion

Membership sites can be an excellent way to control who has access to your content. Fortunately, you can get started without too much trouble. By using MemberPress, you can create a website with membership and user login features in no time at all.

In this article, we showed you how to launch a website with membership and user login requirements in just three steps:

  1. Install and activate MemberPress.
  2. Establish your website’s membership levels.
  3. Customize your essential membership pages, such as the login screen.

Later on, be sure to maximize your paywalling power by setting up Rules.

Do you have any questions about starting a membership site with login features? Let us know in the comments section below!

If you liked this article, be sure to follow us on Facebook, Twitter, Instagram, Pinterest, and LinkedIn! And don’t forget to subscribe in the box up to your right.

Источник

How to Create a Custom WordPress Login Page (Ultimate Guide)

Last updated on April 28th, 2022 by Editorial Staff | Reader Disclosure Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

Do you want to create a custom WordPress login page for your website?

If you run a WordPress membership site or an online store, then many of your users will see the login page often. Customizing the default WordPress login page allows you to offer a better user experience.

In this ultimate guide, we will show you different ways to create a custom WordPress login page. You can also use this tutorial for creating a custom WooCommerce login page as well.

Here is what you will learn from this guide.

Why Create a Custom WordPress Login Page?

Your WordPress website comes with a powerful user management system. This allows users to create accounts on eCommerce stores, membership websites, and blogs.

By default, the login page shows the WordPress branding and logo. This is fine if you run a small blog or are the only person with admin access.

However, if your website allows users to register and log in, then a custom login page offers a better user experience.

Some users may be suspicious if your WordPress login screen looks nothing like your website. They will likely feel more at home if you use your own logo and design.

Lastly, the default login screen does not contain anything but the login form. By creating a custom login page, you can use the space to promote other pages or special offers.

That being said, let’s take a look at some examples of custom WordPress login page designs.

WordPress Login Page Design Examples

Website owners can customize the WordPress login page using different styles and techniques. Some create a custom login page that uses their website’s theme and colors. Others modify the default login page by adding a custom background, colors, and logo.

Читайте также:  Как получить айпи принтера

Here are a few examples of what’s possible.

WPForms is the best WordPress contact form plugin on the market. Coincidentally, their plugin also includes an add-on to create beautiful WordPress login and registration forms, which we will show you later in this article.

Their custom login page uses a two-column layout. The left column contains the login form, and the right column is used to highlight promotions and other calls to action.

Their login page shown above lets their users know about new features. It uses custom branding, background illustration, and brand colors to create a unique login experience.

Jacquelynne Steeves is an arts and crafts website where the author publishes content about decorating home, making quilts, patterns, embroidery, and more.

Their login page uses a custom background image matching their website’s theme with the login form on the right.

The login page of this motion graphics design company uses a colorful background reflecting what their business is all about.

It uses the same site header, footer, and navigation menus on the login screen. The login form itself is quite simple with a light background.

The advantage of using a popup is that users can log in without leaving the page. It saves them from a new page load and offers a faster user experience.

Now, are you ready to learn how to create a custom login page in WordPress?

Creating a WordPress Login Page using Theme My Login

Theme My Login is a free plugin that changes your login page to match your WordPress theme. It’s not very customizable, but it will replace the default WordPress-branded login page and look a bit more professional.

The first thing you need to do is install and activate the Theme My Login plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, Theme My Login automatically creates URLs for your custom login, logout, registration, forgot password, and reset password actions.

You can customize these WordPress login URLs by visiting Theme My Login » General page. Scroll down to the ‘Slugs’ section to modify these URLs used by the plugin for login actions.

Theme My Login also allows you to use shortcodes to create custom login and registration pages. You can simply create a page for each action and then add the page slug here so that the plugin can find and redirect users properly.

Let’s start with the login page.

Head over to Page » Add New to create a new WordPress page. Next, you need to give your page a title and then enter the following shortcode [theme-my-login] to the page.

You can now publish your page and preview it to see your custom login page in action.

This is how it looks on our test website.

Simply repeat the process to create other pages by using the following shortcodes.

[theme-my-login action="register"] for the registration form.

[theme-my-login action="lostpassword"] for the lost password page.

[theme-my-login action="resetpass"] for the reset password page.

Creating a Custom WordPress Login Page Using WPForms

WPForms is the best WordPress form builder plugin on the market. It allows you to easily create custom login and registration forms for your website.

WPForms is a premium WordPress plugin, and you will need at least their pro plan to access user registration add-on. WPBeginner users can get 50% discount by using our WPForms coupon code: SAVE50

The first thing you need to do is install and activate the WPForms plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit WPForms » Settings page to enter your license key. You can find this information under your account on the WPForms website.

After entering the license key, you’ll be able to install add-ons.

Go ahead and visit WPForms » Addons page and locate the User Registration Addon.

Next, click on the Install Addon button to download and activate the addon. You are now ready to create your own custom login forms.

Head over to WPForms » Add New page and scroll down to ‘User Login Form’ template. You need to click on the ‘Use Template’ button to continue.

WPForms will load the User Login Form with the required fields.

You can click on the fields to add your own description or text around them.

You can change other settings as well.

For example, the default button title is ‘Submit’. You can click the button and then change the text to ‘Login’ instead.

You can also decide what happens once a user is successfully logged in.

You’ll need to head over to Settings » Confirmation tab and select an action. You can redirect the user to any other URL, redirect them to the homepage, or simply show them a message that they are now logged in.

Once you are satisfied with the form settings, click on the ‘Save’ button at the top right corner of the screen and close the form builder.

Adding Your Custom Login Form to a WordPress Page

WPForms makes it super easy to add your custom login form on any WordPress post or page.

Simply edit the page where you want to add the login form or create a new one. Then, on the page edit screen, add the WPForms block to your content area.

Next, select the login form you created earlier, and the WPForms block will automatically load it inside the content area.

You can now continue editing the login form page or save and publish your changes.

Creating a Custom WordPress Login Page Using SeedProd

By default, your custom WordPress login form page will use your theme’s page template and styles. It will have your theme’s navigation menus, header, footer, and sidebar widgets.

If you want to completely take over the entire page and design something from scratch, then you can use a WordPress page builder plugin.

SeedProd is the best landing page builder for WordPress. It’s beginner-friendly and offers a drag and drop builder to help you create any type of landing page, including a login page, coming soon page, maintenance mode page, and more.

For this article, we’ll be using the SeedProd Pro version because it includes a login page template and advanced page blocks for customization.

There is also a free version of SeedProd, but it doesn’t include the option to create a login page for your WordPress website.

First, you’ll need to install the SeedProd plugin on your website. For more details, you can follow our guide on how to install a WordPress plugin.

Once the plugin is active, you’ll be redirected to SeedProd in your WordPress admin area.

Here you’ll need to enter your license key that you can easily get from the SeedProd account. When you’ve entered the key, click the ‘Verify key’ button.

After that, you are ready to create your login page in SeedProd.

To start, head over to SeedProd » Landing Pages and then select the ‘Login Page’ option by clicking the ‘Set up a Login Page’ button.

On the next screen, you can select a template for your login page. There is also an option to create a page from scratch by using the Blank Template.

However, we suggest using a template as it’s easier and faster to customize the login page the way you want.

When you select a template, a popup window will appear to enter a Page Name for your login page. SeedProd will use the page name as the URL for your landing page.

Once you have entered these details, go ahead and click the ‘Save and Start Editing the Page’ button.

Now, you can edit your login page using SeedProd’s drag and drop builder under the Design tab. The builder lets you easily add any page block to the page by simply dragging it from the left menu and placing it anywhere on the page.

Читайте также:  Лазерный принтер цветной 1200dpi

For example, you can add some text to your login page, a video, or a new button. There are more customization options under the Advanced blocks section, where you can to add a countdown timer, social sharing icons, and more.

It even lets you remove existing page blocks in the template. All you have to do is click the trash can icon to delete the page block.

Next, if you click on any section on the login page, you’ll see more options for customization.

For instance, you can change the text and color of the fields, choose a different font, edit the button’s color, and more.

When you are satisfied with the design of the login page, go ahead and click on the Connect tab at the top.

You can now connect different email marketing services such as Constant Contact, Drip, SendinBlue, and more.

After that, you need to head over to the Page Settings tab. Under the General settings, SeedProd lets you edit the page title and change the page status from draft to publish.

You can also select the option to use SeedProd Link and add your SeedProd affiliate link to make more money online.

If you want to optimize your login page for search engines, then go to the SEO settings. Here you’ll find a button that will install the All In One SEO plugin.

All in One SEO for WordPress (AIOSEO) is the best WordPress SEO plugin that allows you to easily optimize your WordPress website for search engines and social media platforms.

You can learn the best way to use it in our guide on how to set up All In One SEO for WordPress correctly.

After that, you can also add different code snippets to your login page under the Scripts settings tab.

For instance, you may want to add Google Analytics code, Facebook pixel, or other tracking code here.

Now that you’ve changed the page settings go ahead and click the Save button at the top.

Next, you’ll have to make your login page active. To do that, you can exit the landing page builder and then go to SeedProd » Landing Pages.

Once there, you should click the switch to change the page status from Inactive to Active.

You can now go to the URL of your login page and see it in action.

This is a screenshot of the login screen on our demo site.

If WordPress page builder plugins are not your thing, then you can use custom CSS to style the form and the login page itself. Alternatively, you can also use CSS Hero plugin to easily add custom CSS styles.

Change the WordPress Login Logo and URL

You don’t always need to create a completely custom WordPress login page for your website. In fact, a lot of websites just replace the WordPress logo and logo URL while still using the default login page.

If you want to replace the WordPress logo on the login screen with your own logo, then you can easily use a WordPress plugin or add custom code. We will show you both methods you can use one that best suits you.

Changing WordPress Login Logo and URL using a Plugin

The first thing you need to do is install and activate the Colorlib Login Customizer. plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin adds a new menu item to the WordPress theme customizer. Simply navigate to Appearance » Customize and click on the new ‘Colorlib Login Customizer’ item to launch the login customizer.

The login customizer will load your default WordPress login screen with customization options on the left and a live preview on the right.

To replace the WordPress logo with your own, click on the ‘Logo options’ tab on the right.

From here, you can hide the WordPress logo, upload your own custom logo, and change the logo URL and text.

You can also customize the size of the size and color of the text, and the width and height of the custom logo.

The plugin also allows you to customize the default WordPress login page completely. You can add columns, background images, change login form colors, and more.

Basically, you can create a custom WordPress login page without changing the default WordPress login URL.

Once you are finished, simply click on the publish button to save your changes. You can now visit the WordPress login page to see your custom login form in action.

Changing WordPress Login Logo and URL without Plugin (Code)

This method allows you to manually replace the WordPress logo on the login screen with your own custom logo, without the need for a plugin.

First, you need to upload your custom logo to the media library. Simply go to Media » Add New page and upload your custom logo.

Once you have uploaded the image, click on the ‘Edit’ link next to it. This will open the edit media page, where you need to copy the file URL and paste it somewhere convenient, such as a blank text file on your computer.

Next, you need to add the following code snippet to your theme’s functions.php file or a site-specific plugin.

Don’t forget to replace the background-image URL on Line 4 with the file URL you copied earlier. You can also adjust other CSS properties to match your custom logo image.

You can now visit the WordPress login page to see your custom logo in action.

However, this code only replaces the WordPress logo. It does not change the logo link, which points to the WordPress.org website.

Let’s change this.

Simply add the following code to your theme’s functions.php file or a site-specific plugin. You can paste it right below the code you added earlier.

Don’t forget to replace ‘Your Site Name and Info’ with your site’s actual name. The custom logo on your login screen will now point to your site’s home page.

Disabling the WordPress Login Page Language Switcher

The release of WordPress 5.9 introduced a new drop down login option that lets users select a new language when logging into the website.

If there is more than one active language on the site, then this option will appear.

This works well for multilingual websites and teams with different users who might want to access the WordPress dashboard in a different language.

But if you want to keep your login page simple, and your users don’t need to frequently switch languages, then removing it can help to declutter the login page. You can do this using a plugin or code.

Disabling the Language Switcher With a Plugin

All you need to do is install and activate the Disable Login Language Switcher plugin. Upon activation, the language switcher option will automatically be removed. There are no additional settings for you to configure.

Now, when you go to your login screen, you’ll see the standard login screen without the language switcher option.

Disabling the Language Switcher With Code

Another way you can disable the language switcher is by adding code to WordPress.

Simply add the following code snippet to your functions.php file, in a site-specific plugin, or by using a code snippets plugin.

For more details, see our guide on how to disable the language switcher on the WordPress login screen.

That’s all. We hope this article helped you learn different ways to create a WordPress login page for your website. You may also want to see our ultimate WordPress security guide for tips on improving your WordPress login security, or see our comparison of the best live chat software for small business.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Источник

Поделиться с друзьями
КомпСовет
Adblock
detector