Browse All Articles > Create Your Own Wordpress Theme
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.
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).
*/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).
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).
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.
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.
*/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 »', '1 Comment »', '%
Comments »'); ?></small>
<?php the_content('Read the rest of this entry »'); ?>
<hr/>
</div></div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></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(); ?>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() ) { ?> » 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> 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.
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;
}
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>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>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;
}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>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;
}
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;
}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 »'); ?>
<hr/>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></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(); ?>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>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-theI 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:
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() ) { ?> » 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> 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>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;
}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;
}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:
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() ) { ?> » 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>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 »', '1 Comment »', '%
Comments »'); ?></small>
<?php the_content('Read the rest of this entry »'); ?>
<hr/>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></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(); ?>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 »'); ?>
<hr/>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></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(); ?>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>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>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;
}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.
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (11)
Commented:
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
Author
Commented: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
Commented:
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
Author
Commented:Commented:
View More