Edward Addo - F2F

Chris LaFay: It. It's. Hello, Edward. How are you doing, man?

Edward Addo: Hey, big man. Chris? Yeah, I'm doing great.

Chris LaFay: Good.

Edward Addo: I am doing good actually. I apologize for the non camera. I'm at the hospital where my wife is. She's fine. She's fine. Don't worry, don't worry about it. No, no, no, no. Do not worry, don't worry.

Chris LaFay: Are you sure?

Edward Addo: Yeah, I'm sure. I'm 100 positive. We're just here for a checkup. The time zones kind of messed me up just a bit. I assumed it was one hour after like 7pm but I realized that I was. No, it's just a kickoff kind of. So. Yeah, yeah, there's no. There's not too much to worry about. I could shame. I could show my camera but it wouldn't be, you know, optimal. Like I can see you have like, you can. You use like a great camera with your background and your workspace. I, I don't have that currently. So.

Chris LaFay: That's. That is okay. Chris Dubois told me that he bought you a nice. He bought you a nice microphone back in the day when he was running Lean Labs because he was like, I need. I need you to have a good microphone. And so, no, I iota. I'm the one selling the business, so I have to look somewhat decent.

Edward Addo: All right. Right. There's no way Chris actually gave out that information. Wow.

Chris LaFay: I. Chris. I've known Chris for about a year and a half. He is a. He is a fantastic person.

Edward Addo: Yeah.

Chris LaFay: Been a good friend, a good mentor, good advisor, the whole nine yards, needless to say.

Edward Addo: Yeah.

Chris LaFay: Well, I'm glad that your wife is doing okay because I was about to be like, we're hanging up this call now and you're gonna go do that because that's not. If you're in the waiting room and all that kind of fun stuff, just chilling, then that's. That's fine.

Edward Addo: Yeah.

Chris LaFay: Family. Family trumps business all the time.

Edward Addo: Yes.

Chris LaFay: Well, awesome. So given that you're in a non optimal place to. To talk, I'll. I'm just gonna dive like straight in if you're okay with that. Yeah, yeah, no problem. So talk to me a little bit about your like, let's talk about WordPress development first. Tell me about your preferences, your styles, your structures, etc, etc.

Edward Addo: Okay.

Chris LaFay: Oh, I should. I should wait. I time. I should actually give you a little bit of background. I apologize. I. I have two versions of talking. I either have the one that goes on diatribes and follows long winded conversations in very different directions that have nothing to do with anything or I dive straight into the details. There's very little middle ground with me. So just a heads up on that.

Edward Addo: No, no problem.

Chris LaFay: So my name is Chris. I run a company called Classic City Consulting and I have been doing web design and development since like I was 10 years old. So this is all I've ever known. We most of the stuff we do is WordPress, but that's shifting some. We're actually getting more into Shopify. We landed a couple of clients over the last year or two and those clients have allowed us to find other clients within Shopify. So I think over the next year or two, Shopify and WordPress for us might kind of even out where right now it's kind of like 80, 20, thinking about a year or two we might be a little bit closer to 5050 and right now.

Edward Addo: Hey,.

Chris LaFay: Go get it. Sorry, my wife just got home and she was trying to get the dog. And so right now we basically are hitting a little bit of a wall with development. I have gone back into kind of coding some more myself, which was not the intention, but by doing so I've had a chance to kind of look back at all the processes that we had or the process that we did not have. And so I've gone over the last couple months and created, you know, starter themes within WordPress. Claude AI like starting points for projects to kind of get that kickstart kind of done a lot faster. Like building out the basics of like block libraries within WordPress a little bit. Some of it being automated, some of it being manual still, but really trying to figure out laying the foundation to make the development process a lot more streamlined. And so I've got done a lot of good work on that now. And now that I've done that, I need to take part off plate and be like, God bless, have fun. I need to not do that. So yeah, I can tell you all of the different structures I've created. I don't mind going into that. So that's a little bit about my background. What about.

