<

Create Your Own Wordpress Theme

Published on
32,064 Points
10,364 Views
17 Endorsements
Last Modified:
Awarded

How to create your own WordPress Theme


Before I begin with the theme design tutorial, I would like to give you the basics of what is required to make a WordPress Theme. The most basic WordPress theme only requires 2 files: a style.css file and an index.php file. The index.php file is the page that will hold the loop. The loop is the piece of code that WordPress uses to import your content, either posts, or pages. The style.css file is required by WordPress because it is what tells WordPress that the theme exists. The style.css file only has to contain the theme header information. You could technically create a style.css file with no CSS at all.

View the picture below to gain a better understanding of the parts of a WordPress theme.Page Parts
 
Here is the basic information that is required to be in the style.css file:
/*
Theme Name: Your Theme Name
Theme URI: http://yoursite.com/
Description: Your custom website description *(not required unless you are submitting it to the WordPress theme repository)
Author: You *(not required unless you are submitting it to the WordPress theme repository)
Author URI: http://your-website.com/ *(not required unless you are submitting it to the WordPress theme repository)
Version: 1.0 *(not required unless you are submitting it to the WordPress theme repository)
Tags: black, blue, white, two-columns, * (this isn't required either. The description Tags are what WordPress uses in the theme repository when someone searches for a Free Theme.)

License: (GPL Licence information) *(only required if you are submitting to theme repository)
License URI: (GPL URL) *(only required if you are submitting to theme repository)

General comments (optional).
*/

Open in new window

The information above must reside in the top of our style.css file.

1. Getting Started

MATERIALS REQUIRED FOR THIS TUTORIAL:

To follow along with this tutorial you will need the following tools:

1. A text editor
You can use Dreamweaver if you prefer, but a simple text editor will work. I use one called Notepad++ (free to download and very useful).

2. FTP access to your website's file directory.
The best practice is to use a FTP client for uploading files. If you encounter an error while coding your theme it will make fixing it a lot easier. If you don't have FTP access you can upload your theme using the WordPress Admin (http://yourwebsite.com/wp-admin). First, use a zip utility to create a .zip file containing your theme files.  Next, from the Admin Dashboard navigate to Appearance > Themes > Install Themes and you will see an option on the top left of the screen that says Upload. Click Upload and navigate to your theme zip file located on your computer and choose Upload. Once you upload the theme, click install and it should now be your active theme.
A good FTP client to use is FileZilla (free to download).

NOTE:
If you don't have FTP access changing certain theme files can cause you to loose access to your admin login. You can easily fix these problems with FTP access.

Example:
You edit the functions.php file and forget to properly close an expression. You save the file in the WordPress Theme Editor and get a blank white screen. If you don't have access to your theme through FTP, you will have no way of fixing the error. With FTP access you could download the file containing the error and fix it or remove the theme completely. That would restore the default WordPress theme and allow you to access your WordPress Admin page.

When you begin creating new themes it is important to use valid code. The theme I am going to create for this tutorial is 100% CSS 3.0, and HTML Valid. You can check your website's code using the W3C Validators. The W3C is The World Wide Web Consortium, a group who creates the code standards for the Internet.

Here are links to the W3C validators:

W3C CSS Validator: http://jigsaw.w3.org/css-validator/ (for CSS 3.0 validation you will need to use the More Options section and select CSS 3.0 from the list).

W3C HTML Validator: http://validator.w3.org/

2. Lets Start Adding Theme Files

For this tutorial I will add the code I am using for a guide. You can either create your own or copy and paste the code I am providing.

The style.css file:
/*
Theme Name: ee-theme
Theme URI: http://wordpressexpression.com/
Description: Theme designed for Experts Exchange tutorial.
Author: Jeremy Jared
Author URI: http://ideatreedesignonline.com/ 
Version: 1.0 
Tags: simple, basic, plain, customizable

License: 
License URI:

General comments: I hope you find this useful.
*/

Open in new window


The index.php file:
<?php get_header(); ?>

	<div id="content">
	<?php if (have_posts()) : ?>

		<?php while (have_posts()) : the_post(); ?>
		
		<div class="post">
			<h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
			<small><b>Posted:</b> <?php the_time('F jS, Y') ?> | <b>Author:</b> <?php the_author_posts_link(); ?> | <b>Filed under:</b> <?php 

the_category(', ') ?> <?php the_tags(' | <b>Tags:</b> ', ', ', ''); ?> <?php if ( $user_ID ) : 
			?> | <b>Modify:</b> <?php edit_post_link(); ?> <?php endif; ?>| <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% 

