Building A WordPress Theme From The Ground Up

[jerxs]

I have been wanting to document the construction of a WordPress theme from the ground up for awhile now, well Im starting a new site that is going to require a unique theme, so I figured this would be the perfect chance to do so.

Its going to be a real time article / tutorial, which meens you will get documentation as I make progress, it could take a few days to a few months to finish depending on my schedule.

If your interested in building a wordpress theme from the ground up, follow along, I will do my best to get you rolling.

This will not be a complete newb tutorial, although I will try to explain each step in detail, I am assuming you know some basic shit like, PhotoShop basics, DreamWeaver basics, Xhtml and CSS basics.........

One thing that I have never been good at is communicating my thoughts to others, but im going to do my best here, to give you a decent understanding of designing your own wordpress themes.

Ok so here we go, the progress Ive made today...........

---------------------------------------------------------------------

Building A Custom WordPress Template From The Ground Up

Tools needed;
Photoshop
DreamWeaver or some other editor, DreamWeaver will be used in this tutorial.
Xampp (local testing server) makes things allot easier, though you can also upload and test on a live server.

In this article / tutorial we will attempt to build a WordPress template from the ground up. We will begin at step one and work our way through the entire process. We will be using techniques that I have found to be quick and easy. Not saying they are the easiest, im sure there are people out there that will disagree with some of the ways I go about doing things. Im always open to feedback, but if you want to be a smart ass about shit, get fucked, go write your own tutorial. Ok with that aside....

The first step you will want to take in building any template or any site for that matter is putting everything to paper, this is a step most newbs overlook and with time and allot of fuck ups they start to realize, the planning stage is very important. So get everything worked out on paper, from the dimensions of your site and the elements in it to, ad space, advertisers, colors, functions, margins, nav structure and so on! Get it all out now! Realize that everything you write down will not be written in stone, you will change many things throughout each step of your project, but what it will do is give you a loose blueprint to follow.

The project I will be using in this article / tutorial will be no different, I know what I want from this site, I also know many of the things im going to try to pull off with this Wordpress site is new territory for me. For instance, GoBassFishing.net, will function at three different levels. Level one, a blog, Level two an E-commerce site and finally number three a content site.
There will be review functions for products, also some extras like wallpapers, videos and possibly a unique bass fishing game, if my budget allows. I also know this site will require a pop nav for the horizontal nav at the top, which we will be pulling off with a plugin and a little hacking. We may even throw in a forum using bbPress » Home and have it integrated into GoBassFishing.com. I know some of these features may be dropped during the process and some new ones may be added, but I know what direction I am traveling, which is very important.

Im not going to list every tiny detail here, but you should have an idea of what Im talking about, when it comes to brainstorming and planning, you should know what direction you are going before you start your project.

Ok enough planning, lets take our ideas and start moving them into Photoshop.

Im not going to go into extreme detail here, im going to assume you have a bit of PS experience. You don’t need to be a rocket scientist to layout a simple template design in Photoshop.

Ok, hopefully you followed step one and you know the width at which you want your template to be. Common width 1024px and 800px..... Im using a document size of 1000px wide, I know a little substandard, but it will work.

Ok, I have a document size of 1000px in width. I will actually be working with primarily 900px of the document area, I will set a guide to the left and right that will set in off the document 50px on each side. The main elements of my page will be 900px wide, this includes the header, footer, horizontal navigation and all combined columns. I know from some pre planning, I will require a left column able to fit an ad of 160px wide and a left column that will fit an ad of 250px wide, but im also going to want 5px of padding, right and left inside of each column. So the left column will be approximately 170px wide, the right will be 260px wide. I also know I want a margin of 10px between each column on the page, or a combined margin space of 20px. 10 between the right side of the left column and center column and 10 between the left side of the right column and the right side of the center column.

Lets do some simple math!

1000px - 50px right - 50px left = 900px

900px - 170px - 260px - 20px “combined column margins”= 450px