Edward Addo: Right, okay. I am Edward Hayford, ADO based in Ghana. I was actually scouted. Okay, I won't say scouted, but I was basically employed by Chris when he was at leelabs. And in terms of dev stack, I've mainly been working with HubSpot's Hubble code for like the past four years. I am, I am much more in tune with HubSpot, like the code base theme development, web development inside of HubSpot. That's how that's, that's where I've built most of my career over the past five years inside of Lean Labs, working with, you know, clients that come in with all kinds of complex stuff that they want to do with HubSpot, not, not necessarily with the CMS, but also the CRM having to do with utilizing like the workflows, automations, you know, integrations, all that good stuff within HubSpot. HubSpot is my religion basically. WordPress is WordPress is a stack or a dev stack that I used to work with, but I haven't touched it in like 5 years, truth be told. Like Lean the foundation right now. I am a prodigal son of Red Press. I used to work with it very extensively, but after I moved over to Leelabs, working with HubSpot, HubSpot has not become the, the go to, especially from where I work, where all of our projects come in through HubSpot, like every single project. So if your stack is WordPress, I would. So I am familiar, I am familiar with WordPress, I know how it works, I am familiar with it. But it will take me just a bit more time to get it back in my graphs because I do also understand the hotspot and WordPress, especially when it comes to the CMS side of stuff having to do with themes, setting up themes, global, global assets, global. Well, in hotspots, I think it's modules.

Chris LaFay: Yeah.

Edward Addo: Partials are almost the same how, how the code works, like the templates and stuff. But I haven't worked with WordPress in a while,.

Chris LaFay: So a couple, that's my battle. Yeah. So a couple of questions for you. First off, I have never heard anybody refer to the returning, the returning to anything in development world as the prodigal son. That's fantastic. That, that, that's, that's nice. I like that. Secondly, within WordPress you were right on the cusp. If it's been about four years or so, you're right on the cusp of Gutenberg of when, of when Gutenberg released, which is now called the WP full site editor, which is a mouthful. When you were in WordPress, were you using a particular page builder or did you actually touch some of Gutenberg before you went over to Lean Labs and mostly worked on HubSpot?

Edward Addo: I used to be very basic. I used to download people's already built out themes. Right. Whether they had their, their teams inside of WordPress, I would just download those and work my way through with it using the editor that was provided. So it was very. Yeah, Very basic stuff. I didn't really at the time, I didn't at the time this five years ago. I was, yeah, I was young. I was like 18 at the time. I just used to download WordPress and just build people's websites from existing things. I wouldn't, I wasn't building my own new things. The code base I wasn't really familiar with. Yeah at the time I used to work with much more extensive code bases like React. WordPress was more so like a quick, a quick like set up. Right. I know there's a go to team that I can get from Envato or you know this team providers and just, just get it started with. So yeah, that's, that's, that's how it is. If WordPress have you, have you worked with HubSpot? This is a question.

Chris LaFay: Yeah, so we're going to try to figure out if we can talk the same language here a little bit, right? No, so I have not as a developer or a designer worked with, with HubSpot CMS. So why don't we, why don't we actually do this? Because I know, I know we were trying to get to. What if I actually showed you what have I shared my screen and by the way, Google Chrome has been giving me fits today. What if I share my screen and I'm going to actually showcase to you a, a website that we had that we're working on right now. That's basically done. But then just. And then position that against the actual code base as well too just to kind of give you a little bit of a sampling. Would that actually no problem now?

Edward Addo: Yeah, yeah, no problem at all. Yeah. So yeah, I think, I think that will help me best know the similarities. Right, right, right. Now see how WordPress has moved on inside of HubSpot. Inside of HubSpot. Even now most of our clients come into like they want to migrate off of WordPress into HubSpot. You kind of handle that kind of migration, that kind of migration work. But I'm very curious to see what you have to show me.

Chris LaFay: Consume. Consume Dev. Okay, here we go. So I'm going to share my screen and if everything crashes on me I will hop right back on. So just FYI now, don't fail me now. It worked. It worked.

Edward Addo: Okay, easy gluten break blocks.

Chris LaFay: Fantastic. Okay, so within WordPress and within the, within the full site editor and actually I want to log into the back end as well too because I, I didn't realize I wasn't logged in. Consume Dev. So the, the editing platform within WordPress is called Gutenberg. Now, it's a drag and drop page builder, and there are pros and cons with it, just like every single page builder out there. So common terminology here is that everything in WordPress is a block. That's just the default word. That's just the default word. If you have a conglomerate, like, if you have a grouping of blocks and you save those away, that's called a pattern. Then there are custom blocks. You can actually build completely custom blocks where you control the HTML code and you basically just go through and fill out a form and then content just spits out those. It uses a plugin in WordPress called Advanced Custom Fields ACF that's been around for a very long time, right. Where you can write all the HTML code and then have it pull dynamically. So, like, for example, this is a case study block. There's a section on the back end of WordPress that I. That I created called case studies. And WordPress is called a custom post type. It's a content object. That's all it is. Like, yeah, everything in WordPress is just called a post. It just has different labels attached to it. So for case studies for like an agency, you would have things like a title, a description, a client name, a project type, those types of things. So this custom block was built to loop through a filtered view of case studies, however you want to do it. So how many columns do you want to showcase? Which projects do you want to pull from? Like, here's all the list of projects here. You don't want to go back and like, retype the same information all the time. Right. So you, you. Yep, yeah, this all makes sense. Perfect.

