Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Overview of Using Wordpress for Web Site Design


Published on

Notes for a presentation I delivered at the August 2011 Digital Composition Workshop.

Published in: Education, Technology, Business
  • Be the first to comment

  • Be the first to like this

Overview of Using Wordpress for Web Site Design

  1. 1. Designing a Web Site withWordpress: An OverviewAmy Goodloe© 2011 All rights reserved.
  2. 2. Preface What follows are notes for a presentation I shared with colleagues at the PWR Digital Composition Workshop on August 10th, 2011. These notes are part of a larger project I’m working on on the topic of the rhetoric of web design, so please keep that in mind as you move further along in the presentation. The target audience includes anyone who wants to design a class web site with Wordpress, but many of the principles I cover apply to any type of web site.
  3. 3. PART 1:Anatomy of a Wordpress siteapplies to as well as self-hosted
  4. 4. Wordpress Components (1) Architecture - set by CMS (2) Design - set by theme designer, mostly - with some input by you (3) Content - all yours
  5. 5. (1) Architecture CMS makes use of templates written in PHP templates provide layout by assembling all the parts “on the fly” (dynamic) - parts: header, content, sidebar(s), footer knowledgeable user can customize templates most web sites follow a similar architecture to that used by Wordpress
  6. 6. (2) Design Controlled by theme: PHP templates + CSS PHP Templates - header, content, sidebar, footer - index, posts, page, archives, & more CSS - “cascading style sheet” (defines how HTML elements will appear) - controls colors, font type, font size, heading level formatting, spacing, backgrounds, link styles, and much more
  7. 7. This is whatPHP looks like
  8. 8. This is what CSS looks like
  9. 9. To illustrate what themes do:The next slide shows a “demo”Wordpress blog with the defaulttheme, Twenty Ten, activated.
  10. 10. And now, the same website with the CSS disabled.
  11. 11. WARNING!Naked web site coming up.
  12. 12. NOTE: This is the “raw” text for the sidebar. It appears further down thepage without a CSS file as it’s the CSS that makes it “float right”
  13. 13. Next up... A trip through a variety ofthemes, to see how they eachchange the look and feel of the site.
  14. 14. As you view each, consider:• How does the theme impact the message?• What does the theme say about the site’s content?• ... about the designer?
  15. 15. Each screen shot you just sawcontained the same content, with different themes. Just as a reminder, here’s the original default theme again.
  16. 16. (3) ContentThe content is all yours!  Text you write in posts, pages, and text widgets  Content you embed (images, videos, slideshows, etc.)  Links you provide in the sidebar  Categories and tags you create to organize material
  17. 17. KEY POINT: Content is separate fromarchitecture and design.  If you change those (by picking a new theme), you’ll change how your content appears.  But you won’t change the content itself.
  18. 18. The separation of content from designand layout is what enabled the Web 2.0 revolution. Now anyone can be a web author, without needing to be a web designer.
  19. 19. But we’re not exactly at “web writing for dummies” level yet.Apps that take too much control over the design and layout simply aren’t popular (like Microsoft Front Page... yuck!)
  20. 20. Wordpress soared above all theother options because it still allows you a fair degree of choice The software is open source, soyou’re free to tinker with it... a little bit or a lot!
  21. 21. You don’t have to understand how to build a web site from scratch in HTML, PHP, and CSS. But you might find it helpful to learn a few HTML and CSS basics.(CSS modification is not an option on the free version of
  22. 22. To apply HTML formatting to a pieceof text, you put codes around the text inside of angle brackets.The code before the passage says“start doing x” and the code after itsays “stop doing x” (as indicated by the / )
  23. 23. For example: <strong>This will be bold</strong> <em>This will be italicized</em> <p>This will be a paragraph</p><h2>This will be header level 2</h2>
  24. 24. Making a hyperlink: <a href=>Contact Amy</a>You can use the link tool to create a hyperlink in a post or page.But knowing the HTML allows you to create ahyperlink in a text widget or comment box as well.
  25. 25. If HTML seems toocomplicated, that’s perfectly fine. Ignore it for now.Later knowing the basics of HTML will come in handy, especially for troubleshooting.
  26. 26. PART 2:Design Considerationswhat can you do within the constraints of Wordpress?
  27. 27. Architecture: HeaderCan’t change:  basic framework  exact layout and formattingCan change:  title, subtitle, content of top navigation menu, etc.
  28. 28. Architecture: ContentCan change:  what goes in posts and pages  text, formatting, images, links, etc.  subject lines, date published, visibility  what displays on main page (recent posts or page)Can’t change:  meta data included in each post (function of theme)
  29. 29. Architecture: SidebarCan change:  placement and settings for widgets  sometimes also number and placement of sidebarsCan’t change:  what the widgets can and can’t do
  30. 30. Architecture: FooterCan’t change:  Standard text included on footerCan change:  Some themes allow you to add your own custom text  Some also have footer widgets enabled
  31. 31. Design Controlled by theme  may have custom options With access to CSS, you can make many changes, both on the site as a whole and in individual posts and pages  FYI: free does not give access to CSS, but does
  32. 32. More to come! More on the theme of design, coming soon...
  33. 33. PART 3:Rhetorical Considerationsit always comes back to audience
  34. 34. Priority #1: Your Audiencereadability and usability first  who are your target readers?  what are their reading habits? Principle: the less motivated a reader is to read your content, the easier you should make it find
  35. 35. Site Navigation What goes on the page menu?  should it have drop-downs? What goes on the sidebar menus?  placement and labels impact meaning Can visitors search the site? If students can post entries, is it clear to them how to log in?
  36. 36. Categories By design, blog posts go into categories, but there are many creative ways to use them  Tip: Try to limit yourself to one category per post and let tags do the rest of the work How to organize your info? Give yourself room to grow.  Tip: Nancy has students suggest new categories You simply won’t get the categories right the first time!
  37. 37. Tags Tags are keywords associated with content that show up on individual posts More importantly, tags can be displayed in a Tag Cloud in the sidebar What is the rhetorical purpose of a Tag Cloud?
  38. 38. What is the rhetorical purpose? Every element of your web site has a rhetorical purpose  The question is: are you paying attention to that purpose?  If you ask students to design web sites, make sure they pay attention
  39. 39. Consider the rhetorical purpose of:  subject lines  categories  tags  formatting  header images  file names  the theme’s design elements
  40. 40. Examples The slides that follow feature screen shots of a variety of web sites designed by my students and me, which we discussed in the workshop. The first example provides an “anatomy lesson” in how to build a class blog.
  41. 41. Site Title Page Menu Header ImageLinks Sticky PostMenu Categori Post Title Text esWidget Author’s Avatar + post meta dataArchive Tag Cloud
  42. 42. COPYRIGHT NOTICEAll the material on these slides is the sole property of Amy Goodloe © 2011 all rights reserved Do not use without permission!
  43. 43. Under development! I will continue working on these presentation notes and may also add an audio voiceover in the future. If you have any questions or comments, please feel free to contact me at: