Your SlideShare is downloading. ×
Creating Beautiful Wordpress Sites
Creating Beautiful Wordpress Sites
Creating Beautiful Wordpress Sites
Creating Beautiful Wordpress Sites
Creating Beautiful Wordpress Sites
Creating Beautiful Wordpress Sites
Creating Beautiful Wordpress Sites
Creating Beautiful Wordpress Sites
Creating Beautiful Wordpress Sites
Creating Beautiful Wordpress Sites
Creating Beautiful Wordpress Sites
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Creating Beautiful Wordpress Sites

3,200

Published on

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

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,200
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
19
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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?

×