CPTs, Templates, Loops, & Logic: The Makings of a Modern Dynamic Website (Part 1)

I have done a lot of videos on custom post types and loops and logic and conditions and templating and website architecture, but one of the problems is that’s all spread out across a bunch of different videos.

When people start a real project, they still feel a little bit confused and a little bit like, I don’t really know how this stuff fits together, and so I still get constant comments and emails and questions, and so what I want to do is I want to create a video where we take a sample project, and we start from the ground up.

We look at the website architecture.

We look at what needs to happen, and then we go in and actually build the custom post types.

We create the posts.

We create the templates.

We put in the loops and the logic so that you can see how all of this stuff comes together in one single video, and I also want to use this video to demystify this a little bit because I think a lot of people feel that it’s harder and more complex than it actually is.

Once you connect the dots, once you’ve just seen it manifest before your eyes, I think it’s going to click in your brain.

Oh, not only is this not that difficult, I now see the tremendous benefit of doing it this way.

So without further ado, let’s just go ahead and let’s dive in.

So this is going to be our sample project.

It is localdogtrainer.com.

I just made this stuff up out of thin air, so this is not a real thing, but we are going to build the site localdogtrainer.com.

Now, we’re not going to design the site.

We’re not going to worry about design details and build out the full pages and content and all of that.

We’re going to get to the point where you understand how the template is coming together and how the loops and the logic work.

And then we’re going to move on to the next piece.

Okay.

That’s going to allow us to get this whole thing done in one, hopefully, easy to digest video.

Okay.

So localdogtrainer.com.

Let me zoom out of this a little bit just so you can see.

This is, and I’m using Figma here.

I’m using a mind map inside of Figma in their FigJam functionality, which I really like.

This is a great way to organize website architecture.

So as you can see, we have the homepage right here, localdogtrainer.com.

And stemming off of that, starting at the top, we’re going to have an about page.

And the about page is going to have a team member grid on it.

And then we need our team to be put into that grid.

We have six team members.

These are going to be, this is going to be a custom post type for our team.

And then these are going to be posts in that custom post type.

And we’re going to show you every team member doesn’t just need to be represented in the grid.

They actually need their own page as well.

Then we have services.

We have puppy training, obedience training, in-home training, et cetera.

See how we’ll handle that.

We have behaviors.

We want a page for common behaviors that this dog training company would help people with so that we can educate on why is the behavior happening?

How do we address the behavior, et cetera, et cetera.

Okay.

We’ll get to relationships in just a minute.

We’re going to have a workshops area.

We’re going to have a case studies area.

We need to be able to load testimonials into this website.

We have a service area network.

Now, right now, this fake company only serves the state of Florida, but they have informed us in our discovery meetings.

See, they have discovered, they have informed us in their discovery meetings that they’re, they want to be a regional brand.

They want to kind of cover the entire Southeast of the United States.

So while they’re starting in Florida now, we need to think about the architecture in terms of future expansion.

So we’re going to have state pages and city pages.

Then we’re going to come down and they also have informed us they are heavily interested in running PPC campaigns.

We need a landing page infrastructure for those PPC campaigns.

So we’re going to put that in.

And then they’re going to have some forms like an application and a waiver.

And of course we want to keep out all of our content organized.

We want a nice architecture for our content.

So we’re going to put those in a separate area.

And then our legal pages are going to be in a separate area as well.

Off to the left-hand side, you can see that they are going to have a blog for content marketing and SEO.

And these are going to be the beginning categories for their blog articles.

This is what we have to put together.

And this is where everybody starts to get confused when they go to begin to implement things.

If you look over here with relationships, for example, we need our team members to be related to services and workshops.

We need our testimonials to be related to services and workshops.

We need our case studies to be related to services and issues, which is, um, I changed to behaviors, behaviors, okay.

And workshops, and then our services and our behaviors need to be linked together.

What are bi-directional relationships?

Don’t worry.

We are going to cover that.

Actually we’ll cover single way relationships and then bi-directional relationships.

But again, you can see why, I mean, this feels quite complicated.

Uh, as, as you probably already know, if you’ve watched any of my videos, you want to avoid just using pages in WordPress at all costs.

Uh, that’s why we are doing everything that we’re doing today.

And you’re going to see the benefits of doing this kind of stuff.

We’re, we’re interested in building dynamic websites, not static websites.

Okay.

All right.

So let’s go in, take a look at the back end.

I’m going to go to plugins.

Just take a quick look at our stack.

We’re using advanced custom fields pro.

Some of the stuff that I’m going to show you, most of the stuff that I’m going to show you in this video can be done with the free version of advanced custom fields, but I highly recommend you get the pro version.

I’m using automatic CSS.

I’m using frames and I’m using WS form, which I don’t even think we’re going to be using any forms today.

However, uh, I will say when you use custom post types and loops and logic and relationships, that does come in very handy when you build forms, if you’re doing anything more advanced with forms.

Okay.

Uh, and I’ve shown this on previous videos, but maybe that’s beyond the scope of this particular video.

As far as my theme and my page builder, I am using bricks for this and I’m on the new beta version of bricks 1.10.

Okay.

Let’s go ahead and get started.

So I’m going to pull that architecture back up and I’m going to start at the top.

All right.

You can really start anywhere you want.

I’m just going to start at the top.

We’re going to work our way down.

So we’re going to start with about, we have to understand what should be a page and what should be a post and a custom post type.

