25
Oct
WordPress from scratch : Part 4
Posted by Nouveller in Web Design, WordPress
Welcome to part four of my ‘WordPress from scratch’ series! This 4th part covers setting up WordPress’s amazing comment system, getting your pages (pages.php) looking like the rest of your blog, setting up your dynamic highlighting nav’ and more! I’ve also provided code snippets below which would of bored you all to death explaining so copy and paste them at your will. If you’d still like them explaining, I could do a separate post on each snippet, sound good? If so, let me know below.
WordPress from scratch : Part 1
WordPress from scratch : Part 2
WordPress from scratch : Part 3
WordPress from scratch : Part 4
Make sure to view the video in full screen mode, you’ll get a nice shiny 1280x800 view. Also, remeber to turn HD on as it is available!
Having problems viewing the video? Watch it on Vimeo or try refreshing your browser.
comments.php
<?php /** * @package WordPress * @subpackage Default_Theme */ // Do not delete these lines if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) die ('Please do not load this page directly. Thanks!'); if ( post_password_required() ) { ?> <p class="nocomments">This post is password protected. Enter the password to view comments.</p> <?php return; } ?> <?php if ( have_comments() ) : ?> <a name="comments"></a> <img src="<?php bloginfo('template_directory'); ?>/images/titles/comments-left-by-other-wizards.jpg" width="420" height="50" alt="Comments left by other wizards" title="Comments left by other wizards" /> <h2><?php comments_number('No Responses so far, leave comment please :)', 'One Response, yes you are first!', '% Responses' );?> | <a href="#reply" title="Clickage this to make a comment">Make a comment</a></h2> <p><?php previous_comments_link() ?> <?php next_comments_link() ?></p> <ul class="commentlist"> <?php wp_list_comments('type=all&callback=mytheme_comment'); ?> </ul> <p><?php previous_comments_link() ?> <?php next_comments_link() ?></p> <div class="clear"></div> <?php else : // this is displayed if there are no comments so far ?> <?php if ('open' == $post->comment_status) : ?> <!-- If comments are open, but there are no comments. --> <h2>No comments so far, why not make one?</h2> <?php else : // comments are closed ?> <!-- If comments are closed. --> <h2>Comments are closed.</h2> <?php endif; ?> <?php endif; ?> <?php if ('open' == $post->comment_status) : ?> <div id="respond"> <div class="clear"></div> <img src="<?php bloginfo('template_directory'); ?>/images/titles/leave-your-words-of-wisdom.jpg" width="420" height="50" alt="Leave your words of wisdom" title="Leave a nice comment for Jamin" /> <h2><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h2> <div class="clear10"></div> <div class="cancel-comment-reply"> <p><?php cancel_comment_reply_link('You are replying to the comment above, if you did this my mistake, cancel it!'); ?></p> </div><!-- /cancel-comment-reply --> <?php if ( get_option('comment_registration') && !$user_ID ) : ?> <p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p> <?php else : ?> <div class="meta"> <a href="http://gravatar.com/" target="_blank"></a><img src="<?php bloginfo('template_directory'); ?>/images/global/gravatar.gif" width="50" height="50" alt="This is a Gravatar" title="Get yourself a Gravatar if you haven't already." /></a> <p>Your name</p> </div><!-- /meta --> <div id="comment-form"> <a name="reply"></a> <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform"> <?php if ( $user_ID ) : ?> <p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out »</a></p> <?php else : ?> <p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> /> <label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p> <p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> /> <label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p> <p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" /> <label for="url"><small>Website</small></label></p> <?php endif; ?> <!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>--> <p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p> <p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" /> <?php comment_id_fields(); ?> </p> <?php do_action('comment_form', $post->ID); ?> </form> </div><!-- /comment-form --> <?php endif; // If registration required and not logged in ?> </div> <?php endif; // if you delete this the sky will fall on your head ?>
Customised comments function
<?php // Function for customised comments function mytheme_comment($comment, $args, $depth) { $GLOBALS['comment'] = $comment; ?> <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>"> <div id="comment-<?php comment_ID(); ?>"> <div class="meta comment-author vcard"> <?php echo get_avatar($comment,$size='50',$default='<path_to_url>' ); ?> </div><!-- /meta --> <div class="user-comment comment-meta commentmetadata"> <p class="user-name"><?php printf(__('%s'), get_comment_author_link()) ?> <span class="small pink italic">wrote on <?php comment_date(); ?></small></p> <?php if ($comment->comment_approved == '0') : ?> <p class="moderation"><?php _e('Your comment is awaiting moderation, hold tight.') ?></p> <?php endif; ?> <?php comment_text() ?> <p><?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?> <?php edit_comment_link(__('(Edit)'),' ','') ?></p> </div> </div><!-- /comment-<?php comment_ID(); ?> --> <?php } ?>
My name is Benjamin Reid, I live in the UK and keep the magic locked into this site.
This entry was posted on Sunday, October 25th, 2009 at 12:07 pm and is filed under Web Design, WordPress & tagged with CSS, HTML, PHP, WordPress, WP from scratch, XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
WordPress from scratch : Part 4 | Nouveller wrote on November 3, 2009
[...] here: WordPress from scratch : Part 4 | Nouveller Comments0 Leave a Reply Click here to cancel [...]
Joseph wrote on December 22, 2009
Hi, very nice tutorial.
Would it be possible for you to send me the PSD.
WLuis Martinez wrote on February 2, 2010
Hey bro how can i get the files of this tutorial 4 codding the website that u make? i wish i could have it 4 start doing this awsome tut.
PD:im from latinamerica - Venezuela