Install and Configure Recent Comments Plugin
Install Recent Comments Widget
Let’s go over to our Dashboard – estorebyobtutorial.com, wp-admin, and we’ll scroll down to Plugins and Add New. We’re going to search for customized recent comments on our ecommerce website. At the top of it this is the plugin that we’re going to install so we’ll select Install Now. Say yes to that, activate the plugin, so now we’re going to add the plugin to our ecommerce web page. So we go to Appearance and Widgets and this is the sidebar we’re using. Let’s go down and grab Customized Recent Comments and this is the dialogue for that. We’re going to change Recent Comments to Product Reviews. We’ll go ahead and leave it at 10 comments and 20 words for each comment.
Configure the Recent Comments Plugin
This is the template that is used for creating the output. In a moment we’re going to fiddle around with that but I want you to note this is the template area and this gives us a lot of opportunity for changing how this thing turns out. But we’ll scroll down here to the section where we can choose where it’s going to go, select Show on checked, go down to our Front Page and hit Save.
Come back over to our site and refresh it, scroll down and here are all the product comments on the site right now inside a widget called Product Reviews. Now you can see that this one is another example of a Non-Product Post, here’s a Regular post, here’s a Regular post, and we don’t really get down to product post until we get down to here and then we resume with some non-product posts. So obviously we don’t want all of our posts to show up under Product Reviews. So the reason why we chose this plugin was because we have the opportunity to change that.
Specify Categories for Comments
You can see here that we can specify what categories we want the comments to be included for and all you do is type in the category name, and so not category slug, and not category ID, but category name which in this case is Books and E-Books. So those are the two categories we want to include the comments for so Save again, come over here and refresh this and now we only have comments that are standing in the place of Product Reviews.
Understanding the Recent Comment Plugin Output Template
So this is our little template now. The way this template works is it shows the avatar and then it shows the name of the poster plus the link to the post and then the 20 words or so and then the posted date. If we come over here and we take a look at this, here is the first thing is the Avatar, and then below the Avatar is the Authorlink, and then a Permalink for the PostTitle, and then the Comment which was that little bit of text, and then that little bit of comment-meta.
I don’t really like the way this looks. Not only because I don’t like the text style here but what I really want to accomplish is something that looks like this. I want the little avatar there, I want the name of the poster and the date, and then I want the label of the post, and I want the text at the bottom and I’d like to wrap it around this little – put the little dotted line around it to distinguish each one from the other. A lot of that is not going to be accomplished with changing this Recent Comment Widget template but most of this we’ll have to change in CSS but we can deal with the structure in the template.
Revise the Recent Comments Plugin Output Template
So in this case we’ve got this div class=’avatar’ with that little tag Avatar and we’ll leave that like that. But then what I want to do is to put this PostDate up at the top and I’m going to put that inside the div class=’comment-meta’. Notice how the way this template works is it’s got a div class and then it’s got a tag. It also has text that kind of floats in here like this one said AuthorLink, which is Rick Anderson on and then it gives the Permalink and the PostTitle, and so this little word on and this little word Posted are just text that are floating in there.
So we’re going to take this div class=’comment-meta’ and we are going to cut that out of there and move it up right beside the Avatar, paste. Then I’m going to get rid of Posted, I don’t care about Posted. So now it’s just going to have the PostDate, but I would like the author above this. So what we’re going to do is we’re going to take the Authorlink and cut that out of there; put it right beside PostDate and then I would like to do a little return so we’ll do a break tag. So the break tag is the BR, space, backslash. So we should have Avatar and then beside that will go the Authorlink and then the PostDate. Now we don’t have any h3 anymore so we may as well just get rid of that, and get rid of this h3 here and now we can save that and take a look at it.
Review and Make Changes to Recent Comments Plugin
Come back over to our site and refresh this. Okay, so now we have our avatar, name, title and then comment, and those all run together. I want to make a couple of changes to this yet. I’m going to add a break here again. So that’s less-than sign, BR, space, slash, greater-than sign. So I put a break in there between the title and the comment. I’ve got a div for the avatar, I’ve got a div for the comment-meta, and I want to wrap this in a div also.
I’m going to go right beside that link and type less-than sign, div, space, class, equals, and we’re going to create a new class. This is avatar, this is comment-meta, so we’re going to say comment-body, double quotes and greater-than sign, and then we’re going to come down to this Comment and I’m going to wrap that div with a closing div. So less-than sign, d-i-v, greater-than sign — actually I should have had a slash, d-i-v. Actually what I want to do is take this Comment and put it inside of a p tag. So I’m going to go right in front of Comment, less-than sign, p, greater-than sign, and then after the Comment we’ll do less-than sign, slash, p, greater-than sign. Now we’ll save that.
Come over and take a look at it. So now we have the avatar, we have the name and date of the post, we have the link to the post and we have our text for the post. Now all we have to do is wrap this up with styling in CSS.
That wraps up Part 5 of Lesson 16 of the Build Your Own E-Commerce Website tutorial series.