Comments &#187;'); ?></small>
			<?php the_content('Read the rest of this entry &raquo;'); ?>
			 <hr/>
		</div></div>
			
		<?php endwhile; ?>

		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
		</div>

	<?php else : ?>

		<h2 class="center">Not Found</h2>
		<p class="center">Sorry, but you are looking for something that isn't here.</p>

	<?php endif; ?>

	</div>
	
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Open in new window

Explaining The Loop

The code above is called "the loop", this is what WordPress uses to query the database and output any pages, posts, comments, and several other elements. This is a very basic loop, you can customize loops to act exactly as you want them.

Here is a very brief description of what the code above is doing:

get_header(); = this is what tells Wordress the header.php file which contains the header content. We will add that file a little later.

if (have_posts()) :  = This simply checks to see if you have any posts.

while (have_posts()) the_post(); the_content(); : = This part displays the posts.

I have added additional code (next_posts_link, previous_posts_link) this code is for the posts section of your theme. It is the base for adding next and previous links to your post pages.

get_sidebar();  = This one is self explanatory, it gets the sidebar if one is available.

get_footer();  = Gets your footer (footer.php), we will create this file later.

Start Building The Theme Directory

Open your text editor and copy the codes above and paste them into your files.
Save them as style.css and index.php. Create a theme folder to hold them the files. This folder needs to have the same name as the one you used in the style.css file (for my example I am using ee-theme as the folder and theme name in the style.css file).
Upload your theme folder to the theme directory of your WordPress file directory (/wp-content/themes/).
Now go to the WP-Admin > Themes and you should see your new theme (we haven't added a screen-shot yet, so it will have a blank square).
Activate your theme and create a page and add some text if you don't already have one.
Click Preview Page from the WordPress Editor or click on your website's name in the top left corner of the WordPress Admin area to view your theme.
At this point it won't look like much, but you should see the text of your page.

3. Adding The header.php File

Now let's build on our theme. We'll start by adding a header (header.php).
Create a new blank page using your text editor.

Save it in your theme folder and name it header.php.
This is where you define the Doctype for the theme files, so the first part of code we will add will be the DOCTYPE info. I prefer to use XHTML 1.0 Transitional as it makes it a little easier to keep the code valid.

Here is the code for the header.php file:
<!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" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_head(); ?>
</head>
<body>
<div id="wrapper">
	<div id="header">
		<div id="logo">
		<h1><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1>
		<h2><?php bloginfo('description'); ?></h2>
		</div>
		<div id="nav">
			<ul>
				<?php wp_list_pages('title_li='); ?>
			</ul>
		</div>
		</div>	

Open in new window

It would take too long for me to explain all the things that are happening in the code above. I will touch on a few of the things going on but to learn more please visit the Wordpress Codex page.  The Codex is the online documentation for WordPress and it contains valuable information for theme developers.

Quick explanation:

<link rel="stylesheet":
Tells WordPress to look for a stylesheet, <?php bloginfo( 'stylesheet_url' ) Here were are telling WordPress to use our theme directory and use the style.css file located there.

<h1> <a href="<?php echo get_option('home'); ?>"> <?php bloginfo('name'); ?></a></h1>:
This prints our site title on every page of the site and wraps it in an H1 tag. If you want to use the H1 tag on something else, remove the H1 tags surrounding the statement, or replace it with an H2 tag.

I am adding a few <div> tags to define certain areas of the theme so we can style them later in our style.css file.

Save the header.php file to your theme directory.
Upload the header.php file to your site using your FTP client.
Now refresh your home page.
Notice everything is gone now except the site title. Don't worry, we will fix it later.

Let's add a little style to the header:
I am going to add a little color and font style to the header. I am also adding a overall background to the default background by using the body {} identifier in my style.css file.

Here is the example css:
/*
Theme Name: ee-theme
Theme URI: http://wordpressexpression.com/
Description: Theme designed for Experts Exchange tutorial.
Author: Jeremy Jared
Author URI: http://ideatreedesignonline.com/ 
Version: 1.0 
Tags: simple, basic, plain, customizable
License: 
License URI:
General comments: I hope you find this useful.
*/
body {
	font-family: Georgia, serif;
	font-size:15px;
	line-height:1.5em;
	margin: 0;
        background: silver;
}

#header {
        background: black;
	border-bottom: solid 3px #4d4e50;
	letter-spacing: 0.2em;
        min-width: 500px;
        width: 100%;
        height: 200px;
        border-top: solid black 1px;
}

Open in new window

