728x90

Posted on January 8, 2019 by B.J. Keeton in WordPress | 16 comments

There are lots of reasons why you would want to allow WordPress user registration. Maybe you have a membership site or run a forum community. You may only allow registered users to post comments as a way of moderating discussions. Whatever your reason, we want to show you how to get your users up and running with their own accounts.

Allowing WordPress User Registration

The very first step you’ll need to follow is very simple. Head to the Settings – General page in your WordPress dashboard. There, you will find two options that are imperative to this whole process: Membership and New User Default Role. You will want to check the box that says Anyone can register and choose your default role. Normally, that’s going to be Subscriber, but since each role comes with different permissions, that might not be the best for your site.

By default, you get 5 user roles:

  • Subscriber
  • Author
  • Editor
  • Contributor
  • Administrator

Each of these roles has a different set of permissions, and you can tweak them with certain plugins and code snippets. Some plugins will create specific user roles for themselves (such as BuddyPress creating the Keymaster role).

Usually, Subscriber is a good choice because they can’t create posts or really get into any kind of trouble. Once you press the Save button, your site is ready for users to register. But you’ll need a login and registration form to do that.

How to Create a Custom WordPress User Registration Page

 

Subscribe To Our Youtube Channel

Option 1: Use The WordPress Registration Form

The simplest way get your users to the registration for is by going into your Appearance – Widgets section and choosing the Meta widget and dragging it into your sidebar or footer area.

The downside to this method is that the widget also includes the RSS and WordPress.org links. It will also only provide a Log in link for the user to follow that takes them to the default WP login screen where they can register. This link isn’t exactly obvious.

They will then be taken to the default WordPress user registration and login page located at yoursite.com/wp-admin. They click on the (again) fairly hidden Register link, and they can sign up.

But because it’s all fairly obfuscated, you want your users to actually find the form to sign up. Now, the WordPress registration URL is https://yoursite.com/wp-login.php?action=register, and you can link to that whenever you want. That will send them to the default registration form where they choose a username and enter their email.

When they confirm their email, the account will be given the default permissions you set above.

Option 2: Use a Plugin

One of the best options for creating a front-end registration form (with a shortcode so you can put it anywhere) is a plugin called Ultimate Member. With it, you will not only be able to keep the look of your WordPress user registration page consistent with the rest of your brand, but you can also much more easily manage the users themselves, too. With 100,000+ installations and consistent updates, you can feel safe letting this one handle this for you.

First off, you will want to download and install Ultimate Member from the plugin repository. Once it’s activated, you will get a message that the plugin needs to create a few new pages to function. Go ahead and give it permission.

After it creates the pages,  you are technically ready to go. Users can register immediately at yoursite.com/register, though you can change that URL to whatever you want.

If the default form doesn’t work for you, you have two options. Edit it or create a new one. Either one can be found under the Ultimate Member section of your admin panel.

Make sure that you have Registration Form highlighted (1). The form creation itself is drag-and-drop. If you have used a page-builder before or the new WordPress editor Gutenberg, you will find the experience very similar.

The number of fields you can include is quite large, too. By clicking on the + inside the editor (3), you can add any number of details you need to know about your users.

The most important part of all this, however, is the Shortcode box (2). When you copy and paste that code into a page or widget, this particular registration form will display. For instance, you can paste it into the Custom HTML widget under Appearance – Widgets.

When that gets saved, you will see the entire form appear in the sidebar (or wherever the widget lives).

If you want that form in the middle of a post, you can now. That’s what’s so great about having it tied to a shortcode.

WordPress User Login Page

In addition to the user registration page, you can follow those exact same steps to create a login page as well. You just need to make sure the Login Form is highlighted when creating it.

The Ultimate Member plugin has already created the default URL for this one as yoursite.com/login, too. If you go with the default form, you have no more work to do. If you create a new one, though, you just need to insert the new shortcode into that page.

The end result will look something like this. Remember that you can also use the same set of fields for the login page that you did for the registration one.

The best part about this particular form is that the register button is prominent and not hidden like the default WordPress one.

