Creating Beautiful

WordPress Sites

Ann Zerega Design

Why would a web designer want to create a WordPress site instead of a XHTML/CSS site? Because WordPress and a good theme makes many design tasks very easy.

• Separation of layout and functionality helps avoid time consuming mistakes

• Strong cross – browser support

• Ability to rapidly prototype a site so your client can interact directly with the latest design

• Ability to add functionality on the fly with plugins

How would a web designer create a WordPress site that doesn’t look like (yet another) “Kubrick” theme?

• A theme that allows customization (in this case the Thesis theme)

• Some understanding of CSS

• Medium level skill with Photoshop or another image editing program

Here’s an example of porting a look/feel from an XHTML/CSS site to a WordPress site using the Thesis Theme settings, Thesis Open Hook plugin and some custom CSS.

• Cellist Irene Sharp’s website is a full width site with the following elements: – Background images of

a cello body on left– Her logo at the top left– Musical staff lines

across the top of the page

– Vertical navigation menu

First – Use Thesis Openhook to move the navigation from its default position to a vertical position in Sidebar 1

• In the “Before Header” section, select the “remove Thesis nav menu” button and save

• In the “Before Sidebar 1” section, insert the following code: <?php thesis_nav_menu(); ?>

• Click “execute PHP on this hook” and save

• Exit Openhook

Second – Open the Thesis Options menu and make sure the following options are selected:

1. Under “Display Options” select “Show site name in header”

2. Select which pages you want to appear and their order

3. Choose whether you want the default “Home” blog page to appear in the nav

4. Save your changes

1

2

3

4

Third– Open the Thesis Design Options menu and create an overall style for your site from this panel:

1. Choose a font and site background color

2. Choose colors for your navigations menu including rollover colors

3. Choose your site layout (3 column, 2 column, sizes of columns)

4. Show or hide the multimedia box

5. Check “use custom style sheet

6. Save your changes

1

2

34

5

6

/* custom page background */.custom #page{display: block;background-color: #ffffff;background: url('images/cello_image.gif')no-repeat left top;}/* custom header with repeating music staff lines */.custom #header{background: url('images/staff_lines.png') repeat-x; outline: none; }/* clickable header logo*/.custom #logo a{ display: block;height: 152px;text-indent:-99999px;background: url('images/a_logo.png') left no-repeat;}/*Menu Tab width with dashed lower border*/.custom .menu .tab {width:250px !important;border-bottom: 1px dashed #000000;}

Fourth – Implement custom CSS for page and nav menu layout :1. Position the background image of

the cello body2. Have the staff line image repeat

across the entire page by “repeating-x”. This will ensure you won’t have header “over hang” in Safari

3. Make cello player logo clickable and specify height

4. Move the default blog logo off the screen by indenting it 99999 px

5. Place cello player logo on left6. Specify width of menu tab and add

dashed black border on the bottom

7. Save your changes and upload if necessary

1

2

3

4

5

6

The final layout of Irene Sharp’sWordPress site looks nearly identical to the original but now has search, blogging and plugin capability

Original Site WordPress Site

If you’re lucky enough to start fresh, you can also create dramatic WordPress sites using background photos, slide shows and many other web design techniques

Questions?