• Putty (download)
• PuttyGen (same as above)
• WinSCP (download)

Putty and PuttyGen are just executable programs, they don't install. After you've installed winSCP and rebooted, go to your SF.net Admin Menu and choose Shell/DB/web. On this page, they list the location of your web files. The important one is Path to htdocs directory: (/home/groups/P/PR/PROJECTNAME/htdocs). That's just reference right now.

PHPMyAdmin

First set up our MySQL database. Halfway down the page, there's a link to "Manage Project Databases", which takes you to a page where you will set your passwords. I use the same password for all 3. not the most secure, theoretically, but i can't think why i would be sharing any of the passwords with anyone. After you set your password, use the link on that page to log into PHPMyAdmin with your admin account. first thing you'll do is create a database:

i just put wp or wordpress on the end of it, but you should leave the project number as a prefix.

PuttyGen

To log in to your site, you need to set up an SSH key pair. Open up PuttyGen.exe. we're going to follow these instructions. When you click 'generate key', you'll see this:

so be ready to shake your tail feathers pointer finger, it only takes a few seconds. Once it's generated (i didn't bother entering a passphrase, but you might want to) edit the 'Key comment' field like so (the key automatically updates):

Copy everything in the Public Key field, and click over to your Account maintenance page. Near the bottom, click the [Edit SSH Keys for Shell/CVS] link. Paste your key into that field. Make sure you click the "Save Private Key" button, and then close PuttyGen.

WinSCP

Open winSCP. on the configuration screen, click New:

the private key file is the one you saved from PuttyGen a minute ago. You'll also want to go to the directory page, and set the remote directory to your htdocs directory. Save your settings, and click Login. winSCP will warn you about the accepting the key fingerprint, click yes.

You can either unzip wordpress locally, and upload the whole thing, which takes a while, or you can just upload the *.tar.gz file and unzip it on the server. Techtite just posted an explanation of this, although there are a few differences I'll explain in a minute.

Putty

When you open Putty.exe, you'll need to configure it much the same way you did winSCP:

Save your settings, and login. You'll be prompted for your username, and then you'll want to type cd /home/groups/P/PR/PROJECTNAME/htdocs. Following Ajay's instructions, the wget command doesn't work, because your shell account doesn't have access to anything that's not on SF.net. so here are the commands i used:

