Adding a Medical Conditions Section & Template to DocReady

0:00:00
And we’re recording. All right, today’s training is going to be me working on a real client website. I know that this is something a lot of you have been wanting to see. And today you’re going to get a little glimpse of that. Let me give you some context. The client I’m working on today is Doc Ready. We started with doing complete UX UI overhaul of their website, but we actually started with their PPC landing pages. I’ll do a case study on why we did it this way. And the results, first of all, the PPC results we’ve gotten so far have been absolutely fantastic. It’s been really, really inspiring. Great for them to see. And now they have tremendous trust going into their actual main website rebuild. And just SEO context here, right? They’re a telemedicine company.

0:00:50
They provide online medical care. It’s US board certified and licensed doctors. And part of what they need in order to get found is not just ranking for different telemedicine terms and online doctor terms. We actually want to build out sections of content. One section is going to be all the conditions that they treat. So we want to be able to show up in a certain context for all these various conditions, like high blood pressure and on and on and on. Then there is symptoms. And symptoms can be like running nose, fever, all of that. So we’re going to create a body of content around symptoms. We also want to create relationships between these things because if somebody has a condition, we want to be able to list all the symptoms associated with that condition. And vice versa, if someone is looking at a symptom, we want to maybe list all the conditions that are related to that symptom.

0:01:42
And this is we’re not trying to replace like WebMD or anything like that. We’re going to be publishing content in a very specific context. A lot of this is to build authority. A lot of it we can rank directly. A lot of it we’re going to be able to convert very easily. So one of the strategies I’ll let you guys know is that if somebody has a condition like diabetes, for example, they need a lot of ongoing care. And part of telemedicine is not just one off appointments for people who are sick, right? That’s what you might think right off the bat, like sick of the cold or the flu or whatever, they need urgent care. That’s part of it. But on the subscription side of things, it’s actually better if we can get people who need long-term care, think about a diabetic, right? Who needs ongoing prescription refills and doctor consults to help manage their care. And this might be a great option for low income.

0:02:34
It might be a great option for people who don’t have insurance. It might be a great just supplemental option for anybody who, when they want to do these doctor consults and prescription refills, they don’t want to have to get in the car and drive and wait in a waiting room and then sit in the back and wait for the doctor to come to the appointment. And then maybe they even see a PA. They don’t actually see the doctor. And then it’s just a very long process. They stuff to pay at co-pay. They, like, for 10 bucks a month or, you know, 20 bucks a month for their family, they can actually see a doc-ready doctor and they can get their prescription refills and they can do it off in the comfort of their own home. So it’s very convenient. So what we need to do is show up for people who have these conditions and who are searching around these conditions.

0:03:16
Think about people who maybe were recently diagnosed with diabetes, right? They’re probably going to go on to Google. They’re trying to learn a lot about it. How do we manage care? Yeah, yeah, yeah, yeah. And so we want to show up for those kinds of searches and we want to inform people that, hey, yeah, you can get this treated in the real world, so to speak. But we can also treat and manage your care with online doctors. It’s super affordable. Yeah, yeah, yeah, you get the picture, right? So what we have to do with this main website is we have to create a couple different custom post types. One custom post type is going to be conditions. One is going to be symptoms. One is going to be types of care.

0:03:52
I’ve already started to build out these custom post types. What we’re going to do in this tutorial is we’re going to build the condition side of things. I haven’t decided yet, but we actually use this template for the symptoms side of things as well. Most likely that’s going to be the case with maybe some slight changes and things like that. So let me go ahead and we’re going to take a look at this in Figma here. So I have a template, this is what we’re going to be creating today. Now we have to do some additional work with the custom post types. We have to add some custom fields and then we have to get this template built. And this is going to be the conditions template. So it’s going to tell people what condition they’re looking at, obviously. It’s going to give the like one sentence, rich snippet kind of, you know, description of that.

0:04:36
It’s going to give them this learn more button, which is really just going to be an anchor link to this section right here. And then the get online care for this is going to be a call to action. Now this button text may change. I’m not sure of the full strategy yet. We haven’t solidified that, but we’re going to want to call to action, obviously. Then we’re going to have this main section. This left hand side is going to be the body content where we put all of the almost like a bit like an article. Now we’re not going to do like a Web MD article on high blood pressure. We’re going to talk about a lot of specifics around managing this condition. And you know, whatever else we decide to put in there. But again, we’re not trying to recreate Web MD here. We’re trying to create this in the context of Doc Ready and converting people to subscribers, plus whatever else is necessary for SEO and ranking and to build authority as well.

0:05:31
We want Google to understand that, you know, these are board certified US medical doctors. This is all 100% legitimate. We know what we’re talking about. We deserve to rank for this stuff. This is what our entire company is about on and on and on. You get the picture, right? Now on the right hand side here, we’re going to have another block style call to action. And I want this to be sticky. So I want this to actually follow the person as they’re reading the content. So as they’re reading the main content, this main little call to action is just hanging out here. And it’s right there in full view at all times. So you’re going to see that we’re going to need custom fields for all this stuff. All this has to be dynamic data. So the title is going to be injected dynamically.

0:06:14
This little snippet is going to be injected dynamically. You see it says get online care for the treatment and management of high blood pressure. So we’re going to need to dynamically inject the name of the condition here again inside of this. And then again, here, you see it. So that this is unique for every single condition page. So that’s that section. That’s pretty straightforward. Then we’re going to get down to here. So when they’re done reading and learning about one condition, they’re going to be able to see all the other conditions. So it’s going to take them right to a table of all the conditions that we treat. And what I’m probably going to do here, we’re going to have the maybe a tell us your symptoms but 100% for sure because we’re building out a symptom flow for this is one of the main calls to action.

0:06:58
But this is just going to be like see more. I’m thinking that this will just Ajax load more of this grid right here. Now after that, we do want to show testimonials. This was one of the initial concepts for the design of the testimonials section. It’s actually different now. And we’re just going to use a lot of stuff that I’ve already designed on like the homepage and the landing pages and things like that. And then we’re going to have a gigantic main footer call to action. This is already designed. This is already designed right here. These cards are already designed but they’re not used for conditions yet. So we’re going to have to make that work. And you know, this header is somewhat designed. I think I’m going to use the background animation from a different set. What we’ll see.

0:07:46
I don’t have a design for this, a UI design. I just have the wireframe and then the existing design elements that we’ve already used on other pages. So there’s going to be a little finagling here, a little bit of putting this together. But that is all of the context. So let’s go ahead and let’s just dive right into work. Let’s just get some stuff done here. So first things first, we do see that over here I have a symptoms custom post type. I have a conditions custom post type. I have our specialties custom post type. We’re going to be mainly be working in the conditions custom post type here. So I’m going to go ahead and open that up. And I’ve put in a bunch of conditions but there’s really no content here yet. So if you open sinus infection, you’re going to see that there’s pretty much nothing there. All right.

0:08:32
So I’ve got a little bit of the framework built out. If we go back to this template, you’re going to see that I’m going to definitely need some custom fields here. So the first one is the snippet, right? Or a description. Let’s say we’ll call this a condition snippet. All right. So first thing I’m going to do is I’m going to prep. So I’m going to create all these custom fields that we’re going to need. So I’m going to go into field groups. And I see that there’s only one group. It’s called review. So I’m going to create a new one and this is going to be conditions. And then under conditions, I’m going to start putting these fields. So we’re going to have the condition name.

0:09:06
That’s going to be a text field. I’m going to close that. And then out of field, this is going to be the condition snippet. And that’s going to be a normal text field. All right. And go ahead and close that. Let’s take a look at what else I’m going to need. So I’ve got the snippet, got the name. We’re going to need the body content. I’m going to go ahead and we’re going to use the Gutenberg editor for that. So I’m going to go back. Let me publish this real quick. Save our work. I’m going to go to the custom post type, add edit post types, edit. We’re going to go to conditions.

0:09:41
In the very bottom, you can turn stuff on and off. I need the editor turned on. And I’m going to go ahead and save post type. So now if I go back to one of these conditions, you’re going to see that I actually have the Gutenberg editor available, or at least I should. Yeah, I do. So now I have the whole Gutenberg editor available. All right. So I’m going to dip out here. We’re going to go back to custom. Let me see. Yeah. Let’s go back to custom fields, conditions. All right. Perfect.

