Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Out of the box, underscores displays the post meta as posted on. And then, the date with a link to the date archive. By. And then, a name to the author with a link to the author archive. But, in my design, I wanted to display as written by. And then, the name and a link to the name archive. And then, a date and a link to the date archive. And then, I also want to add a link for the comments to this post. Just like with the rest of the content in the single post template, this is all controlled from content dash single.
But if you look closer, you'll see that here, we have the div that contains the entry meta. But we don't actually have the entry meta. Instead we have a customer function. And this is another example of these dry development principles. Because we're going to display the post meta in several different places, both on single posts and maybe on other single templates. And also, on all the different index pages and archives. The pulse meta has been placed in its own function, so that we can change it once. And then it changes on all the different pages it's being displayed on.
And here, you'll see one of those great things about using NetBeans, or another development IDE. When I have a function like this, I need to get to the actual function to work on it. And if you're using an IDE, all you need to do is hold down Ctrl if you're on Windows. Or a Command if you're on a Mac and click on a function name. And the IDD will open the file wherever the function is defined and take you directly to it. So, this function, My Simone Posted On is contained within the Include Folder. And under template/tags.php.
So here we have the function we need to edit and this is one of the most complex functions that is inside this theme. So let me just quickly explain how it works, it's actually starts down here, so here we have a print F function that outputs. The post meta content. So it starts out by creating a span with the class posted on. It then says post it on, in plain text, and then it calls this number one. And number one is this first sprintf function here.
And within the sprintf function, we're defining a link that points to another number one, and this time the number one is the permalink. And then it outputs the text within the link, which is number two, and that is the time string. Now the time string is defined up here, and again it's doing another one of those loop things where it starts out by defining an HTML time class, and then it used these variables number one. Number two, number three, and number four to call the variables down here.
And what it is doing is it's grabbing the date in different formats and displaying them in the correct formats so that the complete output of the time tag will be in accordance with html standards. If you've never seen php before, this might look really complicated. But all you have to remember is anytime you see one of these, %1$s, what you're looking for is the next comma-separated element down the list, so this number one would be the next element, which is here.
And when you another number one in site, and there again looking for the next element, which is this one and then number two would be this one. And number two on the top list here, right here, will be the next comma separate element down here which is the author class vcard that shows a link to the author with first a link to the author url. And then, the name of the author in the next function. All of this means the only thing we actually have to change is the output of this single line 'cause that's what controls everything.
And right now, you'll see it starts by saying span class posted on, and then it says posted on the date. And then, it follows by saying. Span class byline. By, and then the name of the author. So ice can simple take the byline here. Cut it out. Slide it to the front. Paste it in again. Then I can change it to say, written by. And then it'll say posted on. And here it says, posted on, and on the date. But I don't want it to say posted on. I just want it to say the date. So remove that, Save Template Tags, and go and reload my page and now you'll see, written by and then the name of the author, that's linkable, and it says January 7, 2012 which is the date.
Now this looks kind of weird right now and it's all crammed together, and later we'll use CSS to separate it and we're also going to. Insert on in between here and I'll explain why later on in the course, but for now this works fine. So now we're just missing one final element and that is the links to the comments, and here we need to go back to content single. Now when we started out with content single there was a link to the comments in the footer, but I removed it. So now I'm going to add in the link to the comments, right underneath where we call this my_simone_posted_on.
I'm placing the link to the comments outside of the function because there are certain place where I don't want to display the link to the comments. So here I'm going to go to my code snippets. And as you can see, if you got confused by the previous thing I did you can also just copy out the code from here. And it'll just display the quote exactly as you want it. So what I want to do now is grab the code snippets for the comments so I'll copy this and just paste it in directly below my simoon posted on. And shift it in. So what this function does is, it tests to see whether a password is required for the post and also whether comments are open, and whether or not there are comments.
And then it outputs a span that has the class comments link, and it'll say either leave a comment, if there are no comments. Or if there's one comment it'll say one comment or if there are a number of comments, it'll give you the number of comments. It's a very simple function and you'll see it in most WordPress themes. So, usually you can just copy this function and place it in anywhere you want the comments link to appear. So now, I can go pack to my post and reload it. And you'll notice nothing happened. We don't have the comment here. That's not because the function didn't work, it's actually because it did work.
Because you see this post that I selected, the first post in the unit test data has comments disabled. So I need to go into edit post. Go to screen options, and make sure discussion is checked. Then I can scroll down, and here I find discussion. And now I need to check allow comments. And when I now click update, and go back and view the post, we have a link to leave a comment, because there are currently no comments. And if we had a comment it would say, one comment, and if we had several comments, it would say the number of comments. So now we have the complete comment structure we're looking for.
We start out with a list of the categories, then we have the title, then we have written by the post author, the date, the comments link, the main content, and we end with a list of the tags and finally the edit button. And now we're ready to apply styles to this to make it look the way it does in our design.
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.