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.
I want you to create these empty files first and save them so they are on hand later when we need to work with them. They don’t need to contain anything yet.
In a empty folder create the following files:
style.css
header.php
footer.php
index.php
theloop.php
sidebar.php
comments.php
comments-popup.php
I know that seems like a lot of files, but really, it’s not. The minimum is index.php and style.css, but I’m assuming you want a little meat in your blog!
We are going to start with the style.css file. This file will control the look of your text and divs. The WordPress theme runs on an external CSS, if you are used to inline or embedded this is very similar but its all located in a seperate file. Start out by giving the CSS a title, this puts your theme information into the theme management area with a link back to your site. If you share your theme with other’s you want that information there. So copy this information into your style.css file and replace my information with your own:
/*
Theme Name: Web Savvy Mama
Theme URI: http://websavvymama.com/
Description: Web Savvy Mama Theme
Version: 1.0
Author: Kristine Deppe
Author URI: http://websavvymama.com/
*/
If you already know that you’ll want a background color go ahead and put your body css style in there as well with that information. I’m not going to walk through the CSS tags as I’m assuming you already have a grasp of the basic CSS rules. Save this file but leave it open, you’ll probably be coming back to it and adding more information as you add more divs to your other pages.
Next, we’ll start composing the parts of the layout. You must first understand that the pieces stack to work together. No one page will contain all the regular page tags such as body, head etc. If that is confusing don’t worry, it’ll make sense soon enough.
Creating the Header.
Open header.php now and add the following:
<head>
<title>
<?php bloginfo(’name’); ?><?php wp_title(’ » ‘,display); ?>
<?php if(is_search()) { ?> » Search Results for <?php echo wp_specialchars($s); ?><?php } ?>
</title><meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo(’charset’); ?>" />
</meta><meta name="generator" content="WordPress <?php bloginfo(’version’); ?>" />
</meta><meta name="description" content="<?php bloginfo(’description’); ?>" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo(’stylesheet_url’); ?>" />
<link rel="alternate" type="application/rss+xml" title="Subscribe to <?php bloginfo(’name’); ?>" href="<?php bloginfo(’rss2_url’); ?>" />
<link rel="alternate" type="application/rss+xml" title="Subscribe to <?php bloginfo(’name’); ?>" href="<?php bloginfo(’rss_url’); ?>" />
<link rel="alternate" type="application/rss+xml" title="Subscribe to <?php bloginfo(’name’); ?>" href=" <?php bloginfo(’atom_url’); ?>" /><?php wp_get_archives(’type=monthly&format=link’); ?>
<?php wp_head(); ?>
</head>
There is no need to worry about any of this information right now. This is the information you don’t see but makes your blog run. Now we’ll start the body. The body starts in the header.php file but ends in the footer.php file so you are only doing the starting end in the header.php file. Start the body of your page by adding the
<body>
tag. You can include your link color here if you’d like. example: <body link="#188494" vlink="#188494" text="#000000"> Now we’ll start the styling. If you are familiar with how divs work you may be wondering where you start your divs and end them to create the layout. Same goes for designers that use tables. Well, we start them here. If you want to include a wrap div you start that here, but don’t close it out yet. Remember any div that you would normally close out at the end of your document will close out in the footer.php file. Remember to go back to your CSS page (style.css)and add styling properties for the divs you create. The layout of the header is up to you, but this will stretch across the top of your blog so keep this in mind. If you have a image you can insert that just like you would on a webpage, just make sure to use full URLs to images and not the short format.
Before you are done with your header you will probably want to add a horizontal navigation bar. If you don’t want this, skip this step. All the naviagtional lists created in wordpress from page navigation to categories have a list output. So you can use any list effect you want to change the style of the navigation. Google "CSS Lists" and you’ll be given lots of options!
You can also visit http://css.maxdesign.com.au/listamatic/ and http://dynamicdrive.com/dynamicindex1/indexb.html for examples.
But let’s get to it! There are a few ways to do this. You can hard code your links, or you can make WordPress automate this list. If you choose to have WordPress automate the page list remember that if you have a ton of pages they may not fit and this will screw up your template layout. But if you have a handfull of main pages (besides categories) you should be fine. The pages we’re talking about are things like the “about” type pages, not your actual blog enteries. Any pages that are not part of your blog will have to be hand coded as well.
<ul id="menu"> <li class="<?php if (((is_home()) && !(is_paged())) or (is_archive()) or (is_single()) or (is_paged()) or (is_search())) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings(’home’); ?>">Home</a></li> <?php wp_list_pages(’sort_column=menu_order&depth=1&title_li=’); ?> </ul>
This is basically creating a link to the blog home page and then generating pages you may have in your blog (managed in the admin). As you can see it is wrapped in <ul> and <li> tags. You can give the list any format you’d like, including adding divs around it to control the look. An example is the menu on this blog. Here is my code:
<div id="navcontainer">
<ul id="navlist">
<li ><a href="http://websavvymama.com" target="_blank">Web Savvy Mama</a></li>
<li ><a href="mailto:kristine@websavvymama.com" title="kristine@websavvymama.com">Contact</a></li>
<li class="<?php if (((is_home()) && !(is_paged())) or (is_archive()) or (is_single()) or (is_paged()) or (is_search())) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings(’home’); ?>"> Blog Home</a></li>
<?php wp_list_pages(’sort_column=menu_order&depth=1&title_li=’); ?>
</ul>
</div>
The style of the list and div is controlled in my style.css file. This gives me the button appearance. I’ve also hard coded in a link to my design website and contact email.
Now we are done with the header.php file. Save this and set it aside. Continue to WordPress Themes: Creating the Footer.
Technorati Tags: Custom Theme, WordPress template, WordPress
Filed under: WordPress Tutorials | (8) comments
Subscribe
8 Responses to “WordPress Themes: Starting Your Custom Theme”
Leave a Reply
You must be logged in to post a comment.
February 2nd, 2007 at 3:57 pm
[...] WordPress Themes: Starting Your Custom Theme This tutorials covers the the creation of a theme, including the loop, footer, sidebar and comments. [...]
February 3rd, 2007 at 7:08 pm
[...] navigation: Starting Your Custom Theme Creating the Loop Creating the Footer Creating the Sidebar Adding Comments Finishing Your CustomTheme [...]
February 16th, 2007 at 12:46 am
[...] WordPress Themes: Starting Your Custom Theme [...]
March 11th, 2007 at 9:10 am
[...] While I can proudly take full credit for coding the rest of the site, I must give props to <a href=”http://websavvymama.com/blog/?p=16″>Web Savvy Mama’s excellent Wordpress custom theme tutorial</a>, without which this blog wouldn’t be here! I’m a total newbie at PHP, and was tearing my hair out trying to customise my blog so that it fitted with the rest of my site. If I hadn’t found this tutorial, you’d probably just be looking at a default Wordpress page with a pink background. Thanks so much, Kristine! [...]
April 6th, 2007 at 3:05 pm
Something went horribly wrong for me. My blog turned into a blank white page with nothing at all on it when I activated my new custom theme.
Could it be this?
Maybe I can’t use my old SSI inside of PHP.
April 6th, 2007 at 3:06 pm
Well it didn’t post the code I pasted. It was a server side include that I use on the rest of my site to place the navigation bar.
April 6th, 2007 at 3:34 pm
Hi there, Yes, if it doesn’t like a script or code you are using it will leave the offending parts out and in some cases go blank.
I could see your code when the comment was emailed to me and it looks like a case of non compatible scripts. If you want to use an include like that you can make one to work similarily.
Take your navigation.txt file you were using as an include and paste it into a blank php page. (Assuming its HTML code in that .txt. code) Name it navigation.php
Then use an include in the index.php to place it. Make sure to also put the navigation.php into your theme folder. Hopefully that works for you!
May 14th, 2007 at 3:42 pm
Hello,
Thank you so much for writing these tutorials. I’ve been searching for days trying to find one easy to understand.
I do have a question/problem. For some reason, the style.css page isn’t being applied to the blog at all. I just get an unstyled page. Any idea why that might happen?
Thanks again,
Susan