OXYGEN REPEATERS DEMYSTIFIED: When, Why, & How to Use Repeaters in Oxygen

so today i'm going to walk you through one of the most important elements inside of oxygen and that is the repeater this is something that i use on pretty much every single website that i build if you can understand and start to use the repeater it'll really take your websites to the next level but i do want to say if you are completely confused by the repeater you don't know where to start you just can't wrap your brain around it i totally understand and this is the tutorial for you i'm going to keep this super simple very straightforward and i'm actually basing this tutorial off of a real world use case so we're not just going to play around with a repeater in this tutorial i'm going to walk you start to finish we're going to take a custom post type we're going to create that we're going to put some data in the custom post type and then we're going to query that data using a repeater just like you would do for a real client website all right we're even going to start with the sitemap i have from a real client so this is super practical and like i said very dumbed down very straightforward you're going to learn a lot of mini lessons inside of it i try as much as possible to embed as many little lessons and little tips and tricks as i can throughout these tutorials but i just think you're gonna find this super helpful and very valuable uh make sure you hit like make sure you hit subscribe drop a comment i love the participation i respond to every single comment that is left on the channel and and that's that let's go ahead and dive into the into i can't talk let's go ahead and dive into the tutorial all right guys let's go ahead and dive right in i'm going to show you how to build repeaters and oxygen i'm going to keep things super basic super simple we're not going to dive deep but you will have a grasp of what repeaters are why you would use them and how to create them by the end of this video now as far as the why you would use repeaters i published a video as my last video on the top 10 use cases for custom post types and if you're going to be using custom post types then you should be using repeaters as well basically what a repeater is is it allows you to query something like a post or a custom post type so whatever's inside of that custom post type onto a page and then you can do a bunch of cool stuff you can do filtering and sorting you can query children you can do i'm not gonna again i'm not gonna get too deep into it but i want to center this tutorial around something that's very practical so what you're seeing on your screen right now is a site map an seo site map that i created for a client i create these for pretty much every single client this sitemap is actually a relatively small sitemap but we'll go ahead and talk about this so this is a sitemap for a luxury performance auto shop they only work on european vehicles higher end like luxury performance type vehicles bmw mercedes audi porsche etc and this is the site map that we built for them so they had two locations i've removed all the actual client data they had two locations and so when you see something like this we're talking about the planning phase of a website you should automatically in your mind think all right locations that's going to be a custom post type then we have this one called repair which is actually all of the makes that they work on now the reason it says repair is because that's what the slug needs to be for seo because when people are searching online for this they're actually searching repair by the make of their car so they're saying i want a bmw repair shop or i want a mercedes repair shop or i'm looking for bmw repair near me right very very common so this is going to be a custom post type this is actually the one that we're going to create for this tutorial then they had services which would be another custom post type and service areas which would be another custom post type but let's go ahead and hone in on repair because what i'm going to do is i'm going to show you how we would create the repair custom post type that only takes a few seconds and then we're going to pop some of these into it and then we're going to query them inside of a repeater so this is a real world tutorial something that you would do for a client and something you would do over and over and over again so let's go ahead and hop into wordpress here i've got a clean install i'm going to throw myself in the corner for a second and i'm going to go to plugins just to show you uh if you want to create custom post types i know i covered this in the last video you're going to need to plug in custom post type ui so if you don't have that go download it install it you'll be able to follow along with this tutorial it's completely free when you install that plugin you're going to get this little cpt ui area over here we're going to go ahead and add edit post types and we're going to call this makes and it's asking for the plural label so makes and then the singular label is make and then i'm going to populate additional labels based on chosen labels you're going to see that when i click that button uh well it's actually not working it normally works it probably is not working because i didn't put the slug in so let's talk about the slug remember i wanted the slug to be repair all right so i'm going to make this repair let's see if it'll populate now it populates okay i'm going to take the word my out of here everything else is fine so it populated all of these fields for me and then i'm going to come down here and i just want to make sure that hierarchical is set to true we don't actually need any hierarchy we're not nesting any of these under other ones but in the future i always almost always just put that on by default because in the future if we come back and want to do hierarchical stuff we don't have to come back and reset the settings all right so before i hit save on this let's go back to the top and talk about this so if i made all of this repair it would just put a repair section let me let me hit add and show you so it puts makes right there if that actually said repair like it does here it wouldn't really make sense so if somebody came in to add a new make to the website they wouldn't know that it's under repair right so the slug it can be different from the actual name of the custom post type people know what a make is if they're working in a shop right so we're going to go ahead and hit all makes and what you're going to see is that that custom post type is empty we haven't put anything into it yet now i'm going to show you one way to do it and then i'm going to show you the really fast way to do it so the the manual way is to click add new and then you can see what we're going to want to do here is we're going to want to load in bmw and mercedes i'm just going to do six of these all right so let's do bmw if i can type and then i'm just going to hit publish that's all i'm going to do for now and then i'm going to go back and you're going to see that bmw is in there so a lot of people would make the mistake maybe of creating all of these things as pages and then what's going to happen is your page is going to be all cluttered up it's going to have service areas in there it's going to have makes in there it's going to have services in there it's going to have locations and it's going to be an absolute disaster and then you're not going to be able to query them well it's going to be difficult if you wanted to template this stuff to create templates again i covered all this in my custom post types video but you can see now that in seconds we've created a custom post type called makes we've created a bmw make inside of that a page for bmw is effectively what we've created and if i hit view if we go to the front end you're going to see that it's nested under the slug repair so i have the shop slash repair slash bmw that's exactly what we wanted exactly what we were going for now notice i'm on the front end this is where we go to do the shortcut you click customize because if i do this back here i'm going to have to add new go back add new go back add new go back and it's just a lot of loading refreshing and all of that so once you click customize on the front end just go to menus create a new menu if you don't already have one and then start to hit add items and then you're going to go to makes there's your custom post type right there and then you're going to add them here and this is going to add them on the back end it's not just adding them to a menu it's actually creating the pages for you inside of that custom post type on the back end so again if we look at what we're doing here i would normally like pull this up on my screen so this is our game plan for the for the client effectively so i and i'm not gonna do all oh wow it's not gonna keep it in front okay i maybe we wouldn't do that normally all right porsche i think i can just get him off top of my head audi we need volkswagen we need mercedes we're just gonna do six of these one two three four five what did we leave out uh we got porsche mercedes audi bmw let's just take a quick look at it um jaguar let's do jaguar okay so there they are now if you don't want them actually added to a menu you just remove them hit publish and then look we're gonna go refresh our custom post type and there we are let me close all this stuff okay so i now have created a custom post type it's got a custom url and i have six items inside of the custom post type that's it guess what friends we are ready well we're almost ready to do repeaters now think about this for a second we if we're gonna query these these uh posts onto a page and we're gonna create let's just do that now then i'll come back because we can kind of explain this as we go i think that'll be helpful so let's create a page called makes and that's what we want to have our repeater on so it shows all those makes that we just added that makes sense right so i'm gonna hit edit with oxygen sorry my my nose itches and while that's loading let me explain this uh if you're using oxygen 3.7 or below you're going to have to use the old way of building repeaters if you have oxygen 3.8 or newer you're going to be able to use the new way of building repeaters with the advanced query builder again i'm not diving deep but i am going to show you both methods and we're just going to stick to the basics because i don't want to confuse you i don't want to throw too much information at you so the first thing i'm going to do is hit add and we're going to add a section i'm going to add a heading and this is going to say choose your vehicle right and then i'm going to put owl spacing inside of this well before i do that just so you understand what owl spacing is doing let me add my repeater i'm not going to add a class i'm going to actually add a repeater okay and that's going to build basically a blank box and this is where a lot of people get confused they're like oh i added a repeater like what do i how do i use this thing i don't understand it um so now i'm going to click on the parent section i'm going to add owl spacing to this if you've seen my other tutorials on why i'm doing this it evenly spaces everything inside of your your section go watch that tutorial if you haven't already so now i have space between my heading and my repeater so the repeater is going to it's like the first question you want to ask yourself is what do i want to show inside of my repeater well i want to show all the vehicle makes inside of this repeater but i want to show them in a visual format which means i probably want them to have an image i probably want them to have a name right i want it to look good and so a classic thing that we use for this in web design is called cards and i've created a video called how to create cards in oxygen properly you may not know them as cards you've probably built them before and just not called them cards but i like to call them cards it's kind of a standard naming convention so we build a card for every single make and model if we want to do it manually but if we want to do it dynamically with a repeater which is far better which we'll get into the benefits as we go i create one card i just kind of here's how i want my card to look and then i inject the information into the card using the repeater and the repeater will query all instances of so if i go to uh the back end here how many makes did we put in six of them so it will show all six makes so here's my custom post type makes there's all six of my items that's what i want to query into this repeater so let's just go ahead and kind of kind of get the repeater set up here and then i'm going to show you how to actually use it and we're going to do a little bit of a roundabout way because i think for teaching purposes that's going to be better all right so uh the repeater when you add it you're going to click it and uh let me see structure oh i'm actually selecting the div so when you add a repeater it's going to add a div inside the repeater by default and that's what you're seeing here is one giant div it's not going to do anything until you tell it what to query so you see this query box right here so i'm going to click on it and i'm going to first start out here's the advanced one for 3.8 and up 3.7 and below you're going to click on custom and now we're not going to get into how to do this on archive templates and all of that again this is a really deep topic i'm keeping it as simple as possible we are on a single page i just want to query my makes onto this page so i'm going to choose custom post type and i'm going to choose the makes custom post type but what you're going to notice is it doesn't say makes anywhere in here it's going to have whatever you called the slug the url which was repair so i'm going to choose repair and i'm going to hit apply and what you're going to see is that the one div here actually kind of turns into six empty divs because the repeater is getting ready to show all that information that was in the makes custom post type remember we had six items that's why we have six empty divs i can only edit one div which is the parent div and whatever i put in this parent div is gonna get repeated six times and this is where people get confused because they're like well if i build a card with a porsche image and a porsche title it's just gonna say porsche six times it's gonna repeat that that's what a repeater does so i don't understand so that's where we get into injecting the dynamic content into the card so normally what i would do let's talk about regular workflow i would build the card right here inside the repeater and then life would be good but i don't think for teaching purposes that that's going to be the best way to show you so i'm going to do a little bit of a scenic route here but it's going to help you understand the concepts a lot better now the first thing i'm going to do we wouldn't have cards typically that stretch all the way across the screen right so we want to show these six items in a grid so i'm gonna choose the entire repeater and because i i always advocate for things that save tremendous amounts of time even if they're premium tools and you have to pay for them freaking pay for them like they are worth their weight in gold in the time you will save i'm going to use oxyninja utility classes i'm going to put a columns 3 class on this repeater and you're going to see instantly i have a grid of three items i'm going to put a gap of medium and you're gonna see i have a gap between all of my grid items i'm gonna put an l2 class on here because on the large device size i want two columns instead of three and then on medium device sizes i want one column instead of two or three so now you'll see as i roll through this i have a perfectly responsive grid that is just sitting there waiting for content you see how fast i did that okay always works perfect every single time i'm going to go ahead and hit save now i'm going to build a card for our mix outside of the repeater i'm not putting this in the repeater because i again i think you're going to learn better this way so i'm going to create between these two things between the heading and the repeater i'm going to create a div this is going to be our card i'm going to call it make dash card oh sorry something just fell on my desk okay i'm temporarily just so i can see what a card might look like i'm temporarily going to put a width on this all right but i'm going to remove this in a little bit and you can see i guessed properly it's about the the width of one card i'm gonna put an item in here called an image okay and we're gonna call this make card image and then i'm gonna also add a heading and i'm gonna be jumping around a little bit here because we're gonna have to do a little bit of this uh as we go let's do let's do an h4 for this okay and i'm gonna call this make card heading perfect and i'm gonna i'm gonna actually edit this we're gonna say porsche repair and don't worry like the reason because i'm we want to see what our end result is going to be and then i'm going to show you how to adapt it to use it inside a repeater again i would normally build this in the repeater but that's like almost skipping a step and it's harder for you to follow along with like right now you see i'm just building what a card is supposed to look like because that makes sense all right so uh for the make card image we actually don't have any images attached to the post types yet we're going to take care of that in a second so i'm just going to manually choose um oh let's go ahead and i haven't even uploaded them yet so here's our cars right here i'm just going to select them all in upload and we're just going to choose the porsche whenever it shows up here because that's the card we're creating first okay porsche porsche porsche where are you that's a porsche all right so i'm going to select the image and there's my porsche all right cool now i don't want uh i don't want the cards to be that tall that's that's freaking massive uh so what i'm gonna do is we're gonna tame the beast here so i'm gonna grab my card let's go ahead and name this rename okay we'll just name this card and there's the image in the heading inside the card so on my card i'm going to set it to layout position relative because this image i'm going to actually need to position absolute inside of here i might even do the heading absolute as well um so in order to make sure that those stay contained inside of the card i need to set the card to relative now what i'm going to do is uh let's see so there probably needs to be a height on this card because i want to control the height of the image right so we're going to set a height of 40. all right and then the image is actually spilling outside of the card i don't know why because i set that to i didn't set that to absolute yet but i'll go ahead and set that to absolute and we will go uh let's see size i want to fill the whole card okay so we're gonna do with 100 and we're gonna do height 100 and because it is positioned absolute it's going to contain itself now inside of the parent element that is positioned relative now you're seeing it squishing it because anytime you do this like you set dimensions on an image that's different from the aspect ratio it's going to squish but if you go to custom css you've seen this in a previous tutorial let me actually set this to dracula so we can see it better we're going to say object fit is cover and now it's going to behave like a background image so we've effectively we're able to control the height and the width of the uh of the image without stretching or squishing it um and then that's it okay so it's absolutely positioned inside of its parent container which is the card wrapper and it's covering the heading you'll see that that's uh actually let's see let's let's double check we're going to go look at it on the front end i'm pretty sure it's covering the the heading it is you can't see the heading so now what we have to do is bring the heading above the image we're going to do that with z index uh if this is all hard for you i can't remember if i mentioned it or not but i have a whole tutorial on building cards properly in oxygen that's why i'm not going slow and explaining every single step i've already done this stuff in a previous tutorial i'm just kind of trying to get to the end result so that we can learn how to use repeaters because that's what the entire uh goal of this is so i'm going to set the color to white on this and i'm going to set the layout z and x to two and you're going to see that it elevates to the top i'm also going to set this to position absolute and i'm gonna attach it to the bottom of the card now i don't want it to be like like that okay i wanted to have some like spacing around it so i'm actually going to say let's do m's i'm going to say one m from the bottom one m from the left and then one m from the right so that it can't touch the edge over there if this title gets really long but that should be pretty good maybe we'll try 1.5 m on all these that's that's much better okay i'm not going to make this super fancy guys because this is not a cards tutorial this is a repeaters tutorial but i will go to borders and set a border radius on this real quick of we'll do like 0.5 m all right so let's save and let's view our card on the front end perfect okay that's all we need that's all we need right now um and then we will link this up and all of that so here's what's gonna happen now like we take our card and we drag it into the main repeater div and let's just see what happens okay so i'm gonna drag this now it's inside the main repeater div i'm gonna hit save and i think this is where again people get confused they're like oh my gosh like great it repeated my card six freaking times but that doesn't help me that doesn't accomplish anything and you're right it doesn't accomplish anything so now what i'm going to do is show you how to convert the card for use inside of a repeater now that we've built the card like we did the hard part let's go ahead and use dynamic data now in order to use dynamic data every make inside of our custom post type has to have its own image all right that makes sense right because we have to be able to pull the image into the card so i'm going gonna open all of these audi bmw jaguar mercedes porsche and volkswagen and i'm just gonna go add a featured image to each of them let's throw me back over here featured image for this make is right there so i'm going to go ahead and and that happens automatically which one am i editing howdy i don't know i think this is an audi okay yes that's audi and i'll hit update and then i'm going to come to bmw featured image for the bmw let's find the bmw is right there and i'll update that one let's find a featured image for jaguar which is this one update and let's do mercedes is that one and let's update and now porsche is that one update volkswagen is uh that one update and that's it okay so now all of my makes have their own images and they also have their own headings because they're all different so that's all done cool so now all we have to do is tell the repeater all right pull in the title and pull in the image so we just really have to convert what we've already done here so i'm going to grab this image right here and i'm going to go to the primary tab and i'm going to click the data button right instead of browsing and finding an image which is just going to pull a static image into the card i'm going to do data and pull the image dynamically from the featured image all right of the card or of the of the post type then i select size we'll just do medium large here and i'll hit insert and instantly you're gonna see boom there we go we have all of our images inside the cards and then we're going to handle this now remember our post type we look at it on the back end it just says audi it doesn't say audi repair but for seo purposes i actually wanted to say repair behind all of them so no problem so what i'm gonna do is uh let's go into the card here heading double click and i'm just gonna highlight porsche and take that away and i'm gonna come up here and hit the insert data button and i'm going to go to title and then i'm going to insert and then i'm going to put a space between them because i don't want them to touch each other and then i'm going to click out and it's going to refresh and there we go now it's definitely looking broken on the front end but i think that's here i'm just going to let's see if we can apply the query parameters again if it'll fix itself and i don't know what it's doing okay but i bet if we look at it on the front end we'll be okay there we are we're perfect on the front end no problems all right uh this is release candidate two of of the uh of oxygen 3.8 so i don't know if this is a bug like it definitely feels like a bug i'm gonna go ahead and uh i'm gonna show this to the oxygen team and see what they think about it but let's just hit save we see it on the front end i i'm hoping it's it fixes itself let me refresh the actual builder okay so great it fixed it when it refreshed all right let's talk about how to add it how to add a card uh link wrapper to the card now so one thing you'll notice about repeaters is the primary div inside the repeater you cannot attach a link wrap or two so if you're making cards and you want the entire card to be clickable you'll need to add a card inside of the parent div don't make the parent div the card wrapper right put it a make a card wrapper make it its own thing and put it inside the parent div and then you have the ability to add a link wrapper so we're gonna go ahead and click the link icon and then we're just gonna close this box that shows up and you're gonna see it's glowing now to show us that it's a link it also has this link icon in here it retains the same class and and all of its its features i do notice that sometimes it does weird things to the content inside of it not really sure why but you know i it's fine like we can we can fix that kind of stuff all right but here's the thing you you now get the url box and instead of setting a url or typing in a url we're going to we have to pull that dynamically just like we pulled the image dynamically just like we pulled the the title of the card dynamically so i'm going to click data and i'm going to click permalink and that is going to attach that post permalink to its card and then i'm going to hit save and we'll just do one other thing to make this a little bit cooler here while we're while we're doing this i'm going to go to state and i'm going to go to hover and i'm going to go to advanced effects transform add transform we're going to scale this 1.02 x and 1.02 y again this is on the hover i'm going to go back to the original and i'm going to go to effects not opacity transition 0.3 and do all just i'm just doing this real fast so we can just get a little effect here and save okay so now i refresh now we have a dynamic grid the little cool little hover effect right and i can click these things now and it will take me to repair slash porsche and if i click this one repair slash volkswagen so i can query this on and now i can copy and paste this repeater onto any other pages where i wanted to show all the makes and guess what if you go to add a new make why don't we just do that why don't we just do that like because if you made this manually i don't want to go through all of the like benefits of doing it this way and you should hopefully be able to kind of see the benefits of doing this this way like if i had categories for each of these things i could then filter by category i could filter by car color i could feel like whatever you want to do as far as taxonomies and filtering goes is available to you but really the easiest thing now is let's say the client wants to come at a make you know we wouldn't do this because we haven't created a template for it yet but let's just say that they did so they add a make and let's say they're gonna add mini cooper okay we'll just say mini uh and we will add a featured image ah geez all right so let's go to pixels maybe they have some all right we're gonna go to uh mini cooper all right and then yeah sure let's just let's let's just grab this one all right free download cool mini repair all right we'll go to squoosh right quick uh oh that's me all right we'll resize this because i don't need it to be gigantic uh so height we'll just do 1920 that's it's way too big but it's much smaller than it was actually let's do 1280. okay and download okay mini repair and then i just drag that into there and i set the featured image and i hit publish and i publish and then we just refresh our grid and you're gonna see we now have mini repair on there right and i'm not gonna go through all the like let's let's dim the background so we can see the text again this isn't a cards tutorial this is a repeaters tutorial but you're gonna see like my repeater dynamically handles new information now and so if this was on five different pages on my website i have to manually go add the new make to every grid that has the makes in it it's just going to automatically do it for me and i can do i can create pagination i can do a lot of different stuff in fact let's go ahead and take a look at that so if we go into query you have your filtering so you can filter by taxonomy which is category effectively uh so in any of the following categories and i'm not gonna again we're not deep diving i'm literally just showing you what is the concept of a repeater how do we make a basic repeater work i'm not going to deep dive on all this stuff um but you have the filtering you can set the order you can set the number right if i set this to six it's gonna paginate it's gonna it's gonna have pagination attached to it so we're gonna see what that looks like on the front end there's your little pagination if you don't want the pagination you actually have to query the exact number that's in your or or a number larger than the amount of items in your custom post type or you have to to go to the next step of how do i remove the pagination which if you're doing oxygen 3.7 or sooner is actually quite difficult if you're using the new 3.8 which we're going to talk about right now uh you can actually do that so with 3.8 instead of going to custom you would actually go to advanced and there's some presets that you can choose from but we're going to go ahead and do an advanced query effectively so we're going to hit edit query and we're going to add a parameter and we're just going to find post type in here i haven't actually memorized where all this stuff is yet because this is relatively new but i'm just i'm just looking for post type okay post type there it is good and then add value and this is a little bit harder to do because you have to kind of know you know kind of what's going on on the back end but remember my post type is actually called repair it's the slug uh it's actually i i think i think it uses the slug here we'll we'll check it out and see what happens um next what i want to do let's see i don't want to worry about like categories or anything else uh i do want post post per page i want that to be we'll just do our six for now because i want to show you pagination showing up yeah let's just do that let's just keep things super basic for now i think this is going to get the job done save we'll go back we should have effectively exactly what we have there yes okay so that's how you use the new advanced query builder but the the benefit here is that i i don't want to show that pagination necessarily maybe i want to even use wp grid builder which that's what i always do to input my own custom pagination or i can put in a load more jquery button which will just dynamically load more things into the grid when people click on it right so there's a lot of options there bottom line is i want to get rid of the pagination so what we're going to do is we're going to go back and edit our query we're going to add a parameter and i think it's no no found rose is what i'm looking for which oddly doesn't have a lot of documentation on it inside the wordpress documentation uh i must have missed it all right so again what am i looking for we're looking for it together no found rose raise your hand when you see it uh where is it where is it i need some i need some jeopardy music cue the jeopardy music there it is no found rose true and now when i save we have no pagination all right so that is uh again i i've given you the disclaimer so don't be disappointed that we're not doing a super deep dive into repeaters this is literally for the people who are like what is a repeater why would i ever use one and how do i use it once you figure out now again my last video top 10 use cases for custom post types literally is 10 reasons for using a repeater you would use a repeater for every single one of those custom post types so go watch that video you'll have 10 reasons to use a repeater and now you know how to create a basic repeater and you know how to get rid of the pesky pagination if you don't want the pagination so i hope you found this video helpful we are going to do more stuff on this if you want the premium training on repeaters if that's something that really interests you i'm willing to create it as long as it is of interest so drop a comment let me know hey kevin i would love a premium like deep dive training on how to master repeaters uh you know i'll be looking for those comments otherwise again hope you found this helpful hit like hit subscribe drop a comment and more to come peace

Channel: Digital Ambition

Views: 8,117

Keywords: oxygen builder, oxygen tutorial, oxygen repeater, dynamic queries, oxygen loop

Id: 2pBuoDWB-u0

Length: 34min 43sec (2083 seconds)

Published: Sun May 30 2021