Most of the time when I build a website and use a content management system, I use Drupal. I recently finished a site that had basic needs, and decided to give WordPress a go. As I was going through it, I had questions about how to do certain things, and I'm going to post all the answers here.

1. If there are javascript or other auxiliary files in the theme, and you want to link to them, use bloginfo() function, like this:

   <script src="<?php bloginfo('stylesheet_directory'); ?>/jquery.js"></script>

2. If you want a page to look different than the other ones, or if there's some code that needs to appear on a particular page that can't be edited by regular users in the WordPress UI, you can make a special template for it. First, start the template with a comment link this one:

   <?php /* Template Name: A Special Page */ ?>

   Then when you create the page, there will be a Page Template selector in the right sidebar. Choose the template you created, and you're in business. I used this to set up a PayPal form and a bit of Javascript on a couple pages.

3. In your template files, you can check whether you're the home page with the is_home() function, which returns true if you're on the home page (duh).

4. The WordPress template system has many file names that are magical and recognized for certain purposes, and which can be called by certain functions. Here are a few of them. The complete list is on the WordPress Codex:

   • header.php - included in other templates with get_header()
   • footer.php - included with get_footer()
   • sidebar.php - included with get_sidebar()
   • style.css - the main stylesheet, but also contains the metadata for your template
   • single.php - used for single posts
   • page.php - used for single pages
   • archive.php - If it exists, this is used for anything that's browsed and isn't a single post (date archives, category archives, etc). Otherwise, index.php is used.
   • comments.php - included with comments_template()

5. To include different selections of posts from the database, use the query_posts() function. For example, you can pull two posts from one category and then the five most recent posts from the entire pool of posts, and display them in different parts of the page.

6. The WordPress Codex is a large and generally helpful resource. While developing a theme for WordPress, I spend a lot of time with the Template Tags page.

WordPress is very capable for building a complete website, or for just bolting on some quick page editing to an old school, no CMS, website. I like that WordPress feels relatively small and fast compared to Drupal. I do prefer Drupal for general content management and development for websites where blogging is not the major focus, but it's nice to have both tools available.

Update August 28, 2006 -- I am again questioning the ability of Photoshop Elements 2 to produce remotely accurate colors using Save For Web. I'm following my own instructions, starting with sRGB IEC61966-2.1 documents, and getting the dull colors again. This is rather disheartening. I'm leaving this discussion up here because it did work for me once, but there must be a something more subtle I'm continuing to miss. Maybe someone will see article and be able to shed some light on the issue.

At ShooFlyDesign, we do all kinds of web work. One very common bit of work is converting other people's designs into working websites. As a result, we receive lots of Photoshop documents. Because we're working with graphic designers who are very careful with where they pixels are placed, and how they look, color is not something to be trifled with. This is true in any somewhat artistic endeavour -- everyone wants the colors they choose to look the same wherever the document is reproduced.

Because we're interested in keeping our costs down, ShooFlyDesign has not invested in Photoshop CS or any of the other full versions of that venerable software. Virtually all our work is done for the web, and Photoshop Elements does the job admirably for a small fraction of the cost of Photoshop. We use version 2.0, which was the first version to run natively on Mac OS X. It's not the current version, but so far we haven't needed to upgrade. Elements can't read or save CMYK images, and is missing many of the advanced automation and image adjustment features of the full version of Photoshop. But for most people, it has plenty of power, and with certain add-ons, it can be very powerful indeed.

Although we don't need to deal with CMYK images in Photoshop, we do need to be able to output accurate color to the web. Photoshop Elements includes a Save For Web command, but if you're not careful, the images it saves will have colors that look desaturated and rather dull. I'm certainly not the first person to notice this. The difference isn't the same as the difference between color and black and white, but to a reasonably discerning eye, it's pronounced.

The reason, I think, is that Save For Web strips out the ICC color profile information from your original document (the information that tells Photoshop how to render color on your screen) when saving to JPEG, GIF, or whatever¹. Most web browsers ignore color profiles (Safari is an exception), so stripping them out is generally a fine thing to do. Photoshop Elements has the ability to save the image without the ICC profile, looking the same as your original, but only if you follow certain steps. This has been a source of many headaches over the years, but finally, I've figured out a procedure that lets us output correct colors from Photoshop CS2 documents.

The Procedure -- How To Keep Your Colors Looking Good

There are two main variables you need to control:

1. Photoshop Elements' Color Settings preference, found in the Photoshop Elements menu in Mac OS X. Set it to "Limited Color Management". Doing so will tell Photoshop Elements you only care about the sRGB color profile, which is the one used for keeping colors consistent on the average person's screen, across computer platforms (Windows, Mac, etc). I was inclined to think that "Full Color Management" would also work, but alas, it seems not to. It seems to me the three available modes (None, Limited, Full) might have been better named "Always Ignore", "Always Use sRGB", and "Always Use Adobe RGB".

