WordPress 101 Structure, themes, functionality
What is WordPress? WordPress  is an open source blog tool and publishing platform powered by PHP and MySQL. It's often customized into a Content Management System (CMS). It has many features including a plug-in architecture and a template system. From Wikipedia, the free encyclopedia
Different Flavors of WordPress Wordpress.com  –  Set up a site for free and start blogging! Limited template choices  Restricted plug-in use  Non-commercial only Limited traffic allowed Yourdomain.wordpress.com
Different Flavors of WordPress Wordpress.org  –  Install the software on your hosting server – many hosts have a quick way to do this through the control panel Download the software and install it to your local machine. (Will need Apache server, xampp, wamp, mamp) Famous less than 5 minute install (after DB has been configured) Almost unlimited design and functionality options Keep it updated! Recommend using a pro to get things designed and setup. Coding knowledge is necessary.
WP as a CMS Clients can log in and edit/create blog  posts or pages for their sites easily.
Posts and Pages Pages   - for most of the regular “static” pages of the site, i.e. Home, Contact, About Pages can be edited and changed at any time They generally do not have dates attached to them Posts  – for the “blog”  “ Dynamic”, because of comments and Default at Latest First All posts show up in a list
Custom Post Types With programming knowledge, the back-end can be customized for users and “custom post-types” can be created. Custom post types can be configured to suit the need Product pages Chamber of Commerce members Real-estate listings Wherever you need a specific type of entry with the formatting locked down Or multiple blog types are needed
What are Themes? Themes control the Look, Feel and Functionality of a WordPress site.  Ready-made themes  wordpress.org/extend/themes/ - free themeforest.net/category/wordpress - $20-50 woothemes.com – subscription pricing Carefully investigate the documentation and support before purchase. Themes can be built from scratch  Child themes can be built based on a parent (Recommended!)
Theme Files
Theme Structure All of these files connect to the  mySQL  database. That’s where the content lives.  Widgets  are containers that mostly live in the sidebar, but can be in the footer or header too! Style.css  controls the look of everything. widget widget (Where the “Loop” happens)
Core Theme Files *Index.php  – the Blog home page. Many posts in a list, or latest post or excerpts depending on the code. *Style.css  – The heart of the theme   Single.php  – Single blog post. Page.php  – Static pages Different template page files can be made Sidebar ,  Footer  &  Header  – just what they should be Archive ,  Comments ,  Search  – don’t generally need to edit Functions  – may need to add code for specific needs Put a comment at the top of each file so you can see which one you’re dealing with, very helpful! ( <!--header--> )
Style.css This is the code that makes your theme readable to WP. /*  Theme Name: Sones de Mexico Theme URI: http://beckydavisdesign.com Description: Sones de Mexico Author: Becky Davis Version: 1.0 */
CSS The heart of how the design works Best practice CSS applies If creating a child theme, remember the cascade! Child style.css will overwrite parent Use Firebug to see native WP classes that you may want to style (.entry-title etc.)
Modifying a Ready-made Theme Play surgeon and take it apart Twentyeleven Theme is very well documented and an excellent parent Create new art that matches the exact dimensions and name of the original Add or change widgets/plug-ins for different functionality  Create a Child theme, based on a parent
Creating a Theme from Scratch It’s all about the CSS, images and plug-in functionality Page.php and index.php will have the html divs you want around the “loop” Create header and other images as you normally would CSS decides size and placement of divs and background images as with any site Plug-ins give you the flexibility/functionality you need for the site Themes can be created as an “add-on” to an existing regular site
Images Images specific to the Theme (referenced in the stylesheet) go in the wp-content/themes/name-of-theme/images folder The newest themes allow the header and background images to be changed by the user. Images uploaded within WP editor for a specific page get put in the Uploads folder WP will re-size, but all uploaded images should be “saved for web” and sized appropriately first!
Plug-ins & Widgets Widgets come from Plug-ins, not all Plug-ins create Widgets. Plug-ins create functionality: Backup, slideshow, add videos, create forms Widgets are modules that can be placed in certain locations, like the sidebar. Forms, twitter feed, testimonials, shopping cart Available on wordpress.org/extend/plugins Look for ratings, last update, popularity If one doesn’t work, try another!
Plug-ins Over 6,000 to choose from, test and play! WordPress SEO Google Analytics for WordPress  Si-contact form Wp-db-backup Vipers video quicktags Photospace Dynamic Widgets Custom Post Type UI Cart 66 Widget Context
Examples of WP sites Zhuliajewels.com – ecommerce, custom post type for products Gailzelitzky.com  - multiple footers Belmontcentral.org – custom post type for members Newageprep.com Lionelhandbags.com - ecommerce Glenellynmoving.com 2011.chicago.wordcamp.org Clementsbenefits.com Rbbrenner.com – classic blog w/ fancy sidebar
Further Resources http://codex.wordpress.org/Main_Page  - Excellent documentation http://wordpress.org/extend/  - Plugins, themes etc. http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-wordpress-themes-huh/  - Stupidest title, best step by step tutorial. Assumes you have little html/css/php knowledge. Smashing WordPress by Hedengren Digging into WordPress by Coyier and Starr
Contact 773-809-5640 [email_address] beckydavisdesign.com (also a WordPress site, of course!)