Save the file and upload it to the theme folder via FTP.
Refresh the home page to view the changes.
We will add more style later but for now let's add a few more files to the theme.

4. Adding The Footer

The next step is to add a footer to the theme. WordPress gives you the ability to create a footer.php file and call it with PHP. This is useful because when you make updates to the footer you don't have to update each individual page. You only have to change the footer.php file and it will reflect the changes on every page of the website.

Open a blank file using the text editor and save it as footer.php.
Add the footer.php to your theme folder.
Add the following bit of code to it and save the file:
<div id="footer">
    <p><?php wp_footer() ?></p>
<p><a href="<?php echo get_option('home'); ?>">Your New Website </a>is a custom theme created for Experts Exchange WordPress Tutorial.
<br/>Designed by: <a href="http://ideatreedesignonline.com/" title="IdeaTree Design Online">Jeremy Jared of IdeaTree Design</a></p>
	</div>
	</div>
</body>
</html>

Open in new window


Upload the footer.php file to your theme directory.

NOTE:
You can change the text and links in the Footer. Replace the sections in the following code that say "ADD TEXT HERE", and "YOUR URL HERE".
<div id="footer">
    <p><?php wp_footer() ?></p>
<p><a href="<?php echo get_option('home'); ?>">ADD TEXT HERE</a>ADD TEXT HERE<br/>Designed by: <a href=" YOUR URL HERE" title="ADD TEXT HERE">ADD TEXT HERE</a></p>
        </div>
</body>
</html>

Open in new window


When we created the index.php file earlier in this tutorial, we added two function calls. The <?php get_footer(); ?> at the bottom of the index.php file places the footer after the content generated by the index.php file. Once you save the footer.php file to your theme, it will appear on the site automatically.

ADD SOME STYLE TO THE FOOTER:
If you refresh your page you will notice that the footer is way up at the top of the page. We will add some CSS code to give it a little style and put it on the bottom of the website.

The Code:
#footer {
        font-size: 16px;
        text-align: center;
        text-decoration: none;
        font-family: Palatino, Serif;
        color: silver;
        background: black;
	  border-top: solid 3px #4d4e50;
        width: 100%;
        padding: 20px 0 20px 0;
        position: relative;
        height: 175px;
        letter-spacing: .15em;
}
#footer a {
        text-decoration: none;
        color: white;
        font-weight: bold;
}

Open in new window

* You can copy and paste this to the very bottom of the style.css file.

5. Adding the Sidebar

To create a sidebar in Wordpress, we only need to use this code:
	<div id="sidebar">
	<?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar('Sidebar') ) : ?>

		<div class="block">
                      <h3>Archives</h3>
				<ul>
				<?php wp_get_archives('type=monthly'); ?>
				</ul>
				</div>
		
		<div class="block">
			<h3>Categories</h3>
				<ul>
					<?php wp_list_categories('title_li='); ?>
				</ul>
		</div>
		
	<?php endif; ?>
	</div>

Open in new window

Copy the code above and save the file as sidebar.php. Upload the file to your theme's directory.

Quick Explanation:
First, we wrap everything in a div with the sidebar id so we can style it. Next, we add the if function exist "dynamic_sidebar for when we create custom sidebars (in another tutorial). This also requires a functions.php file, which I will add in a future tutorial. The "block" class is so we can apply a CSS class to the sidebar block elements. The next call is for Archives which displays posts on a per month basis (January, February, March, etc.).

Styling the Sidebar

The sidebar isn't where we want it, so lets add some style to the sidebar and place it to on the right side of the page by adding this code:
#sidebar {
        width: 25%;
        position: absolute;
        left: 75%;
        top: 210px;
        height: 85%;
}
#sidebar h3 {
        padding:25px 0 3px 0;
        font-size:18px;
}
#sidebar .block ul {
        border-bottom:2px dotted #ccc;
}
#sidebar .block ul .children{
        border:0;
        padding: 0 0 0 8px;
}
#sidebar .block li {
        border-top:2px dotted #ccc;
}
#sidebar .block li a {
        background: silver;
        font-size:13px;
        font-weight:normal;
        padding:2px 0 2px 15px;
        display:block;
        border-bottom:none;
}
#sidebar .block li a:hover {
        background: silver;
}
#sidebar .widget_search label {
        display:block;
        padding:25px 0 3px 0;
        font-size:18px;
        border-bottom:1px dotted #ccc;
        margin:0 0 5px;
}
#sidebar .widget_recent_comments li {
        background: silver;
        padding:2px 0 2px 15px;
}
#sidebar .widget_recent_comments li a,#sidebar .widget_recent_comments li a:hover{
        background:none;
        border-bottom:1px dotted #000;
        text-decoration:none;
        color:#000;
        font-weight:600;
}
#sidebar .widget_recent_comments li a:hover {
        color:#e12000;
        border-bottom:1px dashed #e12000;
        background-color:#f7f7f7;
}

