Wordpress Development Fsoss 2009


Published on

Not just a blog anymore! Focused on design and development. We’ll cover the essentials of setup and installation. We’ll learn how to build custom themes using CSS and PHP.We’ll also jump into custom code and template files, best practices for design and management, and how to build and install WP and custom plug-ins. We'll also look at the future of WordPress like mobile apps and themes.

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

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Wordpress Development Fsoss 2009

  1. 1. Development FSOSS 2009
  2. 2. full-time now!
  3. 3. What is ? … and it’s FREE
  4. 4. Where do I find ?
  5. 5. This number changes every few minutes. 8, 000, 000 People publish blogs on WordPress.com 200 million people visit one or more WordPress.com blogs every month.
  6. 6. , not just a blog anymore
  7. 13. Getting started
  8. 14. What you need PHP version 4.3 or greater MySQL version 4.0 or greater Creativity and Passion
  9. 15. Installing <ul><li>5 minute install , </li></ul><ul><li>really it’s that quick and easy! </li></ul>
  10. 16. Installing <ul><li>If installing locally </li></ul><ul><ul><li>Install a local server ( Mac: MAMP , PC: XAMPP or WAMP , LINUX: LAMP ). </li></ul></ul><ul><li>Create a new database. </li></ul><ul><li>Download WordPress from wordpress.org and extract the files to a new folder under the htdocs folder. </li></ul><ul><li>Rename the wp-config-sample.php file to wp-config.php and update the database details according to your local server. </li></ul><ul><li>Run wp-admin/install.php and follow the instructions to install WordPress. </li></ul><ul><li>Done! </li></ul>
  11. 17. Installing Update wp-config.php File
  12. 18. Installing Run install.php
  13. 19. Theming <ul><li>Create or download a Photoshop design. Create a static HTML+CSS template of each page . </li></ul>
  14. 20. Theming <ul><li>Why Create a Static HTML File First? </li></ul><ul><li>Mainly because it will make the development process a lot </li></ul><ul><li>easier. I usually create a HTML file for every template that I </li></ul><ul><li>need, test it across all browsers, validate both HTML and CSS </li></ul><ul><li>markups, then all I have to do is cut & paste the WordPress </li></ul><ul><li>code. By doing so, I don’t have to worry about HTML or CSS </li></ul><ul><li>bugs during my theme making process. </li></ul>
  15. 21. Theming How it all works If you go the default theme folder ( wp-content/themes/default ), you will see many PHP files (these are template files) and one style.css file. When you are viewing the front page, WordPress actually uses several template files to generate the page ( index.php << header.php , sidebar.php , and footer.php ).
  16. 22. Theming
  17. 23. Theming Splitting the file
  18. 24. Theming The Loop The Loop is used to display blog posts and it also lets you control what to display. Basically, The Loop checks if there are posts in your blog, while there are posts, display it, if no post found, say &quot;Not Found&quot;.
  19. 25. Theming <?php wp_list_cats('exclude=1'); ?> <?php wp_list_cats('exclude=1, 2'); ?> <?php the_content('Read the rest of this entry &raquo;'); ?> <div class=&quot;alignleft&quot;><?php next_posts_link('&laquo; Older Entries') ?></div> <div class=&quot;alignright&quot;><?php previous_posts_link('Newer Entries &raquo;') ?></div> Conditional Tags * See WordPress Codex- Conditional Tags
  20. 26. Theming Styles.css /* Theme Name: Theme NAME Theme URI: http://yoursite.com/ Description: My cool theme. Version: 1.6 Author: Brendan Sera-Shriar Author URI: http://dropthedigibomb.com */ body { … } H1, h2, h3 { … } #header { … } #content { … } #sidebar { … } #footer { … } .post { … } .comments { … } } This defines the template theme } Theme id’s and classes
  21. 27. Theming <ul><li>Loop Resources </li></ul><ul><li>The Loop in Action </li></ul><ul><li>Template Tags </li></ul><ul><li>Using the Loop in Template Files </li></ul><ul><li>Matt Read Loop Article </li></ul><ul><li>MaxPower Dynamic Sticky Tutorial </li></ul><ul><li>IfElse Query_post Redux </li></ul><ul><li>1001 WordPression Loops </li></ul><ul><li>Global Variables and the WordPress Loop </li></ul><ul><li>WordPress Triple Loop Tutorial </li></ul><ul><li>Multiple Loops with Multiple Columns </li></ul><ul><li>WordPress - modified, dependent and extra Loops </li></ul><ul><li>Super Loop: Exclude Categories and Limit Number of Posts </li></ul><ul><li>Easily Adaptable WordPress Loop Templates: Basic Loops, Mullet Loops, and More </li></ul>* See my presentation on WordPress Theme Design
  22. 28. Plugins and Widgets Plugins Plugins are tools to extend the functionality of WordPress . The core of WordPress is designed to be lean, to maximize flexibility and minimize code bloat . Plugins offer custom functions and features so that each user can tailor their site to their specific needs. Widgets WordPress Widgets (WPW) is like a plugin, but designed to provide a simple way to arrange the various elements of your sidebar content (known as &quot;widgets&quot;) without having to change any code. VS. “ Plug-ins can extend WordPress to do almost anything you can imagine.” -WordPress.org * See my presentation on WordPress Plugin Development
  23. 29. Plugins and Widgets if ( function_exists('register_sidebar') ) { register_sidebar(array( 'before_widget' => '<li id=&quot;%1$s&quot; class=&quot;widget %2$s&quot;>', 'after_widget' => '</li>', 'before_title' => '<h2 class=&quot;widgettitle&quot;>', 'after_title' => '</h2>', )); } Widgetizing a theme functions.php <?php /* Widgetized sidebar, if you have the plugin installed. */ if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?> Your widgets will show up here… <?php endif; ?> sidebar.php
  24. 30. Essential Plugins <ul><li>Ad Rotator - http://kpumuk.info/projects/wordpress-plugins/ad-rotator </li></ul><ul><li>Advanced Random Post - http://www.danielesalamina.it/advanced-random-post </li></ul><ul><li>AFD Admin Theme - http://aenonfiredesign.com/blog/afd-wordpress2-admin-theme </li></ul><ul><li>Akismet - http://akismet.com/ </li></ul><ul><li>All in One SEO Pack - http://semperfiwebdesign.com </li></ul><ul><li>Article Templates - http://www.bin-co.com/tools/wordpress/plugins/article_templates </li></ul><ul><li>Audio player - http://www.1pixelout.net/code/audio-player-wordpress-plugin </li></ul><ul><li>Blogroll Page - http://www.byte-me.org </li></ul><ul><li>Different Posts Per Page - http://www.maxblogpress.com/plugins/dppp </li></ul><ul><li>Disable WordPress Core Update - http://lud.icro.us/disable-wordpress-core-update </li></ul><ul><li>Executable PHP widget - http://wordpress.org/extend/plugins/php-code-widget </li></ul><ul><li>Kimili Flash Embed - http://www.kimili.com/plugins/kml_flashembed </li></ul><ul><li>Lightbox 2 - http://www.stimuli.ca/lightbox </li></ul><ul><li>Maintenance Mode - http://sw-guide.de/wordpress/plugins/maintenance-mode/ </li></ul><ul><li>myStatus - http://eightface.com/code/wp-mystatus </li></ul><ul><li>NextGEN Gallery - http://alexrabe.boelinger.com/?page_id=80 </li></ul>
  25. 31. Essential Plugins <ul><li>p2pConverter - http://www.briandgoad.com/blog/p2pConverter </li></ul><ul><li>Post2pdf - http://wordpress.org/extend/plugins/post2pdf </li></ul><ul><li>PXS Mail Form - http://www.phrixus.co.uk/pxsmail </li></ul><ul><li>QuickTime Embed - http://www.channel-ai.com/blog/plugins/quicktime-embed </li></ul><ul><li>Random Featured Post - http://www.mydollarplan.com/random-featured-post-plugin </li></ul><ul><li>Riffly Video/Audio Comments - http://riffly.com </li></ul><ul><li>Role Manager - http://www.im-web-gefunden.de/wordpress-plugins/role-manag er </li></ul><ul><li>Widget Logic - http://freakytrigger.co.uk/wordpress-setup </li></ul><ul><li>WordPress Database Backup - http://www.ilfilosofo.com/blog/wp-db-backup </li></ul><ul><li>Wordpress Download Monitor - http://wordpress.org/extend/plugins/download-monitor </li></ul><ul><li>WP Cache - http://mnm.uib.es/gallir/wp-cache-2 </li></ul><ul><li>WP e-commerce - http://www.instinct.co.nz/e-commerce </li></ul><ul><li>WP Polls - http://lesterchan.net/portfolio/programming/php </li></ul><ul><li>WP SpamFree - http://www.hybrid6.com/webgeek/plugins/wp-spamfree </li></ul><ul><li>WP-Sticky - http://lesterchan.net/portfolio/programming/php </li></ul><ul><li>WP Shopping Cart - http://www.instinct.co.nz </li></ul>
  26. 32. Extending BuddyPress is a suite of WordPress plugins and themes, each adding a distinct new feature. BuddyPress contains all the features you’d expect from WordPress but aims to let members socially interact. http://buddypress.org/ WordPress MU, or multi-user, is designed to do exactly that. It is most famously used for WordPress.com where it serves tens of millions of hits on millions of blogs each day. http://mu.wordpress.org/
  27. 33. Extending When a visitor browses to a WordPress.com blog on a mobile device we show special themes designed to work on small screens focussing on fast load times. The first theme is a modification of WPtouch and is displayed to phones with rich web browsers like the iPhone and Android phones. The second theme was developed from an old version of the WordPress Mobile Edition and will be displayed to all other mobile devices.
  28. 34. Mobile Install
  29. 35. Resources <ul><li>Documentation </li></ul><ul><li>Codex - http://codex.wordpress.org/Main_Page </li></ul><ul><li>Site Architecture – http://codex.wordpress.org/Site_Architecture_1.5 </li></ul><ul><li>Template Hierarchy - http://codex.wordpress.org/Template_Hierarchy </li></ul><ul><li>WordPress Plugins - http://www.webdesignerwall.com/general/useful-wordpress-plugins/ </li></ul><ul><li>WordPress Theme Hacks - http://www.webdesignerwall.com/tutorials/wordpress-theme-hacks/ </li></ul><ul><li>Tutorials </li></ul><ul><li>Web Designer Wall - http://www.webdesignerwall.com </li></ul><ul><li>Six Revisions – http://www.sixrevisions.com </li></ul><ul><li>NetTuts - http://net.tutsplus.com/ </li></ul><ul><li>Tutorial 9 – http://www.tutorial9.net </li></ul><ul><li>WPTopics - http://www.wptopics.com/ </li></ul><ul><li>WordPress Tutorials - http://www.wp-tutorials.org/ </li></ul><ul><li>Themes </li></ul><ul><li>Function - http://wefunction.com </li></ul><ul><li>WPSnap - http://www.wpsnap.com/ </li></ul><ul><li>WooThemes – http://www.woothemes.com </li></ul><ul><li>StyleShout - http://www.styleshout.com </li></ul>
  30. 36. Resources <ul><li>Plugins </li></ul><ul><li>Simplified AJAX For WordPress Plugin Developers using Jquery </li></ul><ul><li>“Desenvolvendo Plugins para WordPress” by Rafael Dohms (in Brazilian Portuguese) </li></ul><ul><li>12 part “How to Write a Wordpress Plugin” at DevLounge.net by Ronald Huereca ( PDF ) </li></ul><ul><li>How to create WordPress Plugin from a scratch </li></ul><ul><li>Using AJAX with your WordPress Plugin , also at DevLounce.net </li></ul><ul><li>How to Write a Simple WordPress Plugin at ATD </li></ul><ul><li>Other </li></ul><ul><li>BuddyPress - http://buddypress.org/ </li></ul><ul><li>WordPress MU – http://mu.wordpress.org/ </li></ul><ul><li>WP e-Commerce – http://www.instinct.co.nz/e-commerce/ </li></ul><ul><li>Thematic – http://themeshaper.com/ </li></ul><ul><li>WpTouch – http://www.bravenewcode.com/wptouch/ </li></ul><ul><li>WordPress Mobile – http://en.blog.wordpress.com/2009/10/20/the-hero-is-in-your-pocket/ </li></ul>
  31. 37. Thank You <ul><li>Where to find me… </li></ul><ul><li>http://www.brendanserashriar.com </li></ul><ul><li>http://www.dropthedigibomb.com </li></ul><ul><li>[email_address] </li></ul><ul><li>http://www.twitter.com/digibomb </li></ul><ul><li>http://www.twitter.com/OptimalPayments </li></ul>