tar xzvf wordpress-2.1.2.tar.gz
cp -rf wordpress/* ./
cp wp-config-sample.php wp-config.php
vi wp-config.php

vi is a text editor. Once it opens, the first thing you should do, is type 'i'. That puts you into insert mode (the default is view). enter the information from the "Manage Project Databases" page, like so:

You can paste into Putty by placing the cursor where you want, and right-clicking on the window. And yes, we're changing that '99% chance you won't need to change this' line. You'll need to use the admin username and password. after you're done editting, press 'ESC' to switch back to view mode, and then ':wq' to write the file and quit.

now you're ready to run install.php! while you're setting up all your favorite options, you'll note that

• you can't set up akismet. not sure what to do about that just yet.
• you can't upload files. or add custom headers. not sure what to do about that either.
• when you edit your permalink structure, it won't save. you'll have to fire up vi to do that as well.

Adding your Theme

you can keep an up to date copy of your theme installed via SVN. Just:

cd wp-content/themes/
svn co http://PROJECTNAME.svn.sourceforge.net/svnroot/PROJECTNAME/trunk/ PROJECTNAME

don't forget the /trunk. since you're doing this via command line, you'll need to make sure your capitalization matches.  and that last PROJECTNAME is whatever you want to call your theme folder.

The last thing you'll need to do is add your sourceforge code.  The code is on that Shell/DB/web page, about halfway down.

1. Regiser for the site. (create account, in the top right of any page). the name you choose is going to be the name of the lead developer. it doesn't have to be a real name if you don't want it to.
2. Register your project. i know, that's an absurd number of options. you have to save each option (trove) before moving on to the next one. your UNIX name should probably start with 'wp-' for clarity and findability. The descriptive name should start with 'WP Theme -' for the same reason. The Basics:
   • Intended Audience :: End users/Desktop
   • Topic :: Internet :: WWW/HTTP :: Dynamic Content
   • OS Independent (Written in an interpreted language)
   • User Interface :: Web Based

   Your description is probably not the one that shows up in the dashboard. it should start by explaining that this is a wordpress theme. It should explain what sets you apart from other themes, whether that's aesthetics, options, or plugin support. This would be a good place to describe your layout, and basic colors.
   from this point on, everything will be done through the admin menu. on the top right of your project page:

3. Upload a screenshot. You can upload more once after you're set up.
4. fire up your ftp client. connect to upload.sourceforge.net, and upload your zip file
5. now go to Admin > File Releases. select the file from the list at the bottom of the page . Don't worry about your first changelog/notes entry. 'initial public release' is good enough.

Setting up SVN:

Nobody wants to use CVS anymore. go to Admin > Subversion, and tick the checkbox. From here on out, I'm assuming you're using tortoise SVN, because it's easy, and i can take screenshots

right click in any folder on your computer, and choose the repo-browser:

You'll be prompted for a repository to browse. the address is on that SVN page you just ticked the box on: https://wp-unixname.svn.sourceforge.net/svnroot/wp-unixname. You'll want to create 3 folders: Trunk, Tags, and Branches. Right click on the main folder. When you choose create folder, and name it, you'll be promted for your sourceforge username and password.

Trunk is where your project lives, Tags are snapshots every time you release a new version. Branches are like tags, only they both make progress. You might use this if you were making a version 2 of your theme, while continuing to support version 1.

To start your SVN repository, right click on the folder that has the release version of your file, and choose "Import" from the tortoise submenu. It will prompt you for the address of your repository, make sure you add the /trunk to the end of the url! This puts your files on sourceforge. Users can now browse your code online.

Now your code is set up on the server, but you still don't have a local copy that you can easily update. Now you want to make a new folder for your theme in your local /wp-content/themes/ folder. right click on it, and choose "SVN Checkout". Again, make sure to put /trunk on the end of the url.

I'm assuming that this is a new theme that you're already ready to release. If that's true, the first thing you should do, is right click on the folder you just checked out, and choose "Branch/Tag". That brings up this window:

Change the URL to /tags/1.0. and leave everything else. You can use the specific version if you release a version and forget to tag it. You probably only want to switch your working copy to a branch, not a tag.

New Versions

Now when you fix a bug, or tweak your CSS, after you save, you can just right click on the file, and choose "SVN Commit". you'll be prompted to enter a description of the change, and possibly your password the first time. when you want to release a new version, right click on your folder, and choose "Export". you'll be prompted for a folder to save to, you probably just want to make a folder on your desktop. This just copies all the files except the .svn folders, so you can zip it up and upload it to sourceforge via FTP. then just tag the new version, and you're all set. You'll probably also want to post about it on your development blog, which I'll explain how to set up in part 2.

WordPress versions 1.2 and below used a templating system like the one andy proposed. The problem was, the classic theme had limitations. if you wanted to remove the sidebar on post pages, as kubrick does, you were out of luck. The Sandbox would fix that. The other development that helps make templating viable again was introduced in wordpress 2.0. Since 2.0 was introduced, wordpress loads functions.php of the current theme, if it exists. this means that a theme could use only style.css and functions.php, and have an enormous level of control.

Changes to The Sandbox

it's been a while since andy added the sandbox branch, but it doesn't seem to be making progress. so, while i can't implement status: hidden, i can make a workable version of The Sandbox to test The Thin Line on.

It's been stripped of it's skins panel (as well as the skins subfolder), had the default skin set to none, and had status: hidden added to the theme information. I also moved wp_footer(); inside the #footer div, for even greater semantic justice so that information added to the footer can be styled more easily (scroll to the end).

Changes to The Thin Line

when i said that Themes could be built on style.css and functions.php, that's only partly true. you could build a theme that way that only inserted a footer credit, and applied javascript to the head of the theme. to add an options panel, you'll probably want to use theundersigned's tutorial, or ozh's theme toolkit. I'm using theundersigned's tutorial, mainly because the PHP is simple enough for me to get the gist of what's going on. Ozh's toolkit does more, but requires me to take more on faith, and has previously caused problems on the theme viewer and wordpress.com.

The first step to gluing The Thin Line to The Sandbox is this:

/*



Theme Name: The Thin Line

Theme URI: http://archgfx.net.net/blog/index.php/themes/the-thin-line

Version: 0.7

Description: Hand on mouth, the game goes on

Author: Sunburntkamel

Author URI: http://archgfx.net/blog/index.php/about/

Template: Sandbox



*/

That's my entire style.css. it doesn't need to have anything else. I'll be using style.php for all the style information. The important part is the last line, which tells wordpress to use the template files (index.php, single.php, etc) from 'sandbox' to handle the content. Style.php will be loaded on top of the existing sandbox CSS, which is why we set the sandbox skin to 'none'.

Layouts

I was going to re-use the sandbox' "skins" submenu at first, but that would require digging into the function, and renaming all the variables to use theundersigned's $shortname converntion, and including it in the thin line, rather than the sandbox. That requires redistributing more code, which isn't my goal. so i used theundersigned's tutorial to make a dropdown list.

corrosponding to the dropdown list is this section of style.php, which performs roughly the same task as the skins page:

