This is the second part to the ‘How to convert HTML layout into WordPress theme’ tutorial. Click here to go to the first part.
So far, in the first part, we’ve built the header.php, sidebar.php, index.php, single.php and footer.php files. In this second part, we’ll build the other elements such as comment template as well as the theme functions.
Step 1
Open up your favourite text editor and paste the following codes:
<?php
/**
* @package WordPress
* @subpackage My_Theme
*/
if ( post_password_required() ) : ?>
<p><?php _e('Enter your password to view comments.'); ?></p>
<?php return; endif; ?>
<?php if ( have_comments() ) : ?>
<h1 id="comments"><?php comments_number('No comments', 'One comment', '% comments' );?> to <em><?php the_title(); ?></em></h1>
<div class="navigation">
<div class="alignleft"><?php previous_comments_link() ?></div>
<div class="alignright"><?php next_comments_link() ?></div>
</div>
<ol class="commentlist">
<span><?php echo $i; ?></span>
<?php wp_list_comments('avatar_size=48'); ?>
</ol>
<div class="navigation">
<div class="alignleft"><?php previous_comments_link() ?></div>
<div class="alignright"><?php next_comments_link() ?></div>
</div>
<?php else : // this is displayed if there are no comments so far ?>
<?php if ( comments_open() ) : ?>
<!-- If comments are open, but there are no comments. -->
<?php else : // comments are closed ?>
<!-- If comments are closed. -->
<p class="nocomments"></p>
<?php endif; ?>
<?php endif; ?>
<?php if ( comments_open() ) : ?>
<h1 id="postcomment"><?php _e('Leave a comment'); ?></h1>
<?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
<p><?php printf(__('You must be <a href="%s">logged in</a> to post a comment.'), wp_login_url( get_permalink() ) );?></p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( is_user_logged_in() ) : ?>
<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 esc_attr($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 esc_attr($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 esc_attr($comment_author_url); ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>
<?php endif; ?>
<p><textarea name="comment" id="comment" cols="80%" rows="7" 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); ?>
<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>
</form>
<?php endif; // If registration required and not logged in ?>
<?php else : // Comments are closed ?>
<?php endif; ?>
Save this file as comments.php.
In WordPress, you can include Gravatar. Gravatar is an image that follows you from site to site appearing beside your name when you do things like comment or post on a blog. So when someone leaves a comment on your blog, his/her profile avatar will appear in the comment section, for example:
So if you want to change the size of the Gravatar in the comment section, look for this line in the comments.php:
<?php wp_list_comments('avatar_size=48'); ?>
Change the avatar size to any size you want. Save the file.
Step 2
In this step, we’re going to create the template for pages. WordPress does not only allow you to create individual page for posts, but also for custom pages. Obviously then we will need to design the template for the pages.
Copy and paste the following codes into a new file.
<?php
/**
* @package WordPress
* @subpackage My_Theme
*/
get_header(); ?>
<div id="content" class="widecolumn" role="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h1><?php the_title(); ?></h1>
<div class="entry">
<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
</div>
</div>
<?php comments_template(); ?>
<?php endwhile; endif; ?><br /><br />
<br /><br />
</div>
<?php get_footer(); ?>
Save the file as page.php.
Step 3
The next bit is to create the theme function file. Note that this file is only optional so you can skip this if you don’t need it.
<?php
add_filter( 'avatar_defaults', 'newgravatar' );
function newgravatar ($avatar_defaults) {
$myavatar = get_bloginfo('template_directory') . '/images/grav.png';
$avatar_defaults[$myavatar] = "Lovely Heart";
return $avatar_defaults;
}
?>
Okay, let me explain the purpose of this function. The codes above is to create the default Gravatar image for your blog.
Look at this code:
$myavatar = get_bloginfo('template_directory') . '/images/grav.png';
Change the path of the Gravatar image above to the directory where you keep your Gravatar.
Next, give a name to your default Gravatar. For example, my blog Nekonette.com’s default Gravatar is called Lovely Heart.
$avatar_defaults[$myavatar] = "Lovely Heart";
Save the file as functions.php.
Step 4
Now that we’re done with the templates, it’s time to throw in the CSS!
Create a file and save it as style.css. In the stylesheet, you need to put in all the styling for your theme.
All stylesheet must have the following information at the top of the file:
/* Theme Name: My Theme Name Theme URI: http://wordpress.org/ Description: Whatever thing that describes your theme. Author: Kitty Kat Author URI: http://nekonette.com/ Version: 1.0 Tags: pink, green, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments */
After the above information, you can stick in your CSS. For example:
/*
Theme Name: My Theme Name
Theme URI: http://wordpress.org/
Description: Whatever thing that describes your theme.
Author: Kitty Kat
Author URI: http://nekonette.com/
Version: 1.0
Tags: pink, green, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments
*/
a {
color: #7f5d41;
text-decoration: none;
}
strong, b {
color: #000;
font-weight: bold;
}
em, i {
color: #473211;
font-weight: italic;
}
img {
border: none;
}
body {
background: #b1a797;
margin: 0 auto;
font-size: .95em;
font-family: Verdana, Arial, Tahoma, sans-serif;
line-height: 1.5;
}
#container{
width: 920px;
height: auto;
margin: 0 auto;
font-size: .95em;
background: #dad5d0 repeat-y;
}
#header {
width: 920px;
height: 340px;
}
#body {
float: left;
width: 590px;
padding: 10px;
margin-left: 10px;
line-height: 2;
font-size: 13px;
}
#sidebar {
float: right;
width: 260px;
padding: 10px;
padding-right: 15px;
margin-right: -10px;
font-size: .95em;
}
#footer {
height: 195px;
width: 920px;
margin: 0 auto;
clear: both;
text-align: center;
}
Next, open up the header.php, and look for this line:
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
Make sure the name of the href=”style.css” is the same as your stylesheet name.
Okay folks, this is pretty much it. I know it looks pretty simple and minimal (and bare too!), but that’s what this tutorial is all about; I’m only touching the most basic stuff. If you wish to add more sugar and spice to your theme, you can search for them on Google. 😀
Go to previous part:
Tutorial: Converting HTML layout into WordPress theme – Part 1