FIRST, you’ll need the tools — download virtual pc (especially if you run windows vista) and then grab an image here — i would suggest getting the IE6 image, since that version of IE is the “worst” of them all

great — now you can run virtual pc (check out my settings below, i give it 1GB of memory)

my settings for an IE6 image

now you can download your favorite text editor, firefox and all the necessary plugins (like firebug)… and then download xampp (xampp is like setting up IIS on your machine so you can view server-based code locally (like asp and .net — wordpress is php)

after installing xampp, run it and it’ll look like this:

xampp up and running

you can make sure you set it up correctly by going to http://localhost/xampp/ — it’ll look like below:

w00t... it's set up!

noooowwww… grab a copy of wordpress and unzip it to C:\xampp\htdocs — if you intend on having multiple projects, unzip the files into a unique folder, like so

magi, skimonkey, wordpress, and snuggib are four different projects

from here, it’s just like setting up wordpress (without having to ftp the files, of course), but with some minor changes

database setup

go to http://localhost/xampp/ and click the phpMyAdmin link in the left column

set up the database

in the “create new database” field, type in the name of the database and click the “create” button

name your database

update wp-config.php file

jump over to C:\xampp\htdocs\folder_name and rename the wp-config-sample.php file to wp-config.php. update the code block below:

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'putyourdbnamehere');

/** MySQL database username */
define('DB_USER', 'usernamehere');

/** MySQL database password */
define('DB_PASSWORD', 'yourpasswordhere');

1 – define(‘DB_NAME’, ‘putyourdbnamehere’); - rename ‘putyourdbnamehere’ with whatever your database name is

2 – define(‘DB_USER’, ‘usernamehere’); – rename ‘usernamehere’ with ‘root’

3 – define(‘DB_PASSWORD’, ‘yourpasswordhere’); – replace ‘yourpasswordhere’ with ” (2 single quotes)

install wordpress

save the file and then head over to http://localhost/folder_name/wp-admin/install.php, where you’ll be greeted with the wordpress setup screen

after typing in your blog name and email address, MAKE NOTE of the username and password it provides for you — otherwise, you’ll have to reset that information in the database (ooh another tutorial idea)

ta-da! that should do it, you’ll be able to get into the admin through http://localhost/folder_name/wp-admin/ and view the site through http://localhost/folder_name/

questions or comments?

• after you modify the “default” folder in the “wp-content\themes” directory, make a copy of it and rename it to something… anything…
  • i found this out the hard way. wordpress just recently did a string of updates (currently 2.8.2) and every time i’d do an update, my site would revert back to the default layout
  • luckily i had all my files locally so i was able to re-upload to the default folder
  • it only took me 3 upgrades to figure out that i had to rename the folder so that wordpress wouldn’t overwrite my work

in doing so, a couple changes need to be made:

update the “style.css” header info — by default, it reads this:

/*
Theme Name: WordPress Default
Theme URI: http://wordpress.org/
Description: The default WordPress theme based on the famous
<a href="http://binarybonsai.com/kubrick/">Kubrick</a>.
Version: 1.6
Author: Michael Heilemann
Author URI: http://binarybonsai.com/
Tags: blue, custom header, fixed width, two columns, widgets

 Kubrick v1.5

http://binarybonsai.com/kubrick/

 This theme was designed and built by Michael Heilemann,
 whose blog you will find at http://binarybonsai.com/

 The CSS, XHTML and design is released under GPL:

http://www.opensource.org/licenses/gpl-license.php

*/

i updated my site’s header to this:

/*
Theme Name: gorirraJoe
Description: The theme for www.gorirrajoe.com.
Author: Joey Hernandez
*/

OPTIONAL: if you want, you can create a new “screenshot.png” file, sized 300 x 225 (px) — it could be a screenshot, a logo, or a goatse photo (if you’re into that)

*upload these files to the server, then go to “Appearance > Themes”

you’ll see your new screenshot along with the text that you added to the “style.css” file

new theme activated!

it’s a nice little touch, especially if you created the theme for a client.

i REALLY like using wordpress as a cms — not only for its ease of customization or its extensive library of useful (mostly) plugins, but for these two huge reasons:

1. ability for the end-user to modify the web site content without breaking the overall site geography
2. search engine optimization — yea i kinda did mention them earlier, but several plugins can work to help your site get spidered like the best of them.

