wordpress-from-scratch-part-4

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.

Series contents

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.

Code snippets from WordPress from scratch : Part 4

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 &raquo;</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 } ?>

Author: Nouveller

My name is Benjamin Reid, I live in the UK and keep the magic locked into this site.

RSS Icon

Subscribe to the RSS feed some design goodness, get in on the upcoming software give-aways!

Digg Icon Share WordPress from scratch : Part 4 to Twitter Share WordPress from scratch : Part 4 to Delicious Share WordPress from scratch : Part 4 to Facebook

Related post(s)

Comments left by other wizards

3 Responses | Make a comment

Leave your words of wisdom

Leave a Reply

This is a Gravatar

Your name