So we have 450px left over which will be the width of our center column. I like using the 468px google ads in my blogs, but im going to have to go without here, we will look into placing a nice 300px w ad in there somewhere at a later time.

Note: PLEASE DO NOT COPY! I am building and will be profitting from the site I am using as an example, use each step, but fashion each to your own needs, If I find out you copied my design, I will sue you, or just hunt you down and fuck you up . Seriously though, follow along, use the same dimensions if youd like, but don’t copy.

Instead of going through each design step, im going to show you a screen shot of my finished design and explain a few basics to designing a well balanced and organized layout.

The Layout At A Glance:

Ok like I said im not going to baby step you through the Photoshop process, I’ve been using Photoshop for a few years now and it would be literally impossible for me to cover everything you need to know to use the program. My suggestion to you is this, If you have no clue, hit a few PS sites run through some tutorials or grab your balls and try to wing it through this article / tutorial.

The tools used most often, by myself anyway are the;

Rectangle Tool
Rounded Rectangle Tool
Magic Wand and Other Selecting Tools And Options
(Note: learning how to use selections and layers are key, if you focus on nothing else as far as Photoshop Goes, learn these to things well!!! They are also probably the hardest concepts to grasp for our purpose!)
Also blending options and effects, gradients, bevel and emboss, strokes and so on....
The Transform Tool
The marquee tool (mainly used for slicing and dicing. Some use the slice tool, though I find the marquee tool to be a better option, for myself anyway, in most situation.)

What I will do is give you some very important tips.......

 

[jerxs]

First and foremost, take a look at my layers pallet, notice every main element of my page had its own folder. If your going to design heavy, shit even light you should keep everything organized in folders, just like your computer, you would not just dump all the files in your computer into one folder, designing with PhotoShop is no different!

Now lets talk about guides, margins and padding, as you can see from the guides in the image above, everything is aligned properly, also notice that there Im using 10px margins all the way around.

Back to the newbs, you may look at the images above and think, my god! Theres no way in hell, WTF! Well Ill tell you, most of what you see above is just mocked up shit! Let me do a quick estimation here.............

Ok, when we are done slicing and dicing, there should be a total of 15 or so images used, probably less. Which we will get into here shortly. Even at that your design can be much more simple than the above and still look good, or it may be much more complicated, but I can assure you of one thing, if you hang in there I will show you just how simple it can be.

Note: If you do not know XHTML and CSS, your going to want to get busy learning, both are an absolute must in this tutorial. W3Schools is a great place to start learning and as with PhotoShop, there is just to much involved for me to cover all the details. To make this work your going to need to know the basics, its not to advanced, but advanced enough. But don’t let me discurage you from following along, I will try to toss out as much info as possible.............

Slicing And Dicing At A Glance

Ok, its time to start pulling your layout apart piece by piece and coding it together, this is where things start to get fun!

As mentioned above, some people prefer the slice tool, but I prefer using the marquee tool, its quick and its easy! Its also much more flexible as compared to the slice tool. If you were going to make a site that was pretty much one huge sliced up image, then maybe the slice tool would be the better option, though this is not our goal, we are going to use as little number of images as possible, the rest will be styled with CSS and will do two things for us. Make our site load as quickly as possible and also give us the SEO edge. For instance the logo, well the text in logo is pretty much plain text and the style can be duplicated for the most part using CSS and styling an <h1> tag in the head, rather than just cutting it out of our design and using an image to display the text. You follow?

We are about to come to a close on the first part of this tutorial, this will not be a one shot deal, because it is being done in real time. I have not yet begun to slice up my layout yet, so I will continue this tutorial once I get er sliced up, get some screen shots and what not.

You can look forward to the following in the next addition to this thread;

Slicing and Dicing
Setting up our various template files in DreamWeaver
The first steps to putting our template together (coding CSS & HTML)
Wordpress Template Tags

