Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 Mixing HTML and PHP

Continuing with the previous example, I'll show you two methods for inserting HTML into your PHP file. You'll use these both every day if you're coding PHP for WordPress!

Related Links

3.2 Mixing HTML and PHP

Hello, and welcome back to this Tuts+ course on coding PHP in WordPress. Previously in the course, we created this PHP file, which is a custom page template. And in this part of the course, I'm going to add to the PHP that's already been added to it by inserting some HTML. And I'll show you the two main methods that you have of adding HTML to your PHP files. So let's start by adding some HTML in the loop. Now, I want to open up an article tag, or article element, and close it again. And that comes here after the post because it's within this while have_posts so it will be looped again and again. So I would type in article, making sure I type it correctly. But you can see here from the syntax highlighting that it's incorrect. So what I need to do is close my PHP tags. So here my article is highlighted correctly. And now let's close that. And again, my syntax highlighting is showing down here that there's a problem because I need to open up the PHP tags again for what comes beneath that HTML. So there we have it. There's a closing PHP tag here after I've used the template tag the_post, and then we've got our HTML in there, and then we open up PHP again and close these braces. So you can see that that includes the close and reopen of PHP, which you can do within braces. That's not a problem. And then after that, we've got the else statement and the call for the sidebar and the footer. So within my article, I'm gonna need to output some content. And again, I'm gonna do that using PHP. The template tag I need to use is the_content. Now, can you guess what it is I've done wrong here which is why it's showing up in black and not looking correct? The answer to that is PHP tags. So I need to add an opening and closing PHP tag around that template tag. And you can see now it's highlighted correctly in blue. So within my article element, which is HTML, I've got this PHP, the_content. So that's how I'm closing and then reopening and closing and then reopening my PHP again. So in order to add HTML, one way to do it is to close your PHP tags, add some HTML, and then open them when you're not in PHP anymore. I'm also gonna add some PHP within this opening article tag, so that I can add the ID and the CSS class to my article. So I'll start by typing in the HTML for the ID. So here, the article ID is going to be equal to the ID of the post. I do that using a PHP function. So I need to open up PHP again. Making sure I use my braces after that function, or template tag. And close that again. And I'll add a space there. So you can see even within an element, an opening tag from my element in HTML, I can add PHP in there as long as I open and close my PHP tags. And those are within the quotation marks, the double quotation marks I've used for the ID. Now I'm gonna use the post_class template tag, again, inside this article or opening tag. So that will produce a list of classes that are relevant to this post dependent on the post type it is and so forth. And I showed you that briefly in an earlier part of the course. Now, you might think, what is the point of adding all these opening and closing PHP tags? And indeed, that can be quite time consuming, so there is another way of doing it. And that is by instead of closing PHP and starting to type HTML, you echo out your HTML without closing PHP tags. So, let me remove these. You can see that it all looks a bit of a mess at the moment, but that will clear itself up. So I'm gonna get rid of all of my opening and closing PHP tags. Right, so in order to have this echoed out within PHP, I type echo, and then, I put that around that, but that's not gonna quite work correctly. So what I need to do is I have echo article id=, let's get rid of that. Right, so after my HTML here, I put a space and then a period. One moment. I close those single quotation marks, then a space, then a period, then my template tag in PHP, and then another space, and then a period, and then an opening single quotation mark, and then that's the double quotation marks here, and then I'm going back into PHP. So I put another single quotation mark, space, and a period, and then post_class. I don't need the semicolon. I put another period, and space, and then single quotation marks around the closing of this article element here. So let's have a quick look at what I've done here. So I've used echo, I'm echoing out article id=. I open my double quotation marks, close what I'm echoing to go back into PHP, and you have to put a period at the beginning and end of each of these. And then I've got my template tag in PHP, the_ID, another period, opening quotation marks for echoing out the double quotation marks here, closing single quotation marks, another period, post_class template tag, period again, opening quotation marks for my closing brace for my article element, my opening tag, and then closing the quotation marks. So it's up to you which of those two methods you use. Some people find it easier to close their PHP tags and just type HTML, and others find they prefer to continue working in PHP and using echo like this. And you can see here that I don't need to do anything extra to the content here because I'm already in PHP and that will work. But this closing article here, I need to echo that out. And that's a bit more straightforward because there's no PHP within that. So you can see here there are two ways of adding HTML to your PHP file. You can either close and open your PHP tags and write your HTML between those closing and then opening tags, or you can echo out your HTML and not close your PHP tags at any point. Which you use will often depend on how much HTML you're writing. So if you're writing multiple lines of HTML, it's a real pain to keep echoing them because you'll have to echo every single line, as against just closing your PHP tags once and then opening them up again. So that's a matter of personal preference a lot. But what I would recommend is stay consistent in the way that you do it throughout your file. So that's how you add HTML to your PHP file. And adding HTML is really important, because as well as the template tags provided by WordPress, you'll need to add elements such as articles here, and other elements like divs in order to make your markup correct and to make it make sense in the browser. In the next part of the course, I'm gonna wrap up this course and summarize what you've learned as you've been going through the course. See you next time, and thanks for watching.

Back to the top