Managing the New Users

By default, WordPress has a minimal user management system for administrators. You go into the Edit User screen from the Users list in your admin dashboard, and you can change many things about the users. Such as their names, the username, the display name, emails, and even their role. But in terms of the permissions for those roles, you’re out of luck by default. Plugins like Ultimate Member help this by expanding what you can do without digging into the WordPress code.

Additionally, you can create a member directory where you can manage users and display everyone who has registered for your site or service. It can be found under Ultimate Member – Member Directories.

Depending on the reason you’re allowing registration, you may or may not want this public. It starts out that way, though, since UM creates a yoursite.com/members page with the directory’s shortcode in it. You can delete or unpublish the page. If you do use a directory, though, it will look like this by default.

Other Things To Consider

Now, the previous steps have taken you from not being able to have WordPress user registration at all to being able to display a full member directory for your site. If you want to take the membership and registration a little further, here are a couple of ideas.

Create a Custom Login URL

First, you can create a custom login URL without the use of a plugin like Ultimate Member. This is different because doing it this way will let you do away completely with the /wp-admin slug, which secures your site against brute force attacks and more. Using UM to create a /register and /login are incredibly useful, but the /wp-admin way also works. If you change it completely, your site can be locked down better.

Customize the Default WordPress Login Page

Secondly, you can customize the WordPress login page itself. If you prefer to keep the default WordPress login and registration URLs intact, you can fully change the design and alter it to fit your brand. This takes a bit of knowledge of the WP Core files and PHP, but if you do, the drab grey page you get on installation can be prettied up as much as you want.

Conclusion

No matter your reason, having users register for your site is incredibly simple. With just a few clicks and a little bit of tweaking you can make WordPress user registration go from being obtuse and kind of hidden to being another part of your site that you can be proud of and can do great things with. So get out there and start building your communities.

What do you use WordPress user registration for?

Article featured image by Visual Generation / shutterstock.com

728x90

How to achieve responsive slider heights in Divi

 

Setting the height of sliders in the Divi Theme (and other sites using Divi Builder) can be a surprisingly difficult task. Here's how to take control of your sliders and get them to display at the height you want on desktops, mobiles and tablets.

Option 1: Setting the Slider Height in Divi Builder

First of all, Divi doesn't include a built-in slider height option.

Instead, the height is determined from the contents of the slides. The contents of a slide are typically the slide description (with title, text and buttons) and the slide image. In order to leave some height above and below these contents, Divi adds 16% top and bottom padding to the slide description. So in most cases the height of an individual slide is a result of the slide description height plus the 16% padding.

The height of the slider is then set as the height of the tallest slide, and all slides then are displayed at this same height.

The closest you can get to setting the height of a slider from within Divi itself is to use the "Custom Padding" option in the slide settings. This controls the padding above and below the slide description, and as a result can have an effect on the overall height of the slide and slider.

The benefits of this way is that it's built-in to Divi and the padding can be set separately on desktops, mobiles and tablets (by clicking on the mobile icon that appears to the right of the option).

The downsides include that changes to the slide contents, such as changing text or adding / removing a slide, can through the height unexpectedly out of whack. Likewise word wrapping as you shrink the window size might cause the slider to sporadically increase in height, which is the opposite of what you're likely to want.

Option 2: Setting the Slider Height using Divi Booster

As of version 2.6.4, Divi Booster adds a new slider height option that takes care of the messy details for you.

You'll find the new "Height" option in the Slider Module Settings, on the "Design" tab under the "Sizing" subheading.

In older versions of Divi, you'll find the option either under the "Layout" subheading or, if there are no subheadings, near the bottom of the tab. Please note the option won't be available under "Layout" unless you're using Divi Booster 2.7.2 or higher. If you can't see the option the first thing to try is updating both Divi and Divi Booster to the latest versions.

This option lets you set a minimum height in pixels for your slider. As long as this height is larger than the height of your slide contents, this is the height your slider will be set to. Otherwise, the height of your slide contents will be used.

