7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 22Length: 2.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 The Content Pages (Part 1)

Hey, welcome back. So in the previous lesson I wrote this index PHP file and currently our page doesn't show anything because we gotta create a content file for the post formats. So let's go ahead and create that. Any file called content PHP as usual start with a PHP tag, content PHP and then add a small description. This file will be responsible for outputting a post, a single post and I was speaking about an HTML structure in the previous lesson. Well, for this I'm gonna start with an article. So, every post will be wrapped in an article tag. And then on each post, on each article, we're gonna add the ID of post- and then I'm gonna do a PHP tag. And inside, I'm gonna put the_ID. And then right before the tag ends, I'm gonna say ?php.Post_class, okay, so this is the article. And let's see if that works. Okay, if we inspect our element here, we can see that we have an article with an ID of post-4. And with all of these classes. So you can see right away that it's really easy just by adding a few functions. It's really easy to create the mock-up you need. So in this instance the ID refers to the post we're currently loading in this while statement. All right, so by executing the post we're loading a bunch of stuff about that post which can be accessed with this function and with this function right here. So, every post is gotta have something like a header and then a content. So, let's say Article header, and I'm going to start with a header class entry, header. And in the header, we gotta put stuff like an image and a title and also the post matter, which is all the information about the author, the date, the number of comments and so on. So, first of all, the thumbnail. I'm just gonna start a PHP tag here because I need some comments. So I'm gonna say, if the post has a thumbnail and it's not password protected, then we're display the thumbnail. And in function language, that goes something like this, if ( has_post thumbnail and not post_password_required. So if it doesn't have a password, yeah, then, we're going to close the PHP here, because we're going to write some HTML. We're just gonna say figure with a class of entry-thumbnail. And inside we're going to php the_post_thumbnail. And then we're gonna do an endif to close the if that we opened right here. So, again, if we have a thumbnail and it's not password protected, then I'm gonna output a figure tag with this class. And inside, I'm gonna display the post thumbnail, which will render an IMG tag with the correct source. Okay, that's it for the thumbnail. Next up, let's see about the title. So I'm just going to delete this ending tag here so I can use comments. So if it's a single page, then we display the title. Else, we display the title in a link. So, it goes like this. If is_single, so if we're referring to a single post, then we're gonna output an h1, which is gonna say php the_title. And then, php else. So if it's not single, we're gonna do an h1 with an anchor tag inside it. And the anchor tag href will go to the permalink for that post, so the permalink, and then I'm gonna do a rel bookmark, again to help with accessibility. And inside the link I'm just gonna say php the_title. And in here, I'm gonna say php endif. Okay, so let's see what we got so far. Let's refresh and there it is, Testing and Hello World! And as you can see, these are the posts that we have right now. So let's go over this one more time. If it's a single post, which will happen if I access Testing, for example, you can see that we just have an h1, yeah h1 with a title. Else, if it's not single, if it's displayed like this, we get an h1 which contains an anchor tag. You also have a link, basically. The final thing we've got to do in the header is display the post meta, which is the author or comments information and so on. So I'm gonna do a paragraph with a class of entry meta and inside this paragraph, I'm going to do PHP. I'm going to start with a comment that says Display the meta information. And I'm going to call a function called alpha post meta. And then I'm gonna close the header and entry header. Now if we refresh, we get an error because we don't have this alpha_post_meta function anywhere. But we can go ahead and write it now. So open up functions.php. We're gonna register our function number five here. We're going to say display meta information for a specific post. And following the logic that we used here, we got to test that the function exists first, so if Not function_exists alpha_post_meta, and then we're gonna define it function alpha_post_meta, yeah, and inside we're gonna start with an UI. And basically, all the information that he can put in this meta he can put in a list. So we're gonna start with echo UL with a class of list inline. This is not our class that's being used by Bootstrap, and then entry meta, okay. And then we do a check. If the post type is post, so this is different from a page, right? So if get_post_type equals post then we're gonna start with the sticky posts. So if the post is sticky, then we're gonna mark it. So if is_sticky. A sticky post, if you're unfamiliar is the kind of post that stays on top of the other posts even if it's not the most recent. So if it's sticky then we're going to echo. We're going to start with list item because we are inside an on ordered list. We're gonna add the class of meta featured post. Close the list item. And inside we're gonna add an icon like a pen icon and that will be represented by an I with a class of fa and fa thumb tack, and close the I right here. Now, this is how you include awesome icons, and I'm gonna do that at the very end, but this is the markup that you gotta use, and then after we add this icon, we gotta add the word sticky to it. So we're gonna do this, and we're gonna print out Sticky and then alpha. So again, as you can see, we are marking this string for translation and by using these dots, we're making sure that we connect this string right here with this PHP. And let's add a semicolon there. Save. Let's refresh. Okay. And let's just, for the kicks of it, let's make this Testing post a sticky one. We need to go to visibility, edit, and then hit on Stick this post to the front page. And hit Update. So now refresh and the testing post is now sticky. Now, the rest of the functions will be written in the next lesson. We still have to write the author, the date, the categories, the tags and the comments. So thanks for watching so far, see you in the next lesson.

Back to the top