This is the future of the WordPress Admin

Hey what's going on guys Josh Donnelly Here with yet another building on WordPress tutorial and in today's video I'm gonna answer a question that a lot Of you have had which is how I customize The back end of my WordPress websites For my clients when I'm ready to hand it Over now I've tiptoed around putting Together a formal video on how this Works just because the tool that I used Originally was uh very basic it has Since developed into a version 2 which Is great a robust tool for sort of Theming on the back end of your WordPress site but they're version 3 Which is actually on the horizon it's Currently unreleased I've gotten to play Around with the beta a little bit here And it is absolutely incredible you can Basically build and customize whatever You want and the best part is is that WordPress has never felt so quick or Buttery smooth so let me give you uh an Idea of how this works first let's go Ahead and look at version two so what do I use well I use UI press now back when I started using this one of the reasons I tiptoed around it is because it Originally was called admin 2020 and I Could see that name going away once 2020 Was over and was trying to figure out What they were going to do shortly after 2020 ended they changed their name to UI Press now there are only a couple of

Years old as that named admin 2020 Suggests but they have done a phenomenal Job in those few years now version two Is amazing it's basically a structure That you can then customize settings on So they kind of provide the outline and Then you can override colors Styles Padding and then even add in some custom CSS or JavaScript as you need which is Great I loved it I think they did a Great job with version two so I would Encourage you to check that out but as You can see up here at the top uipress Version 3 is here now it is only in beta Right now but version three is insane Version 3 allows you to literally Customize and build your own templates For the back end and then style those as You juicy fit and it does everything Through vue.js and all pages are loaded Asynchronously or Ajax so literally the Thing feels lightning fast and buttery Smooth I'll let you guys scroll through this And learn a little bit more about how it Works and what all it entails but I can Tell you once you get the hang of things It is pretty darn amazing now a lot of People might ask well you know why do You need something this works great and I agree when I'm building a website I am So used to just the standard default Vanilla WordPress backend design that It's what I know it's what I use and it

Works great for me however one of the Things I've noticed is that when I turn A site over to a client they're looking At all of these competing platforms like Wix and like Squarespace and like Shopify and all of these platforms out There that are nice and Polished and Then they come into the back into their Website and they see this again not bad But it isn't the prettiest looking thing And so I used to button this up a little Bit but with UI press 3 you can do some Really crazy things so let's go ahead And dive in the first thing we do is we Install uipress which you'll see because I have the beta version I just have UI Press light here I actually have a Lifetime license so once the full Version is out I'll have the pro feature As well but we're just going to look at The light version which automatically Out of the Box gives you an insane Amount of customizability for free so we Install UI Press light we come over to Our settings and we go into our UI Builder Now when you're inside the UI Builder This is where you get to build your Templates for the back end of the Website this is almost like a Cornerstone or an Elementor or an oxygen But for the back end of the site and it Does it all I thought it was going to Add a lot of bloat and a lot of load

Time but it does it all lightning fast So let's go ahead and take a look when You're just starting out you can come up To the upper right hand corner up here And click on new template but as you can See I have a couple of templates created Here so you basically have a library of Your templates that you've created in my Case I really only need one and so this Admin layout is a great one you come in Here and you'll notice that you kind of Have something that looks very similar To a builder you've got components or Blocks on the right hand side here You've got patterns which are like Global Styles and then you've got your Settings so is this do you want this to Be an active theme or is it inactive and Then who does it apply to or who doesn't It apply to And then what do you want to name that Theme and all of that fun stuff so Uh what you can do is inside the blocks You can literally say well I want a menu So we could come over to Um let's see we should have Our admin menu here we go and we could Drag a menu out here pop it in and now We have an admin menu and you'll notice It has some icons and if we need to like You can see everything's kind of small Here we can zoom in on things if we want To look more closely at our workspace Um I like it zoomed out just so I can

Kind of see what I'm doing I'm going to Go ahead and delete that menu that I've Just added there I just deleted the Whole thing really cool item is that There's an undo button on all of this so Come in here we'll hover we'll go to our Admin menu and click delete now I'm not Going to go through how to set Everything up here that's not what this Tutorial is necessarily for but just to Show you how amazing this is and how it Works we can click on layers and we can Get a full structure of our admin Backend so we have the body we have our Sidebar container which is this over Here we have our body container which is This over here within our body container We have our toolbar container which is This up here and you could build this Out however you wanted this is kind of One of their starter templates which is Amazing and then page content is this Down here you'll notice you can Literally add or remove any of these Like if you don't want this dark mode Switch you could just delete it and it Is removed I'm going to leave it there So I can kind of show you how that works As well go ahead and put our dark mode Switch back in There we go okay so let's go ahead and Save our template Let's jump over to our settings and Let's make this active and currently I'm