Open in new window

Add the code above to the style.css file, just above the footer styles (it's good practice to place the code in the CSS file in order of how they appear on your page. This will make things easier when you want to edit an element on your page also).
Save the style.css file and upload to the theme directory.
Refresh your page and view the changes.
I have removed all the pages, posts and categories from my website for this tutorial, but I added a home page so I can view the changes.

This is what your style.css file should look like at this point:
/*
Theme Name: ee-theme
Theme URI: http://wordpressexpression.com/
Description: Theme designed for Experts Exchange tutorial.
Author: Jeremy Jared
Author URI: http://ideatreedesignonline.com/ 
Version: 1.0 
Tags: simple, basic, plain, customizable

License: 
License URI:

General comments: I hope you find this useful.
*/
body {
	font-family: Georgia, serif;
	font-size:15px;
	line-height:1.5em;
	margin: 0;
        background: silver;
}

#header {
        background: black;
	border-bottom: solid 3px #4d4e50;
	letter-spacing: 0.2em;
        min-width: 500px;
        width: 100%;
        height: 200px;
        border-top: solid black 1px;
}

#sidebar {
        width: 25%;
        position: absolute;
        left: 75%;
        top: 210px;
        height: 85%;
}
#sidebar h3 {
        padding:25px 0 3px 0;
        font-size:18px;
}
#sidebar .block ul {
        border-bottom:2px dotted #ccc;
}
#sidebar .block ul .children{
        border:0;
        padding: 0 0 0 8px;
}
#sidebar .block li {
        border-top:2px dotted #ccc;
}
#sidebar .block li a {
        background: silver;
        font-size:13px;
        font-weight:normal;
        padding:2px 0 2px 15px;
        display:block;
        border-bottom:none;
}
#sidebar .block li a:hover {
        background: silver;
}
#sidebar .widget_search label {
        display:block;
        padding:25px 0 3px 0;
        font-size:18px;
        border-bottom:1px dotted #ccc;
        margin:0 0 5px;
}
#sidebar .widget_recent_comments li {
        background: silver;
        padding:2px 0 2px 15px;
}
#sidebar .widget_recent_comments li a,#sidebar .widget_recent_comments li a:hover{
        background:none;
        border-bottom:1px dotted #000;
        text-decoration:none;
        color:#000;
        font-weight:600;
}
#sidebar .widget_recent_comments li a:hover {
        color:#e12000;
        border-bottom:1px dashed #e12000;
        background-color:#f7f7f7;
}

#footer {
        font-size: 16px;
        text-align: center;
        text-decoration: none;
        font-family: Palatino, Serif;
        color: silver;
        background: black;
	  border-top: solid 3px #4d4e50;
        width: 100%;
        padding: 20px 0 20px 0;
        position: relative;
        height: 175px;
        letter-spacing: .15em;
}
#footer a {
        text-decoration: none;
        color: white;
        font-weight: bold;
}

Open in new window


6. Adding the page.php File

Create a new file and name it page.php. This is the page-template that WordPress uses to hold static pages (Home, About, Contact, etc.).
Add the following code and save the file as page.php in the theme folder:
<?php get_header(); ?>

	<div id="content">
	<?php if (have_posts()) : ?>

		<?php while (have_posts()) : the_post(); ?>
		
		<div class="post">
			 <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
			<?php the_content('Read the rest of this entry &raquo;'); ?>
			 <hr/>
		</div>
		
		<?php endwhile; ?>

		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
		</div>

	<?php else : ?>

		<h2 class="center">Not Found</h2>
		<p class="center">Sorry, but you are looking for something that isn't here.</p>

	<?php endif; ?>

	</div>
	</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Open in new window

Upload the code above to your theme folder using the FTP software.