0:10:11
And then I do need to assign this. This is not assigned yet. So I’m going to assign it to condition and update. And then we’ll go to, let me open this in a new tab. To one of our conditions and just make sure that we’re getting our, yeah, there’s our custom fields. Just to make this easier, what I will do is I will say that the position of these fields is going to be high after the title. When I do that and refresh this condition page, you’re going to see that those fields jump up here. So they are shown first before the whole oxygen area. We’re probably going to end up not needing the oxygen editor at all on these. That’s the ultimate goal. So I’m going to end up turning that off. And that way people will just have the Gutenberg editor and then they will have the custom fields to fill out.

0:10:57
All right. Cool. So I’ve got condition name. I’ve got the condition snippet. This is going to be taken care of by Gutenberg right here. Here’s where we have to decide things. Like I could, I could definitely change what I want this call to action block to say with custom fields. Or I can just say all these are going to say the same thing, but we’re going to just going to inject the condition. That’s where I’m going to start with. I may come back and let them make this section completely editable. That’s a possibility. For right now, I’m just going to keep it very simple. Down here, we really don’t have to inject anything.

0:11:37
There’s really nothing dynamic there. These are going to be eventually driven by relationships I would imagine. So let’s say they have a 10 people that have left reviews about managing diabetes or something. We could potentially create a relationship between reviews and conditions to show reviews based on the condition somebody is currently looking at. But that’s way off into the future. They don’t have enough. They have thousands of customers, but not enough in each condition category that they’re doing ongoing care with to actually make that legitimate. So we’re not going to do the relationship yet, but we are going to have just random reviews basically. Then this call to action section. I think we’re just going to use a main part of the template here and just inject maybe the condition. I really don’t think we need any other dynamic data.

0:12:29
This is going to be one of those examples. Where is it? It’s kind of simple. We’re just building out the structure and we don’t need a lot of fanciness. I’ve got conditions. Let’s go ahead to one of the. First let’s go to oxygen templates and let’s see which condition comes up by default. I’m going to add a new template and this is going to be called conditions and I’m going to inherit the primary template. I’m going to assign this to all of our conditions posts and I’m going to go ahead and hit publish. Then I’m going to hit edit with oxygen. The builder is up and running by default. It’s previewing the ADHD page. I’m going to go to the ADHP page and we’re just going to put in some dummy content for now.

0:13:17
I’m going to grab five paragraphs of this copy and we’ll put that in. Actually don’t need like five. Let’s do three and I’m going to create a bunch of little ones because this is how it would normally be written. We don’t want like giant chunks of content on the site. I’m just going to break this up a little bit. I want to see like with as much realisticness as possible. That’s a word. What I’m looking at here when I’m designing the template. Okay. And boom. Then I’m going to go ahead and throw in a few headings. Sorry, my nose is itching. All right. So this is an H2 heading.

0:14:01
Change that to heading and then we will do another one. Like right there. And then we’ll probably have this is an H3 heading. Change to heading H3 and then duplicate. And then we can I hate Gutenberg sometimes. All right. I’m just going to grab that and come down here. We’ll do one more H3 heading. And let’s do maybe a list. We’ll do point number one is this point number two. Is this right here point number three is yes. Whatever. All right. Cool. So I just want to have a few little different elements in there.

0:14:59
Let’s throw in one last H2 heading. Maybe it’s like a conclusion. All right. Cool. And then let’s throw in an image. Image, media library, placeholders. I don’t have any placeholders yet. All right. So we’re going to go to just go to pixels. Let’s put an ADHD. Let’s just see what comes up here. OK. Yeah. Great. Free download.

0:15:27
ADHD. Let’s scoosh it real quick. Resize that. 2400 and oh, I can’t see my button. There we go. I’m in the way of my button. All right. ADHD. Replace. Perfect. OK. And we will throw that in right there. I’m going to have to move this little window. OK. Select.

0:15:56
Good. All right. Update. Perfect. All right. Now let’s go down condition name is ADHD. And then I’m actually going to Google ADHD real quick. It’s attention deficit hyper activity disorder. So I’m going to put that in. And then what I’m realizing here, attention deficit hyper activity disorder, there might be like a condition name and a condition nickname or a condition abbreviation. We would probably call it a condition nickname just to make it plain text.

0:16:30
So I’m going to do that right now. Condition snippet. All right. So we’re going to update here. Before I do that, let’s just grab the snippet. A chronic condition, including OK. Perfect. And then I’ll put this here. Now I don’t just steal content. We will write all of this content to be unique. ADHD is a chronic condition that includes attention, difficulty, hyper activity, and pulse mass. OK. We’ll rewrite all of this at some point. Right now, I’m just trying to get content into my fields here.

0:17:00
I’m going to go backwards to custom fields again, conditions. And I’m going to add a field condition short name. We’ll call it short name. All right. And then I’m just going to move this to be number two. And I’m going to update. And then we’ll edit condition. And now I can use the short name wherever I want inside the template, along with the actual long condition name. OK. I’m going to hit update. Great. So I’ve got three custom fields. I’ve got my main body content.

0:17:34
I’m pretty much ready to rock and roll on building out this template. So I do need to refresh the builder, because I just put a bunch of information in that it can’t actually pull from that post until we reload. So I’m going to go ahead and do that. OK. All right. So remember, I said we’re going to steal some elements from other pages. So I’m going to go back here. And let’s go to the home page. And let’s open that up. So we’re going to edit the front page. Now I’m opening two builders at the exact same time.

0:18:07
When you do this, you can be very, very careful with what you are actually doing and what you’re actually editing. You don’t want to get into a situation where you end up losing work. If this isn’t a problem, typically, if you don’t change global settings, you don’t add CSS. You don’t like if you’re just doing structural stuff on the page that’s unique to that one page, you should be good to go. You should be safe. OK. So mainly what I’m going to do here is use hydrogen pack to copy some elements from one page to another. All right.

0:18:42
So one thing that I want to grab is just this hero section here. So I’m going to grab this and paste that in. Now we’re going to do this a little bit differently, because we’re not going to have any of this structure over here. So let’s take a look at how this is structured. There’s that. There’s that. We can take this out. And we can, let’s just go ahead and put that up there for now. And we’ll figure all this out in a second. That’s basically what we’re going to start with. Now I can take off this background of control by a class. And what I’m going to try first is I’m going to do BG. And then I’m going to choose triangles.

0:19:19
I’m going to make sure that there’s nothing set in the section. OK. And then we’re going to do text light. And then I’m going to hit save. And this is an ADHD. So I’m going to go ahead and highlight that. I’m going to insert data, advance custom field. And we’re going to do a condition name. And you’re going to see it insert there, because I just want to be reminded here when I’m looking on the front page that we are actually viewing the ADHD page. We don’t see my triangles.

0:19:47
All right. So if you go to the homepage, you see these little animated triangles. It might be hard to see on screen share. There’s little subtle animated triangles in the background there. And they’re clearly not showing up in my hero section. So that’s something that we’re going to fix. But what my plan was was to use this kind of little style here to just make the hero. Because I don’t want to be faced with some of these so many conditions. And same thing with symptoms. When we get to symptoms, right? I don’t want to be tasked with finding an image to, excuse me, fit all of those different conditions and symptoms.

0:20:24
It’s much easier if we just keep it text-based and move on with our life. So I did want to put these maybe subtle triangles on the top just to offset, like that is a main hero section. So we’ll try to figure that out as we get there. What is this? Alt font, text block, IDs. That color says at the ID level. We’ll go ahead and remove that. All right, remember on our thing, we had two buttons. It was learn more and get online care for this. All right, so we’re going to do learn more. And we’re going to take this away.

0:20:56
We don’t need that. And then let me take a look at this wrapper. There’s our button. There’s our wrapper. OK, I’m going to just delete all the styles that are on this div. Just make sure we’re not doing anything extra there. And I’m just going to put a class on here called buttons. Oh, OK. Well, great. How about you allow me to put a class on there? There we go, buttons. And now it’s lost its ID because that’s oxygen. So let me go ahead and right click. OK, thank you. We will go change ID.

0:21:31
I actually don’t care what the ID is. I just don’t want it to be blank. OK. All right, so got that. I’m going to duplicate this button. There we go. So now I side by side buttons automatically because that’s an oxygen engine utility class. And this one’s going to be get online care for. Why don’t we inject a short name here? We’re going to have to do logic to where if there isn’t a short name, we use the long name. So that’ll be coming up in a minute. Insert. Well, let’s see.

