• Save

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!

Like this? Share it with your network

Share

WordPress 3.0: Beyond the Blog

on

  • 8,574 views

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

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.

Statistics

Views

Total Views
8,574
Views on SlideShare
8,509
Embed Views
65

Actions

Likes
10
Downloads
0
Comments
0

6 Embeds 65

http://usmit.wordpress.com 26
http://steveyuen.org 16
http://int.blogtronix.com 12
http://blog.designcampboston.com 5
http://stevecyuen.wordpress.com 5
http://amersfoortmashup.componence.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

WordPress 3.0: Beyond the Blog Presentation Transcript

  • 1. 1 WordPress 3.0: Beyond the Blog James Coletti Nov 6, 2010 - 1:30pm NE{UX}
  • 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
  • 3. 3 What is WordPress?
  • 4. 3 What is WordPress? • Blogging software
  • 5. 3 What is WordPress? • Blogging software • Content management system (CMS)
  • 6. 3 What is WordPress? • Blogging software • Content management system (CMS) • Engine
  • 7. 3 What is WordPress? • Blogging software • Content management system (CMS) • Engine ‣ Membership / Paid Content ‣ Discussion Forums ‣ E-commerce ‣ Wiki ‣ Job Boards ‣ Product Reviews ‣ Business Directories ‣ Social Network
  • 8. 4 Flavors of WordPress
  • 9. 4 Flavors of WordPress WordPress.org • Self-hosted (your own server) • Complete control (themes, plugins, etc.) • Open source and completely free
  • 10. 4 Flavors of WordPress WordPress.org WordPress.com • Self-hosted (your own server) • Hosted by Automattic, no server needed • Complete control (themes, plugins, etc.) • Limited selection of themes & plugins • Open source and completely free • Basic sites are free, paid add-ons available
  • 11. 4 Flavors of WordPress ✓ WordPress.org WordPress.com • Self-hosted (your own server) • Hosted by Automattic, no server needed • Complete control (themes, plugins, etc.) • Limited selection of themes & plugins • Open source and completely free • Basic sites are free, paid add-ons available
  • 12. 5 What can you do with WordPress? 1
  • 13. 5 What can you do with WordPress? 1
  • 14. 6 What can you do with WordPress? 2
  • 15. 7 What can you do with WordPress? 3
  • 16. 8 What can you do with WordPress? 4
  • 17. 9 What can you do with WordPress? 5
  • 18. 10 Features of WordPress How does WordPress make my life/job easier?
  • 19. 10 Features of WordPress How does WordPress make my life/job easier? • Control panel (web-based & mobile) • Users & profiles (authentication & roles) • Content types • Taxonomy (content organization) • Media management • Link management
  • 20. 10 Features of WordPress How does WordPress make my life/job easier? • Control panel • Built-in SEO* (web-based & mobile) • Comments • Users & profiles (authentication & roles) • Themes & widgets • Content types • Plugins • Taxonomy (content organization) • Feeds • Media management • API • Link management
  • 21. 11 Architecture of WordPress 1 WordPress
  • 22. 11 Architecture of WordPress 1 • WordPress Core • Themes • Plugins • File Uploads WordPress
  • 23. 11 Architecture of WordPress 1 • Posts & Pages • WordPress Core • Comments • Themes • Links • Plugins • Options/Settings • File Uploads • Taxonomy • Users WordPress
  • 24. 11 Architecture of WordPress 1 • Posts & Pages • WordPress Core • Comments • Themes • Links • Plugins • Options/Settings • File Uploads • Taxonomy • Users WordPress Remember for backup!
  • 25. 12 Architecture of WordPress 2 wordpress.zip
  • 26. 12 Architecture of WordPress 2 wp-admin/ wp-links-opml.php wp-content/ wp-cron.php wp-includes/ wp-load.php wp-app.php wp-trackback.php readme.html wp-pass.php wp-signup.php license.txt xmlrpc.php wp-atom.php wp-login.php wp-commentsrss2.php wp-mail.php wp-rdf.php wordpress.zip wp-config-sample.php wp-rss.php wp-comments-post.php wp-rss2.php wp-settings.php index.php wp-feed.php wp-blog-header.php wp-activate.php wp-register.php
  • 27. 13 Architecture of WordPress 3 wp-content/
  • 28. 13 Architecture of WordPress 3 themes/ twentyten/ mytheme1/ plugins/ akismet/ wp_e-commerce/ uploads/ wp-content/ 2010/ 11/ photo1.jpg photo2.jpg
  • 29. 14 Tour: Login
  • 30. 14 Tour: Login You can customize these pages with plugins!
  • 31. 15 Tour: Dashboard
  • 32. 16 Tour: Post List
  • 33. 17 Tour: Add/Edit Post
  • 34. 18 Tour: Themes
  • 35. 19 Tour: Widgets
  • 36. 20 Tour: Menus
  • 37. 21 Tour: Additional Functions Static pages (post vs. page; taxonomy & hierarchical) Custom content type(s) Plugin-specific menus User, role & profile management Import & export your data between sites
  • 38. 22 Themes: The Designer’s Dream
  • 39. 22 Themes: The Designer’s Dream • A theme is a skin for your website
  • 40. 22 Themes: The Designer’s Dream • A theme is a skin for your website • Separation between the data layer and presentation layer
  • 41. 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
  • 42. 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
  • 43. 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)
  • 44. 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)
  • 45. 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)
  • 46. 23 Barebones WordPress Theme 1 wp-content/themes/mytheme style.css index.php /* <html> Theme Name: My Theme <body> Theme URI: http://mysite.org/mytheme <h1>Hello</h1> Description: Description of my theme. </body> Author: James </html> Version: 1.0 */ html { } body { } ...
  • 47. 24 Barebones WordPress Theme 2
  • 48. 24 Barebones WordPress Theme 2
  • 49. 24 Barebones WordPress Theme 2
  • 50. 25 Elements of a Theme Required Base Additional 404.php author.php author-[nickname].php header.php category.php footer.php sidebar-[name].php comments.php style.css category-[id].php sidebar.php index.php functions.php page.php home.php single.php page-[name].php archive.php taxonomy-[name].php screenshot.png ... These files override the default WordPress templates.
  • 51. 26 “The Loop” • WordPress builds a query for “the loop” based on the requests it receives.
  • 52. 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.
  • 53. 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”
  • 54. 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.
  • 55. 27 Customize the Loop 1 category.php
  • 56. 27 Customize the Loop 1 category.php <?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; ?>
  • 57. 28 Customize the Loop 2
  • 58. 29 Multiple Loops category.php
  • 59. 29 Multiple Loops category.php ... // 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; ?>
  • 60. 30 Child Themes
  • 61. 30 Child Themes • Inherit the functionality of a parent theme
  • 62. 30 Child Themes • Inherit the functionality of a parent theme • Child Themes typically override:
  • 63. 30 Child Themes • Inherit the functionality of a parent theme • Child Themes typically override: ‣ style.css (replaces, use @import to extend)
  • 64. 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)
  • 65. 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
  • 66. 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
  • 67. 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
  • 68. 31 WordPress Multi-Site • Originally WordPress and WordPress Multi-User (MU) • Multi-Site functionality was merged into WordPress 3.0
  • 69. 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
  • 70. 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, ...
  • 71. 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, ...
  • 72. 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
  • 73. 32 Additional Resources
  • 74. 32 Additional Resources • WordPress Codex (Template Tags, loop query parameters, etc.)
  • 75. 32 Additional Resources • WordPress Codex (Template Tags, loop query parameters, etc.) • WordPress-related blogs WPRecipes.com, WPTavern.com, ...
  • 76. 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
  • 77. 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!
  • 78. 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
  • 79. 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
  • 80. 33 Book: Digging into WordPress
  • 81. 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
  • 82. 35 Thank You Questions? James Coletti Twitter: @jamescoletti http://modalmachine.com