And also when we’re using a custom post type, what should be a page versus what should be an archive template.

And right off the bat, you see why people get confused with this stuff.

Well, I’ll tell you right now, just based on experience about, I’m going to make that a page, but for my team, I am going to manage my team in a custom post type.

So let’s just go to pages and take a look at what we’ve got in pages.

We have a homepage, which is blank.

I’ll show you the front end of the site right now.

It is absolutely blank.

Okay.

So I’m going to add a, uh, about page.

All right.

So we’re going to say about, and I’m going to go ahead and publish that.

And then I’m going to edit this with bricks.

Okay.

I’m just going to throw some dummy.

Again, I’m not worried at all about, um, design, you know, actual development of these things.

I’m literally trying to just get stuff on the page so you can see how this stuff comes together.

So I’m going to choose a very, very simple hero section.

We’re going to insert hero golf, just like this.

And I will throw in, I’ve got some images of dogs and things like this.

This is going to be about us, right?

So this is the start of our about page.

Now this site doesn’t even have a header yet.

I want it to have a header and I want to have a little bit of a navigation so that as we start to build this out, we can easily navigate around, right?

So I have my about page.

That’s the start of that is done.

Very, very, very easy, right?

I’m going to go to bricks templates, add new, and I’m going to do a header.

Okay.

Every website for the most part needs a header.

I’m going to assign this to the header area.

We’re going to hit publish, and then we’re going to edit with bricks.

Once again, I’m going to use frames.

I’m going to bring in the header.

This is not a tutorial on how to actually build.

I’ve done, I’ve done plenty of those on, you can watch my page building one-on-one series.

You can watch all of my videos across this channel, by the way, a good time to tell you subscribe.

If you’re not subscribed, there’s so much gold on this channel, you would be a fool, a fool, an absolute fool to not subscribe.

So don’t let me catch you.

Don’t let me catch you without a subscription.

You know what I’m saying?

Hit the button down below to subscribe.

You’re good to go.

You’re in the fam, right?

Don’t let me catch you on the streets without a subscription.

I’m going to, like, if you see me at WordCamp, I’m going to pull up your phone.

I want to see my page.

Pull it up.

I want to, are you a subscriber?

Like, that’s how I check.

Okay.

So don’t let me catch you without the subscription.

All right.

We’re going header alpha onto the page.

And what I want to do right off the bat is just delete the logo that was there.

And I’m just going to throw in some text.

We don’t have, we don’t have a logo for this fake site.

This is localdogtrainer.com.

Okay.

I’m not going to do much of anything with this header up here.

I don’t want it to be that color though.

I just want it to be a little bit lighter.

And then we’re going to have our little navigation over here.

We’re not going to do anything exciting.

All right.

As far as design goes template, I’m going to say conditions, and we’re going to apply this to the entire website.

All right.

Fantastic.

Awesome.

I also want to make sure I’ve got a theme style in here.

I do.

Okay.

We got a theme style.

We’re good to go.

All right.

So I’ve got local dogtrainer.com.

Let’s just go ahead and take a look.

Local dogtrainer.com.

Why don’t we, while we’re here, cause I don’t want to see this blank homepage.

Let’s throw a little hero section onto the home.

We can use the exact same one that we used.

I’ll just go back down to hero golf.

We’ll throw that in and we will grab yet another picture.

Let’s grab this one right here.

Okay.

I’m going to insert that onto the page.

All right.

My homepage.

Okay.

Local.

Welcome.

We’ll do the old, the old headline that everybody does when they have no idea how to write copy.

Welcome to my site.

Like welcome to local dog trainer.

Okay.

Um, this is how, you know, somebody does not know how to write copy.

All right.

So their, their headline is always welcome.

Uh, but here we go.

So look, I mean, our site guys, it’s coming together.

It’s coming together.

Now we need to get that, that, uh, about page that we created into our menu.

Right?

So I’m going to go to menus.

I don’t even know if this site has a menu.

It does.

Okay.

Let’s add it.

Let’s publish.

And now we have a home and an about, we can go to our about there’s our about us guys.

It’s coming together really, really, really fast.

Okay.

Next thing we’re going to do this team situation.

Remember, let me switch back.

Here’s our, here’s our team.

Let me zoom in so you guys can see.

So on the about page, we need to show our team and there’s going to be six people in the team and miraculously, their names all start with J miraculously.

Okay.

So let’s go first to ACF.

We’re going to go to an area called post types.

We’re going to create a post type.

If you don’t know what a post type is, this is simply a bucket.

Think of it as a drawer, a bucket, whatever to segment content.

So we can, we can identify a bucket and say, here’s this bucket.

And we’re going to put a certain type of content in here.

This certain type of content is going to be called team members.

And so everything related to team members is going to go in this bucket.

It’s going to live in this bucket right here.

Okay.

So let’s add new and let’s say team now team and team to me, it’s just, it’s singular.

It’s plural.

It’s the same word, whatever team post type, key.

This is kind of the slug.

Okay.

Team.

And, um, next is hierarchical.

Do you need people to live under other people?

Like in a hierarchy fashion?

I don’t really need to.

So we’re just, that’s it.

That’s all we’re going to do.

We’re going to hit save.

And this is going to show up right here.

Now notice the label didn’t show up very well.

Okay.

So I’m going to go to post types.

Uh, I use the lowercase version.

I’m going to go to advanced configuration.