NOTE:
The code above is very similar to the index.php file we created. The difference is I have left out the part that places the categories (categories are used to categorize posts, since this is used for static pages, we don't need the category information to show on these pages).

7. Adding a Logo to the Header

We're almost finished with this tutorial, but let's make one more change to the header. In this step we will add a logo to the header.php file.

Open the header.php file in your text editor, so we can change the content starting with the opening <h1> tag to the closing </h1> tag.
Select the text in the header starting with the h1 tag to the closing h1 tag and replace it with code:
<a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="EE Theme Tutorial" height="52px" width="250" /></a>

Open in new window

NOTE:
We need to remove one of the closing </div> tags in the footer so our code remains valid.
Open the footer.php file and remove the last closing div.
Save the footer.php and the header.php files.
Upload header and footer files to your new theme's directory.

8. Create the Images Directory

Now let's create a new folder in our new theme's directory. Create a new folder and name it images, the path in the site directory should look like this: (/wp-content/themes/ee-theme/images).

I am providing an image that has the EE logo, you should replace it with an image of your own if you plan on using the theme (When designing a theme is is important to only use images that you have been given permissions to use, or only use images that you have taken, or purchased)
The image size is: W= 250px  H= 52px, so to add your own image or logo just save the file using the same size as the one I am providing.
Save it as logo.png.
Drag the logo to your theme folder inside of the images folder to replace the EE logo.
You can also change the image size, just make sure you adjust the height and width I used in the header.php file to match your own.
You will also need to adjust the CSS if it pushes the other header items down the page.

Here is the sample image to place in your images folder of the theme directory you created: Sample Logo

Here is what your files should now look like:

The header.php:
<!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" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_head(); ?>
</head>
<body>
<div id="wrapper">
	<div id="header">
		<div id="logo">
		<a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="EE Theme Tutorial" height="52px" width="250" 

/></a>
		</div>
		<div id="nav">
			<ul>
				<?php wp_list_pages('title_li='); ?>
			</ul>
		</div>
		</div>	

Open in new window


The footer.php:
<div id="footer">
    <p><?php wp_footer() ?></p>
<p><a href="<?php echo get_option('home'); ?>">Your New Website </a>is a custom theme created for Experts Exchange WordPress Tutorial.
<br/>Designed by: <a href="http://ideatreedesignonline.com/" title="IdeaTree Design Online">Jeremy Jared of IdeaTree Design</a></p>
	</div>
</body>
</html>

Open in new window


The final step to adding the logo is to adjust the style.css file to accommodate the new image.
Open your style.css file and add the following code (place it just below the #header style:
#logo a img {
	text-decoration:none;
	border:none;
        margin: 10px 0 0 10%;
}

h1, h2, h3, h4,h5, h1 a {
         font-family: Palatino, Serif;
         color: grey;
         text-decoration: none !important;
}

Open in new window

After you have made the changes to the header.php and the style.css and uploaded them, refresh your page to view the changes.

Adding a Little More Style

Let's add a little CSS to style a few more elements. Open the style.css file and add this code (between the content and sidebar styles):
/* navigation styles */

#nav {
	width:100%;
	padding:12px 0 0;
        margin-top: 40px;
        float: right;
        margin-right: 10%;
}
#nav ul {
	height:50px;
	float:right;
}
#nav li {
	text-align:center;
	float:left;
	display:inline;
	width:auto;
}
#nav li a {
	font-size:20px;
	font-weight:400;
	display:block;
	padding:15px;
	border-bottom:none;
}
#nav li a:hover {
	background-color:#ccc;
        display: block;
        border: 1px solid white;
        color: black;
}




/* post styles */

.post {
	padding:0 30px 0 0;
}
.post p {
	margin:14px 0 14px 0;
}
.post em{
	font-style:italic;
}
.post h2 {
	font-family:Georgia;
	font-size:24px;
	margin:25px 0 10px 0;
	font-weight:normal;
}
.post h1, .post h1 a{
	font-family:Georgia;
	font-size:28px;
	margin:30px 0 10px 0;
	font-weight:normal;
	line-height:32px;
}
.post h3, .post h4 {
	font-family:Georgia;
	font-size:20px;
	margin:15px 0 10px 0;
	font-weight:normal;
}
.post h4 {
	font-size:18px;
}
.post h1:hover, .post h2:hover, .post h3:hover, .post h4:hover {
	color:#0090ff;
}
.post .indent {
	padding-left:10px;
}
.post .indent p {
	padding-left:10px;
}
.post small {
	font-size:11px;
}
.post small a {
	font-weight:normal;
}
.post .alignright {
	float:right;
	margin-left:10px;
}
.post .alignleft {
	float:left;
	margin-right:10px;
}
.post .aligncenter {
	margin:0 auto;
	display:block;
}
.post abbr {
	font-weight:normal;
}
.post ul{
	list-style:circle;
	margin:0 0 0 25px;
}
.post ol{
	list-style:decimal;
	margin:0 0 0 30px;
}
.post .wp-caption {
	background:#f7f7f7;
	border:1px solid #ccc;
	margin:10px;
	text-align:center;
	padding:5px 0 0;
}
.post .wp-caption-text {
	margin:0;
}
.post .wp-caption a, .post .wp-caption a:hover {
	border-bottom:0;
}
.post blockquote {
	color:#777;
	border-left:5px solid #ccc;
	margin:15px 30px 0 10px;
	padding-left:20px;
}
.post pre {
	font-family:courier;
	font-size:12px;
	letter-spacing:-1px;
	margin:14px 0 14px 0;
}
.post .message ul {
	margin:12px 0 0;
}
.post .message {
	display:none;
	background:#0F67A1;
	margin-top:10px;
	padding:20px;
	color:#fff;
}