2. The source document's color profile. This should be sRGB IEC61966-2.1. Although Photoshop Elements can open and work with any RGB document, if you start with Adobe RGB, there's nothing you can do to save that image to the web that will preserve the original colors². The full version of Photoshop can convert between profiles easily, so if you're working with other designers, ask them to work in sRGB.

Once these two things are under control, you can use the Save For Web command to yield color as accurate as Photoshop (any version) can produce without ICC profiles embedded. I tested this in my copy of Photoshop Elements, and a copy of Photoshop CS2 belonging to a less frugal colleague, and the results are identical.

What Can Go Wrong

If you start with Adobe RGB, you get dull colors. If you work in Full Color Management mode, regardless of the color profile you start with, your colors will be dull after you Save For Web. That part, in particular, is just amazing to me -- if Limited Color Management can do it starting with sRGB, Full Color Management should be able to do it too. Unless there's some subtlety to color management I'm missing, this is a bug.

For the record, in Photoshop CS2 (and probably earlier versions), you don't need to fuss with all this document ICC profile, color management setting nonsense. The full version of Photoshop will apparently do whatever it needs to do internally to make your images look right on the web. You can start out in Adobe RGB -- CS2 will change the profile internally and match the colors as best it can when saving the image. It's really irritating to me that Photoshop Elements (as of 2.0 anyway) doesn't have this particular aspect of Photoshop's brain. Perhaps Photoshop Elements 4, which is presumably based on CS2, has fixed this behavior. If it has, and it's not any slower, I will have a very compelling reason to upgrade. Alas, as of today there is no downloadable trial of Photoshop Elements 4 for the Mac available, so I can't test it.

Two More Things

To add to the potential irritation, the procedure can be slightly different if you're working on documents you create yourself. New documents created in Limited Color Management mode will not have an ICC profile attached. This means the whole business of ICC profiles as used by Save For Web can be safely ignored, because there's no profile to strip. However, if you use bits of other images with color profiles, you'll need to switch to Full Color Management before copying those pieces into your new Photoshop Elements document, or the colors will be imported into your document looking dull. With Full Color Management turned on, Photoshop will confirm that you want to copy, say, a bit of image in Adobe RGB into your sRGB or untagged RGB document, and that you want Photoshop to try to convert the colors to match. If you have Limited Color Management turned on, you won't get this opportunity. Once the other image is imported into your document, you can switch back to Limited Color Management.

When I first started noticing this problem, I would copy the image slices I was working with into GraphicConverter and use its "Merge color profile into image" checkbox in its Save dialog. This effectively does the same thing that Photoshop CS2 does when you Save For Web there -- it matches the colors as best it can to their untagged, non-color-managed equivalents. And GraphicConverter is even cheaper than Photoshop Elements! If you have no choice but to use Adobe RGB originals, GraphicConverter might save your bacon. Its results are not quite as accurate to my eyes as Photoshop or Photoshop Elements configured the aforementioned way, but they are definitely much better than Photoshop Elements configured incorrectly.

We get a lot of email here at ShooFlyDesign HQ. A lot. We also write a lot of email. And we prefer our email without the HTML -- which is what allows people to make text bold, colorful, add images and whatnot. We're just plain text folk here.

One of the weird things about HTML messages, and how Apple Mail deals with them, is that they can mess up replies. Specifically, the leading (line spacing) is broken, resulting in lines that are spaced just far enough apart to look funny, but not as far apart as separate paragraphs should be.

Most email messages that come as HTML also feature an alternative, plain text, encoding. It's possible to switch between these using the View > Message > Plain Text Alternative command. Switch to plain text, hit reply, and everything is jolly.

Apple Mail will display HTML mail encodings by default, on the assumption that users prefer that. And these days, it's possible most do -- the kids like the colorful text and stuff. However, if you have a taste in email similar to ours, you may want to force Apple Mail to display the plain text version if it's available. There's a hidden preference available for it. Quit Mail, open a Terminal window, and paste in this line:

defaults write com.apple.mail PreferPlainText -bool TRUE

Restart Mail, and you will always see a plain text version of a message first. For more information on this topic, including ways to force plain text in other email applications, see Why HTML in E-Mail is a Bad Idea, where I found this solution. The page's filename is amusing: evilmail.html -- calling HTML mail evil might be taking it a little far, but we certainly prefer to avoid it.

The latest browser from the Mozilla Foundation has been released. It's called Firefox, and you should download it and take it for a spin.

Firefox is an alternative to Internet Explorer, and a very good one. It is fast, more secure, and more compatible with modern websites than Internet Explorer.

