Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
With the framework of our theme, the header, the sidebar, and the footer, complete, it's time to start focusing on the main content. And here you can start in many different places. Personally, I like to start with the single post template and work my way through it from top all the way to the bottom and set up all the content and style it, and then move on to the index templates. That way, I can use the mark up and the styling from the single post templates in my index templates and I don't have to write as much code. This is another example of these dry development principles.
If I go back and look at my designs, you'll see my single post starts out with a comma separated list of the categories at the top. Then the title then the post met out which says written by and then the author name, the date, and the comment. And on wide screens it's shifted to the left and on smaller screens is displaying below the title. Then we have the main content itself and then at the bottom we have a list of tags with tag icons next to each of the tags. When I look at the output of the single pulse in WordPress, I see that the underscore's template is currently outputting the content in a different way from what I want.
You'll see it starts with a title. Then we have the pulse meta, but it's formatted differently. Then we have the Content. And then here at the bottom we have a footer section that has the category list, a tag list, and also a link to the permalink and the Edit button. So what I need to do now is go and reorganize all this content so that it stacks in the right order in the markup before I can start applying styles to it. Earlier in the course, I explained how the WordPress template hierarchy works. And you may remember that the single post template is managed by single.php.
If I go to single.php, I see that single.php is actually just a scaffolding for the single post. It sets up my header. It sets up the primary area, which is where my content is going to display. Then it has a loop and within the loop, it first calls a template part called content single and this is where all the content is. Then it displays a post navigation which navigates us to the previous or next post. Then it displays the comments and finally displays the side bar and the footer. So if I want to edit the actual content I need to go to content-single.php.
So I'm going to open that template instead. And here you see the content displayed. Here we start with a title, then we have the meta contents, then we have the content itself, and then we have the footer which displays the category list in a coma separated list, the tag list in a coma separated list, and then it wraps this in some text so that it displays nicely. What I could do now is take the existing elements here and reorganize them in this template so that they display the way I want. So I'm going to start by taking the category list, which is already a comma separated list, which you can see here.
So this variable here defines the separator as a comma. And I'm going to move this up to the entry header section. See here I'm going to make some space and then of course I can go down here and copy out the code, but I also need to make a bunch of changes to it. So instead, I've prepared a code snippet for you. So if you go to the cold snippets, you'll see in the top here we have a code snippet that outputs the categories. So I'll paste that code snippet in. And you'll see that this works the same way as the cold snippet below. So here we have a variable cold category list defined so this is a WordPress function that gets the category list.
It's comma separated and then what I do is I run another function that comes with underscores that's called categorized blog. Which basically tests whether or not there is more than one category. Because if there's only one category in the whole blog, then there's no point in showing a list of categories. So this test to see if there's more than one category, then display the following. And then I take the category list that I got up here and I display it within a divider. That has the class category list. That way the category list will display at the top and then we get the title.
I'm going to leave the post meta for a later movie, so for now, I'm going to change the display at the bottom here to only display the tags because right now you see it displays the categories and the tags and a bunch of other stuff. So I'm going to take out all of this. So that all that's left inside the footer is this edit post link. Then I'll go back to my code snippets, and I'll copy out this single line of code here and paste it in instead. And what happens here is I'm using the same function as I did before. Although this time I'm saying instead of getting the category list get the tag list.
Then I'm using the mark up as follows. The first variable sets the first tag that you display. So it's an unordered list. With a list item, and within that list item, I'm displaying the tag icon that I got from Font Awesome. Then, in between each list item, I close one list item and start a new one, and then again insert the Font Awesome icon. And then at the very end I close the last list item and close the unordered list. So this code will output and unordered list of tags with the tag icon from font awesome displaying next to it.
Now I can save my new content single template and go and reload my page. And now we start the page with a list of categories, then the title, and the post meta. Then the content itself, and then we end with and an un-ordered list of each of the tags, and the edit button. So now the overall structure of my content matches what I have in my design. Next I need to change the output of this function that creates the post meta.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.