Open in new window


The styles above are for the various post elements and the nav menu. The navigation menu isn't a drop-down menu so if you add child pages it will place them below the parent page and be visible all the time. The WordPress navigation is a little tricky and I will address adding a drop-down menu in a different tutorial.

This should give you a good start on creating your own WordPress theme. You should now add some pages, posts, and comments to your WordPress site and see how they look.

You can play around with the style.css file to customize anything you want. I use a Firefox plug-in called FireBug which allows you to adjust any site's stylesheet from Firefox and displays the changes immediately. After you adjust the styles using FireBug you can then copy the code and paste it into your stylesheet via FTP or by using the WordPress theme editor (Appearance/Edit/style.css).

Here are a few screenshots of the finished Theme:
 Home Page Archives Page

8. A Complete Example of the Code

header.php:
<!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" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_head(); ?>
</head>
<body>
<div id="wrapper">
	<div id="header">
		<div id="logo">
		<a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="EE Theme Tutorial" height="52px" width="250" 

/></a>
		</div>
		<div id="nav">
			<ul>
				<?php wp_list_pages('title_li='); ?>
			</ul>
		</div>
		</div>

Open in new window


index.php:
<?php get_header(); ?>

	<div id="content">
	<?php if (have_posts()) : ?>

		<?php while (have_posts()) : the_post(); ?>
		
		<div class="post">
			<h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
			<small><b>Posted:</b> <?php the_time('F jS, Y') ?> | <b>Author:</b> <?php the_author_posts_link(); ?> | <b>Filed under:</b> <?php 

the_category(', ') ?> <?php the_tags(' | <b>Tags:</b> ', ', ', ''); ?> <?php if ( $user_ID ) : 
			?> | <b>Modify:</b> <?php edit_post_link(); ?> <?php endif; ?>| <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% 

Comments &#187;'); ?></small>
			<?php the_content('Read the rest of this entry &raquo;'); ?>
			 <hr/>
		</div>
			
		<?php endwhile; ?>

		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
		</div>

	<?php else : ?>

		<h2 class="center">Not Found</h2>
		<p class="center">Sorry, but you are looking for something that isn't here.</p>

	<?php endif; ?>

	</div></div>
	
<?php get_sidebar(); ?>

<?php get_footer(); ?>

Open in new window


page.php:
<?php get_header(); ?>

	<div id="content">
	<?php if (have_posts()) : ?>

		<?php while (have_posts()) : the_post(); ?>
		
		<div class="post">
			  <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
			<?php the_content('Read the rest of this entry &raquo;'); ?>
			 <hr/>
		</div>
		
		<?php endwhile; ?>

		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
		</div>

	<?php else : ?>

		<h2 class="center">Not Found</h2>
		<p class="center">Sorry, but you are looking for something that isn't here.</p>

	<?php endif; ?>

	</div>
	</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Open in new window


sidebar.php:
	<div id="sidebar">
	<?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar('Sidebar') ) : ?>

		<div class="block">
                      <h3>Archives</h3>
				<ul>
				<?php wp_get_archives('type=monthly'); ?>
				</ul>
				</div>
		
		<div class="block">
			<h3>Categories</h3>
				<ul>
					<?php wp_list_categories('title_li='); ?>
				</ul>
		</div>
		
	<?php endif; ?>
	</div>

Open in new window


footer.php:
<div id="footer">
    <p><?php wp_footer() ?></p>
<p><a href="<?php echo get_option('home'); ?>">Your New Website </a>is a custom theme created for Experts Exchange WordPress Tutorial.
<br/>Designed by: <a href="http://ideatreedesignonline.com/" title="IdeaTree Design Online">Jeremy Jared of IdeaTree Design</a></p>
	</div>
</body>
</html>

Open in new window