A separate height can be set on desktops, mobiles and tablets, by clicking on the mobile icon that appears to the right of the Height option when you start editing the height value. Divi doesn't show the mobile icon when the main (desktop) height setting is the default of 500px, but if you change this to something else (e.g. 501px), the mobile icon will appear.

The new Height option is available on standard sliders, post sliders, fullwidth sliders and fullwidth post sliders.

NB: While you should no longer need to deal with it, if you do set the built-in custom padding option on your slides, the Divi Booster feature will honor this and determine the minimum height of the slide to be the contents plus your custom padding. The Height option does, however, override the default padding as this allows it to achieve smaller sliders with no change in the appearance of the slide contents.

Get Divi Booster

Option 3: Setting the Slider Height using CSS

If you want to set the height of a slider using CSS, you can do the following. First, give your slider a "CSS Class" such as "myslider" on the Advanced tab of your slider settings. Then add the following CSS to your site:

/* === Begin: Set the divi slider height === */ /* Src: https://divibooster.com/changing-the-height-of-the-divi-slider/ */ /* Desktop */ .myslider .et_pb_slide .et_pb_container { height: auto !important; min-height: 500px !important; } /* Tablet */ @media only screen and (min-width: 768px) and (max-width: 980px) { .myslider .et_pb_slide .et_pb_container { height: auto !important; min-height: 500px !important; } } /* Phone */ @media only screen and (max-width: 767px) { .myslider .et_pb_slide .et_pb_container { height: auto !important; min-height: 500px !important; } } /* Handle padding */ .myslider .et_pb_slide { padding-bottom: 0px !important; } .myslider div.et_pb_slide_description, .myslider .et_pb_slider_fullwidth_off div.et_pb_slide_description { padding-top: 1%; padding-bottom: 1%; } /* === End: Set divi slider height === */

Related Post: Adding CSS to the Divi Theme

You can adjust the slider height to your requirements by setting the min-height values for desktop, mobile and tablet in the code above.

The Old Way: Setting the Slider Height Globally using Divi Booster / CSS

An older slider height option exists in Divi Booster, though I don't recommend using it any longer. You'll find this option on the Divi Booster settings page, under "Modules > Slider > Set default slider height". It sets a default slider height which applies to all sliders, and doesn't apply on mobiles / tablets.

Generally, you're going to find the new "Height" option added into individual modules to be much more flexible and convenient, so I'd always consider that as your first choice. However, I've retained the slider height option for now for people who are still using it or otherwise find it useful.

This option also used a slightly different (and less flexible) CSS implementation. This CSS doesn't handle the custom padding / positioning of the slide description as well as the new code, but here's the old CSS anyway, for completeness:

@media only screen and ( min-width:981px ) { /* Set the slider height */ .et_pb_slider, .et_pb_slider .et_pb_container { height: 425px !important; } .et_pb_slider, .et_pb_slider .et_pb_slide { max-height: 425px; } .et_pb_slider .et_pb_slide_description { position: relative; top: 25%; padding-top: 0 !important; padding-bottom:0 !important; height:auto !important; } }

Want get more out of Divi?

 

 

https://divibooster.com/changing-the-height-of-the-divi-slider/

728x90

WP Floating Menu is a FREE WordPress plugin that makes your WordPress website’s usability with one page navigator menu or sticky navigation menu.

You don’t need to change your WordPress theme to make your website work like One Page website, just use this plugin to add one page scrolling navigation to any well coded WordPress themes / website.

You need to define different sections on your website page, then create/define one page navigation menu with them in just minutes.

Apart from One page navigation, you can create sticky menu and place in different location on your website for easy / smart navigation.