I’m going to go to labels and I’m going to hit regenerate and it’s going to use, should use my all caps version there.

Okay.

So team is good to go.

I need to go in and start putting some people in.

So we’re going to do Jamal first, right?

And I want to set a featured image for Jamal.

Let’s say that this is, I get it.

He doesn’t look like a Jamal, but that’s neither here, that’s neither here nor there.

Let’s not comment on that situation.

All right.

Let’s go back and let’s see who else we need.

We need like Jenny.

We need a Jenny.

I’m just going to put in two for now.

Um, and then you’re going to see as I, as I fill the rest out what this does.

Okay.

So we’re going to take, this is going to be Jenny right here.

So we’ve got Jenny and we’ve got Jamal.

We have their photos set on their post as custom fields.

If I go to the team section, you see Jenny and you see Jamal.

So we’ve got a team, we got team members.

We, they got photos.

Now, how do we get them onto the page?

Good question.

So we’re going to go to the page, hit edit on the about page.

And what I’m going to do is I’m going to add a grid.

Okay.

There’s nothing special about this grid.

All right.

I’m going to, I’m going to use profile.

I’m going to come down here.

We’re going to use profile section, Bravo, nice and easy.

Okay.

Um, now I’m going to make some quick adjustments to this.

Like, uh, I want to get rid of the gap that’s in there and I want to get rid of the gap that’s in this one.

And then I actually noticed there’s three cards.

Okay.

I only need one of those cards because what we are going to do is a concept called looping.

Okay.

So we are going to loop through all of the team members in the team bucket.

And this is why we’re doing the bucketing.

It makes this kind of thing very, very, very easy.

And this is just the start of it.

Okay.

This is just the start of what the bucket allows us to do.

But remember we have a bucket called team.

There’s team members in the bucket.

We need to loop through the team bucket to grab each team member and display it, display them onto the page.

Okay.

So what I’m going to do is I’m going to shut this image down, get rid of the image because I need to create a loop.

And with loops, you use something called dynamic data.

Okay.

So I’m going to click the dynamic data button and I’m going to use featured image.

Now I happen to be using bricks as the page builder, but many different tools with WordPress have a looping feature.

Not some are more powerful than others.

Bricks is tremendously powerful and easy.

Some are harder than others.

Okay.

Bricks is easy and powerful, which is two great things.

Um, but just keep in mind, if you’re not using bricks, you can still follow along with everything that we’re doing for the most part.

Okay.

I’m going to say the medium large image is the one we’re going to use.

And then I’m going to go to this profile card right here.

And I’m going to turn on this thing that says query loop.

Okay.

I’m going to hit the little query button and it’s going to ask me, what do you want to loop through?

Or what do you want to query?

Okay.

So I’m going to say, well, my post type, remember we created a post type.

So now I say my post type is team.

I want to loop through the team members and look at this.

They just, they just start popping onto the screen.

Now, what I’m noticing is their images are tall.

Okay.

So we might upload wide images.

We might upload tall images.

No problem.

I’ve got a class called avatar right here and I can just set an aspect ratio of one on there.

Now the bricks canvas is struggling a little bit right now.

So what I’m going to do is hit reload canvas.

It’s going to refresh it and it should pop this into, into action a little bit better.

Okay.

So the person’s name, I’m going to remove that.

Remember we don’t want any static information in here.

We want dynamic data.

Dynamic data is what we want.

So I just want the post title.

Remember the post title was this, the name of the person I put it in as that.

So that’s all we want to do is we want to grab the post title.

So now we see Jenny and we see Jamal and we see their photos.

Let’s go ahead and let’s view this on the front end.

So we have an about page and we have Jenny and we have Jamal.

Well, guess what?

These posts also have their own URLs.

So if I link to Jenny’s page, Jenny’s page actually exists.

It’s just blank right now.

But if I link to her page, she can have her own page.

Okay.

So let’s do that step.

So I’m going to take Jenny right here and I’m going to say link to external URL, grab the dynamic data again, and I’m going to link to the post URL, another piece of dynamic data.

And what’s going to happen is when I refresh here, Jenny and Jamal are now links.

I can click on Jenny and it’s going to take me to a page called, Ooh, look at this blog team, Jenny.

I’m using a blog extension.

Let’s go talk about this for a second.

So if I go to settings and permalinks, I’m using a blog extension on my URLs because I like my blog posts to be in their own bucket called blog.

And a lot of people get confused here and they’re like, but this, this puts everything in a blog bucket.

I don’t want everything in a blog bucket.

Exactly.

It’s okay.

All right.

So what we’re going to do, ACF post types, go back to our team and we have to do one thing.

We go to URLs and we remove the front URL prefix.

So I remove front URL prefix and I hit save.

And then what I’m going to do is I’m going to go back to the front end of our website.

I’m going to go to our about page.

I’m going to go to Jenny and then I’m going to look up here and you’re going to see team Jenny, no blog.

Fantastic.

Isn’t it?

Fantastic.

Okay.

So look, Jenny has her own page, guys.

This is Jenny’s page.

It just doesn’t have anything on it.

And now we have to start talking about templating.

Okay.

So anytime we’re going to take a design, a layout, and we’re going to apply it to many instances of the same thing.

Like in this case, team members, we want every team page to look exactly the same.

We just want it to have different content.

Well, that’s a situation where we turn to templates.

