 The time has come. Today is the episode where we are going to write some PHP unsupercharged, unheard of, but today it's going to happen. Before I start, I've said before, and I will say it again, don't waste your time arguing about PHP and if it's a good language or not. Remember, we are all JavaScript developers here. So it's kind of ironic if a JavaScript developer pretends to use the pinnacle of language design. They're both widely used languages and you can write really, really elegant code in both JavaScript and PHP. I mean, I don't specifically in PHP, but you can. And if you want to, that's definitely a valid choice to do. Before I start, I only knew that I wanted to write a theme, a theme that uses all the modern web technologies. And because I didn't know WordPress very well, I just wanted to throw away everything that is usually in a theme starter pack when you Google it. So what I did, I had the empty PHP file, added an echo statement to see that PHP is actually working, loaded into WordPress, saw that WordPress for some reason requires you to have a styled CSS file. So I created that as well. And that's already all you do to have your very first WordPress theme experience, I guess. So as you can see here, the CSS file is literally empty. And if we look at the PHP file, it's not much there, just an echo statement so I can make sure that PHP actually executes. And if I run my Dockerize blog, you can see that that echo statement is actually executed and I see it on the screen when I go to the blog website. Now, that's great and all. It's a very non-controversial blog that loads very, very efficiently. But also, no matter how many blog posts I create in the admin panel, they don't really show up and that makes it kind of useless. And to change that, we have to tap into one of the oldest and I guess core features of WordPress, which is the loop. And as you can see, it's literally a while loop that we use to iterate over our latest blog posts. And we just have our markup and fill in the gaps with PHP to render the title and the author and all these other things. And if we now reload it, you can see that we now have a list of our blog posts. And that, by the way, is server-side rendering. Server-side rendering means that all the content, all the parts that you need to bring something on screen is in the first response of the site. So we are putting the title and the author and everything else into one document that can be sent to the browser and be put on screen immediately. And that means that the time to first contentful paint, the time it takes for your content to appear on screen will be extremely fast. For example, in my blog, it takes under a second, even over a slow 3G connection, as it can be found in emerging markets, for example. And having this lower number is really important to not give users waiting because that's the easiest way, basically, to lose your users from your website. But also, as of now, if you take a look at the listing that we have, if we click any of our blog posts, it will be redirected to a page where we can only see the blog posts title and no content. And that can defeat the purpose. And the reason for that is because we haven't talked about the template hierarchy yet. The template hierarchy is the system that WordPress uses to figure out which template file to render depending on what page the user is currently looking at. And they have an image explaining the system on the documentation site, and you can see it here. It's a bit overwhelming. I'll grant you that, but also it's at the very core of themes. So it's worth putting in the time to understand how it works because it will allow you to build complex sites fairly easily within WordPress. What does this tell us? How do we use a template hierarchy? Well, for now, we only have the index PHP and as template hierarchy tells us that it's gonna be used for everything. And we want a different template to be used for when somebody looked at a blog post. And this is where we can look at the template hierarchy. I've drawn a subset of the template hierarchy here. And because we have basically three different places a user can land on our blog. They can land on the homepage where there should be a listing of our most recent blog posts. They can be a category listing if somebody only wants to look at my JavaScript-related blog posts. They can look at the category listing which lists only blog posts in this category, and they can look at an individual post. And as you can tell, they have as a distinction that home and category are listings of multiple blog posts while a post is a singular item. And that's why exactly that name is being used in the template hierarchy where we have singular. So if somebody goes to home, we will use index PHP. If somebody looks at a post, it will use singular PHP and the category is a listing just as well so it will use index PHP as well. So what does singular PHP look like then? That's actually pretty simple because I just copy pasted the entire index PHP but the same code in there. And just added rendering for the content of the blog post which is what was missing before. So the other pages, the home page and the category page all look the same as before but when you now click on a blog post we should hopefully see the actual content of the blog post as well. We just made ourselves a blog. That's pretty impressive, right? See, we have an index listing. We can click any of the blog posts and then we see the blog post. That's a blog. That's pretty cool. Looks a little bland, admittedly. So it just needs a little bit of styling. We have color, a couple of images here and there. But be careful about that because this is where I see a lot of developers tank their loading performance. And that's exactly what we're gonna talk about next time on how to load styles and images and all these things performantly.