0:22:04
Get online care for ADHD. Perfect. See how that personalizes it? All right, now this we’re going to use the snippet. So condition snippet, insert. Perfect. All right, so you see we’re off to a really good start here. Let’s refresh. Great. We want to see what is limiting the width of this, probably just the content, right? So let’s see what max width is like 640. Because I don’t want it to, if this is very long and this one as well, actually, let me take that off. For a second, let’s take a look at something.

0:22:43
OK, see this is already breaking. See text L? Does that have? Yeah, that should not have a, that’s a default. Oxygen engine does that by default. It puts the width on like text Ls and stuff like that. I always take it off. So that’s that. And then now we can clearly see that we need to limit this. So 640. Perfect. And then after this, I’m going to add the short name. So I’ll just use space, insert data, advance custom fields, condition short name, insert. And I’ll actually put that in parentheses like that.

0:23:17
And that’s what we get. Except we should not be condition name. We should not be line breaking. OK, we’re going to have to, I think it’s the short codes that do that. It probably displays them as block or something like that. So what I’m going to do is grab this headline. And this is a template. I don’t really have to put a class on it. So I can just style the ID because this is only going to be one of them. So what I’m going to do is lay out. And then we’re going to do inline flex. Now that’s not going to get it done. Inline block, that’s not going to get it done.

0:23:56
Inline, inline should have gotten it done. All right, let’s go to the front end, figure out what’s actually happening here. So I’m going to inspect this, span, span, span, display, inline block. OK. See if I display inline on that, on the span. So it’s going to be all right. So I’m just going to do this. Watch what we do here. So I’m going to take this heading. And I’m just going to say span, span, double dash, inline. And then I’m going to go to style sheets. And I’m going to go to digital gravy. And we’ll just put this utility classes.

0:24:38
We’ll come down here before that ends. And we’ll do span, double dash, inline, and then target all spans inside of there. And display inline fixed. OK. Now I said don’t edit CSS. And what I mean is that I’m editing CSS on the template. I’m going to save. That’s OK. You would not want to add CSS on this template that is just open for reference because when you save this one, later on, it’s going to not have that code, and that’s going to override it. So that’s what I mean. All right.

0:25:14
Now, anytime you add little stuff like this, span, double dash, inline. Like nobody that comes after me is going to understand what that is. So what I do right here is I’m going to put a little note. And it’s going to say fix, default, oxygen, span, line break, something like that. OK. Just so people know what’s going on here. All right. So I hit save. And there we are. And then anytime you click out of the CSS editor into the main builder, it likes to shift things around. I don’t know why.

0:25:49
It’s another oxygen bug. All right. So we refresh. We’re good to go. We do need a space now. So right there, save. Make sure that, yes, perfect. OK. So we’ve basically got our hero section now. Let’s take a look. We need our main body section next. So I’m going to go ahead and do that. So we’re going to add, I’m going to hit shift S. And for hydrogen pack, that’s going to add a new section. I’m going to hit shift S again.

0:26:19
And that’s going to add our section for, actually, I don’t need to do that. I’m going to steal that section from a different page. While I have the homepage open, let’s go ahead and do this. See this section right here, this table right here? Really the whole thing. I’m going to just steal this, Command C on that section, copies it. And then I will paste, and I get that section right here. And what I’m going to do is go to the structure panel, and I’m going to take out that shape divider. I don’t want that in there. I just want the section. So I’m going to hit save. And we’re going to go, and we’re going to see what the page looks like now.

0:26:51
So I have a section for my main content, and then I have my grid down here. And this grid is going to, instead of being what it is right now, which is all of their, like, the types of care that they offer, it’s going to be the rest of the conditions. So we’re going to figure out how to do that in just a minute. I will change the text on this. So it’s supposed to say, explore other conditions, and then have this little blurb over here. So explore other conditions. And then this little blurb, perfect. And I think what we can do is we’ll do vertical. And then middle align. Do I have to use that to stretch? I don’t.

0:27:33
OK. So let’s put a stretch class on there. And now it does. But I need to do that middle align here, instead of on the other one. OK. Perfect. We can take that. Oh, no. That’s on a, yeah. Don’t do that. OK. I think we’re good. I think we’re good. All right.

0:27:51
How we can help explore the conditions, blah, blah, blah. This will be a conditions grid. Let’s go ahead and save. Perfect. Now let’s take care of this main body section. So I’m going to add a div. This is going to be columns 2. Let’s think about this. No, I don’t want it to be 50, 50, maybe a columns 3, 2. I can actually just do 3-2. We’ll put a div in here. And then we’ll duplicate that. And then we will grab the entire outer wrapper. And this will be conditions double underscore content. Conditions underscore content inner.

0:28:32
Yeah. We’ll do that. And then here, we’ll do conditions double underscore content. Perfect. This section is actually going to be the main section. So I’m going to change that tag to main. This section is going to be the header. So I’m going to change that to header. Perfect. And then we have this one as just the main section. Or actually, this isn’t a side. I think I have to use a custom tag for that. All right. We’re going to hit save on that.

0:29:06
Perfect. OK. I’m going to grab the entire wrapper here. And we’re going to put a gap on this. We’ll start with a large gap and see if that is enough. And then we’re going to add just a text box here. And we’re going to size and spacing 100%. And then we’re just going to insert content. And then click out. And we should see, yeah, all that ADHD content fills in very nicely. OK. Except for the image is all out of whack. We’ll fix that in a little bit. I think that’s just like becomes a height auto or something like that.

0:29:49
So what I want to do is put a class on this column. So this is going to be conditions, double underscore, content left. And then this will be conditions underscore. I was going to write out underscore, double underscore, content aside. OK. All right. Perfect. So let me just go to style sheets real quick. And pull this up, come down. I hope I’m, check our system preferences real quick. I hope I am display. Yeah. OK.

0:30:33
It’s big enough, I think. All right. So we’re going to do this. And we’re going to say one, two, three. This is the conditions section of the website. All right. Perfect. And we want conditions, double underscore, what was that? Call them. Do my short term memory. OK. See how it moved that out? Because just because I clicked out of there, it’s annoying. Conditions, content dash left. OK.

0:31:02
Scroll all the way down, dash left, image. I think it’s image. There’s height auto. Believe fixes that. That should be good. OK. And let’s refresh this because I want to see if there’s a, yeah, I already know like there’s no padding around this or like margin. We’re going to want to fix that. And it’s going to be a figure. Yeah. So figure is already kind of good there. Margin. All right.

0:31:38
OK. So we’ll do this conditions, content left, figure. Margin bottom is going to be, you need an important override that. OK. Let’s do margin top for sure. We’re going to do 1m. We’ll just leave that for now. I think there’s that default margin bottom on there. We just keep that. But we should at least get that to space. Yeah, that looks, that looks great. But we’ll also do borders. Sorry, border radius is 1m. I believe that’s what we’re using on all their stuff.

0:32:22
Or maybe was that a different site I was working on? That was a different site I was working on. Getting confused. OK, 0.25m, I think we used for them. And we’ll save. Just a slight rounding of the corners on any images that we throw in there. OK. Perfect. All right. And actually, because my headings are all controlled by clamp and all of that, I don’t think I’m going to have to do much there at all. I want to make sure there’s no. OK, there is p-block start.

0:32:50
This is always going to have a heading to go with it as well. So let’s do. Hmm. All right, that’s an H1. Is that set to small? Margin bottom in, CH1, it’s not. OK. I’m going to put a heading to in here, because I want this to start off with a, you know, I don’t want to just go right into tax. Like I think there needs to be an H2 tag there. All right. And we’re going to say that this is, we’re going to go back to here. And we’re going to say content heading.

0:33:30
And we are going to throw that. So condition snippet. Yeah, I can just go there. All right, so we’re going to hit update. And we’re going to go to conditions. We’re going to edit this condition. And we should see a new content heading. I don’t know what these are going to say yet. OK, let’s talk about ADHD. We’re just going to do this as a placeholder for right now. All right. And we’re going to need to refresh the builder. I’m thinking whether I need a lead yet or not as well. I think we should do that to break up things. So I’m going to add a text box here.

0:34:13
And then this text is going to be, we’re going to say, text, Excel. Yeah, that looks good. And I’m actually going to put a margin top on this. I’ve been experimenting a lot lately with margin top versus margin bottom. I’ll do a video explaining why I’m doing that. But just wanted to let you know that I am three there. Two, that might be good. We’ll see how that looks overall. All right, so that’s going to be what we’re going to call content lead. So we have content heading. And then we’re going to do, wait, not content heading. What am I thinking? Condition heading.