So now I’m going to go and immediately create a template for our team members so that Jenny and Jamal and everybody else that comes after them can have their own page.

Okay.

So what I’m going to do is go to the backend bricks and templates.

See, I have the header, same area.

All right.

I’m going to go add new and I’m going to say a team and I’m going to say single.

So this is like a single post, a single team member, a single team member.

That’s how you can kind of think about this or read it.

And I’m going to, I’m going to set this template type to single.

I’m going to go ahead and hit publish.

I’m going to edit with bricks.

And again, we’re not going to build them a whole page.

Okay.

But we are going to get them started.

So we’re going to bring in a hero section and we’ll do a little bit different hero section here.

So I’m going to do hero, Charlie, we’ll bring in hero, Charlie here.

And I will do a, let’s do BG and let’s do BG ultralight here.

Again, I don’t care much about the design right now.

And frames is an unstyled layout system.

So I’m basically wire framing all of this out.

We’re going to bring in dynamic data again in our template.

We’re going to bring in our post title.

But before I really can do anything with this template, what I have to do is assign it to where it’s supposed to live.

Like how does the website know when to use this template and when not to use this template, right?

The first thing you should do when you’re creating a template is head up to settings, template settings, conditions, add condition, and tell this template when it is supposed to show up.

So I’m going to go to post type and I’m going to say post type is team.

And we’re going to go ahead and hit save here.

And then it knows when it’s supposed to show up.

I’m going to go ahead and remove this image and we will put in the featured image for the individual.

And we’re going to do nothing else right now.

What we want to do is we want to go back to our about page.

All right.

So we’re going to navigate, we’re going to go about, and we’re going to come down and click on Jenny.

And look at that.

Jenny’s got her own little start of her own little page here.

But here’s the thing.

Just in doing that little bit of work, look, look what happened.

Jamal also has his own page with his own photo, his own name.

Look at that.

Great.

Right.

It’s fantastic.

Now what we’re going to do is real quick.

We’re just going to go in and add some other team members.

All right.

So we’re going to add new and we’re going to say, you know what?

We need Jessica in the mix.

Let’s get a Jessica.

Where’s Jess?

There’s Jessica.

Okay.

Let’s go ahead and publish Jessica.

Let’s hit add new team member.

Let’s do a Jim.

I don’t even remember what their names are.

It doesn’t really matter.

Here’s Jim doing backflips.

Okay.

All right.

We need a Julie.

I think let’s go, let’s go add a Julie.

All right.

Julie set featured image.

Julie can be this person right here.

And then do we have one more that we want to put in maybe Jane?

Okay.

Or how about do we do, did we do a Jack?

I don’t think we did a Jack.

Let’s do a Jack.

All right.

Let’s go back and see, you know, Jack, Jack.

No, we didn’t do Jack.

Okay.

Let’s do a Jack.

That’ll be the last one.

Okay.

But this will prove the point.

This will start to prove the point to you.

Start to open your eyes.

Start to everything.

I’ll start to click.

All right.

Jack’s on the skateboard here.

All right.

Let’s go ahead and hit publish.

And now once again, let’s go back to the front end of the website.

Okay.

So we’ve got our homepage, right?

Let’s go to our about page and see what’s changed.

I go to about, look at this.

The page is building itself.

This is not, this is not movie magic.

Okay.

There was no cuts.

There was no edits.

This is just what happens when you use loops and dynamic data.

This is what a dynamic website looks like.

Okay.

We’ve got a whole grid.

Our, our new team members are automatically where they need to be on the website.

Then when I click on one, I can go on Jack, like Jack, here’s Jack, right?

Look, there’s Jack’s page.

I go back and then I click on Jim and look, here’s Jim’s page.

And yeah, we can make some adjustments to how the images are showing up and all of that.

No problem whatsoever.

We’re just, we’re just getting the templating done.

We’re getting the logic and the loops.

We’re getting all this stuff created and helping you make all this, all make, make, make sense of, not even making sense in my brain, make sense of all of this in your brain.

Okay.

Let’s go back to Figma and let’s see what we need to do next.

My gosh, services.

We need to add some services to this website.

Hey, no problem.

We’re confident in that ACF post types, add new post type.

And we are going to say services, service, services.

I prefer a plural slug for many reasons.

We’re not going to get into it.

Okay.

I’m going to go advanced configuration, URLs, get rid of the front prefix, the blog.

You don’t have to do that unless you’re using a front URL prefix.

I’m going to go ahead and hit save and look at what I have here.

Services.

I can just start putting them in.

So what do we need?

We need puppy training, obedience training, in-home training, puppy training.

All right.

And let’s say, let’s, let’s grab and let’s find a, I know I got a photo of a cute little puppy in here.

There he is.

There he is.

Okay.

Publish, publish and add new service.

Uh, obedience training.

Okay, great.

Let’s get, uh, something that looks like obedience training in there and publish, publish.

Okay.

We’re also going to talk about custom fields here as well.

Um, let’s go add new service.

And then I think we needed in-home training.

And I think I got a picture of a dog with like a crate or something.

There we go.

Okay.

Let’s go ahead and hit publish there.

So I have a new bucket called services.

I got services in my services bucket.

What do I need to do now?

Pause, pause.

We got to talk about, am I going to make a services page or, or let me go ACF post types services.

And I want to show you something.

URLs archive has an archive has an item archive that can be customized with an archive template file in your theme.

Now it’s a little bit of a personal decision.

