For example, in a college website, you might need one header for the engineering department, and a separate one for the athletic department. Within WordPress, we are saying, if the current page is the descendant of the engineering department homepage, use header #1. If the current page is the descendant of the athletic department homepage, use header #2.

In WordPress, when creating a page, you have the option (in the righthand sidebar) to declare a parent page for your new page. This is WordPress’s way to create hierarchies similar to folder structures in static websites. There is no limit to how many descendants a page might have, allowing you to create child pages, child of child pages, etc.

A common way, in your template, to check if a page is descendant from another page, is to use this piece of code (which can be found in the WordPress codex), where ‘id’ is the numerical id of the page in WordPress:

However, the above code only works if the tested page is a direct parent of the current page. Well, what if you have a whole bunch of nested pages in the engineering department of your college?

There is another piece of code on that same WordPress codex page that will check if the current page is a descendant, now matter how deeply nested, of another page:

This function needs to be placed in the functions.php file of your theme. Then, you call this function when you need to test the ancestry of a page:

This function essentially says, if this page is anywhere in the family tree of the tested page (including being the tested page itself), then do something.

There is one last detail that might come in handy, though. To check whether the current page is descended from another page, but is not that other page, you might do something like this:

That’s clunky, though. If you’ll use this test somewhat regularly, just create another function in your functions.php file. You might call it “is_child()”. It’s exactly the same as “is_tree()” but without the last if statement:

Now, if you need to determine if the current page is the child/descendant of another page, but is not that other page, you use this:

I seriously hope “is_child()” and “is_tree()” make it into the core functionality of WordPress one of these days, so I can stop having to add them to my functions.php file.

Websites are different from printed materials in that the design is subject to rendering by applications (browsers) that don’t necessarily treat all code the same way. Once printed, a brochure’s layout will always look exactly as the designer intended. However, website layouts can easily be “broken” if the code is not understood correctly by the browser that’s interpreting it.

There are dozens of browsers in use, but something like 98% of folks online use one of four browsers: Internet Explorer, Firefox, Chrome, or Safari.

Of those, Internet Explorer is the one that causes the most difficulty for web designers, as Microsoft has only very slowly implemented standards that the other browsers adopted from square one. However, all of the browsers have certain quirks, and tend to exploit subtle mistakes in a website’s code differently.

Let me give you an example from my own experience. I recently completed a redesign for Mixed Greens Blog, a high wattage food and photography blog written by two amazing women here in Seattle. One of the features on their homepage displays a photo by each of them, side by side, as an introduction to their photo gallery.

Now, I work on a Mac, so as I build websites I am constantly checking them in the Mac versions of Firefox and Safari. Here’s what that Mixed Greens feature is supposed to look like, and does on Firefox and Safari:

Looking at the site on a Windows computer, I realized that there was a problem. Here are screen shots of the same part of the website in two more browsers:

Viewed in Internet Explorer 8

Viewed in Opera on Windows XP

Whoops! What happened to the photo on the left? As it turns out, I had allotted a certain amount of space for the two photos, however the photos actually took up 4 pixels more space than I’d calculated, due to a margin and border (web designers, whether they like it or not, have to become pretty good at measuring and calculating pixels!).

Firefox and Safari rendered the layout fine, being a bit more forgiving in this instance than Internet Explorer or Opera. However, since approximately 50% of the viewing public uses Internet Explorer (only 1% uses Opera, though it’s by all reports a great browser), getting the layout right for Internet Explorer is crucial.

So what’s a web designer to do? Or what are you, as the owner of a website, going to suggest to your web designer to make sure it’s right?

It is actually quite a chore to check a website design in all of the browsers. For example, though I use a Windows laptop, I am only able to use it to check my designs in the most recent versions of Internet Explorer (8, as of this writing), Firefox, and Chrome. It would take another laptop with older software to check in the other browsers, and that’s simply not within my budget or realm of patience. (Note to tech geeks: I realize it’s possible to run multiple versions of the browsers on one machine, but it’s not practical for the average user such as myself to set up.)

There is now, though, a solution I’m using that works really well. There’s a new company called Cross Browser Testing, www.crossbrowsertesting.com, that allows the visitor to check their website in dozens of browsers across mulitple platforms.

It’s geared toward professional designers, and there is an offer to use it for free for a limited number of tests. To continue using it, the cheapest registration is $20 bucks a month, which allows you 150 minutes of testing per month. There are of course more expensive options available. You can use this service to take screenshots of a website in the different browsers, and you can also do a “live test” in an environment that is a bit slow and awkward, but is still very useful.

