WordPress “In regards to the Writer” Tutorial

by birtanpublished on July 3, 2020

hello everyone welcome back to the

WordPress series in this lesson we will

learn how to create a dynamically

generated about the author box let's

begin by jumping into a demo of the

finished product that we will be

building together alright so this is the

home page for our website but if I

navigate to a single blog post detail

screen if I scroll down to the bottom of

the post here we can see the about the

author box so this pulls in an avatar

for the user as well as their name also

a bit of biography text three of their

other most recent posts and then a

button to view all posts by that author

now I must admit if your website only

has one author then this feature won't

seem very cool because you could just

hard code all of this content in your

theme files but if your website has

multiple authors I think this is pretty

neat so check this out if we go back to

the home page and click on one of these

blog posts so I will click on eating

grass is nice now we see that the about

the author box is for Kitty Doe here's

her biography text and here's a link to

her only other blog post so you get the

idea the about the author box pulls in

info about the author of the current

post you're viewing now behind the

scenes I just reset my theme files to

the state they were in at the very end

of our previous lesson so you and I are

now on the same page at this point let's

begin working together to add back in

the dynamic about the author box so

let's jump over to our text editors and

within our theme folder let's open up

content single dot PHP let's scroll down

to the bottom of the file and right

below this the content line let's add a

few new lines and let's create a new div

let's give it a class of about author

within this new div we are going to want

two columns one column for the avatar

and one column for the text content so

let's create a sub div with a class of

about author image

and let's create another div with a

class of about author text and within

this about author text div let's add a

heading level 3 which will read about

the author let's go ahead and save this

file and refresh in the browser so

here's the new HTML that we just added

let's go ahead and style it a bit with

CSS so back in our text editor let's

jump in to style dot CSS let's scroll

down to the very bottom of the CSS file

and let's create a new comment to stay

organized let's say about the author

section first let's select the entire

about the author box and give it a

background color so it had a class of

about author

let's give it a really light gray

background so background color pound

sign and then II de de dee let's also

give it a bit of padding so padding 20

pixels in all four directions let's see

how that looks that looks a bit better

next let's add the two column layout so

let's create a new rule that targets the

about author image div so this will be

the first column let's float it to the

left and give it a width of 28% and

let's also set up the second column the

text column so it had a class of about

author text let's float it to the right

and give it a width of 68% now if we

were floating both children divs of the

parent div we want to make sure that the

parent div clears the floats so back in

our HTML or I should say our PHP file

let's give this main about author div a

second class of clear fix so now if we

check things out in the browser we see

the beginnings of a two column layout

all right that's enough CSS for now

let's change gears and begin writing PHP

to actually output the current authors

image and their text content but before

we do that

first talk about user accounts in

WordPress so if we jump to the admin

dashboard and click on users in the

sidebar we can see that my example site

only has two users in this case two

authors but obviously on your WordPress

site you can create as many users as

you'd like so if you want to let your

friends family or coworkers create posts

you just create a new user account for

them based on their email address but

back to the task at hand we want to see

where we are pulling author information

from so for example if I click on Kitty

Doe this nickname field is the name that

we will want to display on the front-end

and if I scroll down here we see the

biography text that we will want to echo

out and here is the user avatar we want

to display now you don't actually upload

your avatar directly in WordPress

instead you need to create an account on

a website named Gravatar which stands

for globally recognized avatar and then

WordPress will look up your user account

avatar by searching the Gravatar service

for your matching email address I

definitely recommend taking a couple of

minutes to set up a Gravatar account

it's definitely worth it it isn't just

for your own WordPress site also if you

leave a comment on any other blog on the

web with your email address it will

automatically pull in your avatar also

github Stack Overflow and discuss can

also pull in your photo based on your

email but let's get back on track so now

that we know where author information is

being pulled from let's jump back into

our theme files and write PHP to finish

our about the author box so within our

content single PHP file let's begin by

outputting the Gravatar image within our

about author image div so within this

div let's drop into PHP and we want to

echo out the contents of a function that

board press offers us named get avatar

we will provide this function with two

arguments the first is the ID for the

user or author

we want to look up so to find the ID of

the author of the current post we can

use a function named get the author meta

and we are interested in the ID so

that's the first argument that we will

pass the get avatar function but let's

add a comma here because we will also

provide it a second argument where we

specify the size of the image that we

want it to return

so we could say 100 pixels or 200 pixels

but let's go with the max value of 512

so the image will be as sharp as

possible and now if we save this and