There’s some pros and cons to doing it as a page or doing it as an archive.

I already did an about page and showed you how to loop through things on an about page.

Now I’m going to show you how to do it with an archive, uh, of the actual custom post type.

Okay.

So I’m going to enable the archive and I’m going to go ahead and hit save.

Now, sometimes when you do this, you got to go to settings, permalinks, and you got to reset your permalinks twice.

Just hit save button twice.

It’s like a WordPress.

Oh, WordPress is old.

It’s a little bit old.

Okay.

So it needs to be woken up sometimes.

Uh, that’s how you wake it up.

All right.

So now we’re going to go to our, um, templates.

So bricks templates, because when you’re using an archive page, archive pages are built with templates.

Okay.

So you’re going to go add new and you’re going to say services archive.

All right.

We’re going to set this to archive.

I’m going to go ahead and hit publish.

I’m going to edit with bricks.

We’re going to come in and I’m going to go to template settings, conditions.

Remember the first thing you do assign this to somewhere.

I’m going to assign it to the archive of the post type called services.

That’s what this logic is right here.

The archive of the post type called services.

And then I can go ahead and I can hit save.

Okay.

Now we don’t want to build a whole page, but we do want to get a little hero section in here.

Okay.

So we’re going to bring a hero and maybe we’ll use the exact same hero.

Let’s just use hero golf.

It’s been working for us well so far.

And this is going to be our services section.

I’ll throw in, uh, this image of the cute little dog right here, our services.

And you know what we need?

We need a grid down below of our services.

So I’m going to go search for features and or feature.

And what I’m going to do is I’m going to come down.

I’m going to choose a very basic one, a little just flip flop back and forth.

Let’s do features section Delta.

All right, let’s insert that.

Perfect.

Okay.

So what we’re going to do is we are going to delete the other two instances.

And if you notice with this particular frame, it’s designed to auto alternate the car.

I don’t have to worry about doing any of that.

It’s just going to do it for me.

Uh, what I’m going to do is I’m going to query loop this just like we did last time.

But the difference is because this is an archive template, I actually don’t have to choose a post type.

It’s already assigned to a post type archive, which means I can just flip this little switch that says is main query.

Okay.

And it just knows it’s supposed to query services because it’s already a service archive template.

Only thing I need to do, get rid of the static data, replace it with dynamic data.

So post title, let’s go ahead and remove the featured image or I’m saying remove the static image, add the featured image.

Let’s go ahead and hit save.

Let’s go to the front end.

What we need to do is go to customize because we need to get our services up in our navigation here.

So menus, menu, add items, services, services archive.

Okay.

And let’s just name it services.

You can always change the name of what it is.

Awesome.

So we have home about services.

Let’s click on services.

Here’s our services right here.

Did I use the same photo on the homepage?

I did not.

Okay, good.

Here’s services.

Look, oh my gosh, in-home training, obedience training, puppy training.

It’s just the pages build themselves.

The pages build themselves.

All right.

So we’re going to go to back to our back to our archive template here.

One thing is this little button right here, right?

Right now, we haven’t linked up anything.

You can use the button.

What we need to do when we use a button like this is not like learn more, not something generic like that.

We need to keep accessibility in mind.

Okay.

I’m going to say explore.

And then what’s great about dynamic data is that you can still insert dynamic data.

So you can say explore the dynamic data and watch when I, when I go back to the services page, it’s going to say explore in-home training, explore obedience training, explore puppy training.

Isn’t that fantastic?

Now I got to add the link to the button, right?

So what we’re going to do link type, external URL, dynamic data.

Where are we going guys?

You already know where we’re going.

Post URL, save.

Let’s go check out our page on the front end.

Here’s in-home training, obedience training, puppy training.

It’s all great.

Explore in-home training.

Look, look, look, look.

It’s got its own URL already.

It’s got its own place to live.

There’s just nothing there.

What do we know about making a layout?

We need a layout that’s going to show up for all instances of this thing.

Where do we need to go to create that guys?

Pop quiz.

Where do we need to go?

You already know we’re going to the templates area.

Okay.

So we’re going to go to bricks.

We’re going to go to templates.

We’re going to go to add new.

We already did a service archive.

We’re going to do a service single.

All right.

So we’re going to hit draft.

We’re going to go ahead and choose single for this.

Actually, I’m not even going to draft it.

We’re going to hit publish, edit with bricks.

Okay.

And let’s go ahead and add a hero section.

All right.

So we’re going to go hero.

And for this service section, let’s do a different hero.

What hero do we want to use?

We just get a little bit different here.

Let’s go hero Juliet.

All right.

So we’ve got three images we can choose from.

Now, remember, this is a template.

First thing we should really do here is template settings, conditions, tell this template where to live.

Okay.

So we are going to say this is for a post type of services.

All right.

So we want every service to use this template right here.

So we’re going to go ahead and hit save.

Now we can bring in our post title.

Now, if you want to not see generic dynamic data, if you want to see exact dynamic data for what you’re working on, which is not a bad idea, by the way, not a bad idea.

You can turn on like content preview.

Okay.

You go to template settings, populate content, and you can essentially choose a post, like a service.

So we could say obedience training.

And I think you have to say single post first, then you can say obedience training.

You got to search for it.

It doesn’t show up automatically in my experience.

And then you hit apply preview.

The builder is going to reload.

And now it’s like you’re looking at that exact page.