style.css:
/*
Theme Name: ee-theme
Theme URI: http://wordpressexpression.com/
Description: Theme designed for Experts Exchange tutorial.
Author: Jeremy Jared
Author URI: http://ideatreedesignonline.com/ 
Version: 1.0 
Tags: simple, basic, plain, customizable

License: 
License URI:

General comments: I hope you find this useful.
*/


/* Background and Global styles */

#wrapper {

}   
body {
	font-family: Georgia, serif;
	font-size:15px;
	line-height:1.5em;
	margin: 0;
        background: silver;
}
#content a{
        color: black;
        text-decoration: none;
        font-weight: bold;
        
}
a{
        color: #0090ff;
        text-decoration: none;
        font-weight: bold;

    /* Header Element styles */
    
}
#header {
        background: black;
	border-bottom: solid 3px #4d4e50;
	letter-spacing: 0.2em;
        min-width: 500px;
        width: 100%;
        height: 200px;
        border-top: solid black 1px;

}
#logo a img {
	text-decoration:none;
	border:none;
        margin: 10px 0 0 10%;
}

h1, h2, h3, h4,h5, h1 a {
         font-family: Palatino, Serif;
         color: grey;
         text-decoration: none !important;
}

/* navigation styles */

#nav {
	width:100%;
	padding:12px 0 0;
        margin-top: 40px;
        float: right;
        margin-right: 10%;
}
#nav ul {
	height:50px;
	float:right;
}
#nav li {
	text-align:center;
	float:left;
	display:inline;
	width:auto;
}
#nav li a {
	font-size:20px;
	font-weight:400;
	display:block;
	padding:15px;
	border-bottom:none;
}
#nav li a:hover {
	background-color:#ccc;
        display: block;
        border: 1px solid white;
        color: black;
}

/* content styles */

#content {
        padding: 40px;
        background-color: white;
        margin-left: 10%;
        margin-right: -10%;
        width: 57%;
        min-height: 500px;

}


/* post styles */

.post {
	padding:0 30px 0 0;
}
.post p {
	margin:14px 0 14px 0;
}
.post em{
	font-style:italic;
}
.post h2 {
	font-family:Georgia;
	font-size:24px;
	margin:25px 0 10px 0;
	font-weight:normal;
}
.post h1, .post h1 a{
	font-family:Georgia;
	font-size:28px;
	margin:30px 0 10px 0;
	font-weight:normal;
	line-height:32px;
}
.post h3, .post h4 {
	font-family:Georgia;
	font-size:20px;
	margin:15px 0 10px 0;
	font-weight:normal;
}
.post h4 {
	font-size:18px;
}
.post h1:hover, .post h2:hover, .post h3:hover, .post h4:hover {
	color:#0090ff;
}
.post .indent {
	padding-left:10px;
}
.post .indent p {
	padding-left:10px;
}
.post small {
	font-size:11px;
}
.post small a {
	font-weight:normal;
}
.post .alignright {
	float:right;
	margin-left:10px;
}
.post .alignleft {
	float:left;
	margin-right:10px;
}
.post .aligncenter {
	margin:0 auto;
	display:block;
}
.post abbr {
	font-weight:normal;
}
.post ul{
	list-style:circle;
	margin:0 0 0 25px;
}
.post ol{
	list-style:decimal;
	margin:0 0 0 30px;
}
.post .wp-caption {
	background:#f7f7f7;
	border:1px solid #ccc;
	margin:10px;
	text-align:center;
	padding:5px 0 0;
}
.post .wp-caption-text {
	margin:0;
}
.post .wp-caption a, .post .wp-caption a:hover {
	border-bottom:0;
}
.post blockquote {
	color:#777;
	border-left:5px solid #ccc;
	margin:15px 30px 0 10px;
	padding-left:20px;
}
.post pre {
	font-family:courier;
	font-size:12px;
	letter-spacing:-1px;
	margin:14px 0 14px 0;
}
.post .message ul {
	margin:12px 0 0;
}
.post .message {
	display:none;
	background:#0F67A1;
	margin-top:10px;
	padding:20px;
	color:#fff;
}



/* sidebar styles */