FREE FEATURES:

  • Beautiful and different templates
    • Beautifully designed 5 different templates to select from.
  • Easy sort able menu
    • Sort order of menu while creating menu.
  • Placement option
    • Two different menu positions Right and Left to select from.
  • Menu Setting
    • To display menu in either in all pages or home page only.
  • Mobile configurable
    • Enable disable option for mobile devices.
  • Inbuilt menu icon sets
    • Three different icon set to choose from.
  • User friendly and very interactive user interface
    • Anyone can use it, is just as easy as drag and drop.
  • Inline Navigation Feature
    • Just assign section id and get instant one page navigator effect.
  • Custom Template Option
    • Build custom template to match your site if default template does not match your need.
  • Dedicated Support
    – Get free email and forum support.
  • Translation Ready
  • WordPress Compatible
  • Fully Responsive
    • Compatible with different devices.
  • Free updates
    – Get free updates for lifetime.

PREMIUM FEATURES:★ 20 different beautiful template layouts. ★ Unlimited Numbers of Menus in the Site. ★ Page Wise Configurable Menu. - You can define whether you want to assign different menu or disable for specific page. ★ Unlimited Custom Templates. ★ Additional Menu Bar Positions - 7 different menu positions. ★ Show/hide Menu on Specific (page, category, post) wise display option). ★ Ability to add Default pages, posts, categories for menu set. ★ Additional Custom Design Options. ★ More upcoming Upgrade for pro version. PREMIUM UPGRADE

For premium upgrade please go here

SOME USEFUL LINKS

For a easy installation guide checkout the Installation tab above.
For complete information and documentation regarding plugin, please visit below links.

Plugin information

Docs

Demo

Browse More WordPress Resources

MORE RESOURCES

Themes Compatible With Our Plugin :

WP Floating Menu works best with every WordPress theme. Its even more remarkable when used with popular themes of ours such as AccessPress Lite and AccessPress Parallax.

AND IF THIS PLUGIN HAS IMPRESSED YOU, THEN YOU WOULD ENJOY OUR OTHER PROJECTS TOO. DO CHECK THESE OUT :

WPAll Club – A complete WordPress resources club. WordPress tutorials, blogs, curated free and premium themes and plugins, WordPress deals, offers, hosting info and more.

Premium WordPress Themes – 6 premium WordPress themes well suited for all sort of websites. Professional, well coded and highly configurable themes for you.

Premium WordPress Plugins – 45+ premium WordPress plugins of many different types. High user ratings, great quality and best sellers in CodeCanyon marketplace.

AccessPress Themes – AccessPress Themes has 50+ beautiful and elegant, fully responsive, multipurpose themes to meet your need for free and commercial basis.

8Degree Themes – 8Degree Themes offers 15+ free WordPress themes and 16+ premium WordPress themes carefully crafted with creativity.

Screenshots

Screenshot-1: Screenshot for Template 1 Layout.

Screenshot-2: Screenshot for Template 2 Layout.

Screenshot-3: Screenshot for Template 3 Layout.

Screenshot-4: Screenshot for Template 4 Layout.

Screenshot-5: Screenshot for Template 5 Layout.

Screenshot-6: Screenshot for Menu Structure.

Screenshot-7: Screenshot for Display Setting.

Screenshot-8: Screenshot for Menu option setting.

Screenshot-9: Screenshot for custom template options while generating custom template.

FAQ

What does this plugin do?Will it be difficult to design menu?Where can I find the documentation for the plugin?Can I use floating menu where ever I want?

Contributors & Developers

“WP Floating Menu – One page navigator, sticky menu for WordPress” is open source software. The following people have contributed to this plugin.

Contributors

728x90

There are 4 ways that you can choose to increase the maximum upload file size in WordPress.

1. Update .htaccess file

php_value upload_max_filesize 128M php_value post_max_size 128M php_value memory_limit 256M php_value max_execution_time 300 php_value max_input_time 300

Change the numbers to the values that you need. The max execution time and max input time values are in seconds and might need to be increased further if your internet connection is slow.

2. Update wp-config.php file

@ini_set( 'upload_max_filesize' , '128M' ); @ini_set( 'post_max_size', '128M'); @ini_set( 'memory_limit', '256M' ); @ini_set( 'max_execution_time', '300' ); @ini_set( 'max_input_time', '300' );

3. Contact hosting provider

Reach over to the customer support of your hosting provider and ask them to increase these limits for you

4. Use plugin

https://import.wp-migration.com

+ Recent posts