It’s actually going to render the dynamic data inside of the template as you build, which is really, really, really fantastic.

I am going to remove this and I’m going to put in the featured image.

Okay.

And I’m going to save there.

So at least it’s going to pull in the featured image.

Now, how are these other two images going to make their way in?

Those are going to be with custom fields.

Okay.

And we’re probably going to do this in a part two video with all the custom fields.

This is just going to be part one of this video.

Let’s go ahead and hit save there, but we’ve, we’ve done enough, right?

Let’s go back and take a trip to the front end and see where we’re at.

All right.

So we’ve got local dog trainer.com home about services.

Let’s go to services.

We see our services.

I can click on obedience training.

I get the obedience training page.

I can click on in-home training.

I get the in-home training page.

We got a featured image right in the middle there.

Okay.

We’re well on our way guys.

We’re well on our way.

Now let’s go back to Figma.

Let’s take a trip back to Figma.

We’ve done about team.

We’ve done services.

All the services pages are already started and going really, really well.

I need to bring in recall training and online training.

Let’s do that real quick.

Okay.

Cause remember we want to see these things build themselves.

So let’s go services, all services, add new service.

All right.

We’ll just do online training here, a set featured image.

And I think there’s a computer and a dog.

There we go.

Computer and a dog seems like it fits.

Okay.

Let’s go publish, publish.

Let’s jump back out here.

And what was the last one we need?

Recall training, recall.

You know, when your dog runs away, you got to be able to recall that dog.

Here we go.

Recall training right here.

Publish, publish, bang.

Did this, did this website just build itself?

Let’s go to services and recall training, online training, in-home training, obedience training, puppy training.

It’s all there.

And I click on recall training, which is brand new.

And guess what?

It’s already got a page.

It’s already got its page going, right?

Okay.

So we’re doing a really fantastic job here.

Progress coming along.

I want to take a second, just detour.

Okay.

Because I’ll just tell you right now, if we do behaviors, if we do workshops, if we do case studies, that’s all going to be very, very, very similar to what you already saw.

So I want to jump ahead a little bit and I want to talk about relationships.

Okay.

And this is going to take us a little bit into custom fields.

But if we look, where am I?

Let me zoom out.

Here we go.

Relationships.

If we look here, we wanted to create some relationships.

For example, I want on my team member page, I want to show what services they specialize in.

Okay.

That’s just one of the relationships.

And I want to be able to add that from that person’s team page.

But I would also like when I create services to choose which team members are related to those services or that specialize in those services.

This is going to require relationships, specifically bi-directional relationships.

But I’m going to show you how to set it up with a one relate, like a one way relationship first, and then you can make it bi-directional with one additional step.

I’ll show you exactly how to do it.

Okay.

And this is very, very powerful stuff as you’re going to see.

So what I need to do is I need to go out and go to ACF.

And now we’re going to take a trip into field groups.

I’m going to go ahead and hit add new field group.

What we’re doing is we’re going to assign a group of custom fields to one of our buckets.

Okay.

This is why we have the buckets guys.

This makes the buckets make every part of this process so much easier and so much more powerful.

The buckets being the custom post types that we created.

Right.

Okay.

So first thing I’m going to do is say, this is going to be a team group.

So all these custom fields belong to our team members, right?

And I’m going to come down to settings down here and I’m going to assign this to team.

You have to just like templating where we had to tell the template where it lives or what it applies to.

You’ve got to tell this group of custom fields where they live or what they apply to.

And in this case, they need to apply to the team bucket.

Everything in the team bucket is going to get these custom fields.

Okay.

The field type is going to be a relationship.

Now this is where you are probably not going to be able to do this with the free version of advanced custom fields.

You should absolutely have the pro version.

If you’re doing any semblance of professional work in this field, you need the pro version of this tool, period, point blank.

Okay.

Now there’s jet engine out there.

You can use that if you want.

You can use meta box.

Okay.

There’s a lot of different options.

I prefer ACF in the U S ACF is the dominant player.

Okay.

But you do you this, the concepts is what I’m teaching.

I don’t, I don’t care at the end of the day, what tool you decide you prefer.

I’m teaching the concepts.

All right.

Here’s the concept of a relationship.

So I’m going to say, um, specialties.

Okay.

So we’re going to say specialties and, um, these are services that we’re linking to.

So when it says filter by post type, we should filter by services.

Cause that’s what we want people to choose when they’re linking up specialties.

Right?

Okay.

So we’ve got field label, field name, filter by post type.

Now I only want to show published services.

We don’t want to see anything that’s in draft mode.

That’s going to confuse people.

It’s not going to create real relationships because drafts aren’t public on the website.

So I only want published services to show up when I’m doing this kind of linking.

Right?

Okay.

That’s all I need to do.

Now I’m going to go ahead and hit save.

And I want to show you something.

We’re going to take a trip over to team and we’re going to go to all team and we’re going to go to Jack.

Okay.

And now look, when I’m editing Jack, I’ve got some post types down here at the bottom and I’m just checking my recording.

Yeah.

You guys can see this just fine.

I don’t think I’m in the way.

Okay.

So I can tell, I can, I can essentially with Jack here, I can say, you know what?

Jack specializes in obedience training and he specializes in, uh, recall training.

Okay.

So I’m just selecting those two things.

It’s putting them over here to show I selected them and then I can hit safe.

Now, how do we get this to show up on the site?