I would highly recommend this site to any web designer. For you site owners who’d like reassurance that your designer is checking cross browser, you can ask him or her to send you screenshots from the different browsers.

Classic Hardwood Floors was in a common position: the company had a homemade website which was fine when the company was just getting going, but after several years of growth, the site looked a bit amateur for the caliber of work the company performs.

The goal for the site was of course to show how beautiful hardwood floors looked, achieved through the company’s own project photos, as well as several carefully chosen stock photos. Additionally, the owner would like to start blogging about his industry and projects, which is a great way to build stronger search engine results, and provide a more informative website at the same time. Having the site built in WordPress of course makes blogging on the site very easy.

Jamie Peha and Anne Nisbet have a radio show called “TableTalk” that airs once per month locally in Seattle. The focus is on wine and food: home cooking, restaurants, and foodie events in the Seattle area.

The site primarily is a vehicle for three blogs: one about home cooking, one about events, and one a sort of catch all foodie blog. It would have been quite possible to mash these up into one blog, but we decided to provide the author of each with a slot on the homepage by using a tabbed interface.

In addition to the blogging essentials, the site uses an event manager plugin which I customized to display the information the hosts wanted.

Mistral-Kitchen is a fine dining restaurant in Seattle. The feel of the restaurant is distinctly modern, having been designed by an architect. The owner wanted the website to feel modern and clean, yet dark and moody.

The site is built on WordPress, with a custom back end allowing restaurant staff to easily be able to update menu items.

Belle Femme is an independent salon offering organic skin care in a luxuriant atmosphere. The owner wanted a site that offered a feeling of European luxury and abundance.

The salon also sells jewelry, and the new website offers rich detail for each piece, as well as a way to cross reference other pieces of jewelry that feature the same semi-precious stones.

This was an interesting one!

Having designed an individual restaurant site for Serafina and Cicchetti separately, both under the same ownership and management, the owner now wanted an “umbrella” to wrap the two sites together. This was useful especially given that much of the information, such as contact info, is shared between the two restaurants.

I opted for a design that would allow the branding information to stay fixed at the top of each page, not scrolling out of view on longer pages. To achieve this, I implemented a custom scrollbar, allowing only the content area of longer pages to scroll. You have to see it in action to appreciate this function (Note: if you have a large monitor, you might need to size your monitor down to initialize the scrollbars).

There is also a persistent navigation menu that is available on every page of the umbrella site, Serafina’s site, and Cicchetti’s site, while the two restaurants each have their own navigation menu as well. The idea with this was to make it styled simply (a black vertical bar with white text), both so it would create good contrast with the other sites, yet not clash.

Mixed Greens is run by two serious photographers and foodies, and they are competing with some pretty sophisticated websites for attention on the internet. There old format wasn’t cutting it, so they asked me to redesign it.

We kept enough flavor from the old design (same logo and masthead, white background, bright green links) to make sure their existing readership would not be overly shocked by the new layout. However, we added some features that simply did not exist before.

Previously, the website had a typical blog structure, where the 10 most recent stories simply chained up on the homepage, creating a very long page, and access to only 10 of hundreds of articles the owners have written on local, sustainable food. The new design creates an engaging way to present dense amounts of information as is typical of newspaper and magazine websites: there is a short teaser and thumbnail for many of the stories, with a headline for dozens of others. This allows access to 39 stories on the homepage, while still not feeling visually overwhelming.

The new site also features a slick photo gallery to show off their work. The site owners have the ability to upload their own photos to the gallery. Since this is accomplished with WordPress, they have no fear of “breaking” the layout.

Cicchetti is the sibling restaurant to Serafina, whose website I also designed. The owner wanted a very different feel for this restaurant, as it is a more casual yet modern style of establishment.

Cicchetti’s site features striking photography which expands to fill the background of each page, no matter the size of the viewer’s monitor. The branding at the top is fixed in place by implementing a scrollbar to allow only the content to be scrolled out of view.

Fred Arcala is partner in a Seattle law firm that specializes in immigration law. He wanted a site that had iconic American motifs, yet still appeared professional. I designed a masthead with the Statue of Liberty, and infused the palette of the site with blues and burgundies.

Fred also wanted to be able to add content himself, especially to add informative articles in the form of Frequently Asked Questions, and to be able to create links to sites he found that would be useful for his clients. I set up the site on WordPress, making it very easy for Fred to add his own content.