Making this active just for me on this Demo account and we'll go ahead and save Again so that it activates that and as Soon as I refresh the page here you will See we now load up our new theme So I can come over to the standard Dashboard and it loads that up I can Jump over to my media library and it Loads that up I can click on things and I still get a full like let's go look at This media file I still get all of my Standard WordPress features but all in Just this nice new interface we can go To our plugin library and everything You'll notice loads asynchronously so This menu on the left here in this menu At the top none of this is reloading on Click so if I click on portfolio items This changed but didn't reload in this Loaded asynchronously I can come in here And under Acme I can click edit and all Of this loads up with all of my ACF Fields and all of that fun stuff Then you can see I can create little Account uh prompts here this is fully Editable log out button view site a Little welcome message for your clients Um and then you can customize the Buttons you can customize the logo you Can literally customize everything if You wanted to move toolbars you can do That you can have tool tips that show up When you click on things so let's go Ahead and make some of these edits

You'll notice if I click on this home Button it opens up in a new tab but if I Wanted that to open up asynchronously Right into the back end we could do that Too so let's go into settings again We'll jump over to eui Builder and we'll Dive into our active layout this one Here Now that we're we're in our active Layout we can click on Our admin menu click on settings which Now we can style each part of our admin Menu so we could say on Hover now I'm Just making this up here but on Hover we Want our color to be bright red And then on uh let's do active here we Go on active you can see where I've Selected purple maybe we want this to be Bright Green I don't know why we'd want these crazy Colors And then maybe we want our active to be You know a 900 weight here and then we Can even get into our sub menu items and Say no and it's a sub menu I actually Want it to stay purple and when we save This and we reload our WordPress backend Here you'll notice we have hover is red Active is bold clicking that active one Leads to a sub menu and the sub menu is Purple but let's say we don't like this Uh you know style where we click and it Loads up sort of a new simplified menu

Here that's totally fine we jump back Over to our UI Builder We jump into our template And right here within our admin menu We can pull up our settings again and we Can actually say within the block Options which this is a block it's an Admin menu block we could say we want it To be inline we want it to be hover or Dynamic I currently have it set to Dynamic but we could say we want this to Be inline And I have icons turned off but maybe we Want our standard WordPress icons turned On So then we could save this template and We can refresh the page and now you'll Notice kind of the standard WordPress Format I have settings it's expanded out And I can see what is inside of those Settings here I can click on tools and Now tools are expanded out and I can see What's inside of those settings there Let's go ahead and jump back into Settings and into UI Builder and into Our active template And for the sake of example let's say That we also want to Grab our admin menu here and under the Icons we want to change a few of these So we have it active but we want us to Edit some of these so to do that we'd Come under our block options for the Admin menu and when we scroll down we

Can see all of our menu items here so we Could say that we want the standard Dashboard in WordPress to actually be Called maybe admin home and we want the Icon for that to be I don't know this One two three so we can go ahead and Save that Refresh and now dashboard up here became Admin home with a new icon so we can Kind of even customize what things are Displayed as in the menu Now I really do like this uh Dynamic Menu but one thing we'll attempt here Instead of dynamic is hover and we'll go Ahead and refresh and now you can see Instead of expanding down when I click Or hover on each of these I get this Sort of Sub menu that comes out here And you can see how that works Now one of the things you can do like I Mentioned you can load up even your home Screen asynchronously so here's our home Button here we'll come in and click on That And under our block options instead of Having this open in a new tab which is What I like you could actually have it Be dynamic and so by doing this we'll go Ahead and save uh let's pull just Because I like this let's go ahead and Make this admin menu Dynamic again too Just because I think it looks great and Save that And it pulls up the standard back end

Editor here if I click the home page Here it now loads up my home page right There for me and I can actually even Click this expand button and I can work Right here if I had a builder you guys Know I like the Cornerstone Builder you Can actually pull up Cornerstone Right here in the back end Select the page you want to work on Expand this out and work right here now I don't know that I would do this I Don't know if there's ramifications to This but it does work one other thing Which might take a little bit of Tweaking is you can actually Set Dark Mode and light mode if I click on dark Mode I can set separate styles for dark Mode and so you'll notice it loads up Everything nicely here we can go into Our pages and everything is loaded Nicely where it does start start to fall Apart a little bit when you're working In dark mode is any custom plugins you Have that override the standard default Styles you would have to edit those Specifically probably with some Advanced Uh CSS but that would be things like Advanced custom Fields has their own Styles on the page so you'll notice this Looks a little bit wonky we'd want to Mess around with that if we could but All in all this is an amazing tool and a Really great way to step up your game With your client websites especially

When handing it over to a client where They're going to be managing things on The back end you really want it to feel Modern and app-like at least in my Opinion which just gives you to a Polished professional look upon Completion so if you guys do have any Questions about this at all like I said I'm only scratching the surface here Maybe in the future as we start to Unlock some of the pro features we will Do some full tutorials on how to edit And customize and some very specific Features about how uipress 3 works but In the meantime feel free to leave some Questions or comments below I've also Included a link below so you guys can go Check this out for yourself and I will See you guys in the next video peace