Cause remember, Jack doesn’t have a page in the builder.

Like I can’t open Jack’s page in the builder, but what I can do is I can open the template that controls all of our team members.

I can go edit that and we can see what can be done there.

So let’s go to bricks and templates and let’s go to team single.

Okay.

So team single, cause that’s what I’m editing a single person on the team.

And I’m going to add a section below this.

Okay.

So I’m going to go, uh, add a template and I’m thinking, what are we adding?

We’re adding, you know, I could use feature cards for this.

We could probably go use the same ones that we already use.

Let’s do feature section, Charlie down below.

Okay.

But we need to talk about this here.

Okay.

Because this is a four column grid, but we don’t know how many, uh, specialties each team member may have.

So we need a grid.

That’s kind of flexible, right?

Like if it’s two, it’ll look good.

If it’s four, it’ll look good.

If it’s eight, it’ll look good.

How do we do this?

Well, I mean, there’s a lot of different ways to do this.

First off, I want to get rid of the cards.

I don’t need, actually, I’m going to leave one.

Okay.

Just so that I can see the grid.

Cause I’m going to change this grid right here.

I’m only going to change it in this one template.

Okay.

Right now it’s using automatic CSS is four column grid system.

I’m going to change that to automatic CSS is variable grid system.

So in fact, I can just take off, uh, feature grid, Charlie, cause this is not really going to be a feature grid, Charlie anymore.

Um, and I am going to put on a class called variable grid right here, variable grid.

And then I just need to clear out the padding.

Cause this is a list.

It’s an unordered list, which comes with like default, uh, styling from the browser that I don’t want and need like this padding left.

So I’m just going to clear that out.

But by putting on variable grid here, you see immediately, it just, it stopped choosing a number of columns.

And if I add another card, um, it is going to put that card in and that card in and that card is going to just keep doing this, this, uh, two column grid by default, but there’s a magic trick to variable grid in automatic CSS.

And that is the ability to come down here and define a minimum.

Okay.

So I can do men.

I know this is getting a little advanced.

It’s a little bit over people’s heads.

There’s full documentation on this.

I’ve done videos on this.

Okay.

I I’m not going to explain the entire system and how it works.

Um, but these are the tools that automatic CSS puts at your fingertips for doing, you know, making complex stuff quick and easy.

So essentially what the men does is it says, how squished is this card allowed to be before we need to start stacking them.

Right.

Um, and so I’m just going to pull out a number like 280 pixels.

I’m just going to throw a guess in there and look, it decides, okay, four column grid for this, for that width that you just told me, we can fit four of those cards in here nicely.

Okay.

So I’m going to go ahead and hit save.

Now this, again, I’m just throwing in a guess.

You can actually measure the card if you want and choose the exact number that you want.

I don’t really care all that much.

I’m doing a number that works.

I don’t want the card to get less than 280 pixels.

And if it does start to get less than that, it’s just going to stack them.

It’s going to make more rows.

Okay.

All right.

So now what I can do is I can get rid of all the instances of the cards I don’t need and notice that if there’s only two, it’s still going to look great.

If there’s only three, it’s still going to look great.

It’s going to look great no matter what.

So this is fantastic.

Okay.

So now what I’m going to do is I’m going to come in and I’m going to do a query loop on this and I’m going to say, um, and remember this is a, this is a template already.

Okay.

But I need to choose.

Oh, look what we’ve got here.

Type ACF relationship.

This is the value of using good tools.

Uh, bricks being a good tool detected that I’ve created a relationship field for this post type and it’s offering it to me inside the query loop.

All I have to do is click it.

That’s all I have to do.

Okay.

And I can go ahead and hit save here.

So we’re only seeing one card.

Now let me go ahead and put in the dynamic data.

Now, remember though, there is a trick.

If you want to see the real data, do you guys remember what the trick is?

I’m going to go ahead and put in the post title.

Remember, this is for services.

It’s querying related services.

So I need the title of the service and I need to get rid of this image and I need to bring in the featured image for the service.

And this can say, um, my specialties right here.

Okay.

Remember that’s, that’s what this is, his specialties.

Okay.

And then I can even link from here to the post URL, not the post ID, the post URL.

All right.

And hit save.

So this is going to continue to create a network of internal linking across the website, make it very easy for people to navigate to different places.

Okay.

Now what we want to do is we want to go to the front.

Let’s start at the beginning.

We’re going to local dog trainer about, okay.

Remember that was Jack, right?

I’m going to open up Jack.

Look at this.

His specialties are right there.

The cards are right there.

Now what if, what if Jack gets a new specialty?

Okay.

Well, let’s go edit Jack.

Let’s edit Jack.

And remember, our specialties are down here.

Let’s say he now also does online stuff.

So I’m going to add that to his specialties.

I’m going to go ahead and hit save on Jack.

And now let’s just go review Jack’s page. look, he’s got a new specialty.

All of a sudden it, the pages build themselves.

They manage themselves as the power of custom post types and templates and loops and logic.

Okay.

All right.

So we are obedience training.

By the way, I can click on these.

So if I click on obedience training guys, where do you think it goes?

It goes right to the obedience training page.

Okay.

I don’t remember.

Oh, what was the URL for that?

Oh, what’s the slug for that?

Oh, what?

No, no, no.

It’s all dynamic.

It’s all dynamic.

I don’t think, I don’t think I just put in tokens everywhere.

That’s all I do.

