Wordpress Development Fsoss 2009
37
Development FSOSS 2009
-
Upload
brendan-sera-shriar -
Category
Technology
-
view
3.559 -
download
1
description
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.
Transcript of Wordpress Development Fsoss 2009
DevelopmentFSOSS 2009
full-time now!
What is ?
…and it’s FREE
Where do I find ?
This number changes every few minutes.
This number changes every few minutes.
8, 000, 000 People publish blogson WordPress.com
8, 000, 000 People publish blogson WordPress.com
200 million people visit one or more
WordPress.com blogs every month.
200 million people visit one or more
WordPress.com blogs every month.
, not just a blog anymore
Getting started
What you need
PHP version 4.3 or greaterMySQL version 4.0 or greater
Creativity and Passion
Installing
5 minute install,
really it’s that quick and easy!
Installing • If installing locally
– Install a local server (Mac: MAMP, PC:XAMPP or WAMP, LINUX: LAMP).
• Create a new database.
• Download WordPress from wordpress.org and extract the files to a new folder under the htdocs folder.
• Rename the wp-config-sample.php file to wp-config.php and update the database details according to your local server.
• Run wp-admin/install.php and follow the instructions to install WordPress.
• Done!
Installing Update wp-config.php File
Installing Run install.php
Theming
Create or download a Photoshop design. Create a static HTML+CSS template of each page.
Theming Why Create a Static HTML File First?
Mainly because it will make the development process a lot
easier. I usually create a HTML file for every template that I
need, test it across all browsers, validate both HTML and CSS
markups, then all I have to do is cut & paste the WordPress
code. By doing so, I don’t have to worry about HTML or CSS
bugs during my theme making process.
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).
Theming
Theming Splitting the file
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 "Not Found".
Theming
<?php wp_list_cats('exclude=1'); ?> <?php wp_list_cats('exclude=1'); ?>
<?php wp_list_cats('exclude=1, 2'); ?><?php wp_list_cats('exclude=1, 2'); ?>
<?php the_content('Read the rest of this entry »'); ?><?php the_content('Read the rest of this entry »'); ?>
<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
<div class="alignleft"><?php next_posts_link('« Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
Conditional Tags
*See WordPress Codex- Conditional Tags
Theming Styles.css
/* Theme Name: Theme NAMETheme URI: http://yoursite.com/Description: My cool theme.Version: 1.6Author: Brendan Sera-ShriarAuthor URI: http://dropthedigibomb.com */
body { … }H1, h2, h3 { … }#header { … }#content { … }#sidebar { … }#footer { … }
.post { … }
.comments { … }
} This defines the template theme
} Theme id’s and classes
Theming Loop Resources
• The Loop in Action
• Template Tags
• Using the Loop in Template Files
• Matt Read Loop Article
• MaxPower Dynamic Sticky Tutorial
• IfElse Query_post Redux
• 1001 WordPression Loops
• Global Variables and the WordPress Loop
• WordPress Triple Loop Tutorial
• Multiple Loops with Multiple Columns
• WordPress - modified, dependent and extra Loops
• Super Loop: Exclude Categories and Limit Number of Posts
• Easily Adaptable WordPress Loop Templates: Basic Loops, Mullet Loops, and More
*See my presentation on WordPress Theme Design
Plugins and Widgets
PluginsPlugins 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.
WidgetsWordPress Widgets (WPW) is like a plugin, but designed to provide a simple way to arrange the various elements of your sidebar content (known as "widgets") 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
Plugins and Widgets
if ( function_exists('register_sidebar') ) {register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">','after_widget' => '</li>','before_title' => '<h2 class="widgettitle">','after_title' => '</h2>',
)); }
if ( function_exists('register_sidebar') ) {register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">','after_widget' => '</li>','before_title' => '<h2 class="widgettitle">','after_title' => '</h2>',
)); }
Widgetizing a themefunctions.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; ?>
<?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
Essential Plugins• Ad Rotator - http://kpumuk.info/projects/wordpress-plugins/ad-rotator • Advanced Random Post - http://www.danielesalamina.it/advanced-random-post • AFD Admin Theme - http://aenonfiredesign.com/blog/afd-wordpress2-admin-theme • Akismet - http://akismet.com/ • All in One SEO Pack - http://semperfiwebdesign.com • Article Templates - http://www.bin-co.com/tools/wordpress/plugins/article_templates • Audio player - http://www.1pixelout.net/code/audio-player-wordpress-plugin • Blogroll Page - http://www.byte-me.org • Different Posts Per Page - http://www.maxblogpress.com/plugins/dppp • Disable WordPress Core Update - http://lud.icro.us/disable-wordpress-core-update • Executable PHP widget - http://wordpress.org/extend/plugins/php-code-widget • Kimili Flash Embed - http://www.kimili.com/plugins/kml_flashembed • Lightbox 2 - http://www.stimuli.ca/lightbox • Maintenance Mode - http://sw-guide.de/wordpress/plugins/maintenance-mode/ • myStatus - http://eightface.com/code/wp-mystatus • NextGEN Gallery - http://alexrabe.boelinger.com/?page_id=80
Essential Plugins• p2pConverter - http://www.briandgoad.com/blog/p2pConverter • Post2pdf - http://wordpress.org/extend/plugins/post2pdf • PXS Mail Form - http://www.phrixus.co.uk/pxsmail • QuickTime Embed - http://www.channel-ai.com/blog/plugins/quicktime-embed • Random Featured Post - http://www.mydollarplan.com/random-featured-post-plugin • Riffly Video/Audio Comments - http://riffly.com • Role Manager - http://www.im-web-gefunden.de/wordpress-plugins/role-manag er• Widget Logic - http://freakytrigger.co.uk/wordpress-setup • WordPress Database Backup - http://www.ilfilosofo.com/blog/wp-db-backup • Wordpress Download Monitor - http://wordpress.org/extend/plugins/download-monitor • WP Cache - http://mnm.uib.es/gallir/wp-cache-2 • WP e-commerce - http://www.instinct.co.nz/e-commerce • WP Polls - http://lesterchan.net/portfolio/programming/php • WP SpamFree - http://www.hybrid6.com/webgeek/plugins/wp-spamfree • WP-Sticky - http://lesterchan.net/portfolio/programming/php • WP Shopping Cart - http://www.instinct.co.nz
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/
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.
ResourcesDocumentationCodex - http://codex.wordpress.org/Main_PageSite Architecture – http://codex.wordpress.org/Site_Architecture_1.5Template Hierarchy - http://codex.wordpress.org/Template_HierarchyWordPress Plugins - http://www.webdesignerwall.com/general/useful-wordpress-plugins/WordPress Theme Hacks - http://www.webdesignerwall.com/tutorials/wordpress-theme-hacks/
TutorialsWeb Designer Wall - http://www.webdesignerwall.comSix Revisions – http://www.sixrevisions.comNetTuts - http://net.tutsplus.com/Tutorial 9 – http://www.tutorial9.net WPTopics - http://www.wptopics.com/WordPress Tutorials - http://www.wp-tutorials.org/
ThemesFunction - http://wefunction.comWPSnap - http://www.wpsnap.com/WooThemes – http://www.woothemes.comStyleShout - http://www.styleshout.com
ResourcesPluginsSimplified AJAX For WordPress Plugin Developers using Jquery“Desenvolvendo Plugins para WordPress” by Rafael Dohms (in Brazilian Portuguese)12 part “How to Write a Wordpress Plugin” at DevLounge.net by Ronald Huereca (PDF)How to create WordPress Plugin from a scratchUsing AJAX with your WordPress Plugin, also at DevLounce.netHow to Write a Simple WordPress Plugin at ATD
OtherBuddyPress - http://buddypress.org/WordPress MU – http://mu.wordpress.org/ WP e-Commerce – http://www.instinct.co.nz/e-commerce/ Thematic – http://themeshaper.com/WpTouch – http://www.bravenewcode.com/wptouch/ WordPress Mobile – http://en.blog.wordpress.com/2009/10/20/the-hero-is-in-your-pocket/
Thank You
Where to find me…
http://www.brendanserashriar.comhttp://www.dropthedigibomb.com
http://www.twitter.com/digibombhttp://www.twitter.com/OptimalPayments
