WordPress as a CMS
Contact Information http://mattwalters.net/ http://twitter.com/mwalters/ [email_address]
WordPress as a CMS WordPress is not  just for Blogging (although it kicks ass at that too)
WordPress as a CMS Pages (with hierarchy) Posts News Articles / Site Blog Themes, Plugins, Sidebars, Custom fields Sidebars & Widgets Handle various media (images, etc) Ajax content
WordPress as a CMS http://www.eye.fi/
WordPress as a CMS http://www.evsc.virginia.edu/
Shockoe Valley Heights WordPress as a CMS
WordPress as a CMS
 
Shockoe Valley Heights
 
WordPress as a CMS Shockoe Valley Heights
 
Shockoe Valley Heights
 
So how long does it take? Setup Procedures – 1.13 hours Local + Staging environment Subversion Repository Theme Development – 6.01 hours PSD Cutup Theme coding Custom widgets Cross browser testing
Recommended Plugins WP Super Cache / W3 Total Cache Plugin Akismet Google Sitemap Generator All In One SEO Pack Analytics 360 WordPress File Monitor WordPress Backup / WP DB Backup
Theme Structure Anatomy of a Theme
Required Files Style.css Contains theme meta data Name Author etc... Can contain styling for site Index.php Logic / Display of content
Theme Structure Functions.php Contains custom functionality for theme Can be procedural or Object Oriented Can include plugin-like code Create settings page in admin area Apply filters Perform actions Bundle plugins with theme etc...
Theme Structure Template Hierarchy Diagram
Theme Development Template Hierarchy Diagram
Theme Structure Child Themes Style.css Template: <define parent theme> Other fields are same as a parent theme Child theme template files override that of parent theme Parent templates are inherited by child theme
Template Files Base template structure get_header() Includes header.php from theme directory The Loop Display content / perform logic get_sidebar() Includes sidebar.php from theme directory get_footer() Includes footer.php from theme directory
Template Files The Loop Required in template files to display dynamic content Displays Posts/Pages Provides easy access to content data the_title() the_content() the_excerpt() the_permalink() the_tags/category etc ...
Data Storage Custom Fields Two Components Name / Value – Basically  key/value pair Example Usage: Serve as a data source for Ajax content Provide multiple content areas for a page
Data Storage Using Custom Fields get_post_meta($post_id, $key, [boolean]) $post_id = Primary key for Post/Page $key = &quot;Name&quot; for custom field [boolean] is optional True: Returns single string for $key False: Returns array witch values for each $key matched
Theme Considerations Front End Development Best Practices Keep CSS in one file included via <link> in the header Keep Javascript in one file included in the footer Use image sprites if possible Use shorthand (padding vs padding-left/right) Minify CSS/JavaScript if possible Use appropriate compression for images
Theme Resources WordPress Codex http://codex.wordpress.org/ Best Practices for distributing themes Avoid packaging plugins Support PHP 4 if possible :( No paid advertisement
Theme Frameworks Carrington Takes context to the next level. Under active development by reputable firm. Sandbox Easy to get started with. Follows typical WordPress template structure.
Repository Structure
Theme Development Questions? http://mattwalters.net/ http://twitter.com/mwalters/ [email_address] (or funny jokes?)

WordPress as a CMS v2

  • 1.
  • 2.
    Contact Information http://mattwalters.net/http://twitter.com/mwalters/ [email_address]
  • 3.
    WordPress as aCMS WordPress is not just for Blogging (although it kicks ass at that too)
  • 4.
    WordPress as aCMS Pages (with hierarchy) Posts News Articles / Site Blog Themes, Plugins, Sidebars, Custom fields Sidebars & Widgets Handle various media (images, etc) Ajax content
  • 5.
    WordPress as aCMS http://www.eye.fi/
  • 6.
    WordPress as aCMS http://www.evsc.virginia.edu/
  • 7.
    Shockoe Valley HeightsWordPress as a CMS
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
    WordPress as aCMS Shockoe Valley Heights
  • 13.
  • 14.
  • 15.
  • 16.
    So how longdoes it take? Setup Procedures – 1.13 hours Local + Staging environment Subversion Repository Theme Development – 6.01 hours PSD Cutup Theme coding Custom widgets Cross browser testing
  • 17.
    Recommended Plugins WPSuper Cache / W3 Total Cache Plugin Akismet Google Sitemap Generator All In One SEO Pack Analytics 360 WordPress File Monitor WordPress Backup / WP DB Backup
  • 18.
  • 19.
    Required Files Style.cssContains theme meta data Name Author etc... Can contain styling for site Index.php Logic / Display of content
  • 20.
    Theme Structure Functions.phpContains custom functionality for theme Can be procedural or Object Oriented Can include plugin-like code Create settings page in admin area Apply filters Perform actions Bundle plugins with theme etc...
  • 21.
    Theme Structure TemplateHierarchy Diagram
  • 22.
    Theme Development TemplateHierarchy Diagram
  • 23.
    Theme Structure ChildThemes Style.css Template: <define parent theme> Other fields are same as a parent theme Child theme template files override that of parent theme Parent templates are inherited by child theme
  • 24.
    Template Files Basetemplate structure get_header() Includes header.php from theme directory The Loop Display content / perform logic get_sidebar() Includes sidebar.php from theme directory get_footer() Includes footer.php from theme directory
  • 25.
    Template Files TheLoop Required in template files to display dynamic content Displays Posts/Pages Provides easy access to content data the_title() the_content() the_excerpt() the_permalink() the_tags/category etc ...
  • 26.
    Data Storage CustomFields Two Components Name / Value – Basically key/value pair Example Usage: Serve as a data source for Ajax content Provide multiple content areas for a page
  • 27.
    Data Storage UsingCustom Fields get_post_meta($post_id, $key, [boolean]) $post_id = Primary key for Post/Page $key = &quot;Name&quot; for custom field [boolean] is optional True: Returns single string for $key False: Returns array witch values for each $key matched
  • 28.
    Theme Considerations FrontEnd Development Best Practices Keep CSS in one file included via <link> in the header Keep Javascript in one file included in the footer Use image sprites if possible Use shorthand (padding vs padding-left/right) Minify CSS/JavaScript if possible Use appropriate compression for images
  • 29.
    Theme Resources WordPressCodex http://codex.wordpress.org/ Best Practices for distributing themes Avoid packaging plugins Support PHP 4 if possible :( No paid advertisement
  • 30.
    Theme Frameworks CarringtonTakes context to the next level. Under active development by reputable firm. Sandbox Easy to get started with. Follows typical WordPress template structure.
  • 31.
  • 32.
    Theme Development Questions?http://mattwalters.net/ http://twitter.com/mwalters/ [email_address] (or funny jokes?)

