Ann Zerega leads us through an example of converting a static website to a WordPress website, using the Thesis theme

1. Creating
Beautiful
WordPress
Sites
Ann Zerega Design

2. 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

3. 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

4. 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

5. 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

6. 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

7. 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
3
4
5
6

8. /* 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 body
2. 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 left
6. 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

9. 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

10. 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

11. Questions?