The modern dynamic website series continues! In this episode:
🔥 Nested Loops
🔥 Parent-Only Loops
🔥 Child-Only Loops
🔥 Template Conditional Logic
🔥 Service Area Network Architecture
STILL MORE TO COME!
The modern dynamic website series continues! In this episode:
🔥 Nested Loops
🔥 Parent-Only Loops
🔥 Child-Only Loops
🔥 Template Conditional Logic
🔥 Service Area Network Architecture
STILL MORE TO COME!
Welcome back, my friends.
This is part three of the makings of a modern dynamic website.
You guys have been absolutely hounding me for this episode, which I find fantastic.
I’m glad you guys are excited about this.
Let’s go ahead and get into it.
I’m going to share my screen.
We are working on video three today.
So we’re going to be doing the service area network.
We’re going to dedicate this episode to the service area network because, well, I’ll just be honest with you, WordPress, it’s a little archaic.
Okay.
All of the techniques that we’re doing, there’s really no perfect way to set this up.
So everything that I show you is somewhat of a workaround, like to some level, we’re working around the archaic nature of WordPress’s CMS.
Can’t get around that.
There’s more than one way to set this up.
I’m going to show you a very traditional approach to this, but there are other approaches.
We may cover them in the future.
I may cover them in the inner circle.
In fact, if you don’t even know what a service area network is or why it’s so valuable for SEO, especially local SEO, that is all covered in the inner circle.
I’m not going to go over that in the video.
This video is for technical implementation purposes only.
Now, I will say that even if you’re not interested in a service area network, you’re going to want to see how this is set up because we are going to cover some concepts that you are going to need for other things as well, not just something like a service area network.
Okay.
Like for example, parent, child, exclusive query loops and conditional content in templates.
So I’m going to go to the homepage and to the backend and WP admin, and we are going to get going.
So just like everything else that we’ve done, what we want to do is start with a custom post type for our service areas.
And to just show you real quick in Figma, what I’m talking about, it’s essentially, um, an area of our site that we can dedicate to pages where we can advertise the, the business or its services in specific areas that they serve.
For example, here’s Florida and then a bunch of cities in Florida.
We’re actually going to do Georgia and a couple of cities in Georgia as well, just so that we can show a multi-state approach.
If you’re working with a client where they’re only in one state or only in one country, uh, you can go ahead and just flatten this out.
You don’t have to use this exact structure.
I’m going to go the state then city structure, because that’s the tougher structure to deal with.
And if you know how to do that structure, you automatically know how to do the flat structure.
So it, this should be good for everybody.
All right.
But this is the general thing that we are going to be adding today.
I’m going to go back and we’re going to get that done.
So we’re going to go to ACF post types and we are going to add new, and we’re going to say service areas, service area.
Now let’s talk about this post type key, which is actually going to be the slug, um, of the archive page and of the actual service area pages.
Um, I, I am going to use a abbreviation and it’s one I thought a lot about.
I like to keep these URLs short and, but I also want them to make sense at the exact same time.
I’m not a fan of having the whole phrase service area in all of the URLs.
What I use is in I in, and if you think about reading it like domain.com or local dog trainer in Atlanta, local dog trainer in Florida, local dog trainer in, you see how it works like with the flow and the logic of a service area network.
That’s why I like it.
And it’s very, very short.
It makes sense.
It’s great.
Okay.
So you don’t have to use in, but I do like in.
All right.
So I’m going to use in here and then we are going to say hierarchical for sure.
As you are going to see advanced configuration.
We want to go to URLs and we are going to turn off the front URL prefix.
We are going to turn on the archive.
I’m going to go ahead and hit save.
This is going to create our service areas.
So what I’m going to do is go to service areas.
We’re going to do all of this with pages or what I’m sorry, with the posts in this post type.
And we are going to, for the first time, I believe use nested posts.
So we’re going to have a parent child relationship.
We are going to add new service area and we’re going to start with the two States.
So I’m going to say Georgia.
So that’s where I’m from.
Okay.
We’re going to hit publish and publish, and then we’re going to add new and we’re going to say Florida.
All right.
Perfect.
Publish, publish.
Now I intentionally did something wrong and we’re going to run into the limitation right now.
So I’m going to go back here and I’m going to attempt to add some child pages to this post type.
So we’re going to add new service area.
And under Florida, if we go back to Figma for a second, we can see like Miami beach, coral gables, Hialeah.
I’m not going to add all of these.
We just need a couple of them.
We’ll do three for Florida, three for Georgia.
Okay.
So Miami beach, coral gables, and Hialeah.
So Miami beach, and you’re going to notice over here, I only have a few options.
I have what, what is the status like draft or published?
I have, you know, the, the schedule of publishing and I have the URL.
I don’t have a way to assign this to a parent post.
Okay.
To make it a child.
So what I’m going to do is I’m going to publish it, but I’m going to go back and I’m going to go to ACF post types and I’m going to go to service areas of the post type we just created.
And I’m going to come in here and I’m going to select page attributes.
Okay.
If that is not checked, you won’t be able to choose.
Even if you’ve set hierarchical, I know, I know.
Even if you set hierarchical, unless you check page attributes, you’re not going to be able to select a parent child relationship.
So now that I’ve hit save, I’m going to go back.
We’re going to find Miami beach and notice over here.
Now I have a parent area and I can say, this is a child of Florida.
So Florida is the parent for Miami beach.
When I hit save and go back, you’re going to see that it nests Miami beach under Florida.
That’s exactly what we want.
So now I’m going to go add new service area.
And in that regard, it is going to make our URL structure really good out of the gate.
Okay.
Actually, I think we might not have a problem with this URL structure.
There’s like three ways to do this.
Okay.
Two of the ways have some URL structure issues.
This way might not.
We’ll check it at the end, just so you can see exactly what I’m looking at and what I’m looking for in terms of URL structure.
Okay.
So the next one is coral gables.
And we will say the parent is Florida.
Once again, go ahead and pop.
I hate that.
The UX in, in Gutenberg is atrocious add new service area.
And we’re going to do Hialeah.
Okay.
Hialeah.
And then we’re going to say that is also Florida as well.
And, and even this thing of choosing parents for these posts, that, that structure that they’ve got there, that UI, once you get a lot of these, it’s, it’s horrific.
It’s absolutely horrific.
So none of this is perfect.
It’s all, we’re, we’re, we’re doing the best that we can within this, you know, 20 year old CMS.
I really, I really do hope that they improve this kind of stuff very, very, very soon.
We’re going to do Atlanta, which is going to be a child of Georgia.
Let’s go ahead and publish that.
And then let’s add a new service area.
We’ll do Macon and we’ll say Georgia once again, publish, and then add new service area.
And let’s just go ahead and do Savannah.
Okay.
Georgia.
These are, this is like, see that?
Like if I click this and I don’t do anything else with my mouse and try to click again, to go quickly, it makes me cancel.
Like how, how, how is that good?
How is that good UX?
Publish, publish.
Okay.
Get them.
You got to move your mouse over every single time.
All right, perfect.
So we’ve got three, we’ve got two parents and each parent has three children.
So that is step one done.
And if we go look at the URLs real quick, you’re going to see that we get in Florida, which is fantastic.
Right.
And then if I go look at Hialeah, I can hover over it, but you guys can’t see very well.
We get in Florida Hialeah.
So good URL structure.
All right.
So the next thing that we need, if we go to the front end of the site right here, we are going to look first at maybe displaying our service areas down here.
We can, we can jump right to that.
Or what we can do is take a look at the main service area page, which the slug for that is in.
And if I go to in, you’re going to see that it’s just a general bricks actually just did this.
It just bricks, just throws everything on and it doesn’t even, it’s not what you want.
Okay.
So I think what I’m going to do first is I’m going to come down here to the service areas and we are going to put some links into the footer.
All right.
It doesn’t really matter what order you go in with this stuff, whatever you want to do, whatever order you want to go in that makes sense to your brain, go ahead and do it.
I’m going to open the footer and what we’re going to do is loop this.
We’ve shown this before with behaviors and services, but we’re going to, we’re going to loop this and I am going to come in.
We have a column heading service.
All right.
We’re already set as a loop on here.
We just have to choose the right thing.
So I can choose my posts.
Now we are facing the first problem.
Okay.
Um, in fact, what I might do here is I’m going to duplicate this link and I’m going to turn off the query loop on this first link.
And I’m just going to put a static link in this static link is going to be, uh, for, let me click the actual link, all service areas.
Okay.
So we’re just going to say all service areas.
And this is going to go to in just like this.
Okay.
And then we have another one down here that we can loop, but we’re not going to do that yet.
We’ll come back because the technique that we have to use is a technique that I want to explain on the archive page.
And, uh, cause it makes more sense to do it there.
And then we’ll come back and finish this off.
But at least for now, I can actually get to our, our service areas overview page, which is the archive template.
So the next thing I need to do is make an archive template for the service area.
I’m going to go to dashboard bricks templates and add new.
We’re going to say service areas, and this is going to be archive.
I’m going to assign this to the archive.
I’m going to hit publish and we’re going to go edit with bricks.
Okay.
Now what I want to show you on this archive page, again, we’re not doing anything with design.
We’re only talking about technical implementation.
We’re going to talk about looping when we have a parent child structure, because by default, when you have a parent child structure and you just create a loop, it’s not going to make sense.
The loop is it’s going to loop parents and children, and it’s going to mix them all in.
And then it’s going to get very confusing for the visitor.
We want to be able to separate these things out.
And there’s three different ways that we need to know how to separate the, these things out.
Okay.
So the first thing I’m going to do is add a section and I’m going to add a div.
This is going to be our first group.
I’m actually going to make this a three column grid.
So we’re going to go grid three and I have my div.
That’s my first column, my first group, and I am going to put in here a heading.
Okay.
And then this is going to say, uh, parents only.
Okay.
And then I’m going to duplicate this.
This is going to say children only.
I’m going to duplicate this and I’m going to say children with parents.
These are the three types of loops that you want to know how to master when you’re working with parent child relationships.
We are going to start with parents only.
So in the parents only group, I’m going to add a div and remember in bricks anyway, you know, every page builder may be different, but in bricks, you need a container to be your loop.
You can’t just like loop a link or loop text or anything like that.
You have to have a container to be the loop.
And then you can, whatever’s inside of it is what’s actually going to be looped through.
So we’re going to call this the parents loop.
Okay.
And then we are going to add a link.
Great.
Fantastic.
So I’m going to take the parents loop.
I’m going to query loop this.
We’re going to query, and we are going to say, I want posts.
What do I want?
I want service areas.
And if I want parents only, I’m going to come down to this child of box right here.
And I’m going to say zero.
If it is child of zero, that is going to give me parents only.
Okay.
So I’m going to put a zero in here.
I’m going to go to text link.
I’m going to link this to, and let’s do a dynamic data, the post URL.
And then for the text link, this is going to be the post title.
Okay.
Save, save.
And let’s go ahead and go to the front end and let’s go to our service areas page.
And you can see that under parents only, I get Florida and Georgia.
So I’m looping and only showing parents.
That is the technique for parents only.
All right.
Now we are going to query children only.
This is a little bit more technical.
So bear with me.
We’re going to go add a div.
This is going to be our loop container.
So we’re going to say children.
We’ll do, we’ll say loop children, just like that loop children.
Okay.
Inside of there, we will have our text link.
Perfect.
And we can go ahead and just say, we already know what this is going to be, right?
So post title link to dynamic data, and it’s going to be the post URL.
Now what we’re going to do is activate our query loop, and we’re still going to ask it to loop through service areas.
But what we have to do, actually, I’m sorry, we don’t even need to do that.
We’re going to go query editor PHP, and I’m going to expand this box out so that we can actually see what’s going on.
And unfortunately, with the UI inputs, you cannot just query children with the UI inputs.
You have to write your own query.
Now, if you are an automatic CSS user, automaticcss.com, you have a recipe as of 3.09, version 3.09, for querying children.
Okay.
Recipes are expansion feature in automatic CSS, where I can type at, and I’m just going to say query children.
And the minute I put a semicolon in, it’s going to expand automatically and give me the recipe.
And this is the recipe for querying children.
So the post type is going to be in.
It’s already set for me.
Of course, if you’re doing any other thing, you can just change the post type, right?
And then the post per page minus one essentially means query all of them.
Post parent not in array zero is the magic line.
That is the line that gives you children and not parents.
And then it makes sure that the post status is published.
So I have to hit this little sign code button right here, and I’m going to save.
But the minute I do that, look what I get.
I get children only.
So you’re seeing all of the cities.
There’s six cities, no parents.
You don’t see Florida in this list.
You don’t see Georgia in this list.
I have now queried children only.
Now we’re going to move on to children with parents.
I will provide the code.
Don’t worry.
I will provide the code for you down below.
But we’re going to move on to children with parents.
So what I’m going to do is hop back into the editor.
We are going to once again, put our div.
This is going to be our loop.
And I’m going to say loop parents.
We want to loop parents first.
And what you’re going to learn now is the concept of a nested loop.
Okay.
I hope you’re taking notes.
These are, this is stuff you need to be able to do to create a modern dynamic website.
But we are going to create now a nested loop, which means we first need to loop through the parents.
That’s the state pages.
And then within that loop, we need to loop through its children.
So whatever that item is, we need to loop through its children to get, to get this little relationship thing, the way that we want it.
Okay.
So what I’m going to do is loop parents and we’re going to put a link in there, text link, drop that in.
So loop parents, we already know what this is going to be.
It’s going to be the post title.
We already know this is dynamic data.
It’s going to link to the post URL because I want people to be able to click on the state as well.
Now, what I’m going to do just to differentiate these is I’m going to come in and say that it needs to be the size of like an H3, because remember, these are the parents, these are the states, and we’ll go font weight 700 just to bold it.
And then we’ll make sure that the text is dark.
Okay.
So these look like parents and then nested under, and actually I’m just going to take out this heading to limit any confusion.
The only headings I want to see in this section are the states.
And then I just want to see cities nested below each state.
Okay.
All right.
So I’m looping parents guys.
How do we loop parents pop quiz?
Okay.
Let’s go back.
Let’s turn on the query loop query.
We’re going to say that we want service areas, pop quiz, pop quiz in your brain right now, five, four, three, two, one.
How do you limit it to parents only child of zero?
Okay.
Not Oh nine, just zero.
Let’s go ahead and take a look on our page.
Okay.
So I’ve got Florida.
I’ve got Georgia and look, it’s, it’s, it’s linking.
Okay.
Now we don’t have templates for the state page yet.
We, we don’t even have templates for the city page yet.
That’s still to do.
Um, but the, the, the, the, the states are there.
The URLs are working.
Fantastic.
Now what we need to do is get another loop rocking inside of the loop that we just created.
So let’s go back into the template.
Here is the loop.
We need to be inside the loop.
If you’re not inside the loop, you’re not doing an I, my nose itches.
Okay.
I’m not on the, I’m not on the snow.
You don’t have to call anybody.
Okay.
I know I’ve got energy and I’m doing this.
All right.
It’s not a situation.
It’s not, I just, I’ve, there’s dust.
I don’t know what it is.
Okay.
Don’t make it a thing.
Don’t make it.
It doesn’t need to be a thing.
Okay.
All right, let’s move on.
So we’re going to come down here.
I’m going to say div bang.
This is going to be loop children.
We already know how to do that.
Don’t we?
All right.
So I’m going to come in and we are going to add a link.
I put, I put loop children’s now we need to go loop children.
Let’s get our grammar fixed here.
Okay.
So in here, guys, we already know what this is.
What is it?
Post title.
It’s all the same stuff over and over and over again.
Dynamic data needs to be the post URL.
Okay.
Loop children, activate the query loop query.
What are we going to do?
Post type service areas.
Now we don’t actually have to do the custom code thing and we don’t have to do the custom code, even though we’re querying children only.
The reason we don’t have to do the custom code thing is because we already have a parent that we’ve identified and we just want the children of that parent.
We’re not trying to exclude parents.
We’re just trying to loop through posts and only grab things that are children of the current parent.
I know I’m pointing up like there’s something up there.
It’s, I’m just, it’s a, it’s a visual thing in my brain.
That’s how it helps me understand the situation.
Okay.
You can visualize however you want to visualize.
That’s how I visualize.
So we need to tell this loop, Hey, I got a parent above me.
Go check that parent and just give me its children.
How do we do that?
Well, we come down to child of, and remember what zero does.
Zero says, I’m not, I am a parent.
I’m not a child.
Just, and that loops through and shows me parents.
Child of, check this out.
I’m going to come in here and I’m going to say post ID because we’re in a loop, right?
Which means we’re in a parent loop, which means that that, that, that parent exists and that parent has an ID.
Well, if we check that parent’s ID, it can identify the children and that’s what it’s going to show us.
Okay.
So I’m going to go ahead and hit save.
I’m, I’m hopefully I’m explaining this well to you.
I’m doing my best over here.
Okay.
I’m fighting for my life, trying to, trying to explain these concepts in simple terms.
Hopefully if I’m doing a good job, go ahead and hit like on the video.
If I’m doing a good job, go ahead and drop a comment on the video, right?
Um, don’t let me fight for my life alone out here.
All right.
In these streets, you got, you got to give me the likes.
You got to give me the comments.
Let me know we’re doing a good job.
Okay.
So what we have now is we have a, a way to loop through parents only.
We have a way to loop through children only.
We have a way guys to nest children under their parents.
This is so empowering for so many use cases, not just service areas, so many use cases out there.
You are going to be able to use these techniques to get by, to make your website dynamic.
So now what we’re going to do is we’re going to go to edit with bricks.
We’re going to go back to our footer and we’re going to say, you know what?
I just want to loop through states.
Okay.
So I’m going to go ahead and duplicate my LI.
Now, when you’re in a situation like this, let’s pause for a second.
Some of you out there might think, well, we need more links in the footer and you might try to duplicate the link.
Well, there’s two problems with this.
First of all, you, you need to do, you need to loop the thing that needs to duplicate in an unordered list.
The thing that needs to duplicate is the list item.
Okay.
Not the things that are inside the list item, the list item itself.
That’s how you build a list.
You need more items.
Okay.
This is the LI inside the UL.
The LI is the thing that needs to loop.
But beyond that, you can’t even loop a link.
Look, the loop controls don’t exist on links because, but we do get support tickets about this all the time in frames.
They’re like, I can’t loop the link.
How do I loop the link?
Well, you can’t loop links.
Okay.
What did I say you have to loop?
Containers, right?
The LI is a container for other things.
You can loop LIs.
So I want to duplicate the LI, which gives me another pair of elements, another LI and another link.
Okay.
I’m going to come in here and loop the link.
This is an example of static data above dynamic data, right?
Non-looped item combined with, visually combined with looped items.
Okay.
So I’m going to say post.
We’re going to go into service areas.
Child of zeros.
Just going to give me parents by themselves.
I’m going to come into the link.
I’m going to change this to post title and the URL is going to go to post URL.
We’re going to go ahead and hit save.
And I’m going to go to the front end.
Let’s go local dog trainer.
Come down.
I get all service areas.
I get Florida.
I get Georgia.
Let’s go ahead and inspect.
And I want to show you the general structure here.
So you can see we have an unordered list and then there’s list item, list item, list item.
And look at by the nature of the code guys, the nature of the code.
Can you tell which ones are the loop, which ones are generated dynamically and which ones are generated statically?
Because bricks is so clean with the code output.
You cannot tell from the DOM standpoint, there is no way to tell which one of these things are static and which one of them are dynamic.
That’s fantastic.
It’s like we wrote the code ourselves, which is why I’m a big fan.
That’s why I’m a big fan.
I talk about this stuff all the time.
Okay.
Now what we need to do, we got our all service areas.
We need to go check on our, our parent page, which is our state page and our city page situation.
And this is where we get into conditional areas in templates, because I’ll be honest with you, this is one limitation of bricks.
It’s an area of limitation in bricks and probably an area of limitation in many different page builders, but there’s a workaround and I’m going to show you the workaround.
And I want to remind you, this is not the only way to do this.
There are other structures, other architectures that we can go with, but they all have various limitations.
Pretty much every approach to doing something like this in WordPress requires workarounds.
It’s going to have a pros file and a cons file.
And it’s just going to be a way, the pros versus the cons of these different methods.
Okay.
All right.
Let’s go ahead and go to, let’s, let’s close some of our tabs here.
Let’s go into the backend.
Let’s go to bricks templates and watch what I’m going to do.
Service areas.
And I’m going to say a single, and then I’m going to put in parentheses and I’m going to say state and city.
We’re going to use the same template for both.
Okay.
Fantastic.
Let’s go ahead, mark this as a single hit publish, edit with bricks, and let’s take a look at how this is going to work out.
Okay.
So I’m going to add a section right off the bat, this top section up here, we are going to wrap in a block.
Okay.
And we’re going to say state.
So I have essentially think of this as two different pages.
So I’m going to say duplicate, and this is going to be city.
All right.
So we have state, we have city.
Now I’m just going to show you from a templating standpoint, how this works.
So I’m going to come into heading.
Remember, we’re not doing anything with design.
I don’t really care about design layout for this series.
We are doing technical implementation only.
It’s how we’re saving a ton of time, getting the point across.
Okay.
This is going to be now think about this as a single page.
We just need the post title.
That should work post title.
All right.
Save.
So if it’s, if I go to Georgia, I should see Georgia there.
If I go to Florida, I should see Florida there.
Now we can mix in some static content.
All right.
And I’m just, I’m just making shit up.
This is, I’m not saying this is good copy.
I’m just, again, reiterating techniques that we’ve already covered.
So which blank city are you in?
All right.
And we’re going to go ahead and hit save.
So that is going to be the state.
Now we’re going to do the city.
So I’m going to come down here.
We’re going to add another, oh dear.
Okay.
Hit the wrong thing.
We’re going to add another heading and let’s go ahead and get that in.
This is going to be an H1.
And then I’m going to say dog training services in, and then post title, because this is the city page, which means it’s like Hialeah or Miami beach or Atlanta, right?
So dog training services in Atlanta, dog training services in Miami beach.
Got it.
Okay.
So we’re going to go ahead and hit save here.
And now what I’m going to do is I’m going to come up to template settings, conditions, add condition, and I am going to go to post type and I am going to go to service areas.
And you could come in and you could add more conditions and you could say, yeah, but let’s do post type and let’s say service areas.
Um, actually we’re going to do individual and we’re going to come in and we’re going to say, um, Georgia.
Okay.
Georgia and exclude Georgia and exclude Florida because those are states and we’re going to do a different template.
That is so much of a nightmare to try to manage.
Cause every time you add a state page, you’ve got to remember to come update this template logic and it leaves a lot of loose ends.
The conditional logic version that I’m going to show you does not leave any loose ends.
Okay.
So what we’re going to do is we’re not going to do any of that.
We’re just going to assign this to all service areas, which means when I go to the front end and I go to service areas and I click on Florida, I see both things.
If I go back, if I click on a city like Hialeah, I see both things.
Um, and by the way, it doesn’t even make sense when I see both things, right?
Cause it’s acting like Hialeah is a state or something that doesn’t make any sense, but it will once we use our conditional logic.
So let’s go ahead and hop back into our template.
And essentially we need to go to state and we need to set a condition and we need to go to city and we need to set a condition.
So here’s how you do this in bricks.
We’re going to click state.
There’s a little button right here, an icon that says conditions.
We’re going to open that up, add a condition, and we’re going to come down and we are going to look for our, that member that kind of post parent kind of thing where I said post parent is zero.
And that gave me only the states in my loop.
And then I did something else and I only got the cities in my loop.
You remember that?
You remember that?
Okay.
So we’re going to go post parent again.
And what do you think we’re going to do for the state page?
If post parent equals zero, let’s show this section right here.
That’s how the logic works.
So I’m going to say post parent equals zero.
Now, what about the city page?
And by the way, when you click on something in the canvas, you might not be selecting the parent.
So always check to make sure you’re selecting the parent.
So now for the city, I’m going to add a condition.
I’m going to go down to post parent again.
What is the opposite of post parent equals zero, which got me the state.
If I do the opposite of that, I will show when it’s a city, when it’s not a parent.
Okay.
So post parent is not equal to zero should give me the logic for cities.
So look at this exclamation mark equals.
If you’re not familiar with that, that means does not equal.
Okay.
I’m going to go ahead and hit save.
And now when I refresh, this is the Hialeah page.
So when I refresh, look what I get dog training services in Hialeah.
I’m going to go to my service areas and I’m going to choose Florida, which Florida city are you in?
Okay.
So now what I can do is in my state section up here, right under my heading, I’m going to go ahead and I’m going to put in a div and this is going to be my loop.
Okay.
My cities loop right here.
And again, I will reiterate, we are not doing any design or layout or anything else.
We are doing technical implementation.
I’m going to make this sidebar.
I don’t need that sidebar so big anymore.
Text link dynamic data.
We are going to say post URL.
Text link is going to be post title.
All right.
And then I need to get my cities loop going.
Remember, I am already on a state page.
Okay.
So when I craft this loop, how do I get the children of the page that I’m on?
That’s what my brain is asking.
That’s what your brain should be asking you when you’re doing this query.
Open the query.
I want to loop through service areas.
And I want to say child of the post ID, the current post we are on.
I want you to go grab the children for it.
Okay.
So we’re going to hit save.
I’m going to go to the front end.
Which Florida city are you in?
Hialeah, Coral Gables, Miami beach.
When I click on Georgia, I get Savannah, Macon, and Atlanta.
And so now I’m only querying the cities of the state that I’m currently looking at, which is fantastic.
And then when I’m on Savannah, dog training services in Savannah, I can literally just go in and start building out what my Savannah page looks like.
And actually what I would recommend is you use one template that controls all of your city pages.
Okay.
That’s why we’re in here with one template.
All of my city content is going to go under city and all of my state content design layout.
All of that is going to go under state.
And then the conditional logic is going to decide which one people should see based on the URL they happen to be viewing at the time.
So you are good to go there.
Uh, I will cover how to do unique layouts per custom post type, like current, uh, per post in a custom post type, um, in, in a future part of this series.
We’ll, we’ll do an episode that covers all of that, but this is essentially, we’ll, we’ll review this real quick.
The end of the road for our service area network.
So here we are.
And let’s just to cap this off, go to customize.
Let’s go to menus.
Let’s go to menu.
Let’s add items, service areas, service area archive.
I’m going to say service areas, go ahead and hit save.
And let’s go back to the front end.
So now we have about services, behaviors, blog service areas.
Okay.
Um, this is the archive page.
You can make this look however you want.
If you need to only query parents here, cause you got a lot of states or whatever, do that.
If you want to hide states and you only want to query children, you know how to do that.
If you want to query the cities in the States, you can do that.
You can use search faceting.
You can use map faceting.
You can, there’s so much you can do here.
It’s beyond the scope of this training and this tutorial.
Um, but I, I think I’ve armed you pretty well.
You go to Florida, we get a Florida page.
You go to a state or I’m sorry, a city, and you get a city page.
Uh, all the URLs are the correct structure.
Okay.
This is a, this is the traditional approach to building out a service area network.
If you have any questions, drop your comments below, make sure, make sure if you find this valuable, you got to drop a like the videos do not like themselves.
You’ve got to drop a like and you absolutely need to make sure that you are subscribed because you, you don’t want to miss any of this.
I mean, this is absolute platinum material, right?
Go ahead and make sure you’re subscribed to the channel.
Do yourself a favor.
I will see you in the next video.
Peace.