Add Team Members Using ACF and CPT UI - Oxygen Builder

hey how's it going everybody welcome back to another premise log episode my name is Jonathan and today I'm going to show you how to use oxygen to build a team member section on your website and this is going to be really beneficial because the templating function in oxygen will allow you to make one template that renders all of your team members so if you or the client decide that you want to make a change to what people's BIOS look like perhaps then you only have to go make that change one time and this is really awesome I'll also also show you how to set up like for instance the all team members page in this case we're just going to call it doctors and then that's gonna basically render out everybody in the the site as a whole in the team section so I'm gonna record this in real time I've kind of run through this once so I'm not gonna fumble through this too terribly I hope but I want to show you what it's like in real time and exactly what this process looks like with no significant cuts so basically what I'm gonna do here is jump right into the WordPress back-end and then I'm gonna just show you I have a couple of pages just for the sake of content being on the site so of course we have home and doctors are gonna be the main two that we're concerned with and then underneath our plugins that's another crucial piece to this everything that you see here - oxygen is free and available just in the WordPress plug-in you know repository so advanced custom fields you don't actually need the pro version you can just have advanced custom fields free what pres has just a nice little tool that I like to use to be able to quickly create posts whether it be pages or in this case team members classic editor I prefer over Gutenberg for the time being and then see ptui is gonna be what allows us to create our custom post type that we're just going to call basically team members in this case and then of course oxygen to render our site and to build the template that's going to display all of our team members so the first thing you're gonna want to do is go ahead and mouse over see ptui click add edit post type and then from here the first thing you're gonna come up with is the post type slug which in this particular example and how we're gonna do this doesn't make a whole lot of difference so what I'm gonna do is just go team members like that and then our plural label is going to be team members and then singulars team member just like that and then all you have to do is hit add post type then what you notice is the team member type is now successfully added to the site there so that's really awesome I'm gonna stay inside of CPT UI for the moment and go to edit post type and then down here all the way at the bottom if this were a client website what I would like to do is under menu icon just google search the - icon which is basically the WordPress icon set and that will allow you to change this little pin here to something like a picture of you know people or like the icon of the group of people for instance you don't have to worry about that at the moment but that's really all you have to do so the custom post type is ready now of course if you go in there we don't have any content yet so prior to us actually going and creating a team member what I want to do is create our custom fields first so this is going to allow you to create some more configurable options like let's say the title of this particular person or some social media links their phone number anything like that so let's click on field groups add new and then title this field group something like team member details and we're not going to use oxygen for this so just go ahead and hide that window down here at post type is equal to change that to team member and then our position we're gonna put hi after title which will make sense why here in just a little bit under add field you don't have to worry about putting the team member name you don't have to worry about the featured image and you also don't have to worry about the actual content like the biography of that particular person because we're gonna use the built in WordPress elements for that so the person's title and then you know the person's name will actually be the post title the featured image will be the image that shows up on the front end of the site for that particular person and then the WordPress content editor will contain their bio text so here all I'm gonna do is just put this like team mmm team member title something like that and this field name here is going to be important to remember so make sure it's not overly complex and then also it you know it's not too difficult to type so in this case I'm actually just gonna take out the word member and one underscore so team underscore title that way it's unique enough that if anything else is called title on this site we're not going to be competing with that now the field type you can just leave as text and then if you want it required to where they can't publish the new post without filling in that field you can do that I'm gonna go ahead and do it and then under add field here let's just put something like their Facebook link and then once again let's leave the field typist text do you want this to be required not everybody has a Facebook so let's say no in this case and then let's say their phone number something like that so phone number and let's say everybody has to have a phone number on their profile so that's really all you have to do from the advanced custom fields standpoint go ahead and click on publish and then what will happen is if we go to add a new team member you'll see our team member details are right there below the post title so that makes it super easy let's just go ahead and say this person's name is Susan margaret's that's not how you spell Margaret but that'll work this person's title is going to be chief chief financial officer and then their Facebook link she doesn't have one but her phone number is gonna be eight five five twenty three watch it before and then her biography text we can just put something like this is Susan's bio and we will update it later on and then from here the featured image let's just get a picture of a woman that we already have uploaded to the site she looks like a Susan to me so we'll click on set featured image and publish and now you have your first team member so that's really great however we haven't created our oxygen template yet so if you go ahead and open it then that's not at all what you would want the post title and the post content are there but it doesn't look at all like our site we can fix that super easily by creating our oxygen template but before that I want to go ahead and fill in the rest of the team members on this site and what you can do wear something like bulk press comes in handy especially if you're adding you know 10 12 25 team members to a site I like to go into this post section here change the post type drop-down to team member and then you can just add in the people's names so this post title is just gonna be let's say like Mike Jones and then Peter Kathy something like that and then let's just say Margaret Susan I can't spell Margaret for the life of me apparently and then let's just click on add posts so now if we go back to the team member section then all those posts are there so it makes it super easy if you're trying to add pages or you know posts or whatever in bulk that's a nice little tool to be able to use I'm gonna go ahead and fill in the team member details on all of these people and then we'll get into filling in our oxygen template okay so now I have all of the team members filled out with their titles Facebook links phone numbers all the content that you would need in the team members section so what we can do is actually go ahead and create our oxygen template now so what we're gonna do is we already have our main site white template that is rendering our header or footer and our inner content and then we're gonna go ahead and click on add new template let's call this one team member details and then we're going to inherit our main site wide template where does this template apply expand singular and click on team members which is our post type and then just click on publish and then edit with oxygen once the page loads so now that the oxygen editor has loaded we can actually design the kind of inner content of the actual member details page so what I'm gonna do here is start off by just adding in a section and then inside this section let's just put a column element and let's do something like the 4060 split and maybe reduce this divs with down to something like 30% inside of this you can do a couple of things the way that I like to do it to make the the image stretch is set this divs background and click on this featured data button here for the background image excuse me this insert data button for the background image and then this is going to allow you to insert the posts featured image click on insert and then what you'll notice is that that doesn't really fit at all so what you can do is just change the background size to cover and then let's say we're going to position this left 50% and top 50% and then go back to size and spacing set the height to something like 325 pixels and then there you go now fits nicely so that's going to cover the whole width of that div and then that way it can stretch as the content of the other div gross so that's cool now what we're going to do is add in a heading element and then let's do something similar to where we inserted that featured image except this time what we're gonna do is double-click the heading click the insert data button that appears up here and click on post title and now as you can see we are previewing the Peter caffee team member and he pops up right there his name pops up automatically for us so what I'm going to do now is add in a text element once again I'm gonna double click on this text click on insert data now this time click on advanced custom field and then you can do team member title click on insert and then it automatically pops in our team member title for us which is awesome now what I'm going to do is take this text and add some spacing below it I'm going to add in another text element except this time I'm going to do insert data and let's do content so this would effectively be the person's biography so go ahead and do that and then as you can see it automatically pops in that biography content for us which is awesome so now you might decide well I think I want my social icons and my you know Facebook link and phone number and all that stuff to be below this column that's totally fine let's go ahead and add in let's just say like for the sake of this will do another div that's not what I wanted it to do so I'm gonna take that div out of it if it'll let me I want this div to come out of the column let's put it underneath it and then let's add some spacing and then let's readjust the width of this back to our 30% so it looks somewhat reasonable and then let's click on this column element here and add some spacing below it then just say something like with a little heading connect with me I'm going to reduce this down to maybe twenty six pixels and then add in some spacing below that heading and now what I'm going to do is actually use the link wrapper element and you'll see why here in just a second so I'm gonna add in the link wrapper and then I'm going to set the link here in just a second to be the Facebook icon but what we're gonna do is add in the icon element then let's search for the Facebook icon reduce the size down a bit to maybe for morning more like 35 or 40 pixels and then let's add in another text element same thing again here let's just change this to Facebook profile and now what I'm going to do is click on this link wrapper element again except I'm gonna say stack child elements horizontally this time and then you probably want to add some margin to the right of that icon and what the purpose of using the link wrapper gives you is that then you can take this feature data button here go ahead and delete this HTTP first click the feature data button and then you can click on advanced custom field Facebook link and then now this whole element that both the word and the icon itself as well as this whole block are the Facebook link for this particular user so I'm going to go ahead and click on save so now let's go ahead and do the same thing except we're gonna change this up just a little bit so go ahead and duplicate this little Facebook profile and then what we can do is change this to the phone icon and then let's just double click on this text here and then we will change this to be under insert data advanced custom field and the phone number and then the phone number that we set for this particular user pop populates there for us automatically so now let's go ahead and take a look on the front-end and see what our team member details page looks like so as you can see our Facebook button works just fine it would take us to Facebook if we clicked it and our phone number displays there nicely and actually this this link still has Facebook so I don't really want to do that but you can see that's kind of the point is you can really easily set up people's profile pages to populate using the data that you set up in the advanced custom fields on the backend and then that way you or your client alight could get in there and change things kind of as needed so what we're gonna do now is since we have our team member page built we actually want to design our doctors page that's going to display you know everybody in the company basically and so if I click on this I'm gonna do edit page and then let's click Edit with oxygen so what we're gonna do is start off by adding in a section and then add in the EZ post element the first thing you do is change query type from default to custom and then click post type scroll down to team members and click apply query params and then there's our team member on the site everybody that we created now is populated in automatically the EZ post template that it first shows up with is you know it's it looks totally fine but if you want to change it to something like let's say list image on left then that way everybody has their own line that looks pretty nice especially for smaller companies a couple of things here though you wouldn't want it to say what kind of user authored the post I wouldn't think probably don't care about the date and then one thing that's missing is the title you probably want to see the title where this by demo is that's all really easy to fix so what we're gonna do is click on templates and PHP the first thing that you can do is go ahead and delete this div right here that says date format and image date overlay and then if I click apply code you'll see that the date overlay is gone and then under the date format you don't really need that PHP the author don't need that comments don't need that so effectively we can delete this entire div right there if you click on apply code now you can see it's nicely cleaned up so maybe instead of read more you wouldn't want the button to say read by oh just go ahead and do that click apply code and there you go now you can see it says read bio over there on the right side so the next thing you'd probably want to do is put the person's title directly under their name so the way that you can do that is by looking right here you can see this whole line says PHP the title that's where the person's name comes from because it's entered as the post title so what I'm gonna do is just add in a new div and let's call this team title basically Nemo even Cole in there and then just close out that div real quick and then we're gonna write some some really simple PHP that is going to pull the data out of our our team member title field that we created earlier in advanced custom fields which is why I mentioned keep the names relatively simple but unique because you're gonna need them in situations like this looking back at our advanced custom fields if we go back to our team member details then we can see our team member title is just team underscore title so I copy and paste that then the PHP just looks something like this go PHP the underscore field and then just paste in the field name there and then all you got to do is just close like that now if you click on apply' code then you can see the person's title shows up just underneath their name which is exactly where we wanted it to be positioned now you can either use selector detector or you can write your own custom CSS targeting the team title class there and then you could also add some spacing like underneath the person's name you could you know do really anything because all this stuff has classes assigned to it by default thanks to the oxygen template that we used so let's go ahead and save this and then take a look on the front-end so now our doctor's page has everybody listed out all four members of our team and if we click on one of them then it's going to take us to their team member details page so as you can see it's extremely simple to set up a you know a fully fledged team member section to your website the best part about it by far and away from me is that if you need to go change one element of somebody's profile if the client says hey can you and it you know may-maybe make like the Facebook icon a little different can you take the facebook icons and put it underneath their name you don't have to go do it in this case four times or however many times you you know however many people you have on the site you go do it once thanks to your oxygen template and it reflects across the entire site I got this video requested a couple of times which is why I made it so if you guys have any other oxygen tutorials or things that you would like to see definitely let me know and I will add it to my list of future content ideas thank you so much for watching and I will look forward to seeing you in a future video

Channel: Permaslug

Views: 5,243

Keywords: oxygen builder, team members wordpress, add team members, oxygen team section

Id: LyNYRcVF49U

Length: 16min 58sec (1018 seconds)

Published: Fri Aug 16 2019