Replace a WordPress Plugin with Custom Post Types and Beaver Builder

thank you so much for watching the press Avenue YouTube channel my name is John and today we're talking about basically replacing a plug-in with a custom post type and then in this case it's going to be a team custom post type like a staff team directory we're gonna use custom advanced custom fields and beaver builder and beaver themer so it's kind of a lot in one tutorial but it's something we have to go through and do so we're gonna go ahead and show you how we would do that this is one of our live updates so we're just going to do it all live work out the issues as they come up and you can see how we go about doing things this way when you do it you can work through it as well and if you have any of the same issues you can see how we deal with them if this is helpful in any way go ahead and give us a thumbs up and also as you get through this if you have any questions along the way please let us know in the comments below so let's get to it I will say lastly go ahead and hit that red subscribe button we've just tipped over 1,000 subscribers we're so thankful and we thank you for your support so we'll head over to the site and talk a little bit about this scenario so currently on this site it's a non-profit website they have a plug-in called team showcase and it's worked a little bit and there's been some kind of issues with it along the way but ever since Gutenberg or WordPress 5.0 came out its had a really hard time so it works most the time I just not all the time on the front end of the site you can style at different ways but this is what it looks like it gives you a directory of people in columns you can click a person then it brings you to another page which then shows you their picture the date which they don't like and you have to edit it out via code then when updates it just comes back so this is an ideal so that's good we're getting rid of this and then we always get these hard rule lines there's their doubled up or tripled up on some people for whatever reason and then it'd be great to move the text and just style this a little better so that's where beaver builder comes in and beaver themer and then building this part of it would be the custom post type and advance custom fields so right now if I go to edit member it brings me to here we have their name their description and then the additional info and under the additional info this plug-in comes with a ton of stuff it's called team showcase if you want to try it there's some misspellings so additional spelled wrong and you updated then the plug-in updates anyway so they only use job title and then nothing else so they really only need job title they don't they don't need the rest of this so stripping all this down to something very simple is what we're going to do so let's get started first we'll head over to plugins and go to add new and we're gonna add a plug-in called custom post type UI or CPT space UI so custom post type UI so this is made by web dev studios they're a great organization they support it they answer questions and 600,000 plus active installs is pretty good so go ahead activate what this does is it builds the custom post type so custom post type here on the left it is a post but it's named something different for example right under it says events events is a custom post type on this WordPress site additionally they have job listings donations logos team which is what we're replacing which is that plug-in and then ice these are all custom post types and that's how WordPress is really built so we're gonna call it team so we're gonna have to turn this team thing off actually I might just call it staff and leave it if you're calling it the same thing what I like to do is actually open each one of these in a new browser window so I would just say view and then view or I can hold down command or control and just view each of these so one I have to copy and paste later or make sure that things are correct I can so there are 11 if you have thousands of these I recommend a plug-in called WP all export and WP all import you can drag all this out into a CSV file and you can drag it all in and place it in a templated format and then get it all in without having to copy and paste hundreds and thousands of items at this many I mean it's not a ton it's not ideal but I will just go ahead and copy and paste them alright we'll head back to plugins and go to add new and then what I like about advanced custom fields Pro which is the plug-in that I'm going to add is it's a lifetime deal you buy it and you use it forever and that's really great advanced download it at ten times all right so go to open install you all right now that's installed I just have this thing called WP rocket caching which every time you install or deactivate a plug-in or delete it it asks you to clear the cache if it impacts the front-end and this does next advanced custom field says there's an update I need to enter my license key okay so what I've done is I've installed advanced custom fields Pro I put in the license key and I updated it I'm not showing the license key obviously for just obvious reasons of not wanting to share it with the whole world so if we look through the list now we have advanced custom fields Pro which we'll be using in this tutorial custom post type UI or CPT UI additionally we're using beaver builder which is actually rebranded as page builder that we're using beaver builder theme or add-on and they actually have the beaver builder theme installed as well as the child theme so it's long a beaver builder some custom post types and I think that's it so again I have everything open here I'm gonna go to the front of the site and just open the team page as a reference because I'm gonna turn it all off save the called staff maybe let's call staff sometimes if you call the custom post type the same thing as a plug-in the info will carry through that's it's risky and what it pulls so I usually don't do that stuff but I did want to let you know all right so now we're gonna head over to the back end and go to see ptui again custom post type UI we're going to start at the top so custom custom custom post type slug the slug is what you see up here in the URL so right now it's their website slash let's see actually let's go to this one team slash the person's name so we're gonna do staff so it'll be your website the slash staff slash John Doe or whatever you got and the plural label so in this example it shows movies and set a movie I'm not gonna do staffs I'm just gonna do staff again and this is the label so the label is on the side here so the plural is posts instead of just post and you can see here that says add post type or types so if you want it to read differently that's what this is but I'm gonna leave it the same because it's just a label now you could be done from here you just hit add type you're done and adds it to the side or we can go ahead just go through the additional labels if you want a description you add it here I'm not gonna go through all of these they are self explanatory and the menu name you could say staff members so when you go to the menu area you can expand staff members and see all the people within it and set adjusts staff or staffs which would be the plural if you added that just other items so search item it would say search staff instead of search movie movies just the example so it takes the default plural labels and it just puts them in here singular and plural further down so skip all that alright settings now the public now I will say all the defaults I usually leave unless I need something to be changed or to work differently so I leave all of these except for most time slug archive so it has an archive of true so the archive will be a listing of all the staff members so the page that has all of them that's what we want so that's added there exclude from search I leave all that on menu position this is where it positions within the WordPress menu I usually do it fairly high so 5 puts it right about posts actually I might do a little lower let's do 10 and this number if you can come back and change it and it'll change where it sits on the left hand side of the screen showing menu true the icon so dasha cons is what WordPress uses for icons on the side here or you can add an image URL so I'm just gonna search - icon go here and some of them don't usually apply to everything but this is the list and I'll zoom in alright so team let's do [Music] you miscellaneous I thought there was a you know here we go I think that's what the other one is so it's Dasha cons - groups so I just copy the name of this and go back to the post type and I paste it in if use anything other than - recon it needs to be 20 by 20 pixels and the image URL needs to go here or you can go to the media library and choose an icon that you have supports we want the title that's where we're gonna put the name we want the editor and we want the featured image and everything else had leave off you can do categories and add other things but in this example we're not going to do that so it says categories tags categories etc so you could tag like executive branch customer service branch HR etc if you have a ton of people and then later in beaver themer and a beaver builder you can filter those people so you can have at the top executive branch next you can have the administrative staff next you could have staff or whatever is that make sense so now we're gonna click Add post type and if you look over here we now have staff members and then we still have that team one here and use the same logo so staff members are now our people so we're going to go ahead and add them so I click staff members and there's no one in here and I'll click add new and then you'll see just the basics of it I can add a name and a description and then ignore these ghosts let's turn these off the featured image would be their picture but in this instance they did want their email let me double check oh they wanted their job title so job titles thing we want to add so if you want a very basic one then we're done with custom post types we're actually gonna add a custom field called job type so if I go to custom fields now this is advanced custom fields and you can see it over here Pro and they have documentation it's all really great we're gonna add a new field group the group is let me find it well you can see right here this is just another made a box underneath the typical post type here it is right here so add new staff we're gonna add a grouping where it says Yoast SEO we're gonna add another box so let's go back and this will be called additional additional staff info before we get into how we'll drop down to this where it says location and then rules where do you want this to show up all right so it gives you some options post type template status format you know tanks enemies widgets whatever you can select everything in here we just made a custom post type called staff so we're gonna do post type is equal or not equal to so we'll do is equal to staff the default is post but a jammed then I had to come back so it's usually on post so I went down and selected staff so what this is saying is whatever we add up here will show only on this staff a custom post type that we created additionally you can turn it on or off active you can change the style and seamless I do seamless and I'll show you why in a minute position normal you can do high which is right after the title and since this is only going to be one item which is job title I'm gonna put high and you can put instructions and then you can hide additional stuff on the screen that's all up to you we're gonna add a field and we're gonna call this so I take the site name so I don't have any issues and then I do an underscore and then a label that way we don't have any conflicts if something is named the same thing so we're gonna call this job title the field name oh wait the labels I'm doing this backwards this is the label so that's what you see and then the field name is just a single word underscores and dashes allowed so job title it's going to be a text but you have all these options to choose from and I'm going to keep it a simple text I'm going to make it required and then you can do a default value a placeholder text prepend append so before the text after the text you can do a character limit and you can do conditional logic etc so I'll hit close so that's it here I'm going to go ahead and hit publish there we go took a minute I'll go back to staff so this is what we have before title description I'll refresh now we have title job title description so I'm going to use the title for their name I'm use this job title which is required as their job title the description which is about them and then the featured image is their mugshot basically so you see how that works so now one thing I will do is I will turn off the classic editor and show you what this looks like one moment you you all right so I went to the classic editor excuse me I went to settings plugin all right so I went to plugins and then under the classic editor it says settings once I'm in the settings I switched it to allow users to switch editors and hit save and give it a moment save I'm going to come back to staff members add new there's her stuff there and you'll see in the bottom right here I can switch to the block editor so I'll switch to Gutenberg wordpress 5.0 editor instead of forcing the regular one so now if you see here Auto drafts is just the save title name but this is where we're putting their name this is where we're putting the description and now job title even though is set to high it actually puts it underneath everything but what's nice is if you set it too high it's above Yoast SEO if that's what you use so now I would just simply copy each staff member over so I'll copy this guy and show you copy/paste too many windows so you don't need the date and so we're getting rid of job title gonna do this wrong every time copy this paste and then that's it so I will now go oh I need his picture so I've got a featured image set this kind of right here the titles in there I always put the OLT in the cat I put it all in for future reference so there's his mugshot and I hit publish are you sure yes I'm sure publish view now if you look here and the old one is this this is the plugin and the new one is this it's showing the title the date and then the description we want to change this around get rid of the date it's just the default up here it says staff and that was our label so your domain.com slash staff slash the name of the person alright so next we're gonna go to page art beaver themer so go to new theme er layout we're gonna call this staff single so one single staff member so in this case it's Jason it's like a single blog post and we want it to add a template to a single post type so we're gonna do a singular so I just name it how it is so when I start getting tons and tons of these templates I know like I want to look for staff single which is the individual or staff archive which is all of them and I'll go ahead and add themer layout location this is only going to show on staff so renew it for all staff you could do a template for executive staff you could do a template for HR you can do whatever you want you can do this quite a few ways under page builder categories I have single header layout events this is a single one so I'll do single as well so I can see how to change it in the future now go to launch page builder give it a moment all right so we have an up-close view of this guy's chin because it put the featured image in the back which is not quite what we want so this is what it was before just kind of a simple layout so we're gonna get rid of this row that's just the default other things we don't want we don't want these hard rules we get rid of those post it in doesn't matter another hard rule about the author get rid of that don't need comments don't need a hard rule just delete delete delete so now we have the description and now we need their name so we'll do a heading just drag it over and now we're using so remember this is themer so it gives us these plus boxes which is a slightly different option so we're gonna do the post title we're gonna hit connect connect brings the whole thing in if you want to pent append to anything to the front or the back prepend or append you would do insert so I do plus post title insert now we can write something before job or name or phone number or whatever you've got so I'll go back here and I'll do connect I'll do an h1 and I'm gonna hit save so there's this name probably give more little more padding on here whoops it's too much all right name now we're going to do title so go to plus text editor and we'll hit the plus on the themer and then now the title is actually a custom post type or it's an advanced custom field excuse me so under advanced custom fields it says a CF advanced custom fields post field so we can connect or insert I'm going to click insert I'm going to go back to the backend of the site let's see and we're going to go to the field group and then here is that SK job title paste that in there hit save and then it creates this short code so WP beaver builder posts is ACF the type is text and the name of it is this so we can say title so we can prepend in ACF or here I do it here so it's easier for the client in the end so title and then their title when I hit save there it is does it make sense hopefully it does and then there's way too much space in here and we're also going to put their photo in so we'll do a row to columns let's put it right here description and then an image so photo photo now it's in the media library but we don't want to do every single one so we'll say plus and then the post featured image is how I'm doing it so I'll hit connect and then it pops this up it says what size do you want to bring in so I'll say medium which is 300 by 300 and then under default image you can select a default option which I will just select their logo if they have a square one I don't see you mungus okay we'll do this one so if the staff member does not have an image yet it'll automatically show the logo of the organization or you can do a gray head where it's just the shoulders up or whatever you want which is great show caption it's up to you link type I do is none so I hit save I'll close out of this so there we go then we can just adjust this a little bit I'll do this 225 all right so there we go we're done we have recreated this simple thing without the sidebar and cleaned it up without the date next we are going to add a themer module called post navigation we're going to put it right down here at the bottom what this will do is it allow you to go to the next staff member if there's one before this or one after this in the listing order so navigate in the same we don't have any text on this let's see if this works there's no additional people you need to add them so done publish alright so now we are going to add all the people so I will just skip ahead or I'll speed this up so you don't have to watch it all so we'll go to new and there's ten more people so you just hold down the control button or command I'll go to new staff do 1 2 3 4 5 6 7 8 9 10 so I have a super wide 4k monitor so I can have a bazillion tabs a lot of people can see a lot of tabs so now I have 10 new tabs and I have 10 new people to the right just gonna copy paste you'll see how it goes [Music] all right so you can see here we've added everybody in um if I now go to view again you can just view them as they are but now at the bottom you see I can go between employees or staff members whatever you call them at the bottom so that's that post navigation takes the title puts a link and puts it to the next one in the list so instead of having to go back up to the menu you can just cruise through it down here next we're gonna go and change the archive so if I delete the person's name and the title this just shows me this archive here which isn't great especially on mobile it's actually terrible we'll go over and go to new and we're going to go to theme or layout so before we did staff single for each single person now we're gonna do staff archive it's a theme or layout and it's gonna be an archive and we'll go to add um so we're gonna style that page up so it doesn't look so terrible under location again we'll go down to staff archive and then on the category I'll type archive just so I know what it is in the future and I'll go to launch now again if you do this and you want to show everyone in the archive when the custom post type is created we had one change in the default and it has archived question is false I changed it to true and this is why so here we are we have staff huge title at the top and then again we just have this list we're gonna go ahead and just click in the list and this is essentially the posts grid we're gonna go to columns and then three so you can see how it's kind of changing it up there let me shrink this down for you lay out will leave equal Heights I'll go with yes post spacing the spacing between the posts a 460 is usually pretty big I do 40 and kind of bring it in a bit a bit the padding's all up to you show the featured image so that's what we're using for their mug shot image above the title which is kind of how I like it the size image spacing if you want author we don't want so we're gonna hide that and then the date we don't want doesn't matter when it was posted it's not relevant so you can see how it just cleans it up automatically terms terms would be if you had HR executive branch etc you could show those terms but still you don't really need that we're gonna go to hide the content so just show their names and instead of read more and I save you or learn more so there's the more link and then the events calendar shows in here which is not relevant I think I'm gonna do a four person grid let's see that looks like it's not bad you see here one and then two and the next so there's two pages of people we actually want to show all of them and we'll get to that in a moment so next style post alignment I do it I'm going to do everything centered for this one and then see how it centers up there people's names or titles will be a little bit longer so you can change the spacing to fix that say 20 and we can also change the size of the text so go back to style post alignment background color if you want one border color if you want one title color we'll do blue no maybe not blue that's not bad let's forget let's do dark gray you can change the font the styling let's see I don't know if this changes the link doesn't look like it out link color link colors just change the size title so font you can drag it right here and you can just see what works best for you but I'm going to change it down to 18 and then all the options that you'd have normally are all in here under content it's just the main query you can do a relationship or custom query so post type we're gonna say staff and then the order I'll do a sending and then order by so you could either do an additional custom field and put in the order or you can order it by the date it was entered I'm just going to do the date you can do the ID a menu order random by title etc or selection order there's a there's a bunch of different ways to do this so I'm going to do it by date all right exclude the content again I talked about filtering you could fill you could have staff and you can filter by HR etc if you created a taxonomy which we did not do in this one post per page right now it's at 10 um they want all the staff on there so in case we ever run into an issue we'll just do a really high number that won't be hit tag nation we don't want it going to turn that off and I don't want to show a search because I want them all listed then finally advanced is how it looks on the computer on a tablet or on a mobile and you can change the padding etc you go ahead and hit save here it is on the tablet and then here it is on the phone so you can just see what you like or don't like and then change it accordingly all right so now I'll just go to done publish and now this is our staff archive as far as WordPress is concerned so if I just go to the domain slash staff that brings me directly to here now additionally if I go to a single one so let's go to this guy and you'll see is the first one posted I can again navigate over here you could also put an additional link that has all staff one more time and that's entirely up to you if you have any questions about this since we've covered a ton of topics from custom post types advanced custom fields beaver builder plug-in and beaver builder themer while editing an archive and a singular post type please let us know in the comments below additionally we do have that Facebook WordPress group where we post our tutorials and answer additional questions it's a little easier sometimes to have a conversation on here but you're feel free to post comments below or on Facebook and I'll put a link below or facebook.com slash group slash press Avenue thumbs up if this was helpful in any way whatsoever again hit that red subscribe button to see more WordPress tutorials like this one thanks so much for watching its again for watching the press Avenue YouTube channel right below me is a circle that will help you subscribe to the channel quickly next to it the square will bring you to our site additionally to the right over here there is a recent upload whatever the most recent one is at the time and also a you to recommended video in our playlist Thanks you