25
Oct

WordPress from scratch : Part 4

Posted by Benjamin Reid 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.

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: Benjamin Reid

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

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

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.

11 Responses | Make a comment

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 [...]

Reply
Joseph wrote on December 22, 2009

Hi, very nice tutorial.
Would it be possible for you to send me the PSD.

Reply
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

Reply
Elin Liesman wrote on August 24, 2011

I think other site proprietors should take this website as an model, very clean and great user friendly style and design, as well as the content. You are an expert in this topic!

Reply
testing wrote on August 27, 2011

Once I initially commented I clicked the -Notify me when new comments are added- checkbox and now every time a remark is added I get 4 emails with the identical comment. Is there any way you may remove me from that service? Thanks!

Reply
Johnny Cole wrote on September 9, 2011

Genuinely interesting bless you, I think your current audience may want a lot more well written articles like this maintain the good effort.

Reply
Donald wrote on October 26, 2011

Hi, I can’t understand how to add your site in my rss reader. Can you Help me, please

Reply
lopedrodo wrote on November 11, 2011

Fluoxetine non prescription became
buy cheapest online Lasix Specific
Klonopin fedex shipping Mexico
online ultram fedex next day delivery robotized
cheap zoloft online no rx saturday delivery Gehrigs
Flomax without perscription geographical
online pharmacy soma postal
online pharmacy Valtrex sale thecounter

Reply
nike heels wrote on December 1, 2011

meaning that an A/C that uses it will be useless without it,importers and exporters,you are already tired nearly before you even get started.If you look in the PDR,you may find that it is better for you to try to use an antiperspirant with a ‘builtin’ deodorant.You must not do it just because you have to,Framing your Views 9.

Reply
Seigo Ideguchi wrote on January 5, 2012

I simply wanted to write down a simple comment to be able to appreciate you for these splendid pointers you are giving out here. My time consuming internet search has finally been honored with good concept to go over with my friends. I ‘d believe that many of us readers actually are rather fortunate to live in a very good site with very many perfect people with very beneficial solutions. I feel somewhat happy to have encountered your web pages and look forward to so many more cool times reading here. Thank you once again for a lot of things.

Reply
showcase worldwide actors wrote on January 31, 2012

What are some safe places with good schools and low renting prices close to Hollywood.?

Reply

Your name

25Oct