Edward Addo: Yep, yep. Okay.

Chris LaFay: So custom blocks are very simple and straightforward because you own the HTML. And if you understand how objects work in WordPress, you can create your own objects and then write a custom block and have it pull. Like, that's. That's all. But the more nuanced piece of WordPress is. Is Gutenberg in and of itself. So, like, here, block this custom block. Like, nothing's moving around. It's. It's all there. Like, you can't drag and drop stuff within it. It's all code.

Edward Addo: Yep.

Chris LaFay: But you have stuff. Like, while we did a lot of. We did a lot of. A lot of. We did a lot of custom blocks for this guy. This one here, where this call to action and ignore the fact there's this big old white block here. You'll understand what that is in a second.

Edward Addo: Yeah, yeah.

Chris LaFay: This is just a If you look at the hierarchy over here there's a group and inside the group there's a column set. And then inside the columns you have two individual columns. One that has all the text, the other that has the image. Right. And so here you see that output and then if we were to go over here, you see that output right here.

Edward Addo: Yep.

Chris LaFay: So that's all basic CMSE stuff. Right.

Edward Addo: So. So, yep.

Chris LaFay: The reason I bring all that up and the reason I showcase that. Let's actually go look at the code now. So I'm going to actually let me close out some of this. So the way that we typically think about WordPress and we may. This is. So what you're looking at over here is a single theme.

Edward Addo: Yeah.

Chris LaFay: And so under Assets you have your. You have your assets, your CSS, your JavaScript compiled. And then like any default images that we need to have there blocks are those custom coded blocks. And inside of each of them you have a render file, which is a PHP file that basically does. It pulls in all the fields that you assign, it does all of your, you know, all that stuff and then it outputs your DOM structure. Right?

Edward Addo: Yep.

Chris LaFay: And then inside the fields file, this is. These are the custom fields assigned to that custom block. So you could programmatically go and actually change the field set without having to go into the ui. This is making sense so far.

Edward Addo: Yeah, makes perfect sense. Yeah.

Chris LaFay: So all of these are all basically the same. Yeah, some of them are obviously more complex than others, but that's there where it gets into more. The wordpressy ness of it is in a couple of places. So we have a folder called Patterns and this is what WordPress is Gutenberg output looks like. Now you don't ever really need to write any of this, but you notice here the takeaway is that in Gutenberg they basically have these inline comments that describe what all is happening. I don't know why you have to do that. It seems like duplicate of entry to me. You literally have a div tag here that has all the classes, but for whatever reason you have to put it in a JSON object form. You and I never have to write this. It's just something that's good to know the way that these patterns work and the way that you typically do this. Let's say you wanted to save this section here as a pattern. What you would do is you would go over here, you would give it a name, CTA Medium, and you would go over into the code editor and find where that block of code is and you would copy it all and you would paste it over here as a PHP file in your patterns folder so that you have easy access to it on all the other pages of your site.

Edward Addo: Right. So more like saving a section.

Chris LaFay: You are 100% correct. Now, there is also a way. Within WordPress, they call them patterns, you can also create them programmatically. So, like, you have CTA medium, then you have a pattern here. This does exactly the same thing as what I just described you, except one of them is controlled by code, the other is saved away in the database. So this is saved away in the database, whereas this is coded. So if you were working on a lot of things and you wanted to update a lot of the default patterns, and you were doing that in code, or maybe even using AI to do it, you could do them in mass right here. Whereas if you save them away as patterns within the backend of WordPress, it saves a database copy of it. So this is where understanding like the HTML, like, DOM structure is going to be helpful. And this is something that, like, you would pick up your program, you pick.

Edward Addo: It up, when you save it as code, it's easier to deploy it, whereas if you save it inside of the ui, it's gridlock. Like it's locked to this one instance. So if you have a different project, you have to rebuild it all over again.

Chris LaFay: Bingo. So that's. So this all came from a lot of these. A lot of these patterns. I have a starter theme and a lot of these patterns are in the starter theme.

Edward Addo: Right.

Chris LaFay: And so, and which is exactly why we have the starter theme. Inside that starter theme, there are markdown files with Claude that you could actually run to actually get the initial version of this spun up quick, quickly.

Edward Addo: Okay.

Chris LaFay: And so that was the thinking about having them in patterns. Now, the downside is if you edit a pattern here, it doesn't go back and save to the file structure. Another thing to know about WordPress is within, when you're dragging and dropping all these blocks within Gutenberg, once you drop them on that, they. They don't stay connected to the pattern because of you. You're going to go here and you're actually going to edit the text. Right? Like. Like it's not going to be snapped away to that, that pattern. The pattern's almost like you're doing copy, paste and done. You're not syncing it up and linking it across the board to other things.

Edward Addo: Yeah, yep.

Chris LaFay: So, and then the way this. Yeah, go ahead.

Edward Addo: This is honestly not so different from what I'm used To in HubSpot. I'll let you finish and then I'll. I think I'll just re demonstrates everything that you've just mentioned so far in HubSpot so that we are aligned.

Chris LaFay: Yeah, perfect. So the way that I like to think about, like, front end coding is you have these obvious. So we do a lot of like, bem. Are you familiar with, like, BEM methodology for CSS classes and stuff like that?

Edward Addo: Yep, yep, yep.

Chris LaFay: So leaning toward bem, what we also do with Gutenberg in particular is I like having, let's say. So this block right here is called CTA Medium. Right. If you were to go back and look over here at the. The css, it's actually. No, let's go to Medium. There we go. At the most parent level. Oops. Oh, did I lose you? I did lose you. There we go. Are you back now?

Edward Addo: I'm back.

Chris LaFay: You back? There we go.

Edward Addo: Okay.

Chris LaFay: Talking a little bit like. See like. No, like coding nomenclatures and stuff. So we're talking about BEM methodology. So what I like to do is, if you notice here, this, this block is called CTA Medium, and this is a Gutenberg pattern, basically a pattern of blocks. So the way I like to do things is I like to, whatever the name of the block is, I like that to be the parent level CSS class.

Edward Addo: Fantastic. Yeah.

Chris LaFay: And then have everything else trickle down from there. So rather than having to go and give a class name to this one and this one and this one and this one, like, I like everything to be as. As minimal CSS class usage as possible. Now that's different. When you're doing a custom block, if you're doing a custom block, go all out on, like, be a methodology if necessary. Also, WordPress is really good about, like, font sizings and spacings. So they have something in here called their theme.JSON file, which, if you were to take my starter template and run Claude against it, to have it set everything up for you, it does a lot of this for you, but it defaults for you a lot of your font families and your actual color palette. So that when you're in the back end of WordPress and you're like, I want this paragraph to be a certain color, these all connect into CSS variables. These font sizes all connect into CSS variables as well too. So if you do the setup of your theme JSON file, well, which Claude would walk you through of colors in the palette? Font sizes, font families, which ones are header fonts, which ones are body fonts? Etc. A lot of the basics are done to where even when you build custom blocks, you don't really actually need to do a lot of editing to like the basic stuff like paragraphs and things like that. And WordPress also showcases, not showcases, but has very basic CSS class names for things like font sizes. So like if you needed that extra large font size, you could literally just go in and plop a CSS class or have a css. Yeah, it's very, it's very like it's, it's easy to overcomplicate it. But if you try to stay simple, WordPress actually does give you a lot of kind of things at its core level. So.

Edward Addo: Right.

Chris LaFay: That right. Is probably 75%,.

Edward Addo: 75.

Chris LaFay: 75 Of what you would like. There's the learning. Yeah, but yeah, go for it.

Edward Addo: Can I say okay, yeah, please do go for it. I am going to just share my entire screen if that doesn't bother you at all.

Chris LaFay: Zero.

Edward Addo: Okay, so where to start? Where to start? So in HubSpot, right? Let's have a HubSpot. Top level HubSpot has themes, right? Which I'm very sure to how so inside of the theme you can set your theme.JSON file as well as your fields JSON. Your fields JSON file is exactly what you just described as having to set up your brand setup once, right? So let's say inside of this theme here, once this opens up. Okay. All right. So in here, inside the fields JSON, right? Instead of this fields to JSON file you can predetermined like what your paragraph font size is, your primary color, secondary color, tertiary color headings, font sizes. The cool thing about HubSpot is that once you set this, these stuff in here, you can raise and repeat. I'm very sure this is exactly what you are doing with your basic theme. You can raise and repeat these for multiple other themes that you set. And now that you have this, if someone goes in to create a page in here and we look at the theme settings. Oh my God, this thing is slow.

Chris LaFay: You are at a hospital WI fi right now. So maybe that has something to do with it.

Edward Addo: Yeah, probably. So you see how on here we have colors, right? You can set your, your primary color, secondary colors, tertiary colors, you can set up your typography. These are theme level, right? So once you have these dialed in, when you create modules, which in your case are blocks, right, they come pre configured with these styles already in place. When you set like a heading, for example, it comes pre configured with the appropriate heading size, but with its color, with its size. So that, that's top level. Now let's go, let's move down a bit. You mentioned Gutenberg, Gutenberg blocks, which I think are full section modules. So inside of HubSpot, right? A module can consist of different, which in which you regard as blocks. So this heading, this heading here, right inside of WordPress, I think you call it like a contents block, like a rich text. Inside of HubSpot, inside of HubSpot, this is a field, right? It's just a field that you add in here and it's stored as a JSON file. It's stored as a JSON file.

Chris LaFay: These are like blocks that I was talking about, like with advanced custom fields where you rather than you don't actually control the like drag and droppable stuff inside of the block, obviously fill out the form and all the HTML is done for you. This is that exactly.

Edward Addo: This is that exactly. Yep. Yeah. And then when it comes to the parts where you mentioned coding versus editing inside of the UI, HubSpot also has something like that. So this section here, for example, I can code out this section or I can build out this section here, right? I can build a section here, but this is primarily for just this high byte customer. If I want to reuse the same section with these specific column sizes. This form here with this nice overlay on top of the next section below. But I want to use that outside of this client. What I do is save this section, right? When you save this section, it's saved as code, it's saved as Hubble, just HTML with HubSpot Java code entangled within it for the templates and stuff. Then when you move this section to the next client's portal, when you drop it in there, once you drop it in there, it will come with this, this text will come with a style, it will come with the form, it will come in everything as long as those modules exist. The same way you explained that when you drop that module in there, when you make like when you make changes to this heading, right? When I make changes to this heading, I change this text color. It wouldn't update the code, right? Because the code is separate, right? This, this is now the page instance, right? So yeah, this, or just to see this, or just to say like it's the way you described WordPress to me right now and the way I have known HubSpot is like, it's almost the exact same, the same stuff. It's the same intention behind the technology. It's Just different nomenclature. And I think with your end, I think what you just mentioned is that PHP kind of renders the DOM. Whereas with HubSpot, just a little bit difference there. Where with HubSpot like the HubSpot service, like a server side, Hubble is server side, so it renders the templates on the server side and just feeds that to the client side browser. I think that's just the small difference in terms of technology implementation. But other than that it seems everything is the same down to the way you described the blocks inside of HubSpot. You have fields, you described the drag and drop where you have the module. You showed me your DOM tree inside of the UI where you had the CTA media, you could show me the, the tree of it. Right. It's almost the exact same that I have here with these sections. So for example, how you have your CTA Medium section on here, I can just rename this to say CTA Medium. This section here, I would rename it to say CTA Medium. And then I can save it, right? I can save the HTML, use it for a different project and. And that's it. It's very. What I'm trying to say is that like I totally understand where you're coming. Different nomenclature, but same implementation.

Chris LaFay: Yeah. Okay, that all makes. Okay, so that, that all makes sense. Okay, so this is what, this is what I'd like to do.

Edward Addo: Yeah.

Chris LaFay: Because in, in all, in all honesty, the like I can tell you know what you're talking about. So in reality there's like, there's no reason to like split hairs here. It's more of just like let's, let's try something and see. See how it works.

Edward Addo: Yep.

Chris LaFay: So with that being said, give me an idea of. Let me actually, I'm actually going to take over screen sharing again. Fingers crossed. Hopefully this doesn't die on me again. Gonna hopefully go get two for two. Two for two. Here we go. Come on.

Edward Addo: Yes.

Chris LaFay: Victory is mine there.

Edward Addo: Yeah.