check out the browser here's our

Gravatar now I think it would look nice

if we overlaid the WordPress user

account name on top of the very bottom

of the photo here so back in our PHP

underneath this image line let's create

a paragraph and within it let's drop

into PHP and let's echo out the contents

of get the author meta and we are

interested in their nickname so if I

save that we see that it outputs their

nickname of Kitty Doe so now let's just

use CSS to position this so that it sits

on top of the bottom of the image so in

our text editor let's jump into style

dot CSS and beneath this rule for the

image div let's create a new rule that

selects the paragraph element within

that div so about author image P let's

tell it to be positioned absolutely and

it should sit at the very bottom edge

and let's also tell it to be full width

so left:0 right:0 let's also give it a

transparent black background so

background-color:rgba 0 0 0 gives us

black and let's say that it should be

partially transparent let's go with 05

let's give it a bit of vertical padding

so padding maybe 4 pixels vertically and

we don't need any horizontal padding

let's tell the text itself to be aligned

in the center so text align Center let's

also make the text bold

so font-weight:bold and why don't we

give the

a subtle shadow so text-shadow

let's go with one pixel offset and one

pixel blur rgba to create black and then

let's tell it to be 85% visible let's

say that the text itself should be white

so it's easy to read on the black

background and let's also zero out any

margins that this paragraph element

would have so margin zero

and finally if we are telling this

element to be positioned absolutely we

want to be sure that we tell its parent

element to use position:relative so that

way our name paragraph will be

positioned in relation to its parent

instead of the entire page so let's see

what this looks like that looks pretty

good

but if you zoom in really closely you

can see that there's maybe a three pixel

gap where the paragraph is positioned

lower than the image now if we want that

to align perfectly we just need to tell

the image to be a block level element so

within our CSS let's create a selector

that targets the actual IMG image

element and just say display block now

let me zoom in really closely and when i

refresh we see that the bottom edge is

now perfectly aligned all right so that

takes care of our image next let's work

on outputting the biography text for the

author so in our text editor let's jump

back into content singlephp and within

this about the author text div

underneath our heading level three let's

drop into PHP and let's echo out the

result of get the author meta and we are

interested in the description now if we

save this on its own it will return raw

text but we want the text to be wrapped

in HTML paragraph elements so what we

can do is wrap this function within

another function named WP auto P so be

sure to add the closing extra

parentheses right here let's save this

and check it out in the browser

there's Kitty dough's wonderful

biography next let's work on outputting

a list of other posts by this author so

back in our PHP file underneath the

biography description let's create a

brand new div let's give it a class of

other posts by and within this new div

let's create a heading level 4 that

reads other posts and then let's drop

into PHP so we can dynamically output

the name of the author

so let's echo out the results of get the

author meta and we want their nickname

so let's save that and in the browser

that gives us other posts by Kitty Doe

all right and then back in our PHP

underneath this heading level four let's

create an unordered list and then we

will simply have a list item and a link

for each post but we don't want to

hard-code links to other posts we want

this to be dynamic so we are going to

use the wordpress loop but before we can

loop through anything useful we first

need to create a custom query of the

posts that we are interested in after

that then we can loop through the

collection of posts to output a list

item and a link so right above this

about author text div let's create a new

space and drop into PHP and let's create

a new variable named other author posts

we could have named this anything we

like I just made this up but what we are

going to do is populate this variable

with only the posts that we are

interested in so only other posts from

the same author so let's set this

variable to equal a new instance of the

WP query class within these parentheses

let's create an array and then within

these parentheses let's drop down to a

new line just to stay organized and now

we can build our own custom post query

so let's begin with the author property

we only want posts from the current

author so get the author

and we want the ID let's also say that

there should only be three posts at the

maximum so let's set the posts per page

property let's set it to three and

that's all we need for the custom query

at the moment let's be sure to add a

semicolon after these closing

parenthesis and now within our unordered

list we can simply loop through the

results of our custom query so below

this opening unordered list line let's

drop in to PHP and let's use a while

loop so while and let's say while our

custom query of posts so remember the

variable name was other author posts

let's say while that collection still

has posts to loop through so this method

of have posts will evaluate to true if

there are still more posts to loop

through so while this is the case while

there are still posts to loop through

we'll open up a pair of curly brackets

and within here we'll do something once

for each post the first thing we want to

do is get the data for that particular

post ready to be used so to do that we

can begin with our variable other author

posts and it has a method named the post

which will get the relevant data ready

so at this point we are ready to drop

