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.
WordPress 3.0:
Beyond the Blog
James Coletti
Nov 6, 2010 - 1:30pm
NE{UX}
1
Monday, November 8, 2010
Today’s Discussion
• What is WordPress and how it is used
• Core features of WordPress
• WordPress architecture
• A Tour o...
What is WordPress?
• Blogging software
• Content management system (CMS)
• Engine
3
‣ Membership / Paid Content
‣ E-commer...
Flavors of WordPress
4
WordPress.com
• Hosted by Automattic, no server needed
• Limited selection of themes & plugins
• Ba...
What can you do with WordPress?
5
1
Monday, November 8, 2010
What can you do with WordPress?
6
2
Monday, November 8, 2010
What can you do with WordPress?
7
3
Monday, November 8, 2010
What can you do with WordPress?
8
4
Monday, November 8, 2010
What can you do with WordPress?
9
5
Monday, November 8, 2010
Features of WordPress
• Control panel
(web-based & mobile)
• Users & profiles
(authentication & roles)
• Content types
• Ta...
Architecture of WordPress
11
1
WordPress
• Posts & Pages
• Comments
• Links
• Options/Settings
• Taxonomy
• Users
• WordPr...
Architecture of WordPress
12
2
wordpress.zip
wp-admin/
wp-content/
wp-includes/
wp-app.php
readme.html
wp-signup.php
xmlrp...
Architecture of WordPress
13
3
wp-content/
themes/
twentyten/
mytheme1/
plugins/
akismet/
wp_e-commerce/
uploads/
2010/
11...
Tour: Login
14
You can customize these pages with plugins!
Monday, November 8, 2010
Tour: Dashboard
15
Monday, November 8, 2010
Tour: Post List
16
Monday, November 8, 2010
Tour: Add/Edit Post
17
Monday, November 8, 2010
Tour: Themes
18
Monday, November 8, 2010
Tour: Widgets
19
Monday, November 8, 2010
Tour: Menus
20
Monday, November 8, 2010
Tour: Additional Functions
21
Static pages (post vs. page; taxonomy & hierarchical)
Custom content type(s)
Plugin-specific ...
Themes: The Designer’s Dream
• A theme is a skin for your website
• Separation between the data layer and presentation lay...
Barebones WordPress Theme
23
/*
Theme Name: My Theme
Theme URI: http://mysite.org/mytheme
Description: Description of my t...
Barebones WordPress Theme
24
2
Monday, November 8, 2010
Elements of a Theme
25
Required Base Additional
style.css
index.php
header.php
footer.php
comments.php
sidebar.php
page.ph...
“The Loop”
• WordPress builds a query for “the loop” based on the requests it receives.
‣ Category: http://mysite.org/tech...
Customize the Loop
27
<?php query_posts($query_string . '&posts_per_page=5&orderby=title&order=ASC') ?>
// run through the...
Customize the Loop
28
2
Monday, November 8, 2010
Multiple Loops
29
...
// first loop finished above
// start a second loop...
<?php $my_query = new WP_Query('category_name...
Child Themes
• Inherit the functionality of a parent theme
• Child Themes typically override:
‣ style.css (replaces, use @...
WordPress Multi-Site
• Originally WordPress and WordPress Multi-User (MU)
• Multi-Site functionality was merged into WordP...
Additional Resources
• WordPress Codex (Template Tags, loop query parameters, etc.)
• WordPress-related blogs
WPRecipes.co...
Book: Digging into WordPress
33
Monday, November 8, 2010
Boston WordPress Meetup
• Monthly meetups at NERD, last Monday of every
month
• 675+ members
• 3rd largest WordPress Meetu...
Thank You
35
Questions?
James Coletti
Twitter: @jamescoletti http://modalmachine.com
Monday, November 8, 2010
Upcoming SlideShare
Loading in …5
×

WordPress 3.0: Beyond the Blog

11,602 views

Published on

Provides an introduction to WordPress, it's flavors, features, architecture, and benefits, and then a deeper look into the concept of themes, and a few WordPress 3.0 features.

Presented at New England UX conference on 11/06/2010, at Microsoft New England Research & Development Center in Cambridge, MA.

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

WordPress 3.0: Beyond the Blog

  1. 1. WordPress 3.0: Beyond the Blog James Coletti Nov 6, 2010 - 1:30pm NE{UX} 1 Monday, November 8, 2010
  2. 2. Today’s Discussion • What is WordPress and how it is used • Core features of WordPress • WordPress architecture • A Tour of WordPress • Themes: The Designer’s Dream ‣ Architecture of a theme ‣ “The Loop” & Additional Theme Functionality ‣ Child Themes • WordPress Multi-Site • Closing remarks & questions 2 Monday, November 8, 2010
  3. 3. What is WordPress? • Blogging software • Content management system (CMS) • Engine 3 ‣ Membership / Paid Content ‣ E-commerce ‣ Job Boards ‣ Business Directories ‣ Discussion Forums ‣ Wiki ‣ Product Reviews ‣ Social Network Monday, November 8, 2010
  4. 4. Flavors of WordPress 4 WordPress.com • Hosted by Automattic, no server needed • Limited selection of themes & plugins • Basic sites are free, paid add-ons available • Self-hosted (your own server) • Complete control (themes, plugins, etc.) • Open source and completely free WordPress.org ✓ Monday, November 8, 2010
  5. 5. What can you do with WordPress? 5 1 Monday, November 8, 2010
  6. 6. What can you do with WordPress? 6 2 Monday, November 8, 2010
  7. 7. What can you do with WordPress? 7 3 Monday, November 8, 2010
  8. 8. What can you do with WordPress? 8 4 Monday, November 8, 2010
  9. 9. What can you do with WordPress? 9 5 Monday, November 8, 2010
  10. 10. Features of WordPress • Control panel (web-based & mobile) • Users & profiles (authentication & roles) • Content types • Taxonomy (content organization) • Media management • Link management 10 • Built-in SEO* • Comments • Themes & widgets • Plugins • Feeds • API How does WordPress make my life/job easier? Monday, November 8, 2010
  11. 11. Architecture of WordPress 11 1 WordPress • Posts & Pages • Comments • Links • Options/Settings • Taxonomy • Users • WordPress Core • Themes • Plugins • File Uploads Remember for backup! Monday, November 8, 2010
  12. 12. Architecture of WordPress 12 2 wordpress.zip wp-admin/ wp-content/ wp-includes/ wp-app.php readme.html wp-signup.php xmlrpc.php wp-login.php wp-mail.php wp-config-sample.php wp-comments-post.php wp-settings.php wp-feed.php wp-activate.php wp-links-opml.php wp-cron.php wp-load.php wp-trackback.php wp-pass.php license.txt wp-atom.php wp-commentsrss2.php wp-rdf.php wp-rss.php wp-rss2.php index.php wp-blog-header.php wp-register.php Monday, November 8, 2010
  13. 13. Architecture of WordPress 13 3 wp-content/ themes/ twentyten/ mytheme1/ plugins/ akismet/ wp_e-commerce/ uploads/ 2010/ 11/ photo1.jpg photo2.jpg Monday, November 8, 2010
  14. 14. Tour: Login 14 You can customize these pages with plugins! Monday, November 8, 2010
  15. 15. Tour: Dashboard 15 Monday, November 8, 2010
  16. 16. Tour: Post List 16 Monday, November 8, 2010
  17. 17. Tour: Add/Edit Post 17 Monday, November 8, 2010
  18. 18. Tour: Themes 18 Monday, November 8, 2010
  19. 19. Tour: Widgets 19 Monday, November 8, 2010
  20. 20. Tour: Menus 20 Monday, November 8, 2010
  21. 21. Tour: Additional Functions 21 Static pages (post vs. page; taxonomy & hierarchical) Custom content type(s) Plugin-specific menus User, role & profile management Import & export your data between sites Monday, November 8, 2010
  22. 22. Themes: The Designer’s Dream • A theme is a skin for your website • Separation between the data layer and presentation layer • Front-end: HTML, CSS, JavaScript, images, and some PHP • Themes can also add functionality to WordPress ‣ Custom content types (a “Cake” for a bakery website) ‣ Custom taxonomies (flavors & occasions) ‣ Custom widgets (search box) 22 Monday, November 8, 2010
  23. 23. Barebones WordPress Theme 23 /* Theme Name: My Theme Theme URI: http://mysite.org/mytheme Description: Description of my theme. Author: James Version: 1.0 */ html { } body { } ... style.css <html> <body> <h1>Hello</h1> </body> </html> index.php wp-content/themes/mytheme 1 Monday, November 8, 2010
  24. 24. Barebones WordPress Theme 24 2 Monday, November 8, 2010
  25. 25. Elements of a Theme 25 Required Base Additional style.css index.php header.php footer.php comments.php sidebar.php page.php single.php archive.php 404.php author.php author-[nickname].php category.php sidebar-[name].php category-[id].php functions.php home.php page-[name].php taxonomy-[name].php screenshot.png ... These files override the default WordPress templates. Monday, November 8, 2010
  26. 26. “The Loop” • WordPress builds a query for “the loop” based on the requests it receives. ‣ Category: http://mysite.org/tech Find all published posts in the category “Tech” ordered most recent first. ‣ Specific Post: http://mysite.org/2010/11/06/welcome-to-design-camp Find the specific published post with URL slug “welcome-to-design-camp” ‣ Home*: http://mysite.org Configure WordPress to show a series of posts, a static page, your home.php file, etc. 26 Monday, November 8, 2010
  27. 27. Customize the Loop 27 <?php query_posts($query_string . '&posts_per_page=5&orderby=title&order=ASC') ?> // run through the loop <?php if ( have_posts() ): ?> <?php while ( have_posts() ): the_post(); ?> <h2><?php the_title(); ?></h2> <div class=”categories”>Posted in: <?php the_category(', '); ?></div> <div class=”content”> <?php the_content(); ?> </div> <?php endwhile; ?> <?php else: ?> No posts found! <?php endif; ?> category.php 1 Monday, November 8, 2010
  28. 28. Customize the Loop 28 2 Monday, November 8, 2010
  29. 29. Multiple Loops 29 ... // first loop finished above // start a second loop... <?php $my_query = new WP_Query('category_name=special_cat&posts_per_page=3'); ?> <?php while ($my_query->have_posts()) : $my_query->the_post(); ?> <!-- show 3 posts from “special_cat” --> <?php endwhile; ?> category.php Monday, November 8, 2010
  30. 30. Child Themes • Inherit the functionality of a parent theme • Child Themes typically override: ‣ style.css (replaces, use @import to extend) ‣ functions.php (extends, loaded before parent) ‣ Templates of the parent • A good way to modify third party themes without hacking the original code • Provide several “flavors” of a parent theme 30 Monday, November 8, 2010
  31. 31. WordPress Multi-Site • Originally WordPress and WordPress Multi-User (MU) • Multi-Site functionality was merged into WordPress 3.0 • Operate a network of related WordPress sites from a single dashboard ‣ Subdomains: http://games.mysite.org, http://music.mysite.org, ... ‣ Subdirectories: http://mysite.org/james, http://mysite.org/kurt, ... • Super admins can administer all websites, site admins administer a single website 31 Monday, November 8, 2010
  32. 32. Additional Resources • WordPress Codex (Template Tags, loop query parameters, etc.) • WordPress-related blogs WPRecipes.com, WPTavern.com, ... • WordPress video tutorials from the source: http://wordpress.tv • WordPress.org free theme & plugin directories - submit your work here! • Commercial themes: custom admin panels & premium support WooThemes, ThemeForest, StudioPress, ElegantThemes, Press75 • Theme frameworks: video tutorials and extensive documentation Thesis, Genesis, Hybrid, Headway 32 Monday, November 8, 2010
  33. 33. Book: Digging into WordPress 33 Monday, November 8, 2010
  34. 34. Boston WordPress Meetup • Monthly meetups at NERD, last Monday of every month • 675+ members • 3rd largest WordPress Meetup in the U.S. • Support forums & job board • Past presentation slides & videos available online • Free pizza! • http://bostonwp.org 34 Monday, November 8, 2010
  35. 35. Thank You 35 Questions? James Coletti Twitter: @jamescoletti http://modalmachine.com Monday, November 8, 2010

×