Chris LaFay: Okay, so this is a site that we are about to take over. It's called Lumber Rock. We are not going to do a brand new design for this. We are going to upgrade it some. So meaning I'm all about consistency. So something you'll hear me preaching is use CSS variables, be consistent. If a header is a header, use let it be a header. And so like what bothers me about a lot of this up here you have this type of a header, both sizes so much.

Edward Addo: Yeah.

Chris LaFay: But now you have. Look, that's an image. That's that's just an image, this is text, this is, it's, it's not consistent. So basically what we're going to do with the site is we're going to basically pull their building blocks that they have out and then make them more consistent. And, and right now this is built using a page builder within WordPress. That's very heavy. We're going to then rebuild it all in Gutenberg. So.

Edward Addo: Okay, my.

Chris LaFay: Now there are going to be some custom data point, there be some custom object like post objects in here as well. So like most of the stuff is going to be pages, but they also have these collections here. So we might store those in a custom object area, but it'll still be Dragon droppable blocks at the end of the day. Day.

Edward Addo: Right.

Chris LaFay: What I like.

Edward Addo: I have a question.

Chris LaFay: Yeah, go ahead.

Edward Addo: I have a question around that. So you mentioned and something in mind, I just skipped escaped over my mind. Inside of HubSpot we have something called like HubDB, right? Where it's kind of like a, it's like a row based, like a table based database that we have inside of HubSpot where each row represents a page, right. You can create dynamic pages out of that. And inside of the table you can have columns and the columns represent the data points. So on the page, for example, you can have like the page name, the heading text, the description, all the columns and then the rows are the pages that they actually go on. Like they actually go on. Are those the exact same thing that you mean by create, creating custom objects. Right? You mentioned you're pulling like custom objects like posts into a specific, a specific blog. Is that, is that how that, is that how that works? Is this A.

Chris LaFay: You're 80. 80%. Yes, the delta. So they're everything. So everything in WordPress is a post because it was built to be a blogging platform at the beginning of time. And so Even pages within WordPress are technically post. Like actually if you look at this up here, look at the address bar when I'm on the pages thing, you see the query string? It says post type equals page.

Edward Addo: Yeah.

Chris LaFay: So like pages are posts, if you will. But so all a post is within WordPress is literally just a data object at the end of the day. Like that's all it is. So you can create custom post. They're called custom post types. So we have projects and testimonials. So but they, but the, the 80, the 80% and 20% that you were missing. So 80% of what you said was right. It's just a list of data points. But the 20 delta is that you can still have building blocks on the page. So like this is a custom post type called projects and you can still have HTML content within the content section. There are just at the project level you'll see over here on the right hand side we've added custom categorization. So we have services, we have product types, we have strategic goals where they can add these are like tags effectively. They can also load in a client name and then there's also a video field where they can embed a YouTube video if they wanted to.

Edward Addo: Yeah, and these properties on the right pane are determined by us. We create the data type. So it's like string or a multi select created put that in here so that they edit it and then create the code for it within the page templates we're supposed to go to. So once the clients or the user updates that property, it also populates on the page at a specific place where we put that tag. Okay. It's very similar.

Chris LaFay: So, and so the core file within WordPress is called Functions PHP. Basically, if you were to absorb any other WordPress site, what you will typically find in Functions PHP is thousands of line of very disorganized code. I like to have in my Functions php. Basically just reference stuff inside the Includes folder so the function stays as clean as possible. So what you'll see here inside of includes, this is a custom post type for case studies. Now you're going to see here there's terminology weirdness and this is the client's fault. At the end of the day you're like, I thought we called them projects and projects and projects. I established all of this with the name of case studies and everything in there. Once I did my massive import of 95 of these, which I did via code, which I did programmatically, they were like, can we relabel it to projects in the code? This is one of those things where in the code it's all called case studies, but there's a band aid case study in this particular case, case studies equals project. So this is just normal WordPress code about how you register like a new custom post type. So these are all basically all the labels that you need. And then here this uses so in order to add custom fields, custom data points to a thing. WordPress doesn't have that natively, which is mind boggling.

Edward Addo: Oh okay.

Chris LaFay: But there's a plugin called Advanced Custom Fields and so that's why you'll see ACF here a lot. And this will Add a field group. So inside of it's called client. All of this is very common knowledge stuff like if you were like how to add custom fields using acf you will find documentation of the wazoo. This is where the video field, the embed is added. But also WordPress does extend. So by default post, you know, like with any blog you have like categories and tags right within blog posts. Just like with the post Type of post, WordPress allows you to extend its categorization. So technically every categories are called taxonomies. In WordPress at a code level you can create custom taxonomies. And so for projects we have three custom taxonomies called services, products and Strategical. And so over here you will see in the includes folder taxonomy product and you will see that it gets registered and you will see that it gets registered to. When it's in the registration it's registering to the case study custom post type. And then under services you see all the same things and that the services taxonomy is registered to the testimonial. Custom post type registered, the case study and testimonial.

