WP Theme Lesson #5c: Postmetadata
- Filed under: Tutorials
Today, we tackle the postmetadata: date, categories, author, number of comments, and any miscellaneous information attached to each post.
We’re at lesson 5C now so I assume you’re getting a grip of this. You’ll notice that my instructions will be grouped in bigger chunks (less steps). Before we begin, open the Xampp Control, theme folder, browser, and index.php file.
Let’s review first, you should have the following codes in your index.php file:
Step 1:
Copy and paste the codes in postmetadata.txt under <?php the_content(); ?>. (Note: For this part, you can copy and paste. When I put WordPress themes together, I also copy and paste this part. Again, you don’t need to fully understand it; knowing what each set of codes does is good enough.)
This screen-shot has been cut off to fit in this space. Pay attention to the organization and placement of the postmetadata codes. Don’t cut off your codes at 1 Comment &# like the screen-shot.
Save it and refresh your browser, you should see:
You can also look at the source codes of your browser to see how the postmetadata looks like. Remember I showed you how to view source codes? Go to View > Page Source or Source.
Explanations:
<p class=”postmetadata”> and </p> – All the postmetadata information sit in between a set of paragraph tags named class=”postmetadata” because I wanted to separate postmetadata from the content or post entry. Without the paragraph tags, your postmetadata information will continue where your content left off, without any spacing to differentiate content and postmetadta.
<?php _e(‘Filed under:’); ?> – &#58; is the code to call for a colon “:”
Wrapping <?php _e(‘ ‘); ?> around Filed under: is not necessary. You can simply type out Filed under:
<?php the_category(‘, ‘); ?> – the_category() is the PHP function that calls for all the categories that you tagged your post with. If you put Filed under: and the_category() together. You’d get Filed under: Name of category 1, Name of category 2. The comma within the_category() is a way of separating the category names. Back to the postmetadata screen-shot, notice the comma in between the category links.
<?php _e(‘by’); ?> – same as Filed under:. If you’re creating the theme for personal use, wrapping _e() around the word by isn’t necessary. I believe _e() has to do with creating translatable theme, which is important when you’re theme gets used by hundreds of people from various countries. If you’re planning on creating themes for public use, then it’s best to use _e() just in case you do look into translatable themes later on.
<?php the_author(); ?> – self explanatory. It simply prints your name or whoever published the post.
<br /> – If you want a line break, but don’t want the spacing that comes with paragraph tags, use BR. Notice the forward slash /. This is another tag that can self-close.
<?php comments_popup_link(‘No Comments »’, ’1 Comment »’, ‘% Comments »’); ?> – comments_popup_link() calls for a pop up window of your comments, when popup comment is activated. If popup comment isn’t activated, comments_popup_link() simply send you to the list of comments. No Comments » is what will be displayed when you have no comments. 1 Comment » is when you have exactly one comment. % Comments &187; is for when you have more than one comment. For example: 8 Comments ». The percent sign % means number. » is a code to display a double arrow.
<?php edit_post_link(‘Edit’, ‘ | ‘, ”); ?> – This is only visible when you are logged in as an administrator. edit_post_link() simply displays an edit link for you to select which post to edit, instead of having to browse through all the posts from the administration panel to search for the one you want to edit. edit_post_link() has three sets of single quotes. The first set is for what word you will use for the link title of the edit link. If you use Edit post, then it’ll say Edit post instead of Edit. The second set of single quotes is for whatever that comes before the link. In this case, a vertical line |; that’s what the &124; code is for. The third set of single quotes is for whatever that you want to come after the edit link. In this case, nothing comes after it.
Log into the admin panel, then come back to the front page to see the edit link. You’ll see a vertical line followed by a link titled, “Edit.”
Follow this WordPress Theme Tutorial Series from the beginning.
Hi,
First I’d like to say thank you for these tutorials so far. I’ve been wanting to get my feet wet with wordpress for awhile now and this is the best how-to I’ve come across yet. Very easy to follow and I feel like I’m actually learning instead of feeling overwhelmed or confused, so thank you for that.
I was wondering if you had any links to a list of these (ex. &124, :, etc.) for reference. I’m sure there are many more and it’d be nice to have a resource for this information. Thanks.
There’s a list here, in PNG or PDF format:
http://www.ilovejackdaniels.com/cheat-sheets/html-character-entities-cheat-sheet/
I got it from Lorelle’s list of cheats, well worth bookmarking:
http://lorelle.wordpress.com/2005/10/10/html-css-php-and-more-cheat-sheets/
Marc,
Here are the entities and ascii reference
EDIT:
Sorry about that Freesitebuilder, your comment was waiting for confirmation.
Thanks! I just emailed you, but then I came and found this. It was really really helpful!!
when i copy paste the postmetadata and refresh my page my first post dissapears but the new tags are visible in its place. like
”Filed under: Uncategorized by admin
No Comments » | Edit”
why is it happening?
Can you send me a copy of your index.php as a text file? You can find my email here:
http://www.wpdesigner.com/feedback
wow nice, i like this one, have been doing a little editing of my own to look like my own liking, nice tutorials
Thank you so much for the tutorial. I am using it to make my own theme and also to understand more of how php works with html. Everything works well so far
I also like to understand why the code is like it is. Your explanations are a great help to me, and understanding what is happening will make it easier to edit and change later.
I have a question on the numbercodes for certain symbols: Is there an overview of the numbercodes? (Like 124 for | and 58 for colon) The numbers seem to be other than the normal ascii-codes.
What is the reason for using such codes instead of simply typing the symbol?
Tiqui,
Please check the second comment for the full list of characters. Sometimes, you use those characters in coding. When you want to use theme only as text, use the numbers I gave you to generate those characters.
Hi SP, where is the date data ? It’s not here ! Thanks !!
I forgot it. Oops. You can use the_time(‘F jS, Y’) to call for the date.
Hey SP -
Your tutorials are the best yet. I’m now tweaking my own design and having, er, fun. One question: my comments don’t work (they didn’t ever, even before I started messin’) they just take the reader to a single post pageview. Any ideas?
You’re not there yet Alex. Comments come in later tutorials.
Unless I’m blind (It is late) I think you forgot to mention about adding the date.
Great job so far!
Yea, I forgot to add the date.
This tutorial is great, i am building my own theme based on it.
thank you very much.
good work.
Here is what I added to make the date.. but I do not know if the code will show correctly in this comment!
nada
Hi
I tried using that code to add the date but I had to guess what to put it in and I must have guessed wrong because it came up with some error.
What exactly do I have to type?
Hi SP..
I like your tutorial very much..
I have around 3 blogs and learning to make 3 unique templates for each..
One question :
In all the tutorials before, you used DIV tags to separate things.. Why you used tag to separate metadata :
Does DIV and will work same here ?
Also, i have 3 wordpress PSD templates, how to work on them to make a wordpress theme ?
OOps the tag disappeared..
I mean why you used paragraph tag for postmetadata instead of DIV tag ?
Also can you edit your post for date/time stamp ?
Hitesh – I use the paragraph tag because we’ve already applied padding to the paragraph tag. If I use another div for the postmeta, I’d have to style yet another div. This is a simple theme so I just went with the p tag.
Because the p tag has a postmeta class, you could style it just like you would style a postmeta div.
Your explanations are a great help to me. im am working my unsual wp theme. superodev.com
I really like your tutorial, it’s helpful for us beginners who don’t understand much about wordpress plugins. But what SEO advantages do you get from doing it this way?
Stephen – This tutorial series was not meant to teach you SEO.
please expand your lessons and make them successful (commercial). I think there’d be a book for dummies about building their sites))) Thank you very much, every lesson is good!! Good luck to you!
Hi Small Potato,
This is really a good tutorial series for wordpress beginners.
note : I have seen some span comments here.
Thanks.
Do a search for “infomration” on this page and fix the typo
)
Thanks Mac!
soma showitempl buy buy soma no
Im pretty good with HTML, CSS and PHP as it is, but learning how a new system works always takes a while to grasp fully.
Tutorials are simple enough to follow and give me a firm grounding for when i come to read up the official WP docs.
Lets hope i can develop skins and widgets in no time hey
Great work mate.
Hello,
Found some mistake here: ?php the_category(‘, ‘) ?, here is “;” missing. Thanx for a good tutorials.
Thanks Lecktor. I fixed it.
Another good one. this is seriously great.
Ok so Im logged in as the site administrator but I can’t seem to get the “Edit” to show up? Any thoughts…. http://www.leannaharris.com if you want to view the source
Hi Tung,
I hope things are going great with you. I was having a minor issue. Everything works the same way as you shown here. But in my case, there is no more tag before the end of posts.
I have also tried making long posts but it shows complete post in anyway.
Thanks – Keep it up
Take care.
- Addies
You need to use the more button in one of your posts. It doesn’t show by default.
[...] WP Theme Lesson #5c: Postmetadata oleh Small Potato diterjemahkan ke Bahasa Indonesia oleh Mochammad [...]
love it!!!! im eager to learn more
Sorry, i need really specific directions…can you tell me where exactly to enter “the_time(’F jS, Y’)” to get the date?
Thanks
[...] #3 Starting Index.php #4 Header Template #4b Header Template Continues #5 The Loop #5b The Content #5c Postmetadata #5d Else, Post ID, Link Title #5e Posts Nav Link #6 Sidebar (and Categories) #6b Page-Link Listing [...]
I haven’t read this ” WP Theme Lesson #5c: Postmetadata” yet ….but i would say THANKS A LOT
THANKS A LOT THANKS A LOT THANKS A LOT THANKS A LOT THANKS A LOT THANKS A LOT
THANKS A LOT THANKS A LOT THANKS A LOT THANKS A LOT THANKS A LOT THANKS A LOT ……in advance…
I should add, that here is when it starts to get tricky for people who s planning to develop a blog in another language. The code small potato provided should look like:
If you are planning to make a blog in spanish… Just be sure NOT to change the php functions…
Mmm… cant type code… anyways, from the ?php comments_popup_link line, start making changes to your language…
</code
Man, it’s 11:30PM and here I am at the end of lesson 5C. Can’t wait to finish whole lesson but I am exhausted …;)
I just want to tell you that your wp theme tutorial is exactly what I was looking for all this time. Try to follow the manual in wp official web but I got lost with so many links pointing here and there… Till I find this tutorial. Great job, two thumbs up !
Can’t wait to finish whole lesson. Once done, I will remake my theme to suit my taste …….
Thanks!
Thank you so much for the great tutorial. I was hoping you could help me with adding a Email It! button at the bottom of each post (in the post metadata) so that readers can e-mail posts to each other. I found a way to do it with javascript but it only links to the main page of my blog, not the individual posts.
Carin
Thanks for the tutorial, so far its working out great. I’m unsure if ill be able to edit my site the way i want with this information alone as yet, but it certainly gives me confidence to understand and recognize the code a bit more so i feel more familiar and not overwhelmed as is usually the case, I’m glad this came out in one of the top searches in google, thanks very much for taking the time to put it together, I’m actually enjoying it, and its very unusual for me and code to get on well.
this is very good tutorial
thinks a lot
hi,thanks for your tutotrial.
but i lost some codex,could you pack it for download?
Hi,Thanks for this tutorial
i need to know how to change the text direction
i tried to use this code
but no thing changed i do not know why?
SORRY
THE CODE IS
p dir=”rtl”
between tags
hihfdasuhfoahofhoadd
Its been some time I’ve wanted to learn more about WP. Only after a friend found your tutorial and passed around I was finally able to at least install WP (amazing, uh?).
Gotta say, “Thanks a lot so far”. I stopped fulling around with codes for a long time (I was only able to read basically). I’m learning just for fun and actually really learning and having stuff explained so easily.
It’s very kind of you to have this tutorial!
PS. Your page bg is too dark, hard to keep reading for a long time =(
[...] #3 Starting Index.php #4 Header Template #4b Header Template Continues #5 The Loop #5b The Content #5c Postmetadata #5d Else, Post ID, Link Title #5e Posts Nav Link #6 Sidebar (and Categories) #6b Page-Link Listing [...]
“> please tell me bloginfo what it displays
Awesome tutorials! I have minimal knowledge of HTML and CSS and no knowledge of PHP. After spending a short amount of time doing your tutorials I have a good understanding of using these languages. You’re awesome.
One thing I noticed in the metadata code was no semi colon “;” after category. I noticed it doesn’t have to be there but I added it just cuz. Was this intentionally left out?
SP…Big fan of your tuts!!!
the excerpt tag (read more…) is not working. the whole contet of each post continues till end. i have to scroll down till the end of each post. why ?
you \m/..:)
great stuff man… helping alot… love it…!!