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

WordPress 3.0: Beyond the Blog

  • 8,553 views
Uploaded 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. …

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.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
8,553
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
10

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