0:34:50
OK. And then condition lead. OK, update. And I’m going to limit that condition lead. Well, now I won’t. I won’t. It’s going to be fine. All right, condition heading, condition lead. Let’s go ahead and refresh. So we’re going to refresh the builder. We’re going to be able to insert those. So let’s think about what a lead might be. Probably right here, something like this. So this is what I’m thinking. If I can go back to my, where’s my condition?

0:35:28
OK. So I refresh. And I’m going to see a lead box now. I actually want to, I never saved, I guess, condition heading. Let’s talk about ADHD. And then condition lead. I’m going to paste this in. I’m going to hit update. But what I actually want to do is change that to a text area kind of thing. And we’ll say the rose is going to be two. Just to kind of visually show them, hey, this is a little bit longer content. But at the same time, don’t get crazy. It’s probably going to delete my text.

0:36:01
Nope, it didn’t. All right, good. All right, perfect. So we’ve got a condition heading and a condition lead now. And I believe those, the lead might not be available to us because of when I refreshed. Nope, it is. All right, so condition heading. Let’s talk about ADHD. Perfect. And then double click this, insert data, condition lead. See that? So now we have, we’re kind of breaking things up visually. So now we have a heading to begin our content. We also have a larger lead paragraph that, and that’s a term from journalism, if you’re not familiar with it.

0:36:42
It’s like the intro to an article or something. And then we have our main body content that’s going to go down here. All right, so let’s just take a look at what all of this looks like on the front end. So block condition, permalink, great. Let’s take a look. All right, you can see the slug up here, too, is conditions slash ADHD. So that’s perfect right off the bat. All right, let’s talk about ADHD. Yeah, seeing now, it’s much more visual now, all right? And then it goes right in down, we’re getting there. It’s coming along very nicely. Swimmingly, as they might say, in Europe or something.

0:37:17
I don’t know where they say that. All right, let’s do a call to action block. All right, so we’re going to stretch, put a stretch class on here. That’s going to take this sidebar and stretch it all the way to the bottom so that it’s, this creates a column that my CTA can slide up and down in, because remember, it’s going to be sticky, right? Let’s go to the homepage. And let’s see if there’s anything I can steal or borrow for this CTA. It doesn’t look like there is. These are called Trigger CTA Models, Service Cards. OK, interesting called it Service Card. Shouldn’t have done that probably.

0:37:55
I probably should have used a generic, more generic name, because I’m going to use these exact cards for conditions. But it ain’t going to be a service, right? It’ll be something else. So yeah, all right, we’ll take care of that in a minute. I’m probably just going to take Service Card, make it Condition Card. At some point in the future, maybe you want to globally change those things. And not have them all look the same. So I think giving them unique names in a way is good. What I’ll actually do is just call it Condition Card, but won’t style anything. I’ll just leave all the styles attached to Service Card. Maybe.

0:38:32
I don’t know. That’s a really accomplished goal either, does it? OK, I’m done talking. Let’s go ahead and build something. So we’re going to do a diff. And this is going to be called a Side CTA card. OK, a Side CTA card. Yeah, that’s good. Good enough. All right, let’s do 100% width on this. All right, in my Figma, it’s black. But you see, that’s just because there’s no design. That’s just how the wireframe is. So we kind of need to make the decision here. We’re going to make this a green CTA.

0:39:07
Or are we going to use? Because they do have a dark background like this. They have a blue that we can use. They have a bright blue that we can use. They have this muted color. I’m going to rock and roll, I think, with this dark one. Because I think that provides enough contrast. So we’ll do that. We’ll do borders on this. It’s going to be 0.25M. We’re going to go to Resources and Fluid Responsive Calculator. OK, we’re just going to put together some. This is going to be like 3. And let’s do like 2.6 and 4.4.

0:39:51
We’ll just see what that does. All right, so we’re going to grab this. Oh, I don’t need font size. I just need the clamp. OK, let’s go back. We’re going to go to Spacing, None, and then Apply All. And then we’re going to put a heading in here. And this is going to be an H3 heading. And we’re also going to make sure that on the aside card CTA, typography, everything needs to be very light. Let’s go with that one. This is an H3. Let me see what this H3 does. OK, that doesn’t do anything. All right, so I do want this to be a lighter.

0:40:26
I don’t want it to be so bold. So we’re going to do a side CTA card double underscore heading. And font weight, we’re just going to change that to 500. Perfect. And I don’t know if I wanted that big yet. We’ll see in a minute. What do I want to say? It’s the question. OK, let’s go back here. Get online care for the treatment and management of, will remove high blood pressure, and we can just insert that. So that’s going to be condition name. Get online care for the, oh, look at that. OK?

0:41:04
Remember the class we made? Well, I don’t even remember what it was called. Span something, span in line. Boom. Hey, it’s fine. That is the true definition of utility class. It’s like, let’s not use utility classes for everything. Let’s use them for actual utility purposes. All right, so I don’t want it this big. I’m going to go to style sheets. No, I’m going to go to settings. And I’m going to go to global. And I’m going to go to headings. And I’m going to steal the H4 font size and slap it on this heading.

0:41:41
So I’m going to go to typography, none paced. There we go. Now I’m going to go text, perfect. And I’m going to also throw a button in there. So this button can be the main button. But we’ll also do a side CTA card, double underscore button, just so that has a unique identifier, a side CTA card, double underscore text. And I’m going to actually grab the text small, unlock the selector styles, grab that, lock the selector styles, and go to side card text, typography, none, throw that on there, perfect. OK. And then because this is this, I’m just going to do owl, double dash s.

0:42:36
OK. That gives a decent spacing. I’m going to put a little extra spacing on the bottom of this. Oh, margin bottom, m. OK. That was a margin top class, I threw on there. All right. And then what’s that supposed to say? Just learn more. OK. And cool. It could also say book an appointment. Let’s do that for right now. I think it’s better than learn more.

0:43:05
All right. And then let’s grab the text that I had. And let’s remove high blood pressure. And let’s insert advanced custom fields condition name, insert. And we’re probably going to have to put our little snippet on there. OK. Span inline, perfect. And then what we can also do is we can bold that so that it stands out. And this is also going to help with SEO as well. OK. Get online care for the treatment and management of attention. I don’t like how this is. It feels a little squished to me, right?

0:43:51
Like we get a 1.5 in there maybe. Yeah. I like that better. I don’t think that owl spacing is quite enough. That’s that’s too much. All right. Let’s resort to. Oh, we don’t want. Why do I keep doing that? Margin, bottom. I’m not used to having top classes. All right. That’s good. And then I’m going to change this one to an L. There we go. That’s much better.

0:44:24
OK. Now I should have a sticky class already made. So let’s make sure I’m choosing the right div here. Oh, well, definitely not there. All these names need to be redone. These came over from my copy paste job. So this is going to be conditions. This is going to be main. Don’t do that. Rename. Main. And then this is our aside. Get a little laggy here. All right. And then this is going to be our content.

0:44:59
Rename. Perfect. All right. So here’s our aside. We need to grab our div. And I’ll name this while I’m here. Hopefully I didn’t hit the trash can. This will be CTA. And then I’m going to do sticky. I already have a tutorial on this. So if you don’t know what this is doing, watch my sticky tutorial. All right. Let’s refresh. All right.

0:45:25
So I’ve got my header, my hero area here. I’ve got our main content. I’ve got a sticky CTA. Everything’s working nice. And then we get down right into here to our other conditions. All right. Now, what we can do here is just take that padding top away. And that’s going to pull this up so it’s a little bit closer there. I think that’s like perfect. Yeah. That’s great. All right. Let’s go to our homepage and grab. Here’s our reviews.

0:45:59
We definitely need those to be in here. So I’m going to paste the reviews. And then I’m going to paste. We’re not going to have FAQs for conditions yet. We might do that in the future, though. That’s going to complicate things even more. I’m going to grab this footer, CTA, and I’m going to pop that in. OK. I don’t like how this is dark on dark. Like dark on dark on dark. So we’re going to have to figure that out. But yeah, we’re going to be a good framework for now. We’ll address that later. And I always come back and I’m going to tweak this stuff later.

0:46:40
And this is going to be finished in this one tutorial. But I just wanted to give you guys a glimpse of building something real for a client. I actually think this gap can be a little bit larger. So we’re going to do gap XL on this. That’s better. OK. I don’t like to let the content have a little bit more breathing room there. All right. Let’s take a look at what we got. Get online care for the treatment and management of attention, attention, deficit, hyperactivity disorder. That’s all nice and sticky. That’s book an appointment.