I am hoping that this article will not have to many breaks in it, but as of right now I am working a shit load of other projects, so its going to take some time. Use the break to ask questions and get your template started. I hope to have this design sliced up and begin coding soon. During which I will also be documenting each step.

You can consider this first entry an intro, its going to get much more detailed as we move on to actually slicing and coding our shit together! One thing I will not be able to explain in detail is how allot of the PHP functions and why. We will be using Wordpress template tags that are predefined, so we will not actually be doing any PHP development, though if one of you PHP guys wants to chime in when we get there with the finer details of the PHP we will be using it would be much appreciated. About the only php you will need to know is, php includes, setting printing “echo” dates to keep our copyright info up to date and creating a php file. Basically simple, simple shit!
You will also need to understand how using multiple php files are used to create a template, which will probably be one of the hardest concepts to grasp for a newb, but not to worry, if you have no clue, you will have a good understanding by the time we are done here.

Until next time!

Jer

 

[jened]

wow - amazing. +rep all over the place! hopefully i'll have some time next week to try this out. and look out emp, he's encroaching on your niche.

 

[jerxs]

Its going to get allot more interesting. designing the site is a drop in the bucket, it only starts to get fun once you start clipping stuff up and putting ti back together with code

Emp knows I will own this niche by this time next year, the fishing niche is mine, thats a challenge!

 

[DirtyB]

Thanks for starting this great thread, Jer. I am very new to PHP and WP stuff. I am going to use this thread as an inspiration to custom design my first WP site. autonip.com is my site which will be used for WF Winter 2007 case study as well.

Thanks for taking the time to document it.

 

[jayson_co]

Great start jerxs. Looks good! I will be following along.

Do you know of any similar tutorial online for creating a new WP theme?

If anyone has any Photoshop/XHTML/CSS questions - and jerxs isn't available - I am always around - feel free to message me.

 

[GrassR00ts]

Good Looking Post

sorry problems posting

 

[GrassR00ts]

Great post.

I am excited to follow along and work on my own wordpress page.

For thoese of you that are not great with graphic design I added a link in my sig. I joined a template site that had a nice amount of good looking templates. They offer unlimited downloads for a good price. Everything comes in PSD layerd files and with all of the goodies to personalize a site for yourself. I found this saves me a lot of time. One other thing is you can combine different parts of different templates to make your own.

Hope this helps!

Alex

The image is set up as an affiliate link if you want the link without the affiliate ID just PM me.

 

[jerxs]

