learning WordPress Post Meta Data Tutorial > WordPress learning

 

hello everyone welcome to another
WordPress tutorial in this lesson will
cover the blog basics of theme
development or in other words we'll
learn how to add the date for each post
and also how to format the text in any
format that you would like we'll learn
how to output the author for each post
and make their name a link to the
relevant author archives page and we'll
also learn how to output the categories
assigned to each post and make the terms
links to the relevant category archive
pages so we're going to cover quite a
bit in this video so let's dive right in
now looking at the finished product
isn't very helpful or educational so
behind the scenes I just removed all of
the code that was outputting the date
author and categories and now we can
start from square one and write the code
together so let's get started let's take
a look at our code in this case we're
working with index.php of the theme
folder now our first goal is to output
the date below the blog title excuse me
the post title so underneath is heading
level two which is outputting the title
we'll create some new code a paragraph
you give it a class of anything we would
like I will choose post info ok we want
to output the date so that means we need
to drop into PHP and now WordPress has a
function named the time now it might
seem instinctual to use the function
called the date but when you're working
inside the loop and you're outputting
the date for multiple posts and you're
looping through you actually want to use
the time function this function the time
accepts a parameter known as a format
string and that's how we define how we
want the date to be displayed because
there's many different ways to display
so for example if I say M D Y month day
a year with slashes that's exactly what
we get with leading zeros month day year
well what if we would like to actually
spell out the date instead of numbers so
you can see that we have these different
codes at our disposal so the code to
actually spell out the month is
uppercase F the code for the day without
a leading 0 is J
a and then what if I want the suffix so
for second it would be nd for third it
would be Rd for fourth it would be th
the code for the suffix is capital S
comma the year with four digits so if we
refresh we can see that that's exactly
what we get it so it's really just a
matter of googling pH P date formatting
your PHP date strings and then it's up
to you to decide how you want to output
the date but you have a lot of different
options at your disposal and for the
record you can output the time not just
the date because remember the function
is named the time so if I paste in this
string you can see that G ia
that will output the actual time the
post was published so that's a quick
explanation of how to format the date
text for each post moving on let's
review how to output the author name for
each post so in our code directly after
the date will create a separator drop
back into PHP and WordPress has a
function named the author it's that easy
so you can see we're now outputting my
name because I am the author of all of
these posts but for some websites you'll
have multiple authors all contributing
content so it's useful to output the
author name now we'll probably want to
say bye and then the name but let's take
it one step further let's make the name
a link that takes you to an author
archives page with all posts by only
that author so back in our code we'll
wrap this the author function in a
hyperlink for now I'll just conclude the
pound sign we're going to remove that in
just another second okay so now that the
HTML is in place we want to get rid of
this pound sign and we're going to use
another wordpress function named get
author posts URL now this code alone
will not do the job we also need to pass
along some sort of parameter in these
parentheses so that this function knows
which author to get so we need to tell
it get the author of the
current post that we're running the loop
through so in order to do that we'll say
get the author meta get their ID so now
once we pass along and remove this for
just a second we want to pass along an
ID number into this function get
authored post URL so it knows which URL
to get so I'll paste that back in so now
if we refresh we can see that the name
is a link and if you click it it takes
you in the URL bar you can see that it
takes you to the name of the site slash
author slash their user name so then you
will only see posts by that author which
is really useful if you have a website
with multiple contributing authors now
that the author name and link is
complete let's focus on adding links to
the categories that each post was
assigned to so directly after this
author code create a separator we'll say
post it in then we're going to need to
drop into PHP because we want to output
all of the different categories that the
post is assigned to WordPress has a
function named get the category which
will do most of the heavy lifting for us
so this function will return an array
with all of the categories assigned to a
post because remember you can have
multiple categories assigned to a post
now let's store this array in a variable
so we'll call our new variable
categories will store this arrays value
in it and then we're just going to
create a few other variables so
separator I will separate the categories
if there's more than one of them with a
comma and a space okay and then we're
going to create another variable named
output we'll initialize the variable
with just nothing just an empty value
okay so now that we have these three
variables set up we have everything we
need we just need a bit of PHP logic now
to sort of loop through the different
categories in this array and output the
appropriate text so we'll start with an
if statement just to make sure that our
array exists uh-huh because if the array
is empty then obviously we don't really
need to run anything so we'll say if
there is content
this categories array then do something
okay and the thing that we want to do is
loop through something so for each so
depending on how many items are in this
array because we are not sure we want to
loop through it once for each item in
the array so we'll say for all of the
categories loop through each one with
the phrase category so now we can use
that keyword inside this bracket in this
bracket so we can say output period
equal so what this allows us to do
period equal is add on to a variable
instead of overwriting a variable so we
started out with nothing just to
initialize the variable and now we're
using this variable as sort of a dumping
ground each time we've looped through
let's say there was five categories in
this array each time we loop through
we're adding on different text to the
output and then outside of this for each
loop so down here we're going to echo
out the output okay so hopefully the
structure is starting to make sense
we're sort of tacking onto this variable
and then once we're done looping we just
want to output it so that's what we'll
see on our web browser so we'll start
simple let's just output the name of the
category and then later we'll worry
about turning that name into a link
so we'll say category and remember this
keyword category we can use that almost
as the phrase this if you've done a lot
of JavaScript programming now that we're
in this for each loop we can use
category to reference to the current
item that we're being looped through so
we'll say category and we just want the
category name okay and then also let's
tack on the separator space in our comma
so we'll say separator okay so now if we
refresh we can see that it's saying
posted in and then the name and then a
comma and obviously it doesn't make
sense yet if there's only one category
but if we scroll down a bit you can see
that this post has multiple categories
so it says post it in guest peace comma
opinion comma so now we just need to
define further define our logic to do
two things a we want these categories to
actually be links to category archives
not just text and then second we need to
remove the comma from the end of the
text so for example here let's keep the
comma after the first phrase but we need
to remove it from the final phrase so
let's start with the easy task first
let's remove the comma at the very end
so down here where we're actually
echoing or outputting our output
variable all we need to do is use a PHP
function named trim so we'll wrap this
output variable in the trim function and
we can pass along an option a separator
so now this function is going to take
our output and then it's going to remove
at either the very beginning of the very
end anything that resembles our
separator symbol so in this case it will
look for comma space so now if we
refresh we can see that it removed the
comma at the very end of our string okay
so now let's worry about making the
categories an actual link that you can
click on let's hop back over to our code
okay so we need to customize this line a
bit to turn it into a link so what we
really need to do is output a bit of
HTML okay but then we obviously want the
name to be within this link so we can
move this
sit right about there so now if we
refresh we can see that each category is
a link but obviously we don't have a URL
in the link yet we just have a pound
sign so now our task is to make this an
actually relevant URL so we will remove
the pound sign and add in a bit of
dynamic code okay so our code will sit
here we'll say get the category link and
then we'll pass along the ID of the
current category that we're looping
through so remember we can use that
phrase or that keyword category because
we're looping through it excuse me we're
looping through the array and category
we really just want the ID number so
essentially we're just passing along a
numerical value into this get category
link function and then it will return
the URL for us so now if we refresh you
can see that if I click on one of these
links if I click on opinion it takes us
to a page in the URL bar the URL of our
site slash category and then the name of
the category and then this page will
only show posts of the opinion category
then if we go back and we click on news
it'll only show posts from the news
category so to recap we now have the
date the author is a link to the author
archives and the category was a link to
the category archives let's close out
this lesson by focusing a bit on the
styling so let's remove the space
between the title in this info text and
let's also make the info text smaller
and maybe a lighter color so it's not as
prominent as the body text so we'll hop
over to style dot CSS I'm going to
scroll to the bottom create a new
section or comment name post styles say
post h2 let's remove that margin for the
title because we can use the margin for
the date text to the info text instead
and let's make the text a bit smaller
and let's make it a little bit lighter
so it's not as prominent and also how
about the links instead of being blue
let's also make them gray okay so now if
we refresh you can see that that looks a
lot better so now it's sitting next to
the title it's a bit smaller it's gray
and our links don't stand out as much
but you can still tell that their links
so that brings this lesson to a close
but let's segue into our next video
topic
remember if we click on the author
archives it takes us to a page with only
post from that author but wouldn't it be
nice if we had some sort of title above
these posts that said author archives
and then if we clicked on this category
wouldn't it be nice if it said in a
large title news archive or some sort of
custom title so that it didn't look
exactly like the home page or just a
standard list of posts so in the next
lesson we'll learn how to use the file
in our theme folder named archive dot
PHP to do just that so thank you very
much for watching this lesson I hope you
feel like you learned something and stay
tuned for more wordpress and web
development tutorials thanks bye