#sidebar {
        width: 25%;
        position: absolute;
        left: 75%;
        top: 210px;
        height: 85%;
}
#sidebar h3 {
        padding:25px 0 3px 0;
        font-size:18px;
}
#sidebar .block ul {
        border-bottom:2px dotted #ccc;
}
#sidebar .block ul .children{
        border:0;
        padding: 0 0 0 8px;
}
#sidebar .block li {
        border-top:2px dotted #ccc;
}
#sidebar .block li a {
        background: silver;
        font-size:13px;
        font-weight:normal;
        padding:2px 0 2px 15px;
        display:block;
        border-bottom:none;
}
#sidebar .block li a:hover {
        background: silver;
}
#sidebar .widget_search label {
        display:block;
        padding:25px 0 3px 0;
        font-size:18px;
        border-bottom:1px dotted #ccc;
        margin:0 0 5px;
}
#sidebar .widget_recent_comments li {
        background: silver;
        padding:2px 0 2px 15px;
}
#sidebar .widget_recent_comments li a,#sidebar .widget_recent_comments li a:hover{
        background:none;
        border-bottom:1px dotted #000;
        text-decoration:none;
        color:#000;
        font-weight:600;
}
#sidebar .widget_recent_comments li a:hover {
        color:#e12000;
        border-bottom:1px dashed #e12000;
        background-color:#f7f7f7;
}

/* Footer styles */

#footer {
        font-size: 16px;
        text-align: center;
        text-decoration: none;
        font-family: Palatino, Serif;
        color: silver;
        background: black;
	border-top: solid 3px #4d4e50;
        width: 100%;
        padding: 20px 0 20px 0;
        position: relative;
        height: 175px;
        letter-spacing: .15em;
}
#footer a {
        text-decoration: none;
        color: white;
        font-weight: bold;
}

Open in new window


TO VIEW A LIVE VERSION OF THE THEME, CLICK ON THIS LINK:


Experts Exchange Tutorial Theme

I hope you find this tutorial useful and if you have any questions or comments just reply on this page. I will try to answer any questions you have. Good luck and enjoy your new theme.
17
Comment
  • 5
  • 2
  • 2
  • +2
11 Comments
LVL 70

Expert Comment

by:Jason C. Levine
Excellent article, jeremyjared74.  Gets my vote.

I'm forwarding this to some of my WP-challenged co-workers so they can see just how easy it is to create themes.

In closing, MOAR!
0
LVL 23

Author Comment

by:jeremyjared74
Thanks Jason, I appreciate the vote.

Once you "get it", it does seem easy. I remember starting out it made my head spin trying to figure out how a WordPress theme was put together. The theme in this tutorial is relatively simple, but I will add some of the new WordPress features soon.
0
LVL 30

Expert Comment

by:Britt Thompson
Great idea for an article...wish I'd thought of it. Nice work.
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

LVL 23

Author Comment

by:jeremyjared74
Thank you renazonse.
0

Expert Comment

by:Sonderend
And it gets my Vote too.  Thank you jeremyjared74, easy to follow. Brilliant.
0
LVL 23

Author Comment

by:jeremyjared74
@ Sonderend:

Thanks for the vote, and I'm glad it was helpful.
0

Expert Comment

by:rogerk_fsww
Jeremy;

I am just learning WP, I have tried using themes that I downloaded from web.
They are OK but don't teach the concepts you need to learn how it all fits together.
This is the help I've been looking for!

Great Job Thanks; RogerK
0
LVL 23

Author Comment

by:jeremyjared74
Thanks Roger. I know the theme needs updated, but I've been a little busy. I've been planning on adding another tutorial that implements a few more of the WordPress core features (custom sidebars, custom post types, and a few other useful features). Hopefully I'll have it finished by the end of the month.

If you have any question about the article you can post them here and I'll respond. Any other WP questions can be posted as a regular question. EE has a good group of WordPress Experts that will do there best to help solve issues.

Thanks again for the kind comments.
Regards,
Jeremy Jared
0

Expert Comment

by:rogerk_fsww

I'm happy to know of the user support for wordpress on EE.
I think one of the things that I've learned is to use the KISS (keep it simple stupid) theory.
I started out trying to modify some of the complex themes I had downloaded.
That is, in my opinion backwards, but I am now using your sample to build the site from the bottom up.

Thanks again!
Roger
0
LVL 23

Author Comment

by:jeremyjared74
Sounds like you're on the right track. One of the mistakes I made starting out was jumping in over my head. If you have the patience and are able to focus on the basics without wandering of on custom functions it'll take a lot less time to "figure it out". There are a lot of bad tutorials on the internet that can set you back and teach bad practices. Be sure of your sources, and avoid tweaking the WordPress core functions and you'll be coding like a WP All-Star  ; )
0
LVL 70

Expert Comment

by:Jason C. Levine
What Jeremy said.  Despite what the rankings currently reflect, he and gwkg are the true Experts :)
0

Featured Post

Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

Join & Write a Comment

The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month