Edward Addo: On the page where you have the case studies you can have a dropdown and just filter based off of the categories that you've set up.

Chris LaFay: Which is why I created a custom block. If you remember, we looked at that custom case study block. That's why that was a custom built block. Because I wanted to control the HTML code and I wanted to be able to control the filtering of it. Very dynamic. Yeah, that makes sense.

Edward Addo: Yeah, so. Yeah, makes perfect sense. So if they have a new case study that is more so like a, like a, like a, like a service they added to the service taxonomy like instead of that kind of grouping and they add all the key stages that, that fall under the services there. So that when you want to actually put it on the page, you just filter it to show the case studies that have the category of services and then. Yeah, so they don't have to always be manually added in adding it in every single time one by one.

Chris LaFay: Let me show you a simple. Like a. This is something that like we have won this project. This is something that we will do. So when you receive like a figma file with some mockups, this is a block that you will see. So within a collection this is a. Like they build decks. They, they build like a custom. Like it's not wood, it's some like some other type of non wood wood that stays good for longer. I don't, I don't know. And so each of these different collections has different types of planks that you can buy. So like here's all the different types of planks and they fall under that collection.

Edward Addo: So right.

Chris LaFay: This would be a really good place for a custom post type. So there would be a custom post type called Boards. I assume Boards would be the word here that we would use. And each of these would. Would have a. Would have a. Have an item within boards. So one of them would be 2x6 deck boards 2 by 6. These are the titles, these are the descriptions. And then we would have custom fields for dimensions and available sizes and then.

Edward Addo: Oops and I think image. We also have one like the link that you just clicked on. We have one for the link as well to open the PDF where you.

Chris LaFay: Would open up the PDF so there would be an upload field for like detail PDF that would upload this. What you. What we would talk about when we look at the figma file together is this is going to. So Boards is going to be a custom post type. Here's a list of the custom fields and we need a custom block built to be able to filter the list of boards by collection. So you would make collection via taxonomy attached to board.

Edward Addo: Right? Right.

Chris LaFay: Does that make sense?

Edward Addo: Right.

Chris LaFay: By the way, I use the phrase as that makes sense all the time. It's not meant to be mean. I just.

Edward Addo: It.

Chris LaFay: It helps me like wrap my mind up and finish up.

Edward Addo: So makes sense.

Chris LaFay: That's basically. This is what like we. We would basically go through this like this block. This is how it's going to be built. Custom block for this. Make sure you do it responsively. Make sure the grid goes down and all that kind of fun stuff. Use gap like as default spacing. So you. For the gap sizes. Use default WordPress spacings for that. Use default WordPress spacings for padding. Set a CSS variable for yourself for border radiuses so you can change it all across the board.

Edward Addo: Right.

Chris LaFay: But stuff like that would just be a two column block. This would literally just toss a two column block on there. Toss an image and a bulleted list and call it a day. Like nothing custom.

Edward Addo: So yeah, yeah. I do wonder. I do wonder. You mentioned that we are kind of improving what these guys have. So does that mean that we are using or extending their current theme? It helps with calling themes. I don't how it's coding on redress or are we going to be using the in house theme Right to.

Chris LaFay: We're using my. Yep. Because this is built using a page builder that's very clunky we do not want to touch it. So how we would start this off is I would send you over a copy of. I would get. I would help you get the WordPress local environment installed on your computer.

Edward Addo: Yep.

Chris LaFay: We would. I would give you a copy of the starter theme that have. Do you have Claude code, by the way?

Edward Addo: I use cases.

Chris LaFay: Use which one? Oh, Cursor. Okay, Cursor. And you have the AI agents within Cursor as well too.

Edward Addo: Yep, Yep.

Chris LaFay: Awesome.

Edward Addo: Yep.