0:47:15
Perfect. OK. This is actually a triggers a modal window. I don’t know if my modal, yeah, there it is. So let’s go ahead and I’m looking at the homepage right now. It’s Trigger CTA modal. So I’m going to go ahead and put a URL of pound sign on here. And then this is going to be Trigger CTA modal. And then get online care for ADHD. It’s also Trigger CTA modal with that on there. This needs to link to here. So this is section 31-224. That’s a great identifier, isn’t it? All right. So I’m going to rename change ID to conditions main.

0:48:01
And then learn more is going to take us to pound sign conditions dash main. Safe. All right. Let’s go ahead and refresh. So now if the person’s like hyper, yeah, that’s what I have. Let’s learn more, take some down there. And it also opens a modal window. Like that’s amazing, right? No, we don’t want that to happen. So this class, Trigger CTA modal, or modal, needs to be taken off. Safe. And go back down. OK.

0:48:33
Sorry, refresh. Come on, reload. Learn more. There we are. Look at that. So it takes us down right to our main body content. All of this looks really, I mean, it’s just really clean. Let’s tackle this section down here now. All these conditions. So I already have a repeater here, I believe. Do I? Oh my gosh. Look, because this was done on the landing page initially, when we didn’t do all the background work, it’s all done manually.

0:49:00
OK. So I’m going to leave one of these cards. I’m actually going to, whoa, don’t want to do that. I’m going to pull this card out of that div and just slap it up there for a minute. OK. And then I’m just going to get busy deleting all these things. OK. And what is this called? OK. Yeah, there’s no class on that. So that’s good to go. We can use this. Actually, we don’t need it. We don’t need it at all.

0:49:25
So we’re just going to delete that. All right. Let’s add a div. And in this div, we’re going to put a, no, no. We’re not going to put a class on it yet. We’re going to add, we’re going to do our repeater. Perfect. Excellent. OK. And on this repeater, we are going to query advanced and edit query. So we’re going to grab all posts. So we’re going to do post type. Post type, post type, post type, add value, conditions. I don’t know if that’s actually what it’s called.

0:50:09
It is what it’s called. Look at that. OK. So this is going to be conditions repeater, dash repeater, conditions dash repeater. All right. We’re going to do size and spacing. Actually, we don’t have to do anything on that. We’re just going to do columns three. Oh, yeah, we do. OK. With 100%. Maybe it’s the div that it was in. So we’ll do with 100% on this div. Yeah.

0:50:37
OK. Perfect. All right. So repeater is there. Awesome. While I’m here, I’m going to go to edit query. And we’re going to do no found rows equals true. Because I want to turn off pagination. I’m going to use my own. Where is no found rows? I can never find out if I was closer to the top. Yeah, there it is. No found rows true. Oh, killing me. OK.

0:51:09
Now we should not have pagination. Now I’m just going to grab this primary care. Yeah, here it is. This link wrapper. And let’s drop that into that div container right there. Oh, I missed. Let’s try again. I hit. There we go. OK. Cool. Let’s open that up. This is not going to be called a link wrapper. This is going to be a condition card. Oh, come on.

0:51:39
Rename. OK. You guys might not even be able to see what I’m doing here, because my video is in the way. Can we see? I don’t know. It’s at the bottom of the screen. You guys know what I’m doing. I’m changing the names on the structure panel. It’s nothing crazy. All right. So let’s go to the repeater again. We’re going to do a gap M. Perfect. We’re going to do L2. C columns, L2.

0:52:09
That’s two columns on large mobile devices. M1, one column on medium sized devices. And that should be all we need. Oh, stretch. OK. Save. All right. Let’s just refresh. We should have a repeater, and they all say the same things. All right. 1, 2, 3, 4, 5, 6, 7, 9, 10. All right. So we need to change how many things we’re querying. So I’m going to query edit query, add parameter, and then we’re going to go down to post.

0:52:42
Post, post, post, post, post, and page. Post status. My brain is not functioning super well right now. Post per page. Add value, 9. Save. There we go. And we have no pagination because we’re going to be adding our own pagination. But now I have to change these so they don’t all say the same freaking thing. All right. So we’re just going to double click this. Remember I said, we’re going to use the service card. So let’s just call this card.

0:53:22
That’s it. Just call it card because that’s really what it is. Like this is our default card. Let’s call it that. All right. So I’m going to grab, I’m going to copy all the service card styles and paste it on card. And then I’m going to remove the service card, perfect. And I also am going to remove Trigger CTA Models. These are not going to make the modal show, modal, modal. And then I am going to put a unique class on here, even though I’m not going to use it to style anything, it’s for future proofing. So these are going to be called a Conditions Card. Perfect.

0:54:02
All right. And then I hit Save. And you will see zero changes on the front end. But now I’ve effectively removed the conflict with the styling in our services card. I think it’s what it was called or something like that. All right. So I’ve got Conditions Card in Card. That’s all good to go. I’m going to double click this little heading. And we’re going to insert data. And this is going to be the name of the condition. Or yeah, let’s do the name of the condition. That’s going to be much easier. All right.

0:54:30
So Condition Name Insert. And give it to me. Give it to me. No data for the field. Conditions. It should. Let’s see. You know what? I might have to hold on. Where’s my repeater? All right. I’ve got my repeater query, Vance, Edit Query. So Conditions should be all good. Let me just double check the front end here. OK.

0:55:06
It’s definitely not working. I’m pretty sure if we put the title for sure, we’re going to get it. OK. I’m going to have to look into that a little bit more. Because it’s probably not. If it’s not showing that custom field, it’s also probably not going to show this lead either. Condition, lead, or snippet. Now, I would want the snippet there. Yeah. It’s not going to behave. All right. So we’re going to do some troubleshooting on that. I’m going to just grab Dart Lorm still open. Yeah.

0:55:46
We’re just going to pop this in here for now. Let’s see how long I want this to be, too. Because we’re going to have to limit the length of that. So this is going to be take off this last two words. And then let’s go to Character Counter. That is 110 characters. So we’re going to limit those cards to 110 characters-ish. All right. And then instead of booking appointment, this is going to say, and this is Service Card Length. See that? So we’re going to change all these. So this text is not going to be Service Card Length. It’s going to be Conditions Card Length. Or we can actually do Card Length like that.

0:56:38
So Copy, Paste, Delete. This is going to be Card Text, Service Card Text, Copy, and a Card Text, Delete. And this is going to be Card Heading, Delete, Oxygen, Kill him, Double underscore Heading, and Copy, Paste, and Delete. OK. Save. See, anytime you run into a problem, we have an obvious problem of pulling data from those custom fields. And I want to keep moving. I don’t want to waste a bunch of time troubleshooting that real quick. I’ve got more things to do.

0:57:25
So I’m just going to keep moving along. All right. This should fire the modal. This should fire the modal. We’re all good there. All right. We do have. You can see we have all of our conditions in here. So that’s all good. Book an appointment. Yeah. We don’t want it to say book an appointment. We also, this hover effect, Card Header. Yeah. And I believe I put, if we go to our Style Sheet, yeah, here it is right here.

0:58:03
So I’ll do, I’m just going to call this Service Cards. All right. So we’ll do, let’s call this one Cards. And then if this is Card Hover, then Card Link text goes to White. All right. Let’s see if that works. Look at that. So now, because what we have to do, because the background color of the card is taking the color of the link, we have to flip flop the link color to White. That’s what that little code snippet is doing there. All right. So we basically have, as long as we can change the text here, let’s go back.

0:58:43
Watch it. It’s probably going to move something around. Oh. Oh. OK. OK. That’s time it didn’t. It didn’t turn anything up that time. All right. Sign us some factions. This is going to be learn more. And then we need to link this. So if we look in our structure panel at our, that’s just text. Does it have a link wrapper?

0:59:06
That doesn’t have a link wrapper. Oh, it’s the entire card is a link wrapper. So we’re just going to set the URL on this card. No, we’re not going to set the URL. We’re going to click data. And we’re going to click permalink. And now there’s no template yet for conditions. But you’ll see that if I click the card now, I’m going to be taken to condition sinus infection. Oh, actually, I’m sorry. There is a template for conditions. That’s the template I’m actually creating right now. But what I meant to say is, like, sinus infection has no content. So you’re just going to see a blank template.