Building A Wordpress Theme From The Ground Up (Part #2)

Ok, its time to start getting into the nitty gritty! Time to start slicing and dicing and what better way to start things off than an issue right from the start, he he he! This should be good though, what good is a tutorial if its made to look like cake, like you just do this, that and the other thing and your done? Unfortunately this is just not the case, you will run into unexpected problems every now and then that will force you to make changes or deviate from your original plan. This is just a fact of life, it not only applies to what we are trying to achieve here, but also applies to everything else you will undertake in your life. What is about to follow just happens to be one of those instances.

If you take a look back you will notice, I had my numbers worked out all nice and neat like, everything worked out perfectly, but for some reason I overlooked the boundaries of the margins I set and now have and image in the header area of my layout that goes beyond the 900px of which I placed all of the other page elements. Doesnt seem like much does it? Well I could simply move the image of the bass over a few pixels, but I like the bass where its at! This little problem has just added to the work im going to have to do down the road and I will have to consider a few things.

First off I am not about to budge on the position of the bass, I just like it where its at, which is all well and fine, but I had a game plan, the content area of this site was going to be 900px wide, even though I was designing on a 1000px wide canvas. My plans were to simply create a wrapper that was 900px in width to house the complete body of my page ( we are thinking forward now).
But as things stand now, I will have to create a wrapper for the header and upper nav and then also create a wrapper for the lower content area, or do we just say fuck it and expand our wrapper from 900px to 940px, since I am not really to worried about the 800px W people, it would not really hurt to just expand the complete content area to 940px, so that’s what Im going to do, lets go ahead and bump the right and left margin guides out 20px on each side. Keep in mind I am really working out of bounds here, many would argue that you design to standard widths, well I say fuck you, design any way you want and I will design the way I want, with freedom, but yet taking into consider designing something that will work in monitors that I give two shits about. But really if you are concerned about standards, design within them, but remember, if your designing for a minimum resolution of 1024, you can literally design for anything that is from 1px in width up to about 1000px, before the a user using this resolution has to start side scrolling.

So lets quit talking and lets start slicing!

Ok, lets start, this is what you should be working with right now, you want to hide all of your filler content and only leave visible the stuff in which your going to be using as image files. Take a look.

At this point you should save as, “readytoslice.psd” or some shit, you want to work with this new file and keep the old in a safe place incase you screw up in the following steps.

I am going to try something I don’t normally do, im going to slice the header and the nav bar up together.

Take a look at the image below, moved some guides around to prepare the slice, take note of the height of the area you are going to slice. In this case its 120px in height, don’t worry about the width. We are going to take the header and nav area in 3 slice, which will leave us with, well 3 images, one right, one left and one center, that will be tiled on an x-axis once we start putting this pig together with code.

 

[jerxs]

Ok, you have nothing but the basics left visible on your page. The next step you going to take is to click Layer>Flatten Image. DO NOT SAVE!!!!!!! Each couple slices that you make from here on out you will be going back in your history to redo changes, back untill the point that you flattened your image, you don’t want to save this image flattened!!!!!

Click on your Square Marquee tool, and set the height and width to take your first slice, in my case im taking the left side first, I want to make the slice as small as possible.

So Marquee Tool, Style Fixed Size, then enter dimensions, mine are 120px X 130px. Now use your guides and surround your target area with the marquee tool.

Note: the height is set at 120px for the header area, once you have your height set your not going to want to change, your also going to want to follow your guides closely, if you make your right slice from top 0 to 120px and your left top 1px to 121px its not going to work.

You have your slice selected, follow along............

Get your pointer over the selection and hit CTRL+C

Click File>New (a box will appear with your new documents properties in it, you will notice that the document size is already set to the selection you just copied) go ahead and click ok.....

Inside the new document/canvas click CTRL+V, walla!

You should have something like this, different graphically because your not copying my design, but something similar!

Do you have wordpress saved on your local pc? If so navigate there now. Then wp-content/themes
and create a new folder under the themes directory (Eg: wp-content/themes/mytheme/) inside that folder create another folder named (images).

Now your going to want to save your first slice in this folder, give it a recognizable name, something like head-left.jpg, or head-left.gif. When you save you will be prompted to set the image quality remember your going to want your site to load quickly so optimize wisely. You can even instead of just saving as, you can “save for the web” in which you can play with image quality more extensively before saving your slice.

Got it saved good move on to the next, which will be the center “tiling image”, for this image, if your head is level and true straight across, should only be 1px to 2 px wide, if you are using a background pattern and the pattern is 10px wide, well then youll have to take a center slice of 10px wide.

Remember none of this is written in stone and depending on your design you may have to piss around a bit.

So go ahead and take your center image the same way you took the left, making sure it is the same height as the first slice you took., go through the same process then move onto the right, following the same process, only adjusting the width as needed.

You should end up with three images similar to the following;

Ok your have the just of things, ill try to wrap up the slicing of your design later, gotta go for now, its Saturday, there food to be eaten, friends to meet and beer to drink!

 

[Jack Swift]

This is an amazing series so far. I've designed lots of sites, so I'm familiar with the basic concepts, but it's still great to see in so much detail how somebody else goes about it. I will be glued to this one.

Enjoy the beer!

 

[jerxs]

It seems that there are enough people interested in this that I will move forward.

Jack Swift brought up a very important point!

but it's still great to see in so much detail how somebody else goes about it. I will be glued to this one.

and that is exactly what this is! I am basically just logging the process I use from day to day, to design different sites, or in this case templates for for Wordpress sites.

I am not making any claims what so ever on whether or not this is the right way to do things, this is the way I do things and this is what works for me!
Ive I have said before, if you dont like it go get bent, start your own thread, but that really does not seem to be the case.

I dont have the extra money to hire help, so I am a jack of all trades, I design, I develop and I write my own content, so I am forced to find quick and easy ways around shit. That is what this tutorial represents! Though I never realized just how much shit I do untill trying to write it out and explain it... as complicated as it might seem to some, it is really quite simple, the first WP template I built took me almost a month, the second a week or so, now I can design slice and throw together a template in a few hours, well about a days time.

I just wanted to clear a few things up, so that one, know one would get the false impression that I am looking for attention, or two that I am under some false impression that I know what I am doing.

I am not a leader, I am not a guru and I really know shit! I learn new things everyday from other people like you. It is because of people like you that I am able to document my progress through something like this, which is why its being done..

Yeah im drunk now so I am babbling, I have not decided whether or not I will get anymore done tonight, I may just pass out or I might finish up the slicing tonight, If I dont finish up the slicing tonight, I will get er wrapped up tomorrow, there really isnt much left to cover there, then Ill be moving on to creating the actual template files and coding this bitch together.

What Id like from you is to know just how much detail you want. Do you want extereme detail, every step of the way? or do you know enough to get the just of things?

Let me know because I expect to keep things rolling along fairly quick, I do have a couple landing pages I have to throw together within the next couple days, but it shouldnt delay the progress of this thread much....

 

[greenvy]

YOU'RE DA MAN JERXS!

always wanted to learn how to make my own WP template...

Question:
Is the "tiling center" image use as a background image of a table, which you're gonna set it to repeat-x?

I've some basic Photoshop skills but ZERO php, xhtml and CSS skill....may just a little but not a whole lot!

I think you should cover the key steps and if you think a step would be a bit confusing foe us, then elaborated it more...but for the most part...we'll just ask for more clarification if you don't understand a step.

FUCKn' REP+

 

[jerxs]

To be honest I have not used a table in god knows how long, but yes the center image will eventually be set to repeat on an x axis, or from left to right. So whether it be a table cell or a div the center slice will be tiled <------>.

The rest of the slicing is basically allot of the same, with some variations. For instance the left column will be sliced by taking a top cut, bottom cut and a center cut, the only difference being is that the center cut in the left column will be repeated "tiled in an x axis, or from top to bottom. This will allow the left column to be as large or as small as needed, you can add links to the left and the columns background will expand with the content. Actually the rest of the design will be done in this fashion, except for the center which will get a bit trickier, but you will find it is still very simple once you start pissing around with it.

The hardest part, which is yet to come is actually coding the stuf together, but i will try to slow down during this process and explain things, I will also take a risk and post the code to each file, so that you can actually take it and play with it on your own PC....

Not to jump ahead, but to give you an exaple of what will be done with what you brought up.....

CSS File;

#header {
 background-image: url ('yoursite/images/head-bg.gif'); /*sets background image for <div id="header"> */
 background-repeat: repeat-x; /* Tells the browser to repeat the background image from right to left, or on an X axis */
 width: 940px; /* Sets div width */
 height: 120px; /*Sets div height, very important here! if your header image is 100px high, you will want to set you div height to 100px! */
}

