WordPress for Designers: Day 8

Today it’s all about the comments! So many of you have been requesting that we cover the comments.php page, so today we will do just that. Throughout this and the next series we will cover all the ins and outs of dealing with comments in Wordpress, including gravatars and threaded comments. This is one of the longer screencasts we have done so get comfortable, start your servers, and lets start day 8!

Download the Source Code

Day 8: Comments

Be sure to click on the “Full Screen Toggle” to move to full screen.

Resources You May Find Helpful

Feedback?

I encourage all of you to keep up the fantastic feedback and continue to ask any questions you may have. In addition, if you have any suggestions or would like to see a certain tip or trick with Wordpress, be sure to let us know. We are here to help! Remember that we will be going over more of the comments file in Day 9.

Help Us!

We put a great deal of effort into bringing you these videos free of charge. If they have helped, we would greatly appreciate a submission to your favorite social networking site. Even a retweet will help! It allows us to continue providing you with top quality content. Thanks again. :)



33

Comments
  • I know I am the first to comment and I haven’t had a chance to go through it yet, I am downloading through your podcast, but I had a question about the screencast. How did you get the video to such excellent quality? Was it the file size?

  • M.A.Yoosuf says:

    @Drew, 1 Screen-cast per week will be fine

  • jamie grey says:

    which one the best of comment spam filter anyway?

  • Angelshark says:

    Please help me!

    How can i insert for example a flash header in wordpress?
    I am finding this difficult in wp.Why the f…. is this so complicated.
    I am fully aware that many people would recommend me to avoid flash in my site.

  • BazDeas says:

    Nice work, Drew. You totally demystified the comments template to the point where it isn’t overwhelming any more. Can’t wait for the screencast on threaded comments!

  • Thank so mutch Drew.

    I have a simple question, i trought all the steps of this day 8 and i can’t sumit a comment when i was logged as admin. It says that i have to submit the name and the email first

    Keep the good work and i’m now waiting for day 9 :)

    thanks

  • Dan P says:

    Themeforest screencasts are my bible.

    thank youuuu

  • reader says:

    Is there a link to download the video?

  • crypta says:

    I am loved at WP

  • that’s great series , i have started after my exams finished !

  • Willabee says:

    Standards
    @Drew, @Jeff – Whenever I try to compare my code with yours it is difficult because you are both inconsistant and have differing styling techniques.

    Can I be bold and suggest we follow these rules whenever you possibly can (I know it must be difficult when your trying to type fast!).

    * Use tab indentation.

    * Use brace structure instead of colon structure.

    … so instead of this:

    <?php if($comments) : ?>

    <?php else : ?>

    <?php endif; ?>

    use this:

    <?php if($comments) { ?>
      …
    <?php } else { ?>
      …
    <?php } ?>

    The second snippet becomes easier to read and is more in line with JavaScript and other modern languages.

    * Use double quotes for (X)HTML and single quotes for PHP values, thus:

    <label for=’email’>Mail <?php if($req) echo ‘(Required field)’; ?></label>

    becomes:

    <label for=”email”>Mail <?php if($req) echo ‘(Required field)’; ?></label>

    This gives us consistancy, allows us to differentiate between HTML and PHP values and processes faster in PHP.

    * Try to use standards compliant code for strict XHTML.

    … so instead of:

    <form action=”url” method=”post”>
      <input type=”text” name=”email”>
    </form>

    use:

    <form action=”url” method=”post”>
      <fieldset>
        <legend>Form Title</legend>
        <label for=”email”>Email Address</label>
        <input type=”text” name=”email” id=”email” />
      <fieldset>
    </form>

    This is probably a big ask and I’d not be surprised if you don’t give this extra effort but it does give you more hooks for CSS, better accessibility and validates.

    I put in this extra effort with your projects and I have a valid Wordpress project so far.

    If you ignore this comment, don’t worry, I will continue to enjoy your tutorials and appreciate the effort you make for their production.

    Well done.

  • @Willabee well , i agree with u , i have also noticed this thing in wordpress series !

    use of brackets {} , make it well known languages !

  • Shibi Kannan says:

    Great series, I really like the slow pace and very good for a beginner like me starting to develop for wordpress. I also agree with previous comment on CSS and XHTML validation stuff. But for the purpose of tutorial I think it is not necessary to add lot of code just for the sake of validating it. We only need to know the special things that are required by wordpress and the rest of the development is entirely upto individual person’s choice of style. There is more than one way to do anything and we prefer the shorter and easier !!!

  • @Adrian-The filesize is quite large when I put these together, and I record with quality near 100%, perhaps that is the answer?

    @reader-You can find old episodes and every video done on blip.tv http://nettuts.blip.tv/posts?view=archive&nsfw=dc

    @Sergio-I just double checked and everything works fine for me when commenting, did you double check your files with the source files provided?

    @Willabee-You bring up some good point, I had someone else mention something about the quotes and that is my mistake, I will try to stay more consistent next time. I tend to use single quotes and use double when dealing with php inside html tags. I’ll try to break the habit. As for code validity and markup, I assure you when we get to the psd it will be valid, if I missed some tags or markup earlier I wasn’t too worried about it as we are just covering wordpress basics. Also, try to keep in mind that typing and speaking/teaching all at the same time can get tricky, some sometimes I make mistakes too :) I appreciate your input!

    @Everyone – Thanks for all the great and very nice comments, I’m glad that you have found it useful.

  • i m excited to see the video 9 !

  • hey , one thing i missed in my last comment , what is avatar ? how these came out ?

  • Copy paste and its done. Thanks Drew

  • Ryan says:

    Just wondering if you could host these somewhere so we can download them all! I would love to have them as future reference. Also, dont stop at 15 like most of the others, keep em going! They’re great!

  • @Ryan, they are available on the nettuts podcasts via iTunes. Check it out just enter a search for nettuts and subscribe.

  • Jesper says:

    Hi Drew,
    off topic Q: How do you arrange the shotcuts in your dock with the spaces between?
    TIA,
    Jesper

  • @Jesper I use the a free application to add spaces in the dock, you can find it here: http://leoparddocks.com/Leopard_Docks_App.php

  • ThaClown says:

    Thanks again, i’m really starting te get the hang of this WP!

    LOVE IT!

  • John D. says:

    So is the form something that you can just copy and paste?
    That is a lot of code to take in.
    Is there certain parts of the form that I will most likely want to modify on
    a regular basis?

  • Jesh says:

    Wow, your new headset must be pretty good! When I’m wearing headphones I can hear your tropical fish aquarium bubble in the background. Anyhow, thanks for these lessons. It’s a nice companion to the ‘Rockstar Wordpress’ e-book.

  • Jesh says:

    Oh… and thanks to you, Drew, I’m now accidentally saying ‘Ar Chives’ in my head every time I look through a blog’s old posts.

    BTW, ‘In the Woods’ seems to be having some trouble loading. 4 out of every 5 refreshes takes a good 30 seconds to load and lists a 404 Not Found page.

  • Chris says:

    I like that desktop wallpaper — can you give a link to that?

  • Tom says:

    I love this thing… is like making our best Blank WP Theme! awesome.

  • Eric says:

    Drew,

    I am getting the dreaded “Not Found – The requested URL /wp-comments-post.php was not found on this server.” error.

    I installed the latest wamp before starting the Diving & Wordpress screencasts. Can you point me to any good troubleshooting links?

    Otherwise NETTUTS is taking me from a Newbie with PHP to a seasoned Newbie : ). Can’t thank you guys enough….

  • eric says:

    I used your comments.php and my comment posted just fine. Ignore my previous comment. I need to diff the two files to see where I “Fat Fingered” it.

  • theDude says:

    Maybe a little late to the game here, but I like to do several of these over a few hours. I’ve found what I suspect might be a bug? That or I don’t understand how it’s supposed to work.

    When I submit a comment (when not logged in), the comment shows up automatically. When I refresh the page (still as an ordinary user not logged in) the comment still shows. Okay, not a big deal. Except, when logged in as the admin they don’t show!

    In the dashboard, I see that the new comments need approval. When submitting a comment as an ordinary (logged out) user, shouldn’t the approval message show instead? Also, shouldn’t the messages that need approval NOT be displayed to everyone? Isn’t that the point of approving messages?

    I’ve tried this with the source and it seems to act the same way.

    Thanks for any help. Even if it’s just guidance about the comment system.

  • theDude says:

    Did some more testing. Turns out I was mostly wrong, of course. The reason the comments were still showing was probably because of cookies. A quick clearing on firefox and the pending comments were gone. Yea!

    When I submit them, however the “Your comment is undergoing moderation.” message doesn’t show up. I’ve noticed that it does on this particular site, so I know where to look. Just checked the day-8 video and it didn’t show up when you tried it either, Drew. I am behind a couple videos, so maybe it got fixed later?

    If not, how might we get that message to display? Hey, it threw me off earlier.

    Thanks for the great videos, I’m learning so much!

  • theDude says:

    Got it! It was a silly mistake I make all the time.

    comment_approved = 0) : ?>

    should be…

    comment_approved == 0) : ?>

    We’re checking, not assigning. Use the double equals.

    Hope this helps anyone else who noticed.

    Can’t wait to watch the next video!

  • netxm says:

    Nettuts on iTenus – AWESOME!!! THANKS @Adrian Rodriguez