Editor's Notes

  • #4 - Recent versions have added the concept of pages and a more robust administration area transforming WordPress into a full CMS - Themes, child themes and plugins have furthered this effort by allowing developers to extend WordPress even further to suit their needs - Special page templates can be defined to give pages custom layouts and can be combined with Custom Fields to allow for varying content areas on a page. - Widgets can allow easy administration of sidebar content
  • #5 Pages and Posts share many similarities. They can both have a title, content, custom data (fields, etc) associated with them Posts vary in that they can be tagged and categorized Many sites have a news section, and more often companies are wanting a blog. News articles are very similar to blog posts. Usually they have a title, content, a date posted. Powering news with a blogging engine just makes sense, and provides you tagging, categorization, comments and trackbacks Plugins, Themes, Sidebars/Widgets and Custom Fields are the key items that allow for extension of the core content management system WordPress is able to handle various types of media: images, mp3 files, etc. - All can be uploaded via the admin interface using the media management controls A properly structured theme can also handle serving of Ajax content. - Data loaded via Ajax can be stored via theme logic, plugin logic, or in custom fields inside of posts/pages.
  • #6 WordPress can be used for many different types of sites, from brochure sites up to more robust sites needing dynamic content. Functionality such as eCommerce is possible, although it&apos;s probably going to require a fair amount of custom development as no individual plugins have really taken off in popularity for it ... yet.
  • #7 Colleges are also using WordPress for their sites such as UVA&apos;s department of environmental sciences This is a very large site with many pages being administered via WordPress. WordPress can be used to dynamically generate things like drop down menu&apos;s since it understands the concept of parent and child pages. - When a page is added into the administration area it can automatically be added to the navigation of the site.
  • #15 Colleges are also using WordPress for their sites such as UVA&apos;s department of environmental sciences This is a very large site with many pages being administered via WordPress. WordPress can be used to dynamically generate things like drop down menu&apos;s since it understands the concept of parent and child pages. - When a page is added into the administration area it can automatically be added to the navigation of the site.
  • #19 WordPress templates are all about CONTEXT The context you are viewing content in drives the template engine View by: - author - tag - category - page - post - date - single post - etc The follow template may not be pretty, but it is the best representation of how the template system works
  • #20 Required for theme, WordPress looks for it by file name Defines meta data about your theme as well as styles Heading section contains several data points. These data points are used to populate links and data within the administration area
  • #21 Optional file for themes WordPress looks for it by file name Automatically loaded by WordPress during initialization Can be used to provide an administration page for your theme inside the WordPress admin to allow the user to specify options for your theme
  • #22 WordPress templates are all about CONTEXT The context you are viewing content in drives the template engine View by: - author - tag - category - page - post - date - single post - etc The follow template may not be pretty, but it is the best representation of how the template system works
  • #25 get_header() automatically looks for header.php within themes directory get_sidebar() automatically looks for sidebar.php within the themes directory get_footer() automatically looks for footer.php within the themes directory The Loop is really the core of content display inside of WordPress
  • #26 Loop is required within template files of WordPress tag.php, category.php, etc It is used to display the meat of the page data when loaded and is well documented in the codex. Within The Loop there are helper functions to easily display data related to the Post/Page
  • #29 The goal here is to allow the user to cache as much as possible. Little bit of trivia regarding HTTP. Browsers are supposed to only make 2 requests per single server at a given time. So the more files (css/images/javascript/html/flash/etc) on your page, the more connections have to be queued to download the information By combining CSS and JavaScript into one file (within reason) the user can get the file downloaded and allow other files to begin downloading at the same time. The same principle is at play with image spirites. For instance by having all of your nav items in one file, the browser can be downloading HTML or other content for the site while your nav is being downloaded as one file (instead of a different image for each nav item and potentially two versions of it ... active or inactive) Minifying CSS/JS, using shorthand in CSS and appropriate compression for images is just keeping in line with the goal of getting content as small as possible
  • #30 Codex is a wiki maintained by the community and a great resource for finding tutorials and in depth details about all things WordPress Packaging plugins causes dependency issues potentially on the user WordPress itself still supports PHP4 so while not necessary, it&apos;s best to support the platforms WordPress might be running on Especially if you plan to list your theme in the official WordPress theme directory, themes attempting to support themselves via paid advertisement placement are not allowed