0:59:40
But we are getting everything to the proper area. If I go back, we click on upper respiratory. We’re going to see in the URL. You get to upper respiratory infection condition. Cool. And you see what I’ve created here with the design is an endless loop where you are reading one condition. You can see more conditions. And I click on a condition. I read about it. And then I can see more conditions. Like I never have to go back to the navigation. Like from a UX standpoint, I feel like this is really, really super useful. And along with what I’m doing here, I actually think I’m going to remove this or put this under here.

1:00:14
Let’s do that now. So if I put this under here and put a little margin bottom on here, there’s my margin top again. All right, so margin bottom, M, I’m going to put a search box over here. I’m going to let people Ajax search this so they can type in the name of a condition and it’ll auto-populate the card. And then they can click on it and go straight to it. That’s, I think, going to be super, super useful for visitors. All right, so we’ll just keep that in mind as an idea. So to kind of finish off this tutorial, I’m going to take a break right now. But to finish off this tutorial, we need to add the Ajax load more. We need to add the search functionality.

1:01:01
And we need to fix the background of the hero area, get our little triangles to show up in there, figure out why that’s not working. And then we need to figure out why these are not injecting the content from those custom fields properly. So besides, and then we have to figure out if we’re, I may insert something between these two sections. In fact, let’s do that real quick from the homepage. We may be like a how it works. Let’s deal with how it works section. So if I go to conditions, they read reviews, they see how it works, and then they get an offer. I think that’s a pretty good way to do this.

1:01:56
It’s almost like a mini sales page, right? Except the main body content is all unique to the thing that they’re looking at. And so is the hero. But like everything else is like, now let’s sell them. Like we talked about the condition that they have. Let’s sell them on a membership. So let’s show them all the reviews from happy customers. Let’s tell them how the process works. Let’s give them an offer. I think it’s going to work really well. So let’s refresh and see what we’ve got. And that breaks up the dark. It kind of goes dark, light dark. And then these sections obviously are very light and minimal.

1:02:32
I think we’re looking pretty good here. So I’m going to take a break. We’re going to come back, and we’re going to do Ajax load more search functionality, and we’re going to figure out these little custom field issues here. Be back shortly. All right, guys. Back from my break got a nice sip of water and had a little bit of time to think my kids got my, say, I can’t even talk. My kids got their tonsils out last night. So running on a little bit of low sleep. Couple things that I fixed during the break just because I was being a dumbass. I didn’t actually have to change anything.

1:03:08
Remember the BG Triangles class that we put on here? That was a dummy class. It was created at some point. It never actually got used. There was only a blue background styling. There wasn’t any of the CSS attached to it to create the animated triangles. That was just a different background class. So I swapped out with the proper background class, and now that’s working. So the hero section looks the way that it’s supposed to look now. And as far as the custom fields on these cards, as being a dumbass there too, I did it right first time. Where I just injected the custom fields, the condition name, the condition snippet text, or whatever it was called.

1:03:44
Just all those cards are blank because the content’s blank. Like we never filled in any content for any of those conditions. We only did ADHD. And because of my luck, ADHD is the very last card to be queried in this repeater, the way that it’s currently set up. So you don’t see it. And it didn’t trigger in my mind. Like if I had seen that the ADHD one was working, it would have instantly triggered in my mind. Oh, we’re not supposed to see anything on the other cards because there’s no content there. But I wasn’t seeing any content on any of them. And I forgot that there’s actually more than nine in there. So I wasn’t seeing the ADHD one, but it does in fact work.

1:04:21
So I’ve gone in and just put back what we originally had because that is the proper way to do it and that works. So I fixed that problem. This problem is fixed. It didn’t really fix them just saying, there was nothing wrong in the first place. It was just me being dumb. Then what I did is I went in and just made these three things, global reusable blocks. Just because like take this section, for example, it’s the process. Well, the process is the process. If the process changes in one place, it needs to be changed everywhere. And I’m starting to use these sections in multiple places.

1:04:58
So it’s a good idea. Let’s just create a global reusable block out of it and pop that in instead of having these be independent instances of these sections that we have to go update individually, right? So basically what we’re ready to do now to just kind of finish this off is add the search capability to this grid and add the Ajax load more capability to this grid. And we’re gonna do that with WP grid builder, which is 100% hands down the best way to do this and 100% hands down worth the cost of the plugin. And I am not an affiliate for WP grid builder. I’m just telling you that because it’s facts. All right, so what I’m gonna do is go to dashboard WP grid builder facets.

1:05:47
There’s a bunch of pre-done facets in here, but I like to create my own whenever I’m doing something related to a custom post type. And we’re gonna call this conditions search like that. And can search conditions is the facet title, which we’re probably end up not, we’re not gonna use that. Under behavior, I’m gonna do filter, because I want the search box to filter the repeater results. And I’m gonna change this to search field. And then you can also do an auto complete field here as well, but I’m just gonna do a general search field. And then I’ll do search for a condition as the placeholder text. We’re gonna use the WordPress search engine.

1:06:29
Search number is gonna be 150. Basically that’s like how many post types do you have? Or how many posts in this post that do you have that we’re gonna be filtering by or searching by? The larger the number, the more resources it’s gonna take up. And so if you’re gonna have a custom post type with like 20 posts in it, just set it to 20. And it’ll search all 20 and it’ll be nice and zippy and fast. But if you do have one that with larger, then set it to a larger number. Search relevancy I’ve turned on and instant search, I’m just gonna leave that offer right now. But we’ll take a look at that in a minute and see if that will work. So I’m gonna hit save changes.

1:07:06
And I’m gonna hit re-index. Now you’re wondering like Kevin, why you don’t get to choose what post type you’re searching within. Well the repeater already does that. The repeater is already filtering and this may influence this search number by the way. So let’s set this to 250. Cause I’m not really 100% sure how it works. If it goes through all of the posts in the system and pages, or if it takes what the repeater is querying and just searches within that. All fairness, I have no idea. But just to be safe, we’ll do 250. All right, I’m gonna hit save changes and that’s it. So let’s go back to naming here and grab this little short code.

1:07:47
And we’re gonna go to the page. Here we are. And here’s my little box and WP. I can just type in facet I believe. So I don’t even need to grab the short code because WP Grid Builder has a native oxygen integration. So I can just add a little widget in oxygen. It asks me which facet I’m gonna do. I choose Condition Search. And then it’s gonna say select a grid or element to filter. So I’m gonna hit the drop down and I’m going to see which one this is. Okay, it’s in here. It’s repeater 170.

1:08:21
All right, so I’m gonna go back to our facet. And I’m gonna say we’re doing repeater 170. And I’m gonna hit save. And we’re gonna see what we have on the front end here. All right, so there you go. Search conditions. All right, so let’s do ADHD. It’s I’m laughing because it’s like so easy, right? Like how easy was that? It’s just like so easy. That’s why I say WP Grid Builder is worth its weight and gold, right? Like, you know how much you would have to finagle and Jimmy and all this other nonsense to get other facet plugins to do like what we just did.

1:09:05
The only thing is I don’t know if I can hide the title. Let’s see, inspect. What is this here? So W, okay, so hmm. Okay, I’ll just leave it for now because it’s kind of like the way I want it anyway. Like literally I just want to have people search conditions. I do think I want a bigger gap though. So that’s gap L. Let’s do a gap XL. And then let’s see how that looks. Save. Scroll down. That’s much better. I think we might even be able to get away with.

1:09:51
All right, gap XL. Is there a gap XXL? There is. I don’t know if it’s much bigger than that already was, but we shall see. Okay, perfect. And then I just need to center that. So we’re going to do left center, actually center center. Maybe see how that works. Yeah, I don’t, I think I want that to be left aligned. Come on, save. Yeah, that’s much better. Okay. Yeah, I like that. We also see we have a mobile issue here.

1:10:40
In our main section, totally forgot our mobile. Oh, we also have an image that just shows up on mobile. That was from my hero. I have a video on desktop and I flip up it to an image on mobile. So we’ll go to our hero section and delete that image. That’s obviously not supposed to be there. And then we’ll quickly tackle this. So what I want to see is on large devices. Oh, like that’s so close, cutting it so close. I think this is getting stretched way too much. I’m going to go L1. And here is. Okay. Oh, dear. Oxygen’s changing stuff on me by default.