so i guess that answers the “why use wordpress?” question — here’s my method of getting a custom theme setup for wordpress
firstly, i’ll need to assume that you, the reader, knows how to write html/css/php code… if you don’t, go here

i normally start off by creating the site geography (layout) through standard HTML (i still like using *gasp* dreamweaver for this step because it speeds up the whole html/css writing)

when creating the stylesheet, save the file as “style.css”

if possible, i try to make the site look as final as possible at this step — it’ll make the code portion a whole lot smoother later on

next, download wordpress to your local machine and go to the “wp-content\themes” directory

go into the “default” folder and rename the “style.css” file to “_style.css” — you’ll be keeping this as a backup. there are some things that you might not have remembered to style (such as comments, image alignment, etc.) that you can easily grab from that file.

place a copy of your custom “style.css” file into the “default” folder

now the part that gets a little tricky… i’m starting to now regret wanting to write this… ha

start with the “header.php” file and, with your html mock-up, compare the two to make sure the <head> portion is similar*

*they obviously won’t be the same, but i meant that you want to port over script code such as the png fix: (file here)

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

or favicons:

<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>
/images/favicon2.ico" />

if the masthead (and perhaps navigation setup) is the same on all pages, i put those into the “header.php” file as well (since all pages of the site will be using this file)

next i go to “footer.php” — normally, this won’t need much modification. maybe some closing <div> tags, copyright info, or even analytics code

next up is the “sidebar.php” file — if the site is a simple site (non-blog), then you probably just want the “wp_list_pages()” function:

this is the skiMonkey “sidebar.php”:

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
?>
<div id="nav" role="complementary">
 <ul>
  <?php wp_list_pages('depth=1&title_li=' ); ?>
 </ul>
</div>

there are a ton of functions within wordpress — it’s all a matter of researching what you’ll need

next, you have the “content” pages — this is the body of the site. the nice part is that once you do one page, the rest of the pages will be easy — start with “page.php” (if you have a non-blog, you’re pretty much done after this, though i would HIGHLY suggest updating all php files)

again, compare the php and html pages, adding in your <div> tags wherever needed.

if you created and tested your html properly (especially by placing lorem ipsum code in the main content area, this should be a quick process)

remember, you’re basically wrapping the content within your <div> tags — no need to totally remove (just edit) the code that is already in the files.

now the moment of truth — upload and install wordpress to your server

after installation, you should be able to go to the site and see your newly styled site!

*yes, i do a lot of assumptions — but that’s where comments come in handy — if you have any questions, ask and i’ll try my best to answer!

and here… we… go…

this tutorial deals with the user wanting a site with a blog and pages, but the user wants a specific page to be the front page, not the blog (something similar to andy’s site, but not — since he doesn’t want his site to be full-on wordpress)

*note, i suck at technical writing, but i’ll try to fake it… i’m open to suggestions/comments for future tutorials

there’s a few things you’ll need to do before logging into the wp account:

i’m assuming that you’ll want this front page (and other pages) to have the same look and feel as your blog pages…

so open up explorer and make a copy of index.php — rename the copy whatever you want (i renamed it to “page2.php”)

copy index.php and rename copy to page2.php

next, let’s edit page2.php…

add the following text to the top of the code:

<?php
/*
Template Name: page2
*/
?>

open page2.php and add text to top of code

i put “page2″ but i’m pretty sure you can put whatever you want here — i’ll show ya where this displays in a few steps…

ok go ahead and upload page2.php to your server — should i assume that you know where to put it? (i guess i should’ve done a “getting started” tutorial first…)

now log into the admin and go to Pages > Add New

choose the page title wisely, this’ll be your blog’s address

note where it shows template to the right side — this is where that “page2″ came into play

name the new page and change the template to "page2"

click Publish

now go to Settings > Reading

change “Front page displays” to “A static page (select below)”:

* choose one of your (already created) pages for the “Front page”
* change “Posts page” to “blog”

click Save Changes

update Settings > Reading page

that should be it! if you go to the home page of your site, you’ll see it’s now your chosen page — and then if you append “/blog” to your domain, it’ll take you to the actual posts…

new home page

...and /blog page has all the blog posts

boom… you’re pregnant.