How to Properly Create a Blog Post Template in Oxygen (Accessibility + Best Practices)

0:00:00
In this training, we’re going to tackle creating a blog post template in oxygen. Our goal for this template is simple. We wanted to be as accessible as possible. We wanted to have a really good HTML5 structure. We wanted to be SEO friendly, so we want the headline above the fold. We want to use a real featured image instead of a background image. And we wanted to be dynamic in the sense that we can have an auto-generated table of contents. We have our Gutenberg body content so that we’re not using the oxygen builder for every single blog post. At the footer, we’re going to have an author card. And then we may want to have a related post section as well. Now, this is one example of a blog post template. There’s many, many different ways you can design a blog post template. But by following this tutorial, you’re going to learn best practices. And then what I would recommend is if you want a different looking template, take these best practices and build on them or iterate on this actual layout and design to create your own thing. Like I said, there’s many, many different styles of blog post templates. So it all comes down to exactly what you’re looking for or needing to build for your specific site. But the underlying best practices are not going to change. All right. So let’s go ahead and dive in and get started. All right. So I’m going to go to oxygen templates. And I’ve already, well, before we do that, let’s just look at the post section.

0:01:22
It’s very important that you have, because I’ve noticed a little bug in oxygen that if you don’t have any blog posts and you create a blog post template and assign it to post. And then you add blog posts later, it can’t seem to find them in the builder in the preview. And it does still assign it properly. But you can’t preview what you’re doing in the template anymore. At least I’ve had this happen, you know, a couple different times. So what I recommend is put some blog posts in there. As you can see, I just have dummy content. I used fake or press to just drop some in here. They all have featured images. And now we’re ready to go. So once you actually have some blog post content, then you’re safe to create a template. So I’m going to go to oxygen and templates. I’m going to hit add new template. Now with blog templates, there’s not just one template. There’s going to be a template for your single posts. That’s what we’re going to build in this tutorial. There’s also going to be an archive template for your posts. There’s also going to be an archive template for your categories. There’s going to be a search results template. All of these things are related to the blog, right? So how we name these templates is actually kind of important. I typically start with blog and I put a colon and then I put exactly what it is a template for. So this is the single post. When I do a blog category template, it’ll say blog colon category.

0:02:44
When I do a search results, it’ll say blog colon search results. And so all of them are organized with this naming convention. Next thing I’m going to do is I’m going to assign my main template. We have a primary to main just to refresh your memory. Primary has our navigation in our footer. Main has our HTML5 main tag, but the main inherits the primary. So if you want your template that you’re working on to have the primary header and footer and the HTML5 main tag, then you use the main template, right? If you don’t want the main tag because you’re going to put the main tag somewhere else in a template, you use the primary template. But in this case, we do want everything wrapped in the main. All right? So I’m going to choose main. Under singular, I’m going to assign this template to all posts. So any posts are going to inherit this template automatically. And then I’m going to go ahead and hit publish here. All right, while that’s doing that, let me just check my recording. Make sure we’re all good with sound and audio. Okay, good. So I am going to edit this with oxygen. Okay, the first thing that we need to do is talk about the HTML5 structure of this article template. So I already have a main tag because I’ve used my main template. I’m going to open the structure panel here. And before I add anything else, I need to add a blank div because we actually need yet another wrapper. So I’m going to add a div. And this div over here under tag, I’m going to give it the tag of article. Now, I’ve talked about the article tag a little bit in the past. You can use article tags in a lot of different ways. For example, a blog post card, it can get the article tag. A service card can get the article tag. A product card can get the article tag. Why are all of these things considered to be articles? An article in HTML5 is a piece of content that can actually live outside of the context of the current section or site that it’s on or page that it’s on. I believe it came from the initial use of an article like a blog article because a blog article can obviously live off of the website that it’s published on. It can live anywhere and be relevant to people. A product card or product could actually technically probably do the same in a service, etc. So they all get the article tag. But we are creating a blog post template, an article, so to speak, and this absolutely could live off of this website.

0:05:14
So it gets the article tag as well. And the way that we do this is we create a blank div as a wrapper. And we just simply give it the article tag. Now I’m also going to give everything that we’re doing here, custom classes using the BIM naming convention to make sure that everything is as organized as possible. You could make the argument that hey, we’re doing this work in a template. The template is the single source of truth for these items. Therefore, we could potentially do this all at the ID level because we have a single source of truth to edit the styling for these things. But my argument would be it’s just get in the habit of creating custom classes and organizing it. Plus when we have to write a little custom CSS much much much easier to target custom classes than it is to target IDs that have no relevant names or anything like that. And it’s just not good practice to do stuff at the ID level. So I would say this, make custom classes for everything. Get in the habit of doing that. You’ll never go wrong with that method. Okay. All right. So what I’m going to do is I’m going to say that this is the article blog article wrapper. Blog article wrapper. It’s not just going to be an article wrapper because like I mentioned lots of things can be articles. So this is the blog article wrapper. All right. So we’re going to do that. And I’m going to also make sure that this width is 100% because even though it appears to be 100% in the builder already, I’ve run into issues in the past where on the front end it shrinks everything down. It cuts everything off. So just make this 100% and we can avoid some issues there. All right. So I’m going to also label this over here so that we can see that in the structure panel because everything else that we add related to the actual article needs to go inside of that div not below it. So the next thing I’m going to do is add three sections. There’s section one section two by duplicating and section three. These are a note in the structure panel. These are inside of the article div. I’m going to rename this first section header. I’m going to rename this bottom section footer and I’m going to rename this middle section body. Now I’m also going to give and this is really it’s a header but it’s also a hero. So I’m going to do that header hero. And these are just for internal naming for you know organization purposes. It doesn’t really matter but I am going to come over here to the tags and give these HTML5 tags. So this one right here we’re getting a little bug action there. I is header. I’m giving it the header tag and then over here on footer I am giving this the footer tag and you might say hold on Kevin I’m confused your site already has a header and it has a footer. Why are we doing another header in a footer? Because an article is a self-contained piece of content. Therefore it can have its own header and its own footer. And this is a good thing to just help crawlers and screen readers understand the structure of the page. So they know that hey here’s an article but you know different parts of this article are for different purposes. The header appears for the hero where the h1 tag is and the featured image the body section which is literally just a section is going to have the body content. And then there’s also going to be a footer which is going to have our author bio. Okay so we have that structure down. The next thing that we need to do is outside of this article we are going to add another section and let me actually drag it out here. Sometimes it has trouble going on its own. Okay there you go. And that’s probably going to be where we’re going to put our related posts. Okay so this is going to be related posts. Okay so we’ll get to there when we get there. Why is that div looking a little whacked out on me? Doesn’t look like all the others. I didn’t add. Oh hold on hang on. All right repeat it. Oh because it’s got it’s randomly got a repeater in it somehow. All right so I’m going to hit, I don’t remember adding that. All right so I’m going to go ahead and hit save. Now before we’re technically finished with this part of the tutorial we do have to give everything a custom class. So I’m going to click on the hero section here and we’re going to call this blog hero. I’m going to click on body. That’s going to be called blog body. I’m going to click on the footer. That’s going to be called blog footer.

0:09:36
And then I’m going to click on the blog related posts. That’s going to be called blog related posts just like that. Okay I will hit save and now we’re ready to move on. So for the hero there’s actually this is going to be one of the most technical parts of the tutorial and there’s a lot of problems that we have to solve as we build this and think about as we build this. First things first we need to have a real image up here not a background image. So automatically this is going to create a little bit of complication. We’re going to need some absolutely positioned elements. We’re going to need to think about section overflow and what happens if content in this section gets bigger can we control the section with height should we control it with padding. There’s actually some different approaches that we could take. You know you could build a section like this two or three different ways and all of them can be right. Some of them may have pros versus cons but they could all technically be right. We’re just going to tackle a version of it and see what we get and if we run into any problems we’ll address those as they come up and I’ll tell you what pitfalls to look out for as we do this. So I like to use a section here because I like the default padding. It makes us have to do less work overall I think and so we could just start by adding the image. We know that we’re going to need a featured image up here and so I’m going to call this blog hero double underscore featured image because the featured image is part of this hero section. It’s an element in the hero section so I’m going to go ahead and do blog hero featured image and I’m just going to straight away because I actually want to see a real image here. I’m going to dynamically pull in the featured image of the blog post that we are previewing. I’m going to make sure that this is the large size and there you go. So we see the featured image that we’ve pulled in. That’s the featured image associated with this blog post right here that you see in the preview tab.