W pthemes

  • 1.
    WordPress 101 Structure,themes, functionality
  • 2.
    What is WordPress?WordPress  is an open source blog tool and publishing platform powered by PHP and MySQL. It's often customized into a Content Management System (CMS). It has many features including a plug-in architecture and a template system. From Wikipedia, the free encyclopedia
  • 3.
    Different Flavors ofWordPress Wordpress.com – Set up a site for free and start blogging! Limited template choices Restricted plug-in use Non-commercial only Limited traffic allowed Yourdomain.wordpress.com
  • 4.
    Different Flavors ofWordPress Wordpress.org – Install the software on your hosting server – many hosts have a quick way to do this through the control panel Download the software and install it to your local machine. (Will need Apache server, xampp, wamp, mamp) Famous less than 5 minute install (after DB has been configured) Almost unlimited design and functionality options Keep it updated! Recommend using a pro to get things designed and setup. Coding knowledge is necessary.
  • 5.
    WP as aCMS Clients can log in and edit/create blog posts or pages for their sites easily.
  • 6.
    Posts and PagesPages - for most of the regular “static” pages of the site, i.e. Home, Contact, About Pages can be edited and changed at any time They generally do not have dates attached to them Posts – for the “blog” “ Dynamic”, because of comments and Default at Latest First All posts show up in a list
  • 7.
    Custom Post TypesWith programming knowledge, the back-end can be customized for users and “custom post-types” can be created. Custom post types can be configured to suit the need Product pages Chamber of Commerce members Real-estate listings Wherever you need a specific type of entry with the formatting locked down Or multiple blog types are needed
  • 8.
    What are Themes?Themes control the Look, Feel and Functionality of a WordPress site. Ready-made themes wordpress.org/extend/themes/ - free themeforest.net/category/wordpress - $20-50 woothemes.com – subscription pricing Carefully investigate the documentation and support before purchase. Themes can be built from scratch Child themes can be built based on a parent (Recommended!)
  • 9.
  • 10.
    Theme Structure Allof these files connect to the mySQL database. That’s where the content lives. Widgets are containers that mostly live in the sidebar, but can be in the footer or header too! Style.css controls the look of everything. widget widget (Where the “Loop” happens)
  • 11.
    Core Theme Files*Index.php – the Blog home page. Many posts in a list, or latest post or excerpts depending on the code. *Style.css – The heart of the theme Single.php – Single blog post. Page.php – Static pages Different template page files can be made Sidebar , Footer & Header – just what they should be Archive , Comments , Search – don’t generally need to edit Functions – may need to add code for specific needs Put a comment at the top of each file so you can see which one you’re dealing with, very helpful! ( <!--header--> )
  • 12.
    Style.css This isthe code that makes your theme readable to WP. /* Theme Name: Sones de Mexico Theme URI: http://beckydavisdesign.com Description: Sones de Mexico Author: Becky Davis Version: 1.0 */
  • 13.
    CSS The heartof how the design works Best practice CSS applies If creating a child theme, remember the cascade! Child style.css will overwrite parent Use Firebug to see native WP classes that you may want to style (.entry-title etc.)
  • 14.
    Modifying a Ready-madeTheme Play surgeon and take it apart Twentyeleven Theme is very well documented and an excellent parent Create new art that matches the exact dimensions and name of the original Add or change widgets/plug-ins for different functionality Create a Child theme, based on a parent
  • 15.
    Creating a Themefrom Scratch It’s all about the CSS, images and plug-in functionality Page.php and index.php will have the html divs you want around the “loop” Create header and other images as you normally would CSS decides size and placement of divs and background images as with any site Plug-ins give you the flexibility/functionality you need for the site Themes can be created as an “add-on” to an existing regular site
  • 16.
    Images Images specificto the Theme (referenced in the stylesheet) go in the wp-content/themes/name-of-theme/images folder The newest themes allow the header and background images to be changed by the user. Images uploaded within WP editor for a specific page get put in the Uploads folder WP will re-size, but all uploaded images should be “saved for web” and sized appropriately first!
  • 17.
    Plug-ins & WidgetsWidgets come from Plug-ins, not all Plug-ins create Widgets. Plug-ins create functionality: Backup, slideshow, add videos, create forms Widgets are modules that can be placed in certain locations, like the sidebar. Forms, twitter feed, testimonials, shopping cart Available on wordpress.org/extend/plugins Look for ratings, last update, popularity If one doesn’t work, try another!
  • 18.
    Plug-ins Over 6,000to choose from, test and play! WordPress SEO Google Analytics for WordPress Si-contact form Wp-db-backup Vipers video quicktags Photospace Dynamic Widgets Custom Post Type UI Cart 66 Widget Context
  • 19.
    Examples of WPsites Zhuliajewels.com – ecommerce, custom post type for products Gailzelitzky.com - multiple footers Belmontcentral.org – custom post type for members Newageprep.com Lionelhandbags.com - ecommerce Glenellynmoving.com 2011.chicago.wordcamp.org Clementsbenefits.com Rbbrenner.com – classic blog w/ fancy sidebar
  • 20.
    Further Resources http://codex.wordpress.org/Main_Page - Excellent documentation http://wordpress.org/extend/ - Plugins, themes etc. http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-wordpress-themes-huh/ - Stupidest title, best step by step tutorial. Assumes you have little html/css/php knowledge. Smashing WordPress by Hedengren Digging into WordPress by Coyier and Starr
  • 21.
    Contact 773-809-5640 [email_address]beckydavisdesign.com (also a WordPress site, of course!)

Editor's Notes