WordPress Themes: Starting Your Custom Theme
Tutorial navigation:
Starting Your Custom Theme
Creating the Loop
Creating the Footer
Creating the Sidebar
Adding Comments
Finishing Your Custom Theme
Do you want to create a custom WordPress template? Don’t know where to start? I’ll attempt to de-code the WordPress layout in this series of tutorials to help you learn how to create your own unique layout. While doing these templates I’m assuming you already have WordPress installed on your own host and know the basics of how to upload. Learning how to create a template isn’t hard, but you’ll have an easier time if you already have a grasp of the basics of HTML and designing with CSS and divs. Before we go any further I will warn you that using FrontPage is not ideal and I can’t predict how this will work with Frontpage. If you want to use a editor stick to Dreamweaver or other comprable editor. Otherwise you can create all of the following in a basic text editor like notepad.
Need a recap on these basic skills?
View my FTP guide here: FTP Guide
View my HTML crash course here: HTML Guide
First things first, you need to know what files you’ll be working with. One template is compiled of several files, like puzzle pieces.
Technorati Tags: Custom Theme, WordPress template, WordPress
WordPress Themes: Creating the Footer
Tutorial navigation:
Starting Your Custom Theme
Creating the Loop
Creating the Footer
Creating the Sidebar
Adding Comments
Finishing Your Custom Theme
This is part of the WordPress Themes tutorial.
Now that your header is finished you’ll want to close your page with the footer. Open the footer.php file. The footer runs along the very bottom of your blog and holds any copyright information. You can be creative in this area too! Add a div and format it if you want to have it span the bottom or to give it a specific style. You can add another list of your pages here if you like, contact information or anything that you think fits your blog. After you have added any footer information you’d like to appear you need to close out any divs you opened at the beginning that were wrapping your page. (table and cell tags if that’s what you are using).
A couple tags you may want to include in your footer are:
<?php echo date("Y")." "; bloginfo(‘name’); ?>
The above tag puts in the name of your blog with the year in front of it. Good for automatically including your blog information in the copyright.
<?php wp_loginout(); ?>
The above tag is the login and log out feature. You can log in to make changes and your readers can login to leave comments.
Then add this tag followed by the body tag:
<?php do_action(‘wp_footer’); ?> </body>
Save your footer.php file and continue to WordPress Themes: Creating the Loop
Technorati Tags: Custom Theme, WordPress Theme, tutorial
WordPress: Creating the Loop
Tutorial navigation:
Starting Your Custom Theme
Creating the Loop
Creating the Footer
Creating the Sidebar
Adding Comments
Finishing Your Custom Theme
The loop is the part of your page that holds the content of your blog. Your posts and pages. It’s called a the loop because it loops repeatedly on the page, starting anew with each post. Make sence? Open theloop.php and we’ll get started!
Insert this code to start the loop:
<?php if (have_posts()) { ?>
Now we’ll start actually grabbing the posts. Anything you put after this will be repeated in every post. Lines, borders etc as well.
<?php while (have_posts()) { the_post(); ?>
Now we’ll start formatting what’s included in the posts. The example tags I give are just basics. You can change these to use different formats and move them around to suite your needs. The links provide more examples and uses of each tag.
<?php the_title(‘<h3>’, ‘</h3>’); ?> Title, this tag inserts the title of the post. This example wraps the title in header tags.
<?php the_time(‘F j, Y’); ?> at <?php the_time(‘g:i a’); ?> Time/Date, this tag gives the time and date the post was added. Shown are 2 tags that combine the date and time. You can use these both, only one or another combination.
<?php the_author_nickname(); ?> Author tag, this tag includes who the post was made by. The shown tag includes the author’s display name. There are several different author tags including ones that show first name, last name or link to the author’s website or other posts. See link for more information.
<?php the_category(‘, ‘); ?> Category, this tag displays the categories that the post is attached to.
<?php edit_post_link(‘edit’); ?> Edit post, this tag appears only to the administrator/author of the post.
<?php the_content("more"); ?> Content, this displays the content of the post. The "more" between is what displays if you use the text displayed when the <!–more–> Quicktag is used. The quick tag is used when creating the post. The author inserts the tag <!–more–> and the text after that is excluded from teh post leaving a link that the reader clicks to view the full post.
<?php comments_popup_link(‘No comments yet’, ‘1 comment so far’,
‘% comments so far’, ‘comments-link’, ‘Comments are off for this post’); ?> Comments, this tag shows the number of comments and allows the reader to click to add a comment as well.<?php the_permalink(); ?> Permalink, this tag displays the permalink for your post. You can combine this to display the full URL or to a text link.
<!– <?php trackback_rdf(); ?> –>
Trackback, this tag shows the RDF information to track back to your post when posted elsewhere. Also known as Pingback.
These are just a smidge of the possibilities. You can find more tags on the WordPress Template Tag list . Now that your loop is complete you’ll want to close the loop. Add these tags to the end and save your file.
<?php } ?>
<?php } else { ?>
<?php } ?>
Here is an example of a finished loop. This loop layout is show on the Web Savvy Mama blog.
<?php if (have_posts()) { ?>
<?php while (have_posts()) { the_post(); ?>
<?php the_title(‘<h3>’, ‘</h3>’); ?>
Posted: <?php the_time(‘F j, Y’); ?> at <?php the_time(‘g:i a’); ?> | by <a href="<?php the_author_url(); ?>"><?php the_author_firstname(); ?></a> <br>
Filed under: <?php the_category(‘, ‘); ?>
<?php edit_post_link(‘edit’); ?>
<?php the_content("more"); ?>
<?php comments_popup_link(‘No comments yet’, ‘1 comment so far’,
‘% comments so far’, ‘comments-link’, ‘Comments are
off for this post’); ?>
| <a href="<?php the_permalink(); ?>">permalink</a>
<p><img src="http://websavvymama.com/blog/wp-content/themes/websavvy/images/blogline.gif" />
<!– <?php trackback_rdf(); ?> –>
<?php } ?>
<?php posts_nav_link(); ?>
<?php } else { ?>
<?php } ?>
Continue on to WordPress Themes: Creating the Sidebar
Technorati Tags: Custom Theme
WordPress Themes: Creating the Sidebar
Tutorial navigation:
Starting Your Custom Theme
Creating the Loop
Creating the Footer
Creating the Sidebar
Adding Comments
Finishing Your Custom Theme
The side bar is not a required file but it’s a usefull one. The sidebar will display vertically down one either side of your blog next to the loop. This is where you’ll want to put the search feature, category lists and any other information you choose. To select which tags you want to include on your side bar visit the <a href="http://codex.wordpress.org/Template_Tags" target="_blank">WordPress Template Tag list </a>. I’ll list the tags that I use and find helpful. Remember pages, archives, categories etc are outputted as lists and will accept list formatting and css styling. These all go in sidebar.php file.
<?php wp_get_archives(‘type=monthly’); ?> Archives, this tag displays a list of archived posts by month. The link provide gives other options for archive display.
<?php wp_list_cats(’sort_column=name&list=1&hide_empty=1′); ?> Categories, this tag displays categories on your blog.
<?php wp_get_archives(‘type=postbypost&limit=5′); ?> Latest entries, this displays the latest entries to the blog. The number shown can be edited. This is the same as archives but given a different property
<form method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<b>Search</b><input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" size="15" />
</form> Search box, this allows readers to search your site/post.
Link list, this tag lists your links and the category they are located in.
You can also add more information such as links to your RSS feeds, button banners etc. After you are finished adding content to your sidebar save your file. Continue to WordPress Themes: Adding Comments
WordPress Themes: Adding Comments
Tutorial navigation:
Starting Your Custom Theme
Creating the Loop
Creating the Footer
Creating the Sidebar
Adding Comments
Finishing Your Custom Theme
We are almost done! Next you need to include the files to handle your comment form so visitors can reply to your posts. No need to do editing here unless you really want to.
Open comments.php and copy and paste the following and then save the file.
<?php // Do not delete these lines
if (‘comments.php’ == basename($_SERVER['SCRIPT_FILENAME']))
die (‘Please do not load this page directly. Thanks!’);
if (!empty($post->post_password)) { // if there’s a password
if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // and it doesn’t match the cookie
?><p class="nocomments">This post is password protected. Enter the password to view comments.<p>
<?php
return;
}
}/* This variable is for alternating comment background */
$oddcomment = ‘alt’;
?><!– You can start editing here. –>
<div id="comments">
<?php if ($comments) : ?>
<p><b><?php comments_number(‘No Responses’, ‘One Response’, ‘% Responses’ );?> to “<?php the_title(); ?>”</b></p><ol class="commentlist">
<?php foreach ($comments as $comment) : ?>
<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
<cite><?php comment_author_link() ?></cite> Says:
<?php if ($comment->comment_approved == ‘0′) : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>
<br /><small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>" title=""><?php comment_date(‘F jS, Y’) ?> at <?php comment_time() ?></a> <?php edit_comment_link(‘e’,”,”); ?></small>
<?php comment_text() ?>
</li>
<?php /* Changes every other comment to a different class */
if (‘alt’ == $oddcomment) $oddcomment = ”;
else $oddcomment = ‘alt’;
?><?php endforeach; /* end for each comment */ ?>
</ol>
<?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. –><?php else : // comments are closed ?>
<!– If comments are closed. –>
<p class="nocomments">Comments are closed.</p><?php endif; ?>
<?php endif; ?>
<?php if (‘open’ == $post->comment_status) : ?>
<h3 id="respond">Leave a Reply</h3>
<?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 the_permalink(); ?>">logged in</a> to post a comment.</p>
<?php else : ?><form action="<?php echo get_option(’siteurl’); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>
<br>Logged in as <a href="<?php echo get_option(’siteurl’); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option(’siteurl’); ?>/wp-login.php?action=logout" title="Log out of this account">Logout »</a>
<?php else : ?>
<br><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label><br><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label><br><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label><?php endif; ?>
<!–<p><small><strong>XHTML:</strong> You can use these tags: <?php echo allowed_tags(); ?></small></p>–>
<p><textarea name="comment" id="comment" cols="50" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<?php do_action(‘comment_form’, $post->ID); ?></form>
</div><?php endif; // If registration required and not logged in ?>
<?php endif; // if you delete this the sky will fall on your head ?>
Open comments-popup.php and copy and paste the following code then save the file:
<?php
/* Don’t remove these lines. */
add_filter(‘comment_text’, ‘popuplinks’);
foreach ($posts as $post) { start_wp();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo get_settings(‘blogname’); ?> – Comments on <?php the_title(); ?></title><meta http-equiv="Content-Type" content="<?php bloginfo(‘html_type’); ?>; charset=<?php echo get_settings(‘blog_charset’); ?>" />
<style type="text/css" media="screen">
@import url( <?php bloginfo(’stylesheet_url’); ?> );
body { margin: 3px; }
</style></head>
<body id="commentspopup"><h1 id="header"><a href="" title="<?php echo get_settings(‘blogname’); ?>"><?php echo get_settings(‘blogname’); ?></a></h1>
<h2 id="comments">Comments</h2>
<p><a href="<?php echo get_settings(’siteurl’); ?>/wp-commentsrss2.php?p=<?php echo $post->ID; ?>"><abbr title="Really Simple Syndication">RSS</abbr> feed for comments on this post.</a></p>
<?php if (‘open’ == $post->ping_status) { ?>
<p>The <acronym title="Uniform Resource Identifier">URI</acronym> to TrackBack this entry is: <em><?php trackback_url() ?></em></p>
<?php } ?><?php
// this line is WordPress’ motor, do not delete it.
$commenter = wp_get_current_commenter();
extract($commenter);
$comments = get_approved_comments($id);
$post = get_post($id);
if (!empty($post->post_password) && $_COOKIE['wp-postpass_'. COOKIEHASH] != $post->post_password) { // and it doesn’t match the cookie
echo(get_the_password_form());
} else { ?><?php if ($comments) { ?>
<ol id="commentlist">
<?php foreach ($comments as $comment) { ?>
<li id="comment-<?php comment_ID() ?>">
<?php comment_text() ?>
<p><cite><?php comment_type(‘Comment’, ‘Trackback’, ‘Pingback’); ?> by <?php comment_author_link() ?> — <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a></cite></p>
</li><?php } // end for each comment ?>
</ol>
<?php } else { // this is displayed if there are no comments so far ?>
<p>No comments yet.</p>
<?php } ?><?php if (‘open’ == $post->comment_status) { ?>
<h2>Leave a comment</h2>
<p>Line and paragraph breaks automatic, e-mail address never displayed, <acronym title="Hypertext Markup Language">HTML</acronym> allowed: <code><?php echo allowed_tags(); ?></code></p><form action="<?php echo get_settings(’siteurl’); ?>/wp-comments-post.php" method="post" id="commentform">
<p>
<input type="text" name="author" id="author" class="textarea" value="<?php echo $comment_author; ?>" size="28" tabindex="1" />
<label for="author">Name</label>
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
<input type="hidden" name="redirect_to" value="<?php echo wp_specialchars($_SERVER["REQUEST_URI"]); ?>" />
</p><p>
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="28" tabindex="2" />
<label for="email">E-mail</label>
</p><p>
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="28" tabindex="3" />
<label for="url"><acronym title="Uniform Resource Identifier">URI</acronym></label>
</p><p>
<label for="comment">Your Comment</label>
<br />
<textarea name="comment" id="comment" cols="70" rows="4" tabindex="4"></textarea>
</p><p>
<input name="submit" type="submit" tabindex="5" value="Say It!" />
</p>
<?php do_action(‘comment_form’, $post->ID); ?>
</form>
<?php } else { // comments are closed ?>
<p>Sorry, the comment form is closed at this time.</p>
<?php }
} // end password check
?><div><strong><a href="javascript:window.close()">Close this window.</a></strong></div>
<?php // if you delete this the sky will fall on your head
}
?><!– // this is just the end of the motor – don’t touch that line either
–>
<?php //} ?>
<p class="credit"><?php timer_stop(1); ?> <cite>Powered by <a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform"><strong>Wordpress</strong></a></cite></p>
<?php // Seen at http://www.mijnkopthee.nl/log2/archive/2003/05/28/esc(18) ?>
<script type="text/javascript">
<!–
document.onkeypress = function esc(e) {
if(typeof(e) == "undefined") { e=event; }
if (e.keyCode == 27) { self.close(); }
}
// –>
</script>
</body>
</html>
Add this to your style.css:
/* Begin comments*/
#commentform input {
width: 100px;
padding: 2px;
margin: 5px 5px 1px ;
}#commentform textarea {
width: 500px;
padding: 2px;
}#commentform #submit {
margin: 0;
float: left;
}.alt {
margin: 0;
padding: 10px;
}.commentlist {
padding: 0;
text-align: left;
}.commentlist li {
margin: 15px 0 3px;
padding: 5px 10px 3px;
list-style: none;
}.commentlist p {
margin: 10px 5px 10px 0;
width: 500px;}
#commentform p {
margin: 5px 0;
}.nocomments {
text-align: left;
margin: 0;
padding: 0;
}.commentmetadata {
margin: 0;
display: block;
}
/* End Comments */
Almost done! Continue onto: WordPress Themes: Finishing Your Custom Theme.
WordPress Themes: Finishing Your Custom Theme
Tutorial navigation:
Starting Your Custom Theme
Creating the Loop
Creating the Footer
Creating the Sidebar
Adding Comments
Finishing Your Custom Theme
Now that you have all your peices, lets put them together! Open index.php this is the place where we will put our "get" script that will pull the pieces together. Remember that our pieces are like building blocks or puzzle pieces? This is where it will make sence.
First we start with our header, add this tag first:
<?php get_header(); ?>
Now add your loop and sidebar. If you are familiar with divs this is where you might want to surround the loop and sidebar in thier own divs and give them styling for width etc and make sure to add that to your style.css again. The order you place your sidebar.php and theloop.php will determine what side the sidebar appears on. Place it first to appear on the left, place it second to place on the right. The code to grab these:
<?php include (TEMPLATEPATH . ‘/theloop.php’); ?>
<?php get_sidebar(); ?>
Now add your comments. This actually asks for your comment template which we didn’t create. It wasn’t necessary to get into that because it will just pull the plain theme for comments from the default theme.
<?php comments_template(); ?>
Now add your footer:
<?php get_footer(); ?>
Here is an example of a index file using 2 divs to control the style and position of the loop and sidebar (as specified in the css file):
<?php get_header(); ?>
<div id="loop">
<?php include (TEMPLATEPATH . ‘/theloop.php’); ?>
</div><div id="sidebar">
<?php get_sidebar(); ?>
</div>
<?php comments_template(); ?>
<?php get_footer(); ?>
Save your index.php file. You are all set to upload your theme! All your files should be a folder with the same name as your theme. Open up your FTP program and drop the entire folder into wp-content>themes Now your theme will show up in teh administrator panel! Congratulations, you just created your first WordPress theme!
Did this tutorial help you? Let me know, I’d love to see your finished blog themes.