0:11:36
You can preview any of the blog posts that are available and this is what I said will bug out and not populate properly if you add the template before you add blog posts. Sometimes maybe it’s not every time but definitely for me it’s happened on occasion. Okay so I’ve given it a class of blog hero featured image. What we need is text to be able to sit on top of this effectively but we also need this image to grow as the section grows which means that the section actually needs to dictate the height. Right now because I just added an image in here the image is dictating the height of the section because it’s a physical component right. So if I made this height like a thousand rim it’s going to dictate the height of the section like the section is going to get as tall as the image gets and we don’t want that to happen. We want all of our hero sections to be pretty much the same height so that all of our articles look very consistent and if for example a client uploaded a crazy aspect ratio photo like a tall photo or a square photo it doesn’t blow out our hero section right. We want the image to adapt to the section it’s in we don’t want the section to adapt to the image that’s placed there. Alright so in order to do that what we’re going to want to do is we’re going to make the image position absolute. We’re going to take it out of the flow of the document and just say hey you you don’t dictate anything you just live here right.

0:13:06
Alright so in order to do that we have to select the hero and we have to go to layout and we have to set this to relative. So position relative will contain absolutely position child elements. Otherwise the child element will attach itself to the browser window and as we want to avoid that. So now that the image lives here I can position it absolute so when I position it absolute it’s going to know not to go outside of the bounds of this section. Well in most cases the images have a little bit more complexity but I’ll explain okay so we’re going to hit position absolute and you’re going to see it just bam it just pops out right but it has no instructions on how to behave yet. So first thing I want to do is go top zero left zero and notice it position itself top corner of that section and now what I can do is if I give it a width and a height of 100% it’ll conform to the width and height of its parent okay so I give it a width of 100% I give it a height of 100% and now it is conforming to the height of its parent which is not very big. So we’re getting a lot of squishy effect but we can absolutely fix the squishy effect. You may know already how to do this we’re going to go to custom CSS. I’m on the custom class here and we are going to write object sorry we’re just going to write object fit we’re not actually creating a class object fit cover and then what’s very important on a section like this is object position which allows us to determine what area of the photo is prioritized when the photo is being cropped by the section boundaries. So the first value is left and right so if we want to see from left to right the center we want to prioritize the center of the image which is normally the case than 50%. Another 50% here would prioritize the center of the image vertically but as you notice like with photos a lot of times there’s more data at the top of a photo or at least in the top quadrant somewhere. So if I do like 40 look how I can see his eyes now right so 50 I could only see his mouth over there 40 I can actually see his eyes then I can see all of his head but now we’re starting to get into more irrelevant stuff and we’re losing the bottom part of the information of the photo. So I like to do something slightly off center which is like 40% sometimes 60% depending on you know if a lot of your images for example are not people then you know there may be more relevant data at the towards like in the bottom quadrant or the bottom half of the photo but if it’s people a lot of times it’s going to be the data is going to be in the top okay so we’re 40% on object position and I can come out here and see that we don’t have a warped image anymore we just have a cropped image and then we can check by grabbing this hero section and just saying hey if I make this a certain height like 50 does the image come with the section and it absolutely does the image is adapting to the height of the section okay now there’s a couple of different ways that we can control the height of a hero section like this first let me put in some content so I’m going to put in a heading and this is going to be our h1 I’m also going to let’s let’s do this on that blog featured image I want to make sure that this is always at the bottom layer all right and when we’re dealing with layers and CSS we’re going to be using z index right so I want to go to layout z index and negative one is the bottom it’s basically saying like make me last or make me at the at the basement of this structure okay so negative one puts this and you can immediately see now my text shows up whereas when I had this not set right or it zero which is it’s default I can’t see the text I’m going to put this at negative one and now I see the text now I’m going to also tell this section that well I don’t need to use utility classes we’ll try to keep this as vanilla as possible I’m going to go to typography and use a variable which you would just put in you know whatever your hex code is your global color whatever I’m going to use a variable called bar white from automatic CSS and now I can see that we have white text which is good okay so here’s the thing that we want to be aware of right sometimes people will come and they’ll use height so they’ll go to size and spacing they’ll use height to get this section taller maybe they do something like 40 rim or 40 VH which is the 40% of the vertical height of the screen and you can see exactly what has happened the section has gotten bigger but I also want you to notice that now you’re going to be forced to position this content more than you would otherwise maybe using a different method because it left the content behind watch again as the thing gets taller right the the content just stays here and so now you’re going to have to use flex to move this down and move it over and you’re going to run into another problem if this content in this section gets long for whatever reason and we can’t predict the future so we need to just say well we don’t ever want this to happen but if it gets long watch what happens number one it starts to encroach on the bottom of the section and number two it actually will overflow out of the section and that’s a big big big problem you never want that to happen that would completely break the design this is due to using height on the section all right now you can use something called min height instead of height which is a minimum height so you can say the at minimum I want this section to be 60 VH or 40 VH but if it needs to be bigger allow it to get bigger and what that means is as that content encroaches on it it will actually get bigger now you can’t do minimum height in oxygen because it’s broken there’s a bug and I’ll show you right now demonstrate this so if I go to min height and I say 50 VH look at the boundary see the purple boundary line the boundary of the inner div does not come with it this only changes the minimum height of the outer wrapper and you’re you’re still having you’re like you wouldn’t even be able to position this text down here in fact I’ll just show you why don’t I show you so we’ll go vertical and center which will put it in the middle and now I want to bring it down which I have to go to layout for and we’ll do justify center and it does not move because it is technically centered in the inner div of this section it doesn’t know that its parent is way down here that’s a bug in oxygen 100% bug I’ve reported the bug I hope they fix it so if however you’re using automatic CSS let me let’s go back here where’s my size and spacing take off the minimum height if you’re using automatic CSS and you want to use a height class you will not have this problem because automatic CSS is designed to do this properly it targets the inner div instead of the outer wrapper and you get the correct effect that you were looking for right but again if you’re not using flex right so I will let’s go to layout no okay it’s claiming I took the flex off but I actually didn’t okay we’re gonna do absolute again one more time top zero left zero the index minus one I guess I’m not on the section I should be on the section all right so blog hero there we go all right I want to get rid of this layout right here all right clear thank you and I’ll set this back to relative so this is what happens when you when you set a height right or a minimum height look at this content even though I’m using the proper height class it’s leaving my text behind and I’m gonna need to use flex to position it it’s not a bad thing necessarily but it is an extra step of work there is a different way to control the height of this section you can use padding instead right so if I go and very simply I just want to center my content right so I align item center so I just keep this horizontally centered and now I can use padding and I can use all you you can use anything you want but I’ll use variables from automatic CSS so we’ll do section space XL and then section space XL down here and effectively all of my my section got bigger but my content will always be vertically centered in this section no problem because it’s just being pushed down and up by the same amount using padding all right so I save here now there is a downside to this method that if you’re not using responsive padding you would have to set different padding at every break point but because I’m using automatic CSS this is going to be automatically responsive so even though I’ve a you know a fairly large section heading here it’s going to scale down very nicely right it’s not going to be as tall on mobile so just like one of the benefits of using automatic CSS and responsive spacing so that’s one way to do it I will go ahead and you know I want to show you that because if you don’t have automatic CSS and you try to use the minimum height thing that’s not really going to work what I’m going to do just because it’s easiest is I am going to do height 50 and then I’m going to also do center all which is just going to make sure that everything is always centered inside of that section and now I get the exact effect that I’m looking for but the con to this is that it’s always going to be 50 VH so even on mobile it’s going to be 50 VH unless I change it okay so maybe I don’t want to do this right maybe after all the padding is the best way to do this right so height can cause a lot of problems even minimum height can cause extra work to be done all right so I’m going to go back to using my bars so I’m going to do section space Excel sorry I’m doing a lot of explaining but I feel like it’s important things for you guys that to know and understand you know what the pros and cons are to these different methods of trying to build something like this okay so we got the effect that we’re looking for the next thing I want to do is well we got to solve another issue which is an issue with all overlays and that I can’t really read this text thankfully this image is really it’s fairly dark so the text is pretty readable but I can’t bank on every image being like this and I actually want to spice this up a little bit so I need an overlay but we can’t just use like the background overlay that you might be used to because we’re not using a background image we’re using a real image so what we actually need is a pseudo overlay which means that we need to create a new div in this hero section so I’m going to create a div and I’m going to call this blog hero double underscore overlay this is going to be my overlay I am going to absolutely position this as well so I’m going to go to lay out absolute because I want to take it out of the flow of this of this section content and I want it to expand to fill the entire container now when you’re using just a blank div like this here is the easiest way to make it fill the entire container you set the top right bottom and left all to zero and it will automatically take up the entire container you don’t have to put a width you don’t have to put height none of that stuff just zeros on top right bottom and left on its position and it will expand and take up the entire thing all right so now what I’m going to do is under lay out I’m going to also give this a z index of minus one and even though the image and its overlay are minus one the overlay comes second in the DOM it comes after the image so it’s automatically going to be on top because something has to be on top right so it goes in the order of the DOM the image comes first therefore the image is on the bottom the div comes next therefore the div is on the top and I can actually put it there right next to each other so you can see and I’ll label this as overlay perfect okay and now what I’m free to do as I can style this however I want to and what I’m going to do is go to gradient add two colors change it to radial change it to ellipse and we’re going to go 50% and 50% which I think is the default anyway but it’s good to put it in there and then I’m going to use variables from automatic CSS I’m thinking we’re going to do base let’s do base trans 20 and then here I want to do base ultra dark trans 80 so I want to be super dark and then let’s play with these percentages and just see what happens there we go like 20% I still wanted to be kind of lighter in the middle than it is on the outside all right so we’ll do 40 there and trans 80 okay what happens if this is 80 all right that makes a lot of it lighter yeah we want it to be 30 maybe okay and all right 40 20 40 20 all right I don’t know I don’t want to get too nitpicky with it I think I think we’re pretty good there I think we’re pretty good let’s pull this headline in dynamically so insert data title insert we’ll play with this more as we go I need to you know it’s one of those things I got to come back to a few different times just to kind of dial it in the way that I want but if you look at it without the overlay what we can do is lay out display none so there it is without the overlay and then there it is with the overlay so that’s the effect that we’re getting I also may want to come to this image and I want to go to effects and I want to go to filter and I want to go to maybe grayscale and let’s add maybe a 20 percent 10 percent filter kind of like take a little color out of these photos just to give actually instead of grayscale what we can do is contrast I bet let’s do contrast and we’ll just take some of the contrast out of the out of the photos because that can help with readability as well so let’s do 10 is like no contrast whatsoever 70 80 90 let’s do let’s do like 90 and then let’s just take a look at this on the front end okay all right I think we’re getting there all right so what we need to do is kind of tailor the width of this heading and I need to give it a class as well so blog hero double underscore heading before you go ahead and style anything give it make sure it has a custom class size and spacing max width I want to do about 68 characters I think or 48 characters 38 characters oh no 68 is like what I want the body to be this I want to be like 20 characters 22 characters 24 characters let’s do like 24 all right and then we’re going to text align this to the center and now we’ve got the start of our hero in here we’ve got our our image and it expands as we need it to it’s a real image it also needs by the way since it’s a real image before we forget this is so easy to forget go to alt text data and featured image alt dynamically insert the alt text of the photo all right we can hit save there now what I’d like is the category that this article is in above here and I’d like an author and a date below so I’m going to add text and this is going to be the category now I would recommend dragging everything inside of the panel at this point now because you’ve got a blank div in here you’ve got an absolutely positioned image and this can really just mess with oxygen’s head so just use the panel over here to drag and drop so this is going to be the category let’s go ahead and dynamically insert this I don’t want it to be a link but I want it to be or maybe we should do a link maybe we should do a link I’ll do category taxonomy category the separator will be a comma insert and it automatically makes it a link when you do it from up there doesn’t even ask you if you don’t want it to be a link you have to do it from the bottom so insert data you have to do it from down here the advanced taxonomy terms if you do it up here it’s a link automatically if you do it down here it’s not a link I don’t know why but there you go okay and then this is going to get and notice that we have two elements now a text in a span but I’m going to put the class on the text so this is going to be blog hero double underscore category and then I’m going to add a div below this heading and this is going to be blog hero double underscore meta and then I need a div inside here for the author so this is going to be blog hero double underscore this will be author wrapper and then I need an image and text inside of that div so I’m going to put an image in there and I’m going to put text in there the image I’m going to give it a class of blog hero author headshot and then the text I’m going to give this blog hero author name perfect now for the actual image itself I am going to give it a width of four rim and a height of four rim that looks about right alt text I’m going to give it the author display name insert and then I’ll say author all right we’ll say author headshot author headshot dash and then the author’s name so the aria will announce that or the screen reader will announce that as author headshot kevin Geary or author headshot whoever the author’s name is so that should be nice and accessible there on borders I’m going to give this a border radius of 50% and let’s go ahead and pull in this image dynamically so I’m going to do data author pick and the size I’m going to do 200 insert and there you go see my author headshot right there I’m going to insert my name by going to author display name hitting insert there and the question here is do I want that to be a link and I actually believe I do and I just said no but I’m going to go display name and I will say let’s link to the author post URL which is the author archive page and it’s going to put it in there these links are tricky to deal with because I’ve how they’re put into spans and that they’re they’re kind of difficult to target I you can’t target them in the oxygen builder I believe we’re going to have to write CSS for them but this blog hero author wrapper I want to display horizontal flex and I want to middle align the content and then I just want to go to custom CSS and add a gap and that gap is going to be one M and that’s going to space the name out from the image and the next thing I want to put into this meta wrapper here so I’m under meta is date so I’m going to put a text field dynamically I’m going to insert the date well helps if you stay highlighted insert date insert this is not going to be a link of any sort so that’s all good and nice and simple on this meta wrapper I’m going to also horizontal flex middle alignment and then here I’m not going to use the gap because I actually want a physical little divider between these items we’re going to tackle well let’s just tackle that now and I’ll tell you right now this is going to be another area where we have to do some explanation you could very easily do this watch you could click this text I’m going to show you why this is the wrong way to do it now I’m going to give it a class blog hero double underscore date and on that class you could easily go to state before in content put your divider which I want to slash this right and then just space this out so you’re going to go with okay well we need to be able to open the size and spacing panel that would help thank you oxygen so that’s a pseudo element right so to the left of the pseudo element and to the right of the pseudo element I can add margin and that’s going to space it out so I might do like 0.5 m on this side and I might do 0.5 m on this side and it appears that we got the effect that we wanted in seconds near seconds we got what we wanted except I would not do it this way because I want to create a situation where if I need to add something else like what if I added I’m not going to add comments and to this blog post template and I’ll explain why when we get there but what if I did add comments and I wanted to display the number of comments here I would want to add another text element and look what happens when I just I put another text element in there’s no spacing this pseudo element style has to be recreated manually on whatever class I put here and that’s a lot of extra work and if it doesn’t pass the six month rule or the three month rule right if I come I’m gonna stop calling it a six month rule I’m gonna call it the let’s call it the three month rule okay if I come back in three months I’m not gonna remember exactly what styling I used to get this so I’m gonna have to go inspect this right okay go to before all right it’s there then I get okay I got here and this is a very simple one what if there was a lot of stuff being done right it’s a nightmare so I want to set myself up for future success right now it takes a little bit of extra effort but I want to set myself up for future success right now so what I’m gonna do is I’m going to delete that pseudo element and I have to write custom CSS in order to do this because we’re gonna do something a little fancy but I want you to stick with me because you learn you learn things right this makes you better all right I’ll explain it as I go so I’m gonna go to style sheets I’m gonna create a new style she called blog this is where all of our styles are gonna go and I’m targeting this entire wrapper right here which is the blog hero meta all right so I want to immediately type in blog hero meta but I have to do something else because I don’t want to just target this wrapper I want to target things inside this wrapper well what do I want to target I would actually like to target all of its direct children so a direct child of this wrapper okay I hope this doesn’t bore you guys man this is like this this is amazing stuff all right if you if you really want to get legit and get better this is the kind of stuff you want to pay attention to so blog hero meta if we look right here this is blog hero meta how many direct children are there there’s three right there were two but I added a third one for the comments right but there’s really two items I don’t want to target these things by name because if I add a third thing it’s not gonna pick it up right it’s not gonna know it’s there I want to make a rule that says target all direct children whether there’s two or three or four target all of them not all children only direct children if you target all children it’ll target this image and this text and everything else no no I only want to target these two which are direct children so here’s how you target direct children you’re going to your silesh sheet this carrot right here this right carrot is the symbol for direct right it means the direct things below this and then a star means anything so this is basically the way you would read this backwards is target anything that’s a direct child of blog hero meta right so I’m saying target anything that’s a direct child the blog hero meta that’s about as semantically like accurate as I can make it so that’s going to target watch this so I’ll do border one pixel solid red and look both of those items just got a red border can you guys see that maybe I’ll do five pixels okay you guys see that so two items there have their borders right so I’m targeting the correct thing but what do I want to do to those things well I want to give them a pseudo element of before right so I’m going to do this so I believe this will work and we’re going to do content anytime you’re doing a pseudo element you must add content our content is going to actually have something in it which is going to be this and you can see right there both of them now have the little divider that I wanted so this is perfect right and watch this if I add another one now I know it looks absolutely awful just stick with me for a second but if I add that next element for my comments look it gets the little divider style as well so if I come back in three months from now I don’t have to know how that’s styled I just add a new element because I need a new element and boom it’s styled automatically for me because I future proofed it very very important okay so let’s actually fix how this looks so content and I’m going to do margin you can do this one of two ways we’ll just do the shorthand so top is zero right is the next value so right is going to be 0.5 m bottom is the next value that’s going to be zero 0.5 m is going to be the next value which is left okay so now you can see I’ve spaced out my content using this pseudo element before now there’s one more thing I have to do because I don’t want this to be just struggling out there right so what I’m going to do is come down here and do well actually I don’t want to write this all again I just need this first part right here so if you think about this I want to target the first one right so we apply the style to any of them but I want to remove this out from just the first one all right so we have to target first of type so what I’m going to do is take this out and I’m going to say first of type and if you want to test this to make sure you’re targeting properly very simple just like out of border to it solid red and there you can see I’m now targeting my first one but I don’t want to just target the first of type I want to target the before pseudo element of the first of type of the direct child of it you get it okay so I need to do the before element again so let’s so first of type it’s before element and look look what it’s selecting now right the thing that I want to get rid of so how do I get rid of it I want to display it none now it’s gone and now I have a perfectly scalable future-proofed little author because I know it’s a lot of extra work but I mean this is magic right watch this hit text boom and then let’s say this is comments right it’s already got its divider it’s already got its spacing I mean this is gorgeous right if you want other developers to love you if you don’t want to hate yourself three months from now these are the kind of things that you should do all right so I’m going to delete that we’re just having fun here we’re just having fun that’s the goal okay so I need to space this out let’s go to let’s grab this entire wrapper how do I get it how do I get it all right let’s go to the structure panel and get it right there and I’m going to give it a margin top of a var space s and I’ll give this thing a margin bottom of var space s okay perfect and now we’re looking like we’re getting a hero it’s looking pretty good the only problem with our hero is that this this is red and you can’t you can’t read them and you’re going to see here that if I go and I try to put a text color like var white on here won’t want right we it doesn’t it does not work and so we’re going to have to figure this out so we’re going to right click inspect and we’re going to see that the the a anchor the the a has a color of our primary on it and that is inside the span all right so it’s inside a span inside a div it’s in a so we have blog hero category span a we need to target the a that’s inside the span that’s inside of this class all right let’s see if that works so we’re going to go to style sheets blog blog thank you and we’re going to go to blog hero double underscore category target the span target the a color var white bam baby okay it’s looking good is looking good we need to do that on the author card as well so that’s going to be I’m just going to grab this so blog hero author name and is that what that’s called author name author name blog hero author name it is oh it it fixed it it’s just highlighted weird hold on why is it highlighting that and there it goes yeah it’s working okay there’s like a little delay or something all right so blog hero author name span a so that’s all good but neither of these hover and that’s that’s kind of a problem so what I’m going to do is add a hover style to both of these and I’ll do I’ll do them together that I make this more efficient so we’ll come down here and do this comma and then add this next one on the second line then open the brackets and then I can add our hover style to this so that’s going to be hover hover and then we’re going to do oh man we’re going to make this even more complicated because I actually want do I want a pseudo element on hover or because I don’t want to just underline it that’s kind of boring right um let’s do let’s do a pseudo element so category span a and we’ll do after hover after hover okay so no that’s not what we want it’s hover after so when the a hovers then we do something to the after that’s what we want all right a hover after that’s what we want all right so we are going to do content and then there’s no content this is empty content and then we’re going to do uh display flex and we’re going to do border uh not border we’re going to do with 100% we’re going to do height of 1.5 pixels we’re going to do a background color of var white there it is but I don’t want it to move when I hover over it so I want it to be positioned absolute which means I’m going to need to come up to hover after span a both of these things can be position relative perfect now I need to um actually position the absolute element so we’re going to do uh bottom zero we should put it at the bottom but actually I want it to go below the bottom so I’m going to do minus uh 0.25 m there we go that’s looking good nice okay uh and then we’re going to save and we’re going to check this out on the front end okay there you go and then we can do other things like we could potentially um you know animate that change its how it transitions in we can give it a gradient we can give it funky colors we can do it more stuff with it than if it was an underline plus with the underline we wouldn’t have been able to get this nice spacing on it it would be like attached to the actual text so better to do a pseudo element for those things but at least now people can see that these are links and that they’re working and so that’s good uh and if we check our accessibility there link skip this link drop down link link on categorize article link kevin de re visit link about WordPress list 10 items voice over off all right good so we’ve got we we’re targeting those things there there might be some things that we can do with arey labels to make those a little bit more clear but it is technically accessible right now right so we’re going to call this hero section completed for now and we’re going to move on to the body section of our blog post all right so let’s go back to the back end and let’s come down to our body so what I want here is two columns I want a table of contents on the left I want Gutenberg content on the right I think the best way to do this is um and I should probably avoid using automatic CSS for this we should probably do this as vanilla as possible which might make things a little bit more complicated it is going to make things a little bit more complicated so I’m going to I’m just going to add we’re going to start by adding the grid to the section which I don’t normally do but I think it’s going to be okay in this case so my column counts going to be two my minimum width is going to be zero I’m on the blog body class my gap is going to be var space xl we’re going to at least try that to start my row gap is going to be probably m I don’t need a giant row gap I am going to stretch both of these and then I’m going to that’s it for now let me put two dibs in here so there’s one there’s the other so this is going to be blog body double underscore sidebar and then this is going to be blog body I will call this inner maybe yeah maybe like just inner yeah blog body inner that’s what we’ll do blog body inner and I can already see the problem here that we actually need the sidebar to be smaller and so I’m going to have to use spans here and so what we’re going to do we’re going to need more than two columns so if I want like a two three thing going on I’m going to need five columns and this first one I’m going to use the span override to span two and then this next one I’m going to span three and we’re going to see if that kind of looks like the ratio that we want and I think I I’m feeling the sidebar is a little too large what if I do four here and then I do one on the first one now it’s going to be too small so I actually want one in three so maybe we do four columns we do four columns there’s one and then now this is three I don’t think that made I don’t think that made the first one any bigger did it okay we actually probably need more it needs to be two and four so let’s try let’s try six and then we can do four here two here there we go it’s a little it’s a little narrower all right I think that’s going to be what we’re going with all right so we’re six columns we’re four and two really two and four so this is two this is four okay let’s go ahead and get our body text in here so we’re going to add a text element and then I’m going to call this blog body content just like that and I’m going to give it a width of a hundred percent so I want to make sure it doesn’t have any width issues I’m going to give it a max width of a hundred percent as well just because it’s actually does some funky things with this and then I am going to dynamically insert the post content and let’s see what happens boom there we go okay so that’s looking pretty good so we’re going to save here I want to see it on the front end all right this is looking pretty good all right what I want to do now is we’re going to add a table of contents and I’m going to use oxy extras table of contents because I’ll tell you right now the oxygen built in I think it’s a composite element table of contents is not I don’t think we can actually test it maybe I don’t think it’s accessible let’s let’s look on the back end or the front end one second so let’s let’s investigate real quick so table of contents I want to inspect this div div div div div div okay this actually may not be accessible either I mean we might have to yeah look at this it’s a div I wonder if I can change its tag so let’s look through this panel real quick behavior okay we’re going to have to tell oxy extras that there what I’m looking for is a nav tag this should have a nav tag and I know I can’t give it its own tag because you can’t give you can’t give attributes to third party elements because of oxygens API so what I’m going to do is let’s do table of contents and see if oxygens table of contents is any better so let’s hit save here refresh inspect okay I didn’t expect it to have a a nav tag by default but maybe because it’s a native element I can add a nav tag so or sorry we’re gonna not do it here we’re going to do it here okay so nav save there with me guys I’m building this stuff on the fly like this is not all mapped out for you oh look at that we do get a nav tag and I don’t think we can do that let me just double check table of contents I don’t think we can do that with oxy extras no it’s not it’s not an option okay all right so let’s just see if it’s actually accessible so I’m going to keyboard navigate down hey hey hey hey hey that’s kind of cool oh it appears to be working it’s just not styled the way we want it to be which we can tackle in just a second one thing I’m looking at right here is this has like a little margin ahead of it okay so it’s got so I need to target the p first of type the first basically out I need to target the first paragraph in that content and take off the top margin so that’s blog body content so I’m going to come over to manage style sheets and we’re going to do and I’m just going to do this blog body so this is going to be blog body double underscore content p first of type and then you can check it right five pixel solid red are we targeting properly all right why is it targeting that one that’s a block quote all right it’s actually not going to be a problem because the the block quote doesn’t have a margin anyway but you saw that the see the paragraph up there at the very start now it’s perfectly aligned with the top of my table of contents and I don’t I don’t foresee that becoming another issue all right so what else we want to do I want to I want to make sure that this is hero hero hero hero hero hero so we’ll come up here log hero okay awesome good good good okay all right let’s tackle the table of content actually no before we tackle the table of content I want to tackle the responsiveness of this section because I know this because it’s got spans and everything else it’s going to be a little hectic so I’m going to come down I’m going to decide what break point I’m not okay with this this side by side style for I can’t talk that that issues got me it’s throwing off my brain okay I think 992 is actually acceptable it could be a problem when we run into longer headings and things like that but no I don’t know let’s see what it looks like if we break it right here at 992 so I’m going to display grid again only difference is we’re going to column count one still going to have zero on our minimum width you have to redo all your gaps because that’s just how oxygen is that gap doesn’t actually matter but our row gap does we’re going to have var space m here I think that’s good I think that’s that’s going to be just fine okay um but we still have to get our spans down so this is going to be one sorry span override is going to be one and this is going to be one all right just to make sure that they’re not spanning out of control I think it resets it to that anyway but that should be nice and good I do want a little bit less padding in this section so I’m going to do a var section space s and then I’ll do that at the bottom as well and let’s say even see what we’ve got and make sure that everything is responsive all right check it out on mobile there we go looks nice and clean all right good good so now what we want to do is tackle this styling which I I’ve never done this before I think I’ve always used oxy extras oh it’s got like it’s got global colors in there this is what I’m talking about when you do like pre-designed stuff this it’s like they’re doing look 14 pixels who would ever use 14 back okay come on man you’re doing too much stuff for me not gonna undo things I got to figure out what’s going on here it’s got like borders and padding and oh lord okay this is what I’m talking about man it’s just easier to like build stuff from just give me the blank slate to work with right I’ll style the thing myself borders all right get those out of there you know where’s this red color coming from does anybody know anybody why does this have two classes on it I don’t know that either all right here’s table of contents like kind of like this this oddly enough doesn’t have a heading it’s got a weird background color on it so we’ll do var base ultra light and but why am I putting it on there why is this width 100% on there let’s give it a class how about that so I’ll do blog talk so for table of contents double underscore header like that and now we’ll do with the 100% and now we’ll do background color var well you can’t put section spacing in there that doesn’t really help base ultra light I’ll just use shade because I don’t know if this this site doesn’t even have like real color setup so I’ll just use shade ultra light there I just got a border on the bottom too but where’s that border coming from talk code CSS no nothing in there this is what I’m talking about man you you know you can hide styles really easily in oxygen and then people don’t know what’s going on all right so is it border bottom how about we do none but if that’s done at the ID level which it is take that off that’s where it’s coming from okay so not following best practices and we’re running into issues what else is on there size and spacing yep a bunch of pixelated padding we’ll take that off come on come on okay all right so T.O.C. header let’s just do m’s of 0.5 apply all good okay we also need to use a little margin bottom I think we’ll just use m’s should be pretty easy there we go okay I also want to make this sticky so I’m going to go to custom CSS position sticky top zero there you go so we got a nice little sticky action top maybe 2.5% yeah that’s much better all right good good good good how else are we doing our styling here I can’t see because oxygen’s decided to highlight a bunch of things for no reason okay I don’t know why this is red so what we’re going to do is we’re going to go to the front and we’re going to refresh refresh there we go yeah inspect a div a a why are there two separate a oh those are my age 2s I bet okay it doesn’t say where the okay it doesn’t say where the where the styling’s coming from CT code block oxal talk container CT code block that’s not a code block though that’s a text link it’s oxal talk primary all right can I just change the color here var base dark yes okay at least we can do that and then here I’m going to do var base actually I do shade I’ll do shade dark with you shade dark and shade medium so there’s shade dark and then this is going to be shade medium that’s the idea level come on now sub sub one like what’s the difference between sub and sub one anybody now let’s change this to medium helps if you spell it right there we go I’m guessing based on what I saw before that the line height is all screwed up so I’m also going to adjust the line height to like 1.2 and then we’re going to need a margin on the bottom of like 0.25 and then the same thing for these sub items I’m going to need typography line height 1.2 and then we’re going to need some no I don’t need to be adding classes okay and we don’t need a margin left either well we do we just don’t need an pixels 0.25 m about 0.5 m that looks good oh that’s what sub sub is for huh yes sub two geez Louise all right so m 1m oh my gosh we have sub threes oh okay we’re not going to do h3s in our table of contents that I don’t think yeah because we’re not going to have I don’t want h5s in there I don’t want h4s in there I really just want h2s and h3s so how do we get rid of other than display none I think we’re going to have to edit the top code which is empty what is going on JavaScript okay here it is I think we just take these out maybe not I don’t know JavaScript this is one thing I don’t know is JavaScript so we we’re just going to be hacking away this thing store them in variables variable used to increment the dynamic IDs jQuery the jQuery heading itself or any of its parents have the talk exclude attribute give it okay if the heading itself or if any of its parents have the talk exclude okay well that that’s for stuff on the other part of the page mk h2 h3 break h4 I’m guessing we can just maybe take this out this is the part where you should I got to give a disclaimer you should consult your friendly neighborhood JavaScript person to make sure that you know I don’t know let’s say we probably need to put in wow this is those items just do not look good right I got to go here this needs to be like 0.5m maybe even 0.75m actually they need to be they need to have a margin top but not the first one that’s the problem so like 1m but the first of type needs to have a margin of 0 now we should see better spacing between our h2s there we go now these h2s are actually separated and actually the first one I just delete this first the type thing because the first one does need one because there’s a header above it and I’ll just take the margin off the header all right let’s see now I know I’m jumping around I’m sorry this thing is chaos the oxy-exer is one is a lot better the oxy-exer is one I just need to be accessible it’s not currently so this actually needs a margin of the on the left a little bit I want it like to be in set just a little bit so 0.25m we’ll make this one sub 0.5m we’ll make sub 2 1.5m which I don’t even think we’re going to be needing all right let’s see how we’re looking now there we go that’s a little bit better okay the point the the the h3 one definitely needs a margin top of 0.5m see how that’s looking now that’s getting better okay I don’t know why this is underlined but these aren’t underlined like that it makes you want to click on the the h3 is probably the least important thing like why why is this like this typography let’s get rid of the underline thank you now let’s see what this looks like that’s better but I’m not liking I don’t this maybe need to be 0.75 here the spacing is still a little looks a little cramped for the h3s and I think that needs to be indented a little bit more honestly so maybe one maybe we just go 1m on that and then on this we can do like 2m even though we’re in we’re not going to use it all right that’s looking acceptable now we’re getting there this I believe we can I’ll just grab the wrapper and typography font weight 600 okay so the question is now are we getting an h4 in there I don’t have one in my blog post so I can’t see so there’s that we’re going to make a this is an h4 heading and heading h4 update refresh and it’s not in the table of contents I think the little hack job that I did on the job of script has has worked for us okay well done well done look at this it’s working but what I’m afraid of is it something outside of this like if I put a heading down here it’s going to show up this has always been a problem I think I remember this problem for the very first time I tried to use this which was long long long ago once I got oxy there it is look it’s picking it up even though it’s not in the blog post and so if you look in the instructions believe I saw just a minute ago and that’s what reminded me of this in the talk code it says right here you need a talk exclude attribute hmm talk skip wait that’s a talk skip this is toxic exclude talk exclude attribute okay well what I’m guessing is that we go here and we go to attributes and we add attributes talk exclude not talks talk exclude I mean that’s an attribute I’m just guessing we’re going to look up the documentation if this doesn’t work yeah if the heading itself or if any of its parents have the talk exclude attribute skip it talk skip I’m going to try talk skip it’s these little things man that there we go my lord okay look at this look at this look at this let me show you this this is what threw me off it says if the heading itself or any of its parents have the talk exclude attribute but then right here it’s defining a talk skip attribute come on these are two different things Elijah Elijah okay talk skip we got we’re good we’re not dead we’re still working okay the problem is that you have to remember now right it’s like I should be able to target the blunt us body this is how oxy extras does it and say scan the things in here and put them in the table of contents versus hey just grab everything on the entire page and then I’ll tell you what to exclude afterwards and if we come back in three months three month rule here it is three month rule if I come back in three months and I add a new section I’m going to forget that any headings in that section are going to get added to the table of contents so officially what I’m saying now is I’m going to tell oxy extras hey you need to make your table of contents thing accessible and at that point when they do that use the use theirs don’t use this one all right okay but I think we’re officially done with oh we need to here’s what we need to do one more thing one more thing one more thing now now I got to get my head back on track with everything else we got to think about so under attributes I need to give this an aria label of so this is going to be announced as a nav table of contents I’ll do table of contents safe all right refresh close your ears voiceover link this link link link the lotinempress link Kevin Deere update button link Kevin Deere article slash eight table of contents navigation you are currently in navigation see that April table of contents navigation table of contents link the lotinempress emptying set out it link and incubator takes a sip of up link delectas alias voiceover off good okay so we are and you can look at the we can inspect it right here we can see that we have a nav tag and the aria label is table of contents so all good we can also use labeled by and then just steal this text right here but yeah I don’t know maybe we should have done it that way but you have to do that with ideas I think and it’s it’s it’s kind of annoying so I’m just going to leave it the way that it is it announces it properly it’s accessible it’s it’s all good to go so that is the conclusion of the body now what we’re going to do is we’re going to tackle the footer where our author post box is going to go and then after that we’re going to tackle the related posts all right so I’m going to delete this and we are going to tackle our footer I’m going to go back to our structure panel here’s my footer basically what I need is an author bio box to go in here and actually now that I’ve gotten two columns I don’t think I want this to be down here I want it to potentially be up here with the article so I’m actually going to get rid of this section and what we’re going to do is in this div right here which is the blog body inner we are going to add another div and we’re going to give this the footer tags this is going to be footer just like that and I’m going to call this blog body actually just blog footer no not like that my brain is not working sorry blog footer just like this and then we’re going to go 100% and I’m also going to give this a tag of a side or is it no I think it can just be a div it can just be a div because it is technically the footer yeah and then I’m going to put a div inside of it and this div is going to be the blog author box blog author box and we’re going to go with width 100% and we are going to go with the background of var shade ultra light we’re getting a little lag now we’re going to go with padding of var space xl maybe apply all let’s drop a I want a headshot on the left and I want the name and bio and a link on the right and I’m wondering if I should do this with flex box or grid I think I’m going to do flex box we’re going to do an image and I’m going to pull in the author pick again size is going to be 400 this time I don’t actually know how big it needs to be that’s a little much author pick 200 that’s actually kind of perfect okay yeah yeah yeah so this needs a class blog author box double underscore headshot and rim of maybe 10 10 how about we do 16 and 16 that looks pretty good let’s do borders 50% let’s do object fit cover just in case let’s do a border of five pixels maybe and I’m going to write my var over here because if I write it in that box that we’re going to get lag city so this is going to be far bg no far I was taking my shade dark maybe maybe shade dark it’s going to take watch okay well that that wasn’t that bad all right good it got its little got its little border next we’re going to do a div and this is going to be the blog author box double underscore inner and on this outer wrapper we’re going to go horizontal flex top alignment I’m going to add a gap here a var space L maybe even XL okay and on this inner this is the blog author box inner we’re going to go with 100% looking good we’re going to add text here I don’t want this to be a heading necessarily I just wanted to be text and we’re going to pull in my author name there’s our display name perfect next thing I want to do I also want to stretch on this yeah let’s just use stretch there we go and then after name I want another text element this is going to be my bio so we’re going to insert data author bio all right there’s that I want to give these classes blog author box bio blog author box name this is going to be alt text author display name I’m going to say author author headshot dash kevin giri okay this is going to be with sorry font weight 600 and this is going to be var text L for larger text this is going to be line height 1.4 1.5 this is going to be margin top var space m s okay so we round the corners of this at all I don’t know maybe we should borders var radius s okay looking pretty good this entire footer we’re going to put a margin top on a var space m and then I will explain to you that I’m not going to do comments here because the comments module in oxygen is not is not accessible and I don’t know off the top of my head of an accessible comments add on for wordpress but I would highly recommend if you need comments to go look for an accessible comments I usually turn comments off on almost every blog I do but if you need comments I would go find a plugin that adds accessible comments feature and use that all right so I’ve got my little blog author box it’s got an alt it’s got alt text I’m going to give this an are a label as well so we’re going to go to attributes are you label and then I’m going to say that this is the article author box all right we’ll save and then one thing we do need to check is mobile responsiveness here so because I know for sure that that’s probably not going to look great yeah see right there it doesn’t look so great so in this case one thing we can do is bring down the size of the image so we can do maybe 12 here and 12 probably needs to be even smaller 10 and 10 that looks pretty good and then the next one down we’re just going to go from flex horizontal to flex vertical and that’s going to fix that and then I do need to add a link sorry I forgot my link so we’re going to add a link here which I think we just had a text element and then it’ll link it when we do the dynamic data so I’m going to insert data display name okay I don’t I don’t want to how do I want to do this because I’m gonna say okay this does need to be a link it does need to be a link all right so I’m gonna do link text link and we’re going to say see all articles from insert data author display name insert so see all articles from Kevin Geary okay that looks good so this would be the blog author box I’ll just put link link then given of context what have we more than one link blog author box archive link that links to the blog author archive which I’m going to hit data and go author post URL all right now on the top I can do var space got getting a lot of lag now um pass and I put a double parenthesis in there I got a fix okay good all right we’re looking good we’re looking good we’re looking good all right um one thing I do want to do up here on this image that I believe I forgot did I forget something on that image I had something my head a minute ago where I was like I think I forgot something in the hero up there and now I’m forgetting what it was again oh that’s right that’s right I wanted to add width and height to all of these um so we’re going to add a width this is going to make sure now this is a tiny tiny tiny image so you know but it’s good practice it’s just good practice with the width and height values on here because if you ever get any um got my brain is like non-functioning now this we’re we’re almost like an hour and a half into this tutorial and my brain stuff it’s it’s self-functioning um what is it called layout shift you get any layout shift warnings or errors this is how you solve them so that image you can see is you just grab the dimensions of it by inspecting it 40 by 40 so we’ll just do 40 and then height is 40 boom so we’re going to save so now that hasn’t explicit width and height set as an attribute and then we come down here to this one which we need to see let’s refresh nice inspect so this is 16160 so I’m going to go to attributes add attributes we’re going to do um width 160 height 160 save and then I also need to do this for the hero and I need to be on the image and you can see that this image or this whole section inspect is typically uh 759 height we’ll say we’ll call it 800 so I’m going to do attributes add attribute we’ll do seven we’ll do seven 60 so do width 100% and then height is 760 I believe that’s why I said it was right yeah 759 yeah okay good um okay so save there that is absolutely could cause a layout shift that real image in the hero if it doesn’t explicitly know how tall it’s going to be now we should not get any layout shift on there all right good good good good good all right we’re looking very clean so now what we’re going to tackle is our related posts all right so what we’re going to do with our related post section down here is um first of all make sure that the tag is set to a side uh this is not really part of the uh of the article right um and this is outside of the article as well so that helps um but I’m going to go ahead and put the background color of var shade ultra light on here I’m going to add a heading this is going to be an h2 and we’re going to say um more posts like this okay and then I am going to give this a class um this is going to be blog related posts heading all right the next thing I’m going to add is a repeater and I’m going to give that a class of um blog related post cards wrapper it was already here I basically had to restart my computer because the lag was so bad and a couple of these things got done and I’m re-recording this little section um but I just added space to the top here um next thing I would need to do is so that we can see something in our repeater is I need to go query something and uh I believe I started on this as well we’re going to edit query I did I’m going to do this um from the beginning I’m just going to delete all these and we’ll talk about how to do this from scratch okay so um first thing you need to do is query posts right so you’re going to do post type and the post type is equal to post next thing you want to do is you you only want to query publish posts right so we need the post status if it’s published then we’re good next thing we want to do is turn off pagination so we can do no found rows and set that to true now comes the hard part um now we have to do an array um so we’re going to come down here and go to tax query under taxonomy because we want a query post that are part of the that are part of the category of the posts that we’re currently reading because that would be related posts related to this post or post within the same category so what we have to do is choose array and then we’re going to add a value and here is going to be taxonomy and the taxonomy is going to be category we’re going to add another value and another value this is going to be tax um let me see uh terms sorry so taxonomy is category terms and we have to insert the terms dynamically the terms are the actual categories right so we’re going to add value here and we’re going to say um taxonomy terms is under advanced right here and choose category again right now that’s going to actually query the categories of this post and put them in this field right there then what we’re going to do is choose field and we’re going to tell it to look in the field all right um in the field is going to be the slug we’re going to tell the look in the slug all right I think that I think that’s what we need next we’re going to do oh the last step is you don’t want the post you’re viewing because it’s in the category obviously you don’t want it to show up in in the group right in in the cards so we want to exclude the current post the way that you do that is um not in I think it’s post not in I just type in not in and it’s post not in right here post not in and then you dynamically insert the ID of the current post using data post ID now your query should be built if there’s any luck hit apply there you go so we’re showing two posts looks like two maybe we’ll say um here’s the moment of truth where you actually start adding things and see what it queries all right so repeater we have a div what we need is a card now so this first div is going to be our related post card all right so now if you already have blog post card classes and styles you could easily just add them here and whip up a new card that looks like all your other cards I don’t have any on the site so I’m just going to create what’s called a related post card so I’m just going to do related post card and I also need to make this a grid so on my repeater we’re going to go to grid layout enable grid I want this to be three columns and oh we also need to limit the post to three because I don’t want yeah I don’t want to just query them all right all right so we’re going to limit it to three is just a second minimum width is going to be zero gap is going to be var space m gap here is going to be var space m I want to stretch these which I have to click these buttons twice in order to get them to work and I think we’re good there let’s go down and see where we want to break this probably right there or yes yeah let’s go there enable the grid one zero var space m var space m okay oh that’s going to create a really wide card um let’s go to yeah yeah okay that’s fine it’ll put a little straggler down there but whatever it’s it’s going to be fine I don’t like doing that but it is what it is I don’t want those cards to be gigantic I don’t know oh gosh I’m changing my mind let’s just stick with one maybe a giant card won’t look that bad we’ll see all right sometimes it’s hard to deal with these break points so now what we’re going to do is inside of our related post card we’re going to add a div for the wrapper for our image we’re going to add another div which is going to be our body and I’m just going to make the head headings clickable so we’re not really going to need a footer so this will be blog this will be related post card double underscore featured image wrapper and then this will be related post card double underscore body like that and this will be with 100% this will be flex one to make sure it grows with the card I’m also going to grab that featured image wrapper that’s going to be with 100% next thing I’m going to do is add the actual image this will be the related post card featured image just like that it’s with will be 100% and I want to think about this because we’re going to need to limit it tight I think what I want to actually do is now I think yeah we can do it on the actual image so let’s limit the height here to 24 RAM maybe that’s pretty good we’re going to need to do object fit cover and let’s go ahead and dynamically pull in the data here size is going to be medium large insert there we go all right we’re looking pretty good we need to grab our entire card and give that an article class this is going to be an article on its own okay that’s nice in the card post body we’re going to do some padding this is going to be var space m maybe that’s a little too much we’ll see in just a second I’m going to add a heading in there now that’ll that’ll look good this is going to be an h3 and what I want to do is query the heading the post title but you know what I’m seeing kui et sin libero kui et sin libero it’s querying the post that I’m actually looking at but I don’t know if it’s going to do that on the front end or not all right I do think that’s a little bit much for let’s do s see how that looks that that looks better that looks better okay let’s give this another radius so we’re going to go border var radius s just like that so those look pretty good I do need to link this up this is going to be a link and it’s going to go to data come on oxygen killing me data okay permalink and that’s going to affect the styling it always does these need a class as well before I start styling them so related post card underscore heading and text color on this heading is going to be base dark I should keep using shade I’ve been using shade the whole time might as well keep using shade okay and we’re going to go to typography align left and then we need to give it a hover state so hover var primary that’s what’s going to look like when it hovers okay those are pretty good check the front end here hey look at that it doesn’t show the card it only showing it in the builder but it excludes it on the front end so these are your related posts right here we need to make sure that our alt text is dynamically inserted here all right and then we’re going to do feature damage alt excellent all right we’re going to save so we have more posts like this we need to grab our query again add a query and we need to add a parameter called posts per page and say three it’s only going to query three posts now let’s see what this looks like at 992 see they’re a little they’re a little big aren’t they what do they look like back at three hmm yeah it’s a little squishy like we’re right in between man two that’s not awful it’s not awful at 768 we’ll go to one and I hate the fact that I have to keep doing this over and over again space m space m and one with zero okay that’s what it looks like on mobile I see this link right here is having a problem with its line height so we’re going to go to typography 1.2 okay we’re basically done what I want to do is some last minute items which are I want to go through and just check everything and I want to run it through speed test I want to check for layout shifts oh here we go uh right here before we go I know that we need to go to attributes add attribute and we need to give these a width and a height right so this is going to be width 100% height is going to be I made it 24 RAM so it’s going to be 240 okay so those have an explicit width and height set on them now all right so we’ll just do a final round of checks and we’ll see if we have any layout shift issues we’ll look at it on mobile inside of polypane and then we’ll be done we’ll be done all right guys so we’re going to do some last minute checks now I’m going to go to the front end just give it a once over okay this all looks good oh look at this more posts like this so we’re not excluding remember I said this is going to be the problem that we run into you okay so what I need to do is blog related posts we’re going to go back to our table of contents so we’re going to go to top code JavaScript oh it’s talk skip that’s what we need to uh to put on on the attributes add attribute talk skip save front end there we go so that fix our table of contents all right so first thing I’m going to do is just a quick check on you know with this right here so we come down all this looks good oh right there you see it okay so we have an issue there that we’re going to want to fix everything else looks good we’re getting no horizontal scroll all all of this looks neat okay so we’ve got one issue which is right here and I believe we’re just going to fix this with flex wrap so I’m going to go ahead and say um layout flex wrap wrap that’s going to allow this to wrap the two lines instead of it trying to squish itself um and then I’m also going to just fix up the line height on these these only need to be like 1.1 with the line height maybe like 1.2 grab this one typography 1.2 as well and then let’s see what we get on the front end so we’re going to bring this in there you go now it breaks but what’s our problem here it’s going to the left yeah so we need to center everything I’m going to see what it looks like here see it’s not showing us that um but what I’m going to do is make sure of is that we’ve gone flex I’m going to center everything horizontal alignment on this and that should fix that let’s see let’s see what we get now there we go so yeah it I mean it kind of puts the date awkwardly under here the question is you know is it really that big of a deal at that point I can say that at that what are we at like let me look at the screen size I’m looking at here this is I don’t even know if they make devices that small this is realistically nobody’s ever going to see it break to another line like that so I’m I’m fine with it we could if we wanted to go in and just remove the pseudo element at this break point but honestly like the amount of work for almost nobody seeing that it’s not going to be an issue all right I want to pull this up in polypane now we’re going to go through see how we look so I’m seeing multi oh look look it is showing on this version it is claiming that somebody’s going to see that but at the same time it doesn’t really look all that bad but I’m thinking should we should we go ahead and do it okay let’s take a look manage style sheets go to the blog it’s it’s it’s it’s these right here so blog hero meta okay first of type before display none so what I can do is use a media query I can use media min width and we’re basically going to say at so I can see on this browser exactly when it occurs which is right there that is 323 pixels so I’ll say at 323 I’ll give it 325 just to give it a little breathing room or three we’ll say 330 right 330 pixels we’re going to do this right here which is adding the styling let’s get this done this done okay make sure our formatting is good all right so we’ve only added this styling at 330 pixels and up so I’m going to save that and we’re going to refresh and see what it looks like now and we might have some spacing issues but we shouldn’t yeah okay so we don’t have that and now what I want to do is think I have a there’s a couple different ways that we can solve this so I can target all of the things in here and say at media max width this might not be the most elegant way 329 pixels so 329 pixels in below all of these are going to be display block and that may do the trick or it may not do the trick we’re going to find out okay that did not do the trick probably because let’s we’re going to do blog hero meta let’s just do this should already be display flex but flex direction column okay so 329 below that should be flex column instead of flex row what are you doing to me 327 inspect blog hero meta still saying flex direction row oh because it’s very it’s got all this extra stuff going on up here it oxygen adds this extra stuff to the CSS and makes it more specific so I’m just going to copy all of that I may need to use important here I don’t know oxygen has there we go no problem no problem okay and now what I want to do is add a gap of 1m and there we go so now it looks like you know my name is on one line and then the date is clearly on another line I think on here I can make these a little closer I don’t remember where I put the spacing though think I did it on here no oh did I do a gap on the wrapper I did a gap on the wrapper which is going to be in custom CSS so it’s going to be 0.5 move those a little closer together this is where I’m just like I’m nitpicking at this point aren’t I okay we’re good we’re good we’re good okay polypane refresh me there it is all right so that’s all fixed up looks good on desktop all this stuff looks good nice so now let’s check oops I don’t want to open chrome now let’s head over to google page speed insights and now I have not done any optimization on this whatsoever right like we’ve done no speed optimization I don’t have I don’t even have caching turned on on the server so we’re just going to see I just want to look at like layout shift and things like that so I’m going to let this run and look at this look no optimization whatsoever we’ve got a 95 on mobile right desktop it’s going to do us oh it does it separately now look at this 99 on desktop no layout shift on desktop let’s see what we’ve got on mobile no layout shift on mobile this is like really this is guys this is without caching this is without perf matters this is without flying press I’ve done zero optimization on this like this is hard to beat this is hard to beat and it’s got a real image up there we can check in and just take a look at our html again so look how clean we’re looking we’ve got a main right we’ve got an article inside the article we have a header and a section inside of that section we should have a footer in here as well somewhere where’s our footer let’s see so we’re inspect here there it is right there there’s our footer but I need to change that there’s one thing I’m missing okay so here yeah that this div but this wrapper div needs to be the footer there we go okay so I’m going to say that we fix that now just doing some final checks just making sure our html is really clean okay there’s the end of our footer then we have our side down here which is our blog related posts we’ve got an h2 in there there’s our post cards their articles featured image wrapper there’s our featured image no alt text on this featured image but I think that’s because yeah that’s just because they don’t have you would have to actually go into the media gallery so when you do this for featured images very important so you add them here like look at this one see this alt text is blank so you would say like guitar I don’t know what is that called the head of a guitar I don’t know parts of the guitar sorry I’m not a musician the head of a guitar with strings something like that and then on this one you would say hey um view of mountain trees with smoke at sunset and then you can actually use the left and right arrows which is kind of cool um and this is a river valley with trees and hills okay you’re just describing what the image is basically now that those have alt text I can go double check that we’re actually getting alt text here and there it is view of mountain trees with smoke at sunset and I come up here and make sure that my little head shot here has some alt text good it does and now what I can do is go through we already check that one here comes the talking banner let bit link simple link link on categorize our link kevin giri link beloved and presenting set out it table of content link on categorize link link banner link visit link link beloved and presenting set out it table of contents navigation link and in qp2 takes us out of met son to lorzune link delectus alias link see all articles from kevin giri link heading level three baby per yotter compadilly not use it do simous art link heading level three for visited link about wordpress let voice over help menu five items commands help menu 13 items you are currently in a voice over menu this closing commands help menu visit quiet quiet one thing people do is they navigate with screen readers by heading so you do control option command h you can navigate by heading heading not found heading not found let me drop down collapsed button heading level one krius and libero amiz valentina this act heading level two will up to them presenting set up heading level two and in qp2 takes us out of met son to lorzene level three to let heading level four visit heading level two more posts like this baby per yotter compadilly not per yotter set from heading not found nice you are currently on a link to click voice over off see how we have an h2 followed by h3s up here we have an h1 followed by h2s everything is really really really clean you can see our scores are great if I optimize this no doubt I can get this in 99 a mobile if not 100 get this to 100 on desktop very easily so this was it this was a big tutorial that’s the end of it there could be things I missed because as you can see there’s a lot of stuff to account for and I’m just doing this off top of my head I’m not following like a list if there’s anything missing obviously we can talk about it in the comments that’s what’s great about having discussions about these trainings right there’s anything up for debate on should we do this should we do that you know let’s have all that discussion in the comments down below but this is going to get you like way further than than most trainings are going to get you in building a template like this still up to come is archive templates category templates search results templates we got a lot more to do so stick around