1:11:23
Okay, so I’m just grabbing the wrapper and we’re going to do vertical left. Just to make sure that stuff. Oh, and I actually don’t want to do that there. We’re going to do that on the desktop version. So it affects all sizes. Now when I go down here, it’s all left aligned, like it’s supposed to be. And then we just see the call to action below. And then this is obviously all screwed up. So we’re going to do a side CTA card vertical left. And why aren’t these behaving the way they’re supposed to? Typography left. Text typography left. Okay.

1:12:03
And then let’s go back and see what this looks like on desktop. Book an appointment. Okay, that’s fine there. Let’s go back and look at it here. That’s fine. I think it’s fine. Okay. That looks good the way that it is. All right, so now everything is nice and mobile responsive. This center is nicely. That got pulled from the homepage. All right, I think we’re good. There. All right, so we need to add our Ajax load more. So let’s go back to facets.

1:12:37
And let’s do all facets. Create a facet. Conditions load more. Load more behavior. And we are going to hit load as the action. Load more as the loading type. Number to load more is nine. So it’s going to load nine more. It’s already showing nine. It’s going to load nine more when we click. Not when we scroll, but when we click. Show remaining results. Yeah, let’s do that. It’s going to show it inside the button, I believe. See more conditions.

1:13:17
And then loading conditions. Okay, safe. That’s it. All right, so now what we do is we, save. Don’t just go refreshing. Now let’s refresh the builder. And all literally all we have to do is drop the facet widget in there and we’re going to have load more functionality. Like it’s just WP grid builder. One of the best plugins I have ever purchased and used. Bottom line hands down. It’s just that the user experience of WP grid builder. And the amount of functionality that it adds to a website is just phenomenal. Because it does a lot more than these facets, by the way.

1:13:59
But there’s the facet is the facets uses is just awesome off the charts. Good. All right, so I’m going to add facet and select the facet conditions. Load more. Select the grid 170. Title. Hide title. Button is going to be, I think I already have a load more. Now sometimes I make a load more. All right, so we’re going to do, yeah, we’ll just do load more. Button or we’ll do a BTN just to keep with everything else. Load more. Okay. And then we’re going to do button colors is going to be actually I wonder if I can just. Put my button.

1:14:46
Oh, yeah, my button small and my button main class on there. Let’s just see what that does. And then obviously for this facet, we want to go sizing margin top is going to be REM. Let’s do like four save. See how we look. It’s remembering the search because of the URL that I put up. And that’s clearly not working. All right, let’s see what’s wrong here. So button main take that off. Button asked take that off. Button load more take that off. Let’s just let’s go to our default here. Let’s see what we got going on. Take that out. There we go.

1:15:33
So I think it’s because of the yeah, let’s go to that now. Now I think I can get. Yeah, all right. So now we do button main button small button load more. Okay, safe. Refresh. Okay, that’s putting it in like that’s putting all those styles on like the wrapper. Can’t do that then. All right, so we’re going to take off button main and button small and button load more. And then we’re going to have to use the button area right here. So text hover color is going to be this white text disabled color background color is going to be this green background color hover is going to be that green background disabled color. Disabled color is going to be that color disabled text color is going to be that color border hover color border disabled hopefully borders don’t apply. Look at that right out of the gate my friends. All right, borders. Yeah, border radius 0.25.

1:16:49
Yeah, none. Okay, I just want to make sure that’s all turned off. Box shadow we don’t need. Size and spacing alignment center. Yep, that’s what I want. Typography font family font size. Just put a text. Small on here and then I’m just stealing this real quick this clamp function. Move this go to button more typography font size clamp didn’t change anything. We’ll see. All right. That’s good. I like that. Okay, I don’t know that it took my let’s do this. I’m going to do this.

1:17:51
Yeah, that’s already looks like it’s already set. Now it’s ignoring it. Yeah, it’s definitely ignoring it. Yeah, okay. All right, so we’re going to have to do that on our own. Inspect. Title for the time. Yeah, yeah, yeah, yeah, yeah, yeah. Okay. Font font font style. I’m not seeing a font family here. Maybe I’m just missing it. It’s crossed out. That one’s being overridden. I don’t see what’s overriding it.

1:19:02
It should be set to inherit by default. It’s right there. Yeah, I don’t know. Okay, that’s going to need to be troubleshooted. But let’s see if we have functionality. There we go. And it only adds, you know, there wasn’t nine more to load. So it loaded the rest and then the button disappears. The only thing I’m worried about is they search for a condition. Okay, we don’t have the button. But if we start, wow, okay, great. We start with a page. The way that it would normally load. And then they search. Okay, it does not give them a button.

1:19:59
That’s good. I wonder if we need to do a reset here. Because a lot of people aren’t going to see this little x that you can click to get rid of it. I’ll think about that. You can do a reset button. There’s a facet for that. But let’s say we did what’s one of the other conditions. So if we do injury or something. It’s never going to be more than one, probably. There isn’t any overlap between any of the conditions. I don’t think so. Sinus cold injury allergies pink eye. There is infection. So if there’s two results. Okay, it’s there’s actually three.

1:20:42
It’s smart enough to know that it’s already loaded the max. There isn’t there doesn’t need to be anything else to load. So it doesn’t show the load more button. It doesn’t make sure that that didn’t show up. And in conflict somehow with the search functionality. And it doesn’t. So that’s fantastic. So we have a jacks load more. We have the ability to search and filter conditions. Let’s turn on that real time. I want to see how that works. So we’re going to go to grid builder all facets. Condition search. We’re going to edit that facet behavior. Instant search save.

1:21:15
We need to re-index the facet. Reload the ADHD page. There we are. So now if I just type ADHD. Look at that. I didn’t even hit enter. It’s just doing it automatically. Same thing if I if I remove that and type infection. It just automatically shows me results. They don’t even have to hit enter. So that’s fantastic. Let’s go ahead and fill out one more condition. Just so you can see how easy this makes things. So let’s go back to conditions. And let’s go to sinus infection.

1:21:55
And so we’re going to grab. Where’s ADHD edit condition. I’m going to grab all of this exactly the same. We’re going to paste this in here. But then here I’m going to do sinus infection. See short name. So we don’t need any logic. No, we can’t do that. That’s what we need to do. We need to add the logic. Okay. So condition short name. There is not one. So the condition snippet. I’m going to go to sinus infection.

1:22:27
This right here. Okay. A sinus infection is a condition in which the cavities run the nasal passages become inflamed. A condition heading. Let’s talk about sinus infections. Condition lead. Again, this is all going to be this disclaimer. I don’t steal content. This is all going to be unique content. I’m just putting this in here for placeholders update. Okay. So now let’s let’s view this. First of all, let’s view our grid. We want to clear the search term.

1:23:10
So you see sinus infection now has content. We click on it. It’s all filled out. Obviously we have this to contend with. So that’s all good. Signs infections. Get online care treatment of sinus infection. Ah, yeah. So here’s another thing where you know we have to figure out the context. This used to say ADHD which made sense. But now this really needs to be plural. Okay. We’re going to need to think about logic there to fix that situation.

1:23:46
Let’s talk about sinus infections. Oh, and I clearly stole this from the wrong page. Where’s my sinus infection page that I looked up. Okay. Let’s just open this. Okay. All right. We’re going to grab that at a condition. That’s that. Okay. Let’s stop getting confused here. Sinus infection at a condition. Okay. Update. Now let’s take a look at that.

1:24:24
Okay. So we have the proper lead there. Our board certified US doctor is right for treatment and management for sinus infection. Okay. All right. My kids are starting to yell. So that’s cool too. All right. Let’s handle some logic here. So what we need to do. Whoo. Man. All right. So I’m going to highlight this.

1:24:51
And I’m going to hit the span tag at the top. And that’s going to create a span for this. And I’m going to grab this one. And whoops. And actually inside of that span. I want the space to be inside of that span. Oh, how are we going to do this? This is going to cause problems, I think. Let’s look at the structure. There’s, okay. So that’s a span and that’s a span. These things need to be these quotes. The problems I can’t really edit within the span. I’m going to delete this. I should see a heading with one span now.

1:25:47
Okay. So now I’m going to put the next one in. I’m going to paste it. Is that going to give me the ability? The question is, okay. Yeah, I can’t, I don’t think I can. If I space add this, this, this. I don’t think that’s going to get wrapped in the other span. Let’s check. It doesn’t, it doesn’t. It puts it outside the span. Okay. I want to select all of this, including the space, and hit the span tag to manually create a span. And notice it takes away my space.

