Custom Oxygen Builder Login/Register Pages (using TML) | TUTORIAL & LIVE BUILD

hey guys this is james with isotropic and in this video tutorial slash live build i'm going to show you how i create custom login pages custom register pages um lost password pages everything to do with the user registration process on wordpress i'm going to show you how to create custom pages and making something that looks more like this nice little login page is something you would expect from any software as a service company or any any uh company that offers a product a login page just like this instead of your standard wordpress login page which everybody knows what that looks like uh it's your standard login page you find it at wp-login.php and it looks exactly like this um i think for some websites and i think honestly for most websites uh keeping this login the way it is is more than fine more than adequate um my agency website the blog website all of the all of the um tools that are used by me and my team i haven't touched the login page at all other than security which i'm going to discuss in another video but for some websites setting up a custom login page that integrates directly with the wordpress login system is a great idea say for example you have customers who have a client portal that's built through maybe a membership system or something like that and you just want to create a custom page and you're using oxygen builder to do that i'm going to show you how i do exactly this i make a new custom login page custom url which is typically website slash login and design it and build it all in oxygen builder so let's do exactly that and get right into it so the way we're going to do this is you have a couple routes and there are a couple ways to do this you could use a form plug-in so if you're going to go the form route i would recommend ws forms if you go to the oxygen builder website you will notice that if you go down to the customer login this is a custom login page doesn't look like a woocommerce login or a wordpress login this is actually done with um wp forms so that's another method but the method that i use all the time is theme my login so theme my login is a free plugin on the wordpress repository that free plugin on the wordpress repository has everything you need with the free version to set up custom login register lost password uh pages and then you can get additional things like uh recaptcha or profiles or something like that i've never touched the paid add-ons and i don't think you really need them for just a branded login page so we're gonna only be using the free version so let's get into it let's make a make a login page and use theme my login so theme my login you literally just install it through your normal plugin page uh add new search for theme my login you get it on the site and let's deactivate some plugins that we're not going to be using all right and you'll notice that i have swiss knife which is an add-on for oxygen i have hydrogen and advanced scripts those are the main three that i always use um and theme my login so free plug-in right now version 7.1.2 we're going to get started right now and start creating our custom pages so to do that we're going to go to the settings page and enable ajax requests we're also going to set the login type to just be the default login type registration type to be the default registration type if we allow users to set their own password this will go against the standard wordpress system that emails users passwords so i'm actually going to do that i'm also going to auto login users after registration and then i'm going to take note of these url slugs so with these url slugs the main thing to note here is that these can be changed but i usually keep them the way they are because they match the standard um slug that would that would be associated with that action so if i'm trying to log into my website now i can do that through the login slug so my url and then login and then if i want to log out log out register register lost password reset password all of that so these are just things that you should know the next step is creating the pages that will have all of these functions and features on them so to do that you literally just go in and create some new pages i'm going to create an individual page for each of these slugs so we got six slugs six pages um so really quick i'm gonna do that and then what we want to do here is match this slug so we want the permalink of the page to be login logout register lost password as this is written or we could change it to lost dash password or whatever we want but i'm going to just keep it standard and we'll just create these new pages so log in log in and then we'll do log out and then we'll do register and then i forgot what we got we got login logout register i'm going to avoid dashboard for now because i don't need it but you can make a dashboard page if your heart desires and then reset pass and you may notice that i'm pasting in the slug directly into the heading here and what i'm going to do is publish all of these pages now and you might want to do it as a draft if this is on a live website but this is just a demo site so i can publish it to the wild web and by doing this by publishing it with this title it just publishes it means i don't have to change the permalink here our permalink matches and then i'll just go ahead and change this to reset reset password and then lost password all right so now we have our pages set up and i'll show you that right here these are all of the pages that we just set up these are everything to do with theme my login so now we're going to set up the actual login system and we're going to design the login page using theme my login the way i do this and the way i've done this in the past is there are a couple ways you can do this first you can well first we're going to be using a short code so theme login has a single short code and you literally just paste this short code into any of the pages that are associated with the theme i login registration and login log out so any of these pages and we just created pages that are associated to these url slugs any of these pages if you have this short code on that page anywhere it will recognize that this is the logout page and it will display whatever needs to be displayed for log out if it's on the register page you don't have to say anything but the the base login shortcode and you'll be good to go okay i'm not going to do it like that you can do it by just adding the shortcode to any of the pages but what i'm going to do because i want a standard design i want a central location for that design and i want one one item of work rather than six i'm going to use the template system in oxygen and just create a theme my login template because if we're going to be using the same design and the same shortcode in all the pages this just makes a lot more sense to me so we're going to do theme my login and on a normal site i don't have any other templates or anything like that on a normal site i may include a header and footer template or i may leave it the way it is because a lot of login pages they don't have that menu they don't have that main logo they don't have that footer anywhere it's just your login page so it's up to you when it comes to the design so i'm going to just create this template and then edit it with oxygen then to skip ahead i'm going to show you but to skip ahead i'm going to create the login page with the associated short code and then i'm just going to apply this template to all of the pages so if you want to stop watching now uh and miss out on this this live build that's how you do it uh and then you'd have a perfectly perfect login system working with your website the thing to note here is that um well there are a couple of things to know and i'm going to go over the caveats at the end of the video so uh if i remember when this is done rendering i'm going to create a table of contents make it easy for you guys to jump through so what i want is a full page uh a full page login page so to do that and i'm kind of going to just copy this kajabi login page and to do that i'm going to just do a main section set it to be a hundred percent high we're going to make our background and of course if this was a real website we would be matching global colors and using our class system but this is not a website like that now what i'm gonna gonna do is uh columns nice 50 50 columns and then i'm going to align it in the middle and center it and then we have two sides to this type of page and i see this type of login page a lot you have your main login but then you also have either like a feed of blog posts or a message that the company wants you to look at or a case study that the company is linking to i really like this type of split sign-in or login or register page with just like a nice little message on the side of things i think it makes things a little more personal and especially with this kajabi page this is a real screenshot from the real kajabi page i like the fact that they are advertising their support to their customers so that's just something to take a look at so the way i'm going to do this is first make the login side or the short code site i should say which will have the login form it will also have the register form it will also have anything else and i'm going to use some standard heights here so i'm actually going to do that to the columns i believe and set our height to be 400 px pixels and then here i'm going to add an image and a div set that div to be a hundred percent 100 and then in that div i'm going to throw my i'm also going to make this have a bigger padding of maybe 50 pixels and then i'm going to take this div and in that div i'm going to do the short code and then here i'm also going to space this down by maybe 50 pixels and then in this short code i'm going to place the theme my login shortcode and this isn't going to render because the system isn't or maybe it will render who knows there you go and this is going to render exactly like that uh then we're going to just add maybe a logo here so let's just steal the oxygen logo i'm not oxygen so please don't sue me or the image url so we're going to pretend we're oxygen for this this endeavor here set that to be maybe that width and then um we'll make you a hundred percent wide as well and then we'll also align the text to be centered and see if that does anything just like that perfect and finally i'm going to add a white background i'm going to do we want this to be centered is the kajabi board centered no then we'll do it like that we'll keep it exactly like so perfect and now what we're going to do is work on the support side of things and then we're going to come back here and use styles to css styles or the selector detector if it works i don't know if it will to style this form the one downside with the my login plus oxygen is the fact that the my login does come with standard standard css but it doesn't carry through due to the fact that i believe the oxygen builder disables themes and maybe that disables that i'm sure there's a workaround to it but in the past i've always just used my own css styling rather than pulling in the style sheet from an external resource or something like that i've always just used this style sheet but if you want to you can use something like advanced custom or advanced scripts to get those css default css styles and and throw them into the site but uh by styling it myself i have more control over the site now what i'm going to do is add a cool background so this is like a pattern background of mine like that i'm going to go back here and say cover okay perfect and now i'm going to also install a fade in effect of 150 milliseconds and just like a nice little fade so when the page loads we'll have this like kind of fade into the viewport um and then finally what i'm going to do is space you out by adding our 50 pixels of padding then i'm also going to go back and align you to the bottom keep everything left aligned and then just for backup align that to the left and then add a heading two some text and need help and then we'll just say we have the best support email support at support and of course you could change this message message as you need i believe this is a this background is too um light for us to do a white text so we'll just keep it like this make this a little bit bigger and then make it bolder just so it's a little easier to read and of course in a production site it would probably be a bit different the final thing i'm going to do to the columns is i've added that fade in effect i'm also going to go back to effects and add a box shadow so i always do this like standard box shadow of a black with a 15 opacity and then an offset of 5 and 5 and then a blur of 30 and that kind of gives it a little good good separation from the page all right so now i'm going to save this and kind of show you uh what it looks like on the front end and this again doesn't have css styling which is something that we're going to have to work on after applying it to the page but i'm just going to show you how we attach that to these pages and make it work so i'm going to i don't know if i've published this template yet so i'm going to first okay it is published i'm going to just update the template and then i'm going to go back to all of the pages that i've created that are associated with the login system and first i'm going to reload them i believe i don't need to save anything i could be completely wrong okay and now what i'm going to do is render the page using the tml template or the theme my login template which is the thing that i just made and i made it as a template i didn't apply anything to it i didn't apply it to any pages on the template side of things but i'm applying that template to all of these pages and if you'll remember from the beginning of this video the theme i login short code is on that single template which is now applied to each of the login pages and this short code will recognize what page it's on in accordance to the settings of theme my login so if you remember now we set up the login pages or we actually didn't set anything up this is the default but you can change it to whatever you want the pages the permalinks of each page that we made are associated with these slugs and that shortcode recognizes the fact that it's on the slug and it will display the adequate fields and the adequate functionality that we need for users to log in to our site and register to our site okay so that's that and now hopefully when i update all these pages and look at them on the front end of things it'll be a login page there we go so now here's our custom oxygen builder login page and of course this isn't styled yet so that's something that we'll need to do and i'm going to do that in a few seconds but this is the login page and you'll see that here's the slug for the login and here's your login feature now if i want to go to uh reset my password or if i've lost my password what i would do now is go to the lost password page and i'd go ahead and update it and then get to that permalink of things and here we'll see that it completely updates and you'll see that nice little fade in effect you'll see that it's it's a new field using the same template because it all has the same shortcodes on it it's a new field and this new field right here is the get new password field so that's pretty cool and then again we have our register page we should have our register page we have our register page which has the same template applied to it um and actually i don't have registration set up on this site yet and i'll show you how to do that right now and you'll see that it says user registration is currently not allowed so what i'll do is go to settings general and just allow membership so you can see the register fields with our custom template on them so here's our register page oh i guess we didn't update anyone can register save those changes changes are saved go back to our register page there you go so right now it's using the default register your password will be sent to you when you register and as as you may remember from the beginning of this video you can also change that fact and make it so they can set their own password and if we update that here our custom oxygen builder login screen will update with that feature just like so all right so that's the main thing if you're building a custom login page oh one more thing that i just noticed if you're building a custom login page that's how you'll do it uh one additional thing that i just noticed now is the reason i wrap this in a div is so i can put an overflow auto on it because as you may see here this is pushing off the page but i want the page to remain as a single card and i haven't even thought about responsive design yet but by doing overflow auto i should be able to get that scroll going if it pushes off the page i may need to set a fixed height here so i'll set this to be uh centered middle add you to and of course i don't this isn't the right way to do it but just for video video times sake uh i'll do this and now if it's over uh 400 pixels it'll just show the scroll rather than pushing off the page and i'd need to i need to mess around with this more but you get what i mean here um i'd add padding and stuff like that all right uh the final thing i'm going to show you is styling this form so you can do it with style output this is using the selector detector which is disabled until you enable it like so enable selector detector and this you can just click on the element and then style as you need to so i believe i can just hop in here and set my background to be there you go and we're editing our our fields as we speak i'm going to make u i'm actually going to set this to be like so i'm going to remove that background i'm going to make our border have a radius of five a width of two remain solid uh have some padding involved in it five five or actually we'll make you ten 10 and then we'll just do 10 here and you'll see if you type in here now you have your padding you can set your fonts if you would like to and so on and so forth so i'm going to go right back in there i'm also going to set the state to be i think it's focus it might be active i'll set our borders to be a blue so when you're focused on the field that will change and i'm also going to go right back to original and see if that there you go so that works as i would like it to work and i mean you get the idea we just go to the individual element that we want to style and then we'll style it we'll set our transition to be all and 0.5 seconds and i think that should make a nice little fade as we click on it like that and the final thing i'll just do is style our button to be nice and blue so we'll make our background color that same blue as the focus color we will remove the borders no borders get that out of there set our radius to be five set up our padding to be 10 10 20 20 set the typography color to be white and i'd also do some hover effects but i'm gonna leave that out for this tutorial and keep it at that and then finally i'm gonna just hit the list element uh oh and then i'm going to get out of here and then just i'd change the list element i don't know if i can do that right now i'd change the list element to have a list style of none removing that bullet point and as you may notice i'm on a tiny screen and we will go here and we'll do list i think i might need to find your uh ul instead of you or instead of li none there we go but it still doesn't remove our padding so i'd need to figure that out uh and then i'll just save it and show you this on the front end then kind of just run back through uh this and then run through some things to consider before doing this and then we'll call it quits so here's our our styled form and you'll see that i mean i need to work on this a lot more to get it ready for production but here's our styled login form now and you'll see we have our nice little effects from the selector detector our button we just log in log out and if we're going on a private browser this is what it would look like to somebody getting into the site additionally so here's our little login page now additionally wp login.php now just redirects to your login page so that's disabled so you've completely white labeled the user system of your wordpress website if you want to register that is the same case here uh if you lost your password that's the same here all of those links will go directly to these pages which again are managed through let's just run through this really quickly again we have installed thememy login we have set these slugs we have created pages with permalinks that match those slugs from that we have created a template for theme my login which contains the short code as well as any of the styling that we want associated with the login system and then we just simply apply that template to each of those five or six pages that have to do with the user system and you're good to go that's literally all there is to do if you're going to create a custom login page with oxygen one thing to note so here are some caveats that i have discovered the hard way when you migrate your oxygen builder website and you have the my login enabled the short codes will be broken and your page will display nothing it will show absolutely nothing but the underlying feature of disabling wp login will continue to work what that means is that your login system will be completely broken and you will be unable to access your website unless you go in via ftp and disable the theme login plugin to avoid that pain be sure to disable tml before just disactivate the plugin before you go ahead and uh migrate your website and by disactivating tml it just removes everything um the login page will not it it'll still have the template applied to it and it'll still exist but uh it won't you won't be redirected from wplogin.php to the login page and you'll be able to get into your site using the normal method uh and everything will work perfectly something else to note is that um this isn't uh this isn't beneficial to security there's no security hinderance here it's the same system that wordpress uses but if you're doing this for security this isn't the way to go about it you'd want to limit login attempts if somebody fails login three times or something at a specific ip you would blacklist the ip you would have a web application firewall you would have a content delivery network you'd have all this this isn't really a security thing this is just a looks thing so if you want a cool looking login page like this that's how you do it you use theme my login you use oxygen builder i hope this was a helpful video if you have any questions there is an attached attached article on the blog that has something that kind of walks through these steps again and then of course you can ask me any questions you have in the comments if you liked this content i know it's long i know many people aren't here if you are here you're a big fan drop a subscription drop a thumbs up we're getting to a thousand subs so that's the goal for the next week or so let's get to a thousand subs uh and until the next video i'll see you well i won't see you i said that in the last video i i will not see you until the next video uh enjoy building with oxygen

Channel: Isotropic Design

Views: 6,312

Keywords: oxygen builder, theme my login, wordpress, tutorial, wordpress login, oxygen, builder, pagebuilder, wordpress tutorial, oxygen builder tutorial

Id: 81foyshX5ww

Length: 30min 10sec (1810 seconds)

Published: Mon Jan 11 2021