<?php if ($thethinline_layout_style = "3c-b") { ?>

@import url('skins/3c-b.css');

<?php } else if ($thethinline_layout_style = "3c-l") { ?>

@import url('skins/3c-l.css');

<?php } else if ($thethinline_layout_style = "3c-r") { ?>

@import url('skins/3c-r.css');

<?php } else if ($thethinline_layout_style = "2c-l") { ?>

@import url('skins/2c-l.css');

<?php } else if ($thethinline_layout_style = "2c-r") { ?>

@import url('skins/2c-r.css');

<?php } else { /* 1c-r */ ?>

@import url('skins/1c-b.css');

<?php } ?>

after that, style.php is just the remainder of the original thethinline.css. The advantage of styling in a PHP fileis that you can use variables, wordpress conditionals, and other assorted tricks.

Functions.PHP

Adding functionality to The Thin Line via functions.php is a little more like writing a plugin than like writing a theme. I'm using add_action(); hooks to add to both the header and footer of the theme. I could also add and remove widgets, although i don't need to mess with the basic widget formatting, because that's handled by functions.php in The Sandbox. Theundersigned's tutorial needs a minor correction first, though. at the end of functions.php, I changed <?php bloginfo('template_directory'); ?> to <?php bloginfo('stylesheet_directory'); ?>. For most themes, those hooks point to the same file. This is the first time the difference matters to a theme.

This is the new footer for The Thin Line. I added an image and link to The Thin Line homepage, as well as a section for users to add their own copyright notice/pithy slogan/whathaveyou (another trick i stole from scott). This is purely PHP, but it's not scary. Just make the end of theundersigned's functions.php look like this:

function mytheme_wp_footer() {/* Places credit link in the footer */ ?>

<span id="skin-link">

<a href="http://archgfx.net/blog/index.php/themes/the-thin-line" title="Theme by SunBurntKamel">

<img src="<?php bloginfo('stylesheet_directory'); ?>/thethinline/ttlogo.jpg" alt="The Thin Line" title="The Thin Line" /></a></span> <br />

<p class="annotation"><small><?php echo $thethinline_footer_text ?></small></p><?php }

add_action('wp_head', 'mytheme_wp_head');

add_action('admin_menu', 'mytheme_add_admin');

add_action('wp_footer', 'mytheme_wp_footer');

?>

That's actually probably easier than creditting yourself in footer.php I could (and may possibly) also use this function to add, say, siFR to the theme as well. Someone who didn't ph34r javascript the way i do might add livesearch to a sandbox based theme.

The End

My point in writing all of this is to show that the idea of writing a new theme every time is overkill. Template files themselves don't vary a lot. Most of the functionality and variation happens in javascript and CSS. those can both be handled by only a couple of files. If theme authors could depend on the sandbox being in every wordpress distribution, It would make it easier for them, as well as for casual users who just want to change something small about a theme. It's a lot easier to find the thing to change when there are only 3 files in the Theme Editor panel of the dashboard.

I was going to include The Thin Line with this, but i'm having a little difficulty making everything style the way it was before, and some of the variables i've created with theundersigned's tutorial aren't properly sticking, despite showing up correctly in my database.

Bookmark This:

:: :: :: :: ::

Customizing CSS is a new trick on wordpress.com, but hosted wordpress users have been doing it for a while.

Alex King has hosted a competition or two based on styling the 'classic' theme.

Here's how to use those great old styles:

1. download and unzip the style of your choice.
2. Go to your wordpress dashboard, and under Presentation, choose the WordPress Classic theme, by Dave Shea.
3. Start Writing a new post. Using the uploader, upload all of the images from the style you downloaded.
3a. for each image, click on it, and make sure the popup says 'using original' at the top. click on 'using thumbnail' if it doesn't. once it says 'using original', click 'close'
4. Open TextEdit on your computer
5. drag style.css from the downloaded style onto textedit
6. click Go > Find (or press cmd+F)
7. search for the name of the first image in the style folder (ex. top.gif)
8. in your new post (on wordpress.com), in the uploader, control+click on the same image, and click "copy image address"
9. switch back to textedit, and paste that address into the 'replace' field.

10. click 'replace and find'. this will highlight the name of the image.
11. click 'replace' and the highlighted text will be replaced with the address of the image you've uploaded.
12. repeat steps 6-11 for all the images in the style.
13. click File > Save
14. click Edit > Select All, then Edit > Copy
15. go to the Custom CSS page in your wordpress dashboard, and paste.
16. click preview to see it in action, and click 'save stylesheet' if it looks good!

FULL DISCLOSURE: i don't have a paid account. i can't test this out.

UPDATE: wank points out that this won't work perfectly, since classic styles are meant to replace classic, not overwrite it. example