1:26:34
So that’s okay. I have it structurally the way I want to. Where that’s a span and this is a span. What I’m going to do is I’m going to put margin on the left of this. And then it’s getting rid of my parentheses too. I think I have an idea. What if I, geez, geez Louise, stop doing this. Okay. I put a space inside, even though I can’t see a space inside. All right. I’m determined to fix this. Oh my gosh, oxygen. Include prepend and appendix if configured. Bear with me.

1:27:51
Bear with me, friends. Custom fields, conditions, short name. The problem is, see, now I got it working. It’s appending and prepending the, what I want here. But now that’s going to be, oh no, it’s not. That’s perfect. I can just choose to not, not append and prepend down here. This is going to work. This is going to work. Okay. We’re good. We’re good. Okay. I’m thinking. I’m thinking.

1:28:44
There’s a lot of thinking involved in this. Okay. So now we do conditional logic set conditions. We’re showing this if dynamic data, advanced custom field, short name, insert is not blank. We’re showing that if that’s not blank. Save. Now when I go to sinus infection, good. We don’t see it. Right? We don’t see the short name. Perfect. Okay. So that fixes that. Get online care for the management treatment of sinus infection.

1:29:23
So I was thinking about how to, uh, sinus infection. If plural, think about a rule. Like if this is plural, we show the plural version. If it’s singular, we show the singular version. God, there’s got to be an easier way to do that, right? Um. Sinus. I’m thinking. I’m thinking. I’m thinking. I mean, that’s like the, that’s, that’s probably what I would start with. I just, I just, it doesn’t feel like a super elegant way to do it. It seems like I’m over complicating.

1:30:05
Condition name. All right. What if I, I’m going to start with the treatment and management of. Hmm. Okay. Okay. That, this is how, no, this is how we do it. This is how we do it. Condition name. Duplicate. Condition name. Plural. Okay. Okay. And then I’ll just say instructions.

1:30:47
If this is a condition with a pluralized. Version. Enter the plural. Version here. Okay. Condition name plural. Oh, no, no, no, this isn’t going to work because I don’t get to choose, I don’t get to choose which one shows up here. I do if I, if I add the logic. Okay. Yeah. I don’t. Hmm. Condition name plural. Treatment of and then I put that in there.

1:31:27
Gosh, this is going to really complicate things. It’s going to really complicate things. All right. I know one other way I can do this. Tension. Defensive hyperactivity disorder. Let me try one other thing. Delete that. We don’t need that. Condition lead. So we’ll say CTA heading. And let’s just see if this works. And then I’m going to prepend this with this. Okay. Let’s just try this.

1:32:28
Let’s just see if this works. Update. Edit condition. Condition lead. CTA heading. Get online care for the treatment and management of. Signest Infections. Update. Now I’m going to go to the template. Save this. Refresh the template. So I’m basically, you know, within the context here, I’m showing people what this says. Where is it here? I’m showing people what the heading says so that they can complete the name correctly.

1:33:09
Right. And then if we ever want to change the rest of the body, it kind of keeps this globalized. You don’t have to type it in every time or remember what it’s supposed to say. But it allows you to customize what’s in it. And then I’ll show you how this works. Hopefully. So, and you kind of saw it up there. I can delete this. I can just insert data. And I do the CTA heading. I need to change that to condition CTA heading. And I just include prepend. And then insert. And it should just insert it all properly. Save.

1:33:43
I don’t have one for ADHD. But I do for science infection. There you go. Get online care for the treatment and management of science infections. And it doesn’t put a space. So I’m going to go to edit field space right there. And hit update. And I actually need to change this to condition CTA heading. And then I can refresh. Okay. It’s not putting the space. So, um, HTML space. Think if I do it this way, it will. So we just grab this thing. Yeah, it’s called a non breaking space.

1:34:34
So we will put that here. Update. See if that works. Done. Okay. Get online care for the treatment and management of science infections. And then I’m going to provide US doctors provide affordable treatment and management for. So I’m going to grab that. All right. So this is going to be the CTA. Add field conditions. CTA text prepend. And then. Okay. Oh, wow.

1:35:13
It escaped it. All right. So, I’m going to use that non breaking. That’s actually not good that it’s escaping it. Because when I resave it very well could get deleted. Let’s think. Think, think, think, think, think. Okay. Um. And then, what it does. I’m always trying to think like more elegant ways to. And like just future proofing like I don’t want this to break at some point. Okay. Conditions edit. Sinus infection at a condition.

1:36:02
Refresh. For. Sinus infections. Okay. Update. Actually don’t need to. Actually, I mean, these are always going to be the same. So I’m letting you guys see the thought process here. Condition CTA heading. Condition CTA. Remove this. Edit this. Condition CTA. Condition CTA. Condition name.

1:36:55
Yeah. Condition wording. I don’t even know if this is the most elegant way to do it. But I’ll show you what I’m. I’ll show you what I’m thinking. So get online care for the treatment and management of this is going to fix this escaping problem. We’re going to put this back in here. Insert data advanced custom field condition. CTA heading. Okay. I’m going to have to resave the template. This is CTA text. Yeah. Yeah. Okay.

1:37:43
You’ll see, you’ll see in just a second, I think this is going to work. This is just going to serve as an example text. That’s all we’re doing. So let me do edit condition, refresh. Sign us infections update. And then in my template, I’m going to refresh my template and see who’s calling me. Okay. Nobody important. All right. So now what we’re going to do is just insert this custom field. Called condition CTA condition wording. That’s a little mouthy. And we’re going to insert that here as well. And the only difference is now we’re just we’re not appending and we’re not. Pre-pending and appending or just.

1:38:37
Making that the CTA wording. Save. Okay. And then this is going to be. Enter the pluralized version. Enter a version of the condition that makes sense. When completing the sentence. I’ll show you how this works from a logic standpoint. Save. There’s nothing there for PTSD. But if I refresh now it says get online care for the treatment of sinus infections. Our board certified US doctors provide affordable treatment and management for sinus infections. And then we will also inside the template. Grab this. And hit.

1:39:30
Bold. And we’ll grab this. And we’ll hit bold. And save. Check that out. Perfect. Both bolded. All right. That helps with SEO a bit as well. Now when we look at something like ADHD. You’re going to hit edit condition. And now you can just put in ADHD. Get online care of the treatment of ADHD or I can type in attention deficit and hyperactivity disorder. But I’m just going to do ADHD. So obviously that single singular the other is plural.

1:40:16
But it all works because I’m just saying, hey complete this sentence in a way that makes sense. And that’s what we’re going to inject in our, let me go to it here. ADHD. Into our CTA. So now the CTA makes sense. All right. And I’m going to change that actually to the full name. Update. Boom. Boom. So you see fixes are problem. And we don’t need any logic or anything like that. I think that’s the best, the best way to do that from a UX standpoint. Okay. That’s going to be it for this tutorial.

1:40:54
You saw me build the template. You saw me troubleshoot a bunch of stuff. You saw me add facets. You saw, like, you saw me do a lot of things. That’s it for today. Oh, hold on. One thing doesn’t look like this is stretching to fill. Let’s go take a look at that. I think I have a stretch class on there. I do. So what we’re going to have to do is go in and check out our parent div here. Size and spacing. High to 100%. That might do the trick. Check that out here.

1:41:34
It doesn’t. Okay. Great. Let’s put a stretch class on this as well. How does that does the trick? Yeah. That did it. Okay. We may not need that high to 100%. Let me just double check removing that. Yep. We don’t. Okay. So now we’re good to go. All right.

1:42:05
That is the official end of this tutorial. Hope you guys got a lot out of that. If you have any questions, as always, drop comments below. You know, I to also tell me what you think about these tutorials. Honestly, because there’s just a lot of like down time, I feel like. I’m going to try to edit it a little bit and tighten it up. But you know, there’s thinking. There’s like a click on this. Click on that. We think a little bit more. Like it just feels slower than like a traditional tutorial. But maybe it’s super helpful for you guys to see that kind of stuff. So I think that’s what I’m going to do. I’m going to do a little bit more of this tutorial. But maybe it’s super helpful for you guys to see that kind of stuff.

1:42:41
So if you like this tutorial, let me know. If you are this type of tutorial, I should say, let me know. I’ll do more of them. If you don’t really like, if you like the tighter focus, just tell me. How to do something. Show me how to do something in one quick little thing. And I want to be done with it. You know, I’ll prioritize those. Whatever you guys want.