XHTML

<div id="header">
<img align="left" src="yoursite.com/images/left-image.gif" />
<img align="right" src="yoursite.com/images/right-image.gif" />
Place all header content below the right and left images, such as <h1> tags and what not.

I will be placing an <h1> tag that contains site name, form and also a list that contains the top horizontal nav.
</div>

Like I mentioned earlier, if you need to brush up on your XHTML and CSS, hit W3shcools now, we wont be giving standards much consideration! Standards are bullshit! If you site displays well in all browsers or targated browsers and functions well there really is no need to complicate matters, Google nor any other SE takes standards into consideration when indexing your site, if the day comes when they do, well then I might pay attention to some subjective standards! Dont let yourself fall into the standards trap, to many people do, create and design by your own standards, if it works thats all that matters!

 

[jerxs]

Sorry I have not been able to update this thread in the last day or so, like I said this thread could take me days, weeks or even a month or so to finish, theres allot involved, then trying to document get screen shots and what not.

I did make a decision to take a few steps back after doing some research and considering my target audience, ill be doing a bit of redesign work. Ill be my final design will display at 800px W. This shouldnt effect anyone that may use this article....

Just wanted to check in, so that you dont think I abandon this thread.

 

[jerxs]

Alrighty then!

I have found the time to redesign the site and finally have it all sliced up, instead of boring everyone to death, im just going to throw a few notes in as far as designing and slicing goes.