out of PHP and begin outputting dynamic

HTML so at the end of this line let's

drop out of PHP and then on this line

where we end the curly bracket we can

drop back into PHP and then let's cut

and paste our list item line so that it

sits in between these two lines

so let's paste it in and now we just

need to output the permalink and the

post title so within the href attribute

let's drop into PHP and we can use the

the permalink function to give us the

URL and then within the a tag we just

want to output the title of each post so

drop into PHP again

and we can use the the title function

let's save this and check it out in the

browser looks good

but notice we are currently viewing the

eating grass is nice post so it doesn't

really make sense to include that post

in the other posts list so to fix that

all we need to do is jump into our PHP

and up here when we are creating that

custom query let's just add on another

property named post underscore

underscore not underscore in and this

will let us exclude certain post IDs

from the results of this search query so

this property is expecting an array of

post IDs and we just need to post it the

ID of the current post so to do that we

can use a function name to get the ID so

let's save this and refresh the page

perfect so because we are currently

viewing the eating grass is nice post it

doesn't show up in the other post list

so the kitty doe author only has two

total posts but what if an author only

had one total post in that case we

wouldn't want to display this other post

section at all so to account for that

possibility we can wrap this entire div

within an if statement so back in our

PHP here is where the other posts by div

begins so right above that let's drop

into PHP and let's say only if our other

author posts variable only if that

custom query actually has posts so we

can use a method have posts so only if

this evaluates to true do we want to

display any of this content so to begin

the body of the if statement let's open

up a curly bracket here and then let's

find the closing div tag for this div so

let's scroll down a bit here it is so

right below that let's drop into PHP and

close out the if bracket and then drop

back out of PHP also once we're done

using our custom

weary it's a good practice to reset the

wordpress post data back to the natural

state that it was in before our custom

query overrode it so remember that

typically WordPress decides which dated

a query based on the current URL not our

own custom query so to reset the post

data back to normal after this closing

curly bracket while we are still in PHP

we can simply run a function named WP

reset post data so things are working

well for kitty doe because she only has

two total posts but if we visit a post

by a different author so this post for

example this is by a different author

who has more than three total posts so

in this case it would probably be

helpful to include a button or link here

that reads view all posts by this author

so let's set that up let's jump back in

to our PHP let's scroll down a bit let's

drop down to a new line let's create a

link element to fill out the H ref URL

we will want to drop into PHP and let's

echo out the results of get author posts

URL and we simply pass this function a

user ID and it will return a URL to the

full author archives link so to get the

current author's ID number we can use

the get the author meta function and

we're looking for the ID alright and we

want the actual text of this link that

users click on to read view all posts by

and then we'll output the user's name so

drop in to PHP and then just echo out

get the author meta and we want their

nickname and while we're at it why don't

we give this link element a class so it

looks like a button we can reuse CSS

that we once wrote for our home page

buttons so let's give it a class of

button a and let's see how this looks in

the browser perfect so view all posts by

Brad and if we click it

it takes us to an author archive screen

but if we go back to one of Kitty doze

posts you'll notice that it doesn't make

sense to include this full author

archives link for authors that don't

have more than three other posts to

display so with that in mind let's jump

back into our PHP and let's wrap this

link within an if statement so let's

drop into PHP right above it and let's

say only if the current author has more

than three posts do we want to display

this so we can use a function named

count user posts and we just feed this

function the ID of the current author so

get the author meta and we want the ID

so only if that value is greater than

three do we want to display this link so

then we just open up a curly bracket we

close out PHP here and then right after

this link let's drop into PHP close out

the if statement curly bracket and then

drop out of PHP so if we save this and

check out the browser perfect Kitty dono

longer needs that button but if we go to

a different author the button displays

perfectly and that's it our about the

author box is complete I won't bore you

with the CSS that makes the other post

section look a bit nicer if you're

interested in the CSS I used for that

you can always download the zip file

with the source code of our finished

product that links in the description

and that's going to bring this lesson to

a close thank you so much for watching I

hope you feel like you learned something

and in our next lesson we'll take a

quick break from WordPress and take a

look at a few raw JavaScript without

jQuery techniques and also a few

relatively modern CSS layout tricks so

take care and I will see you in another

new video next Tuesday if you haven't

already be sure to check out my brand

new get a web developer job mastering

the modern workflow course as always

there's a link to it in the description

Related Videos

Be the first to comment “WordPress “In regards to the Writer” Tutorial”

Your email address will not be published.

There are no comments yet.