• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Creating Beautiful Wordpress Sites

on

  • 4,203 views

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

Statistics

Views

Total Views
4,203
Views on SlideShare
3,992
Embed Views
211

Actions

Likes
2
Downloads
17
Comments
0

12 Embeds 211

http://www.annzeregadesign.com 148
http://www.wordpressasylum.com 19
http://www.watchknowlearn.org 16
http://www.slideshare.net 8
http://eastbaywp.com 6
http://mswhite.watchknowlearn.org 3
http://www.meetup.com 3
http://www.watchknow.org 2
http://watchknowlearn.org 2
http://citutah.com 2
http://sammayer.watchknowlearn.org 1
http://ccssk.watchknowlearn.org 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Creating Beautiful Wordpress Sites Creating Beautiful Wordpress Sites Presentation Transcript

    • 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:
      • Under “Display Options” select “Show site name in header”
      • Select which pages you want to appear and their order
      • Choose whether you want the default “Home” blog page to appear in the nav
      • 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:
      • Choose a font and site background color
      • Choose colors for your navigations menu including rollover colors
      • Choose your site layout (3 column, 2 column, sizes of columns)
      • Show or hide the multimedia box
      • Check “use custom style sheet
      • Save your changes
      1 2 3 4 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 :
      • Position the background image of the cello body
      • 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
      • Make cello player logo clickable and specify height
      • Move the default blog logo off the screen by indenting it 99999 px
      • Place cello player logo on left
      • Specify width of menu tab and add dashed black border on the bottom
      • 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?