Chris LaFay: So I'll basically, I'll walk you through what the different markdown files do. You don't have to have Claude. You can use Cursor, I'm sure. And we'll just tell Cursor, read these files and these orders and start doing stuff. Walk you through that. And then we'll also walk through the Figma file with. We typically have about 12 to 15 building blocks per site on top of obviously all like the normal like headers and paragraphs and buttons and things like that. Walk you through those building blocks and be like, this one's custom. This one needs to be a Gutenberg pattern. So we need to apply a CSS class at the top level and then do trickle down styling for it. We'll walk through each of those blocks and then the goal, the output, the very first output is for you to basically build out a block library page, which by the way, the AI agent will actually get that started for you.

Edward Addo: Yeah. And that's that. That's the kind of. That's the page you show. You shared with me initially during the call where you had all the blocks on the same. Yes, the same thing.

Chris LaFay: And so a lot of those will already be on there for you. So you will just have to add in new. As you build new ones and new patterns, you'll have to add those in.

Edward Addo: Great.

Chris LaFay: And then from there we then do. That's kind of where we do some of our initial dev QA together.

Edward Addo: Right.

Chris LaFay: And then we.

Edward Addo: Right.

Chris LaFay: Once. Once we get the block library. Good. Then we go into page building and I have somebody else that'll do all the page building building stuff for me. So.

Edward Addo: No problem, no problem.

Chris LaFay: Any questions there?

Edward Addo: No. Now I'm more concerned with the timeline given my. What's the weight? The weight is not coming. But I'm more concerned with the timelines, factoring in the kind of learning curve that I'd have to undertake, especially with stuff. But very sure I can transfer my skills over to WordPress. But I'm still sure there'll be some nuances here. And There. And there's also this stuff you just mentioned about, you know, training me with how to use your MD file with Kesa to make the blocks. So I do wonder how the timelines are looking at, if I can also factor that. That in. So for example, when is the client expecting this all to be built by?

Chris LaFay: So this one, we haven't even gone into the design phase yet. So this is probably not going to start the development for at least four weeks.

Edward Addo: Okay.

Chris LaFay: If not a little bit longer than that.

Edward Addo: Okay. Okay. Okay.

Chris LaFay: How's that feel?

Edward Addo: Okay. That works. That, that, that is fantastic. Too many times I've been on course where they're like, we need a website by Friday.

Chris LaFay: Yeah, no, no, no, no, absolutely. Time. And by the way, I'm sorry, I do. I'm gonna actually have to drop off here because I, I had a hard stop at quarter or quarter till the hour at 2:45.

Edward Addo: Oh, no problem.

Chris LaFay: So the only other things I need to know is what is your hourly rate and are you game? I can help you get stuff set up in the next few weeks before the project kicks off. So give me those two parameters.

Edward Addo: Fantastic. Yeah, sure. No problem. No problem at all. Hourly. Wait. 35. And you say.

Chris LaFay: You said 35.

Edward Addo: Yeah, 35. Okay.

Chris LaFay: Oh, and, and, and that's us, right?

Edward Addo: Yeah, that's us. Yes.

Chris LaFay: Yes.

Edward Addo: Okay.

Chris LaFay: Also that sounds good. I can definitely work with that. Okay, so what we'll do is we'll. Basically what I'll do is we'll get a time schedule in the next two to three weeks and I'll walk you through. Obviously we'll do all the like the paperwork and stuff like that, but I'll give you basically a block of time where I will also work with you on some of that time of getting everything set up.

Edward Addo: Yes.

Chris LaFay: And so you kind of have a block of hours to kind of play with, to kind of like just do some initial testing and things like that, along with working with me on a call to walk through stuff. And then when the actual project hits and I know what the number of blocks is going to be, I'll walk you through what I'm thinking those are going to be and I'll kind of give you a general idea of kind of how many hours I feel like each of these things will probably take and then we'll come to an agreed on price at that point. Does that sound good?

Edward Addo: Nope, sounds good. Yeah, I, yeah, that sounds good. I would love if you could share the note taker, the track back, at least like the link to the recording. I would love that. And also if you. I love communicating by by Slack. I feel it's more efficient than email. So if you have Slack and you can add me, that would be phenomenal. That that would get outcomes very streamline. I, I rarely check my email and it's even, it's by luck. He saw me on, on LinkedIn. I, I'm not on LinkedIn at all.

Chris LaFay: I'm not, I don't use it very much either, so I feel that. But I can do, I will do both of those things before I wrap up my day.

Edward Addo: So thank you so much. Yes, that works. Nice meeting you.

Chris LaFay: Nice meeting you as well, man. I hope you have a good rest of the day.

Edward Addo: You soon. Take care. Bye Bye. Bye.