I’m a token.

I’m a, I’m a token guy.

Okay.

I use the tokens in the styling.

I use the tokens in, in the URLs.

I just, I’m a token guy.

When you’re a token guy, uh, you know, it’s a good life to be a token guy.

All right.

So let’s go back.

We we’ve got, look at, look at what we got.

We got a little homepage here.

We got a little about page.

We got all of our, all of our people, all our people got pages.

Okay.

Um, we got, we got services.

Let’s look at the services that we got.

All of our services have pages.

Look at the stuff coming together.

Let’s go ahead and jump over here and see what else we want to do.

Okay.

That was the first.

Oh, thank you for reminding me.

We need to do the bi-directional nature because here’s the thing.

Here’s the thing.

What if we are adding a new service or we’re on a service, we’re editing a service like, uh, like recall training.

Okay.

And we want to, we want to add a team member to recall training from here.

We want to say that this recall training is certain people’s specialties.

It’s sometimes it’s nice to be able to do that when we’re editing a service.

Notice right now I have no fields for that.

Okay.

Even though I created a relationship from a team member to services, I have not created a relationship from services back to team members.

Okay.

So what we want to do is we want to go out and this will be the end of this.

This will be the end of part one.

And then I’m going to come back in part two and we’re going to finish up everything that we’ve already started.

Okay.

And we’ve got more to do.

There’s some conditional stuff.

There’s more, uh, custom field stuff that has to be done.

So we’re going to, we’re going to get that done in part two.

All right.

We’re going to come in here and we’re going to go to ACF and we are going to go to field groups and I already have a group for team.

What do I need a group for guys?

Services.

Okay.

So we’re going to hit save.

Here’s my services group.

Don’t I need to assign it?

I need to tell these fields where to live.

Right?

So down here, tell them to live with your services bucket.

Okay.

And then what do I need to do?

I need to make this first field a relationship field.

Okay.

Now there is a little bit of a trick here.

So don’t skim through this little bit of a trick.

So we are going to say, what do we want to call this?

The hardest part is naming these, right?

When we were on the team, we called it specialties.

Okay.

Here, what we’re going to call it is, um, uh, let’s do, let’s do, uh, I guess we’ll just do team team.

We’ll just, we’ll just link team, uh, team members.

Okay.

Team members for services, whatever.

All right.

So what are we choosing?

We’re choosing team and we only want to see people who are published in the website or on the website.

Okay.

Now here’s the, the key.

I’m going to go to advanced.

Look at this little toggle called bi-directional.

I’m going to click that.

And then it says target field.

Guess what the target field is?

The specialties field that I made over there.

This is creating the link so that if you make changes over there, this side updates, if you make changes here, the other side updates.

Okay.

Go ahead and hit save.

And now let’s hop over to services.

Okay.

So now I’m going to go to puppy training and look at this.

I can choose team members from the service page and watch what happens.

I’m going to choose Jenny and Jim.

Okay.

Jenny and Jim.

We’re going to save.

We’re going to go to the front end of the website again.

Let’s go back to, here’s the service page, right?

I’m going to go to about and I’m going to find Jenny.

Let’s go down.

Here’s Jenny.

Let’s find Jenny.

Guys.

She’s already got a specialty.

She’s already got a specialty, right?

It already added her.

And if I go edit her, okay, let’s edit, uh, edit her right here.

Edit Jenny.

Look, puppy training sitting right there already.

Okay.

Now I can add another one.

Obedience.

It saves.

I can add it from either place.

Now let’s go back and view her.

Look, she’s got two specialties.

Now, one more thing to shore this up and make sure that the connection is, is perfect.

Okay.

You got to go back into the backend.

Remember the first field that we created.

So let’s go to field groups.

First field we created was on team specialties advanced.

We need to toggle bi-directional here and we need to choose team members.

Now they’re fully perfectly linked.

Okay.

So they’re going to update back and forth.

It’s going to be really, really, really nice.

All right.

Um, let’s, let’s go ahead and end part one here.

I’m going to come back with part two.

Let’s go ahead and look at this.

We still have to put the other stuff in.

We’ve got more templates to do.

We’ve got the service area network to create the PPC landing pages.

Okay.

There’s more to do, but we are going to work a little bit faster in part two, because I’m going to explain less to you and you’re just going to continue to watch and you’re going to get the hang of it.

And then what I want you to do is start to go employ these principles on your next project.

And once you’ve done it once yourself, it is going to be locked in your brain and you are going to absolutely love building dynamic sites.

And then anytime you open a static website, you’re going to hate your life.

And I’m sorry for that.

I apologize.

I deeply apologize for that.

You will hate your life every time you have to manage a static website.

Okay.

You’re going to be on the dynamic train.

You’re going to be the token.

You’re going to be a token guy.

Okay.

Uh, going for or girl or girl going forward.

Let me make this last reminder here.

This, this, this channel does not like itself.

Okay.

You have to hit the subscribe button down below.

You have to hit the like button down below on the videos.

Um, that’s not going to happen automatically.

Okay.

We got to get these numbers up because there’s so many more people that need what we’re doing here. but unless you guys subscribe and unless you like, and unless you comment more, more than you’re already doing, we can all do more, right?

Let’s start turning into a political ad.

We can all do more.

All right.

Um, but that’s it.

Thank you guys.

I love your support.

I’ll be back with part two and we will keep this train rolling.

Peace.