Its pretty obvious that every design is going to be different, whether your designing a theme for wordpress of designing a static site from scratch and using DW templates. Though some concepts will remain the same, one of those is slicing for columns, headers and other content areas.

Youll notice the header was sliced from left to right, the header will be of a fixed height and therefor it just makes sense to do it this way, slicing from top to bottom would result in larger image files, not only that we have the main header image to take into consideration, which naturally calls to be sliced from left to right. Now the content columns, will be sliced from top to bottom, the will be expanding vertically, so we will slice them vertically. The columns will have fixed widths, but the heights will vary once content is added.

Again, there is no set way to slice up a design but there are some basics you should know and one of them is slicing for content areas that will expand either vertically or horizontally.

Enough of that shit, if you have any questions ask them, but I dont want to spend any more time than need be on the subject.

Here is the design all sliced up, take a look if you didnt understand the above maybe checking out the individual images will help. I sliced some larger than normal so that you can see them.

Index of /wp-content/themes/gobassfishing/images

 

[angelo]

very much interested. can you share the theme?

 

[jerxs]

Im going to hope that everyone here knows how to set up a Wordpress site, the files that we will be working on from here on out will be located in the following, depending how you set your site up, im going to assume you copied all wordpress files from the wordpress folder and copied them in you sites folder.

The files we will be working with will be located here;

yoursitefolder/wp-content/themes/yoursitetheme

In yoursitetheme folder you also need an images folder, which is where all of your slices should be saved. If you just set up a folder on your pc for your theme, which I believe I talked about earlier, take it and drop it into the directory I mentioned above.

Now your going to create and save the following files to yoursitetheme.

header.php
index.php
footer.php
sidebar.php
style.css

Dont worry about any other files for now, we will add them as we go along.

You have the files above created, now open style.css, header.php, footer.php and index.php.

with your empty header.php

add the doctype

<!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">

Then after the doctype, for SEO purposes we want to add the <title> tag.
(im not sure that this has much of an effect as far as seo goes, but i like to keep my title tags as close to the top of a page as possible)

This is code I picked up along the way, I believe Rob from WickedFire presented it to me a few months back. The code will take the title of each post and display it within your title tags for each single post page, this is also a good idea for SEO purposes. We want title tags that are different from each page, but yet related to each pages topic. It does allot more than that, though you get the basic idea. When home it will display blog info, when page it will display page title......and so on......

<title><?php if (is_home () ) { bloginfo('name'); } elseif ( is_category() ) { single_cat_title(); echo " - "; bloginfo('name'); } elseif (is_single() || is_page() ) { single_post_title(); } elseif (is_search() ) { bloginfo('name'); echo " search results: "; echo wp_specialchars($s); } else { wp_title('',true); } ?></title>

The next few lines of code will be meta information and also embeded files like your style sheet. They go something like this;

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

<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'); ?>" />

then

<?php wp_head (); ?>

All the above except for the title tag can be copied from the default theme...

