WordPress Submit Meta Information Tutorial

by birtanpublished on July 3, 2020

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 indexphp 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


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

Related Videos

Be the first to comment “WordPress Submit Meta Information Tutorial”

Your email address will not be published.

There are no comments yet.