WordPress "About the Author" Tutorial

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 0.5 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 single.php 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

Channel: LearnWebCode

Views: 31,994

Keywords: wordpress, theme development, about the author, wordpress theme, wordpress create theme, wordpress user data, wordpress avatar

Id: mQTxqfNlIdk

Length: 22min 16sec (1336 seconds)

Published: Tue Sep 13 2016