The download for the Windows installer is 4.7 MB, which is not too bad, especially on a fast connection. ShooFlyDesign recommends it highly. It will honestly make your experience with the web a lot easier.

Today is the day of Firefox's official release after years of development, so the servers might be slow. If you are savvy with BitTorrent, you can download a torrent file instead, which might help you get Firefox more easily.

If you have any questions about using Firefox, you can feel free to let us know.

If you're wondering, we are ShooFlyDesign use a special Mac browser based on the same innards as Firefox. It's called Camino, and is available as a technology preview right now. Firefox is also available for Mac OS X, but Camino is made especially for the Mac, and uses some stuff that only the Mac supports, so it is our browser of choice for daily browsing.

We just finished our redesign of this website. Our portfolio is up-to-date for the first time in over a year, and we have a lot more stuff here to look at. Actually, to say the website is "finished" isn't true; a website is never finished. There may be wrinkles here and there. If you find something, let us know.

We hope to do a fair amount of writing here in the weblog. If you're interested in keeping up with us, come back periodically. We have an RSS feed to use in your favorite RSS reader. If you don't know what that means, take a look at NetNewsWire for Mac OS X, Abilon for Windows, or Straw for GNOME. We use RSS readers every day, and find them very helpful for keeping up with our favorite websites. Even if ShooFlyDesign isn't your favorite website, you should still check out an RSS reader (they're also called aggregators, since they generally grab RSS feeds from lots of websites at once).

We offer two RSS feeds: one with brief summaries of the entries, one with the full articles. Take your pick and enjoy.

We don't use Windows on a regular basis, but we have tried various FTP and SCP clients that will help you move files to and from your web server. Here are some to check out.

• WinSCP -- This does SCP, not FTP. Make sure your server supports SSH (if you use Pair or Hostbaby, it probably does).
• LeechFTP -- A friend of ours thinks this is the cream of the crop for free FTP on Windows.
• SmartFTP -- Supports regular FTP.
• FileZilla -- Feature-rich and free, but a bit slow in our experience.
• FTP Explorer -- Mimics the Windows Explorer.
• WS_FTP LE -- Free for educational users. We used this when I was in college.

Every self-respecting nerd knows that FTP is the way to move files around. Actually, I should say that FTP is the way to move files around unencrypted. Sending files by email is convenient, but inefficient and slow. Email was designed for sending small bits of text, not large binary files.

Enough of the "I don't like attachments" tirade.

At ShooFlyDesign, we use two FTP clients for the Mac: * Interarchy * Transmit

We are fans of both these fine applications. Neither is free, but both are excellent. I was an Interarchy user through version 5, at which point I switched to Transmit. Now that Interarchy 7 has come out, I've returned to the Interarchy fold. But I still like Transmit a great deal, and use it from time to time.

Interarchy is a true power-user's FTP client. It also does SFTP and FTP over SSH, two ways of sending files over an encrypted connection instead of a clear one. It does all kinds of other stuff, all of which are very useful, and packs the whole thing into a nicely thought-out interface. They've borrowed a great deal from Safari, Apple's web browser for Mac OS X, in their user interface approach. It's fast, feature-rich, and reasonably priced at $39.

If you're still using Mac OS 9, you can use the last version of Interarchy (6.3) for Mac OS 9 for free. Just download it from Stairways, and off you go.

Transmit is the picture of elegant software. It is the FTP application I would recommend for people who don't use FTP all the time, but do need to use it from time to time. Transmit can also speak SFTP, but that's it. Clean and simple. At $25, Transmit is also a great buy.

If you need something free, and your server supports one of the secure variations on FTP (SFTP or SCP), check out Fugu. Even disregarding the price, it's excellent. There are many other FTP clients at various prices and levels of quality, if you're interested.

When developing websites nowadays, we spend a lot of time dealing with CSS, the language of website stylesheets. The usual way this works is you edit the CSS, save the page, open a web browser and look at the changes. Lather, rinse, repeat.

If you use a Mozilla-based browser (Firefox, Camino, or Mozilla itself), you have a much easier option. The Edit CSS bookmarklet from SquareFree.

Bookmarklets are bookmarks, made of JavaScript, that live in your toolbar. You choose the bookmark, and something happens. In this case, a window pops up, loading all the CSS that's affects the page you're viewing. Linked, imported, and embedded stylesheets all load in the window. Edit what you see in the window, and the results are shown instantly in the browser window.

Similar technologies exist in some web editors. On Windows you can tie into the Internet Explorer layout engine with various software (I've heard), and on Mac OS X you can tie into the WebCore engine using BBEdit and numerous other editors. However, neither of these options exists on the other platform. Mozilla works everywhere.

I use BBEdit's preview engine all the time, but the Edit CSS bookmarklet is still one of my favorite tools. Did I mention that it's also free?