Ok, I think now would be a good time to explain how a wordpress / php theme theme or template works, before we go any further. Beings I am not a master of this stuff, just trying to pass on some simple techniques I use to build themes, if I dont explain this in proper terminology or in a confusing manner, please one of you people that have been working with PHP for some time now, chime in!!!!!!

When you look at a fresh install of wordpress in a browser you are actually seeing multiple files working together to make that one page, the main files being header.php, index.php, sidebar.php, footer.php and searchform.php all these files make up one page!

When building a static page made of one file all the content tags get thrown into one file, when working with a php template each element of the page is contained within its own file. For example if you want to wrap your complete page in a container you might place the opening tag to that div in your header file while placing the closing tag to that div in your footer file. Same thing with you basic html tags (<html> , <body>)........

The right nav you see in the default Wordpress install, contained in its own file "sidebar.php" and so on. If you dont understand you will start to as we get rolling here. Like anything else the more you play around the more you will understand and learn.

Again Im sorry if im not explaining things well enough here, Im not the best at explaining things, nor am I the most social person, in fact this is my first tutorial or article like this of any kind so bear with me and if you have any questions about anything ask. Alot of information can also be found at Wordpress.org, actually everything you need to know can be found over there, but there is so much information its easy to get lost or become overloaded, which is why im trying to be as simple and straight forward here.

OK from here on out im coding up my template, your template may require additional tags, different placement and so on....

So with my header.php file still open and style.css opened as well im going to move on.....

Ok before you lay any code in your CSS file add the following comment and fill in the blanks!

/*   
Theme Name: your theme
Theme URL: your home page
Description: describe
Author: your john handcock
Author URI: your personal site or portfolio
Comments and copyrights
*/

 

[jerxs]

Ok I have two files open, style.css and header.php, I already added all information between the head tags of header.php, now to move on.

so after <?php wp_head (); ?>

</head>

then

<body>

I am going to set up a wrapper for the entire page;

<div id="wrapper">

and then make the container that is going to contain the head area of my site.

<div id="header">

</div>

Now im going to be working with three images

http://gobassfishing.net/wp-content/themes/gobassfishing/images/head-bg.gif
http://gobassfishing.net/wp-content/themes/gobassfishing/images/head-left.gif
http://gobassfishing.net/wp-content/themes/gobassfishing/images/head-right.gif

I will declare the background image in my css file, but the right and left I am going to work into the header div as follows.

<div id="header">
<img align="left" src="http://gobassfishing.net/wp-content/themes/gobassfishing/images/head-left.gif" />
<img align="right" src="http://gobassfishing.net/wp-content/themes/gobassfishing/images/head-right.gif" />
</div>

Now onto the CSS file

I first want to clear all default browser margins and padding;

body {
margin: 0;
padding: 0;
text-align: center;
}

then the wrapper, I know that I want a content area of 800px wide and I want this centered, so......

#wrapper {
width: 800px;
margin: 0 auto;
text-align: left;
}

Now my header div, it will be a fixed 800px x 120px and this is also where I am going to add my header background image;

#header {
width: 800px;
height: 120px;
background-image: url ('images/head-bg.gif');
background-repeat: repeat-x;
}

Now open your index.php file and place the following tags inside it;

<?php get_header(); ?>
<?php get_footer(); ?>

save and then open your footer.php and ill do the following

</div> <!--closes the wrapper div started in header
</body> closes body tag started in header file
</html> closes html tag started in header

This is what I have so far....

bass fishing

I am a few steps ahead with the start of a horizontal nav and header text, but I will explain that and move on even further when I follow up, for right now im wrapping things up.

 

[jerxs]

very much interested. can you share the theme?

Im sharing the complete process I use to make a theme, well as much as possible anyway though Im finding that doing something and explaining how I do things are two different events all together, explaining is much harder.

So yes I am sharing the theme I am working on as an example, no you can not use the theme on any of your sites! You will have to follow along and build your own theme. The design I am using is not to be distributed or used in anyway what so ever! Though you can use some of the code I use, just not the design!