DevelopmentPHP Quebec – November 09 Gathering

full-time now!

What is ?

We’ll skip the basics and head straight to the code….

…if you’re interested you can check out Some of my other presentations later

http://digibombinc.com/events

Getting started

What you need

PHP version 4.3 or greaterMySQL version 4.0 or greater

Creativity and Passion

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.

Yes, I know, this is PHP Quebec…

Ok, back to the code.

Templating

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

Templating The front page

Splitting the file

Templating

Let’s start with the Template System

Templating

Template Tags Template Tags Conditional Tags Conditional Tags PHP Function Calls PHP Function Calls

Templating

<?php // syntax #1: curly braces if ( condition to check ){

// code to execute if the condition is true }

// syntax #2: colon and endif if ( condition to check ):

// code to execute if the condition is true endif; ?>

<?php // syntax #1: curly braces if ( condition to check ){

// code to execute if the condition is true }

// syntax #2: colon and endif if ( condition to check ):

// code to execute if the condition is true endif; ?>

<?php if ( is_home() ): ?> <h3>Main Page</h3>

<?php elseif( is_archive() ): ?> <h3>Archives Page</h3>

<?php else: ?> <h3>Welcome to my blog!!</h3>

<?php endif; ?>

<?php if ( is_home() ): ?> <h3>Main Page</h3>

<?php elseif( is_archive() ): ?> <h3>Archives Page</h3>

<?php else: ?> <h3>Welcome to my blog!!</h3>

<?php endif; ?>

Standard PHP WordPress

Templating

Include tags

•get_header •get_sidebar •get_search_form •comments_template •get_footer

Blog info tags

•bloginfo •bloginfo_rss •get_bloginfo •get_bloginfo_rss

Lists & Dropdown tags

•wp_list_authors •wp_list_categories •wp_list_pages •wp_list_bookmarks •wp_list_comments •wp_get_archives •wp_page_menu •wp_dropdown_pages •wp_dropdown_categories •wp_dropdown_users

Login/Logout tags

•is_user_logged_in •wp_login_url •wp_logout_url •wp_lostpassword_url •wp_registration_url •wp_logout •wp_loginout •wp_register

Post tags

•the_ID •the_title •the_title_rss •the_title_attribute •single_post_title •the_content •the_content_rss •the_excerpt •the_excerpt_rss •wp_link_pages •posts_nav_link •next_post_link •next_posts_link •previous_post_link •previous_posts_link •next_image_link •previous_image_link •sticky_class •the_category •the_category_rss •the_tags •the_meta

Comment tags

•wp_list_comments •comments_number •comments_link •comments_rss_link •comments_popup_script •comments_popup_link •comment_ID •comment_id_fields •comment_author •comment_author_link •comment_author_email •comment_author_email_link •comment_author_url •comment_author_url_link •comment_author_IP •comment_type •comment_text •comment_excerpt •comment_date •comment_time •comment_form_title •comment_author_rss •comment_text_rss •get_avatar •permalink_comments_rss •comment_reply_link •cancel_comment_reply_link •previous_comments_link •next_comments_link •paginate_comments_links

Template Tags

Templating Template Tags

Category tags

•the_category •the_category_rss •single_cat_title •category_description •wp_dropdown_categories •wp_list_categories

Tag tags

•the_tags •tag_description •single_tag_title •wp_tag_cloud •wp_generate_tag_cloud

Author tags

•the_author •the_author_link •the_author_posts •the_author_posts_link •the_author_meta •wp_list_authors •wp_dropdown_users

Date and Time tags

•the_time •the_date •the_date_xml •the_modified_time •the_modified_date •the_modified_author •single_month_title

Edit Link tags

•edit_post_link •edit_comment_link •edit_tag_link •edit_bookmark_link

Permalink tags

•permalink_anchor •get_permalink •the_permalink •permalink_single_rss

Links Manager tags

•wp_list_bookmarks •get_bookmarks •get_bookmark •get_bookmark_field

Trackback tags

•trackback_url •trackback_rdf

Title tags

•wp_title •single_post_title •single_cat_title •single_tag_title •single_month_title •the_search_query

Query tags

•get_posts •query_posts

The Loop

The Loop is used to display 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".

Templating

Templating

A complete template

In this example we are using some

standard Template Tags to display the

title of the post the_title() and we are

linking it using the_permalink() . We call

use the_date() and display the_content() .

Finally for fun we call link_pages().

Playing with the code

Templating

<?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?><?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?>

Most blogs display categories somewhere, usually the side bar. The easiest way to do this is with the wp_list_categories() Template Tag.

Playing with the code

Templating

<ul> <li id="categories">

<?php wp_dropdown_categories('title_li=&hierarchical=0&show_count=1&child_of=9'); ?> <script type="text/javascript"> <!-- var dropdown = document.getElementById("cat"); function onCatChange() { if ( dropdown.options[dropdown.selectedIndex].value > 0 ) { location.href = "<?php echo get_option('home'); ?>/?cat="+dropdown.options[dropdown.selectedIndex].value; } } dropdown.onchange = onCatChange; --> </script>

</li> </ul>

<ul> <li id="categories">

<?php wp_dropdown_categories('title_li=&hierarchical=0&show_count=1&child_of=9'); ?> <script type="text/javascript"> <!-- var dropdown = document.getElementById("cat"); function onCatChange() { if ( dropdown.options[dropdown.selectedIndex].value > 0 ) { location.href = "<?php echo get_option('home'); ?>/?cat="+dropdown.options[dropdown.selectedIndex].value; } } dropdown.onchange = onCatChange; --> </script>

</li> </ul>

What if I wanted to display specific categoriesand have them in a dropdown box?

*See the full tutorial at dropthedigibomb.com

Playing with the code

Templating

<?php if(is_page("landing")) : ?>

<h5 class="tagline"> Hello! I'm Brendan Sera-Shriar A.K.A. <span class="blue">digibomb</span>, a freelance web designer from Montreal, Canada. </h5> <?php elseif(is_page("work") || is_page("branding") || is_page("other-projects") || is_page("client-list")) : ?>

<h5 class="tagline"> I don't just build <span class="blue">websites</span> I build <span class="blue">communities</span>! </h5>

<?php endif; ?>

<?php if(is_page("landing")) : ?>

<h5 class="tagline"> Hello! I'm Brendan Sera-Shriar A.K.A. <span class="blue">digibomb</span>, a freelance web designer from Montreal, Canada. </h5> <?php elseif(is_page("work") || is_page("branding") || is_page("other-projects") || is_page("client-list")) : ?>

<h5 class="tagline"> I don't just build <span class="blue">websites</span> I build <span class="blue">communities</span>! </h5>

<?php endif; ?>

What if I wanted to display different taglines on each page?

*See it in action at digibombinc.com

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

Writing Plugins

“Plug-ins can extend WordPress to do almost anything you can imagine.” -WordPress.org

*See my presentation on WordPress Plugin Development and Making the Most of Plugins

ConventionsFor each new plug-in I create a folder in the /wp-content/plugins/pluginname/ and then in that folder I create the main plug-in file with the same name as the folder + .php so the plug-in file is /wp-content/plugins/pluginname/pluginname.php.

I usually start by converting a php function that I have built or found and convert it by adding the necessary WP code.

Main Elements

•Header Stuff (Name, version, etc…)•Add Menu Option•Set Up the Options Page•Register the Activation and Deactivation Hooks•The Main Function

*Always make sure to include a readme.txt with your plug-in package.

Writing Plugins

The PHP Function

function randomflashloader(){ srand(microtime() *1000000); $num= rand (0,3); $project = array(); $project[0] = "http://pv3world.com/labs/PV3interactive/pv3world_cube.swf"; $project[1] = "http://pv3world.com/labs/rays/rays.swf"; $project[2] = "http://pv3world.com/labs/PV3Galaxy/galaxy_cubes_interactive.swf"; $project[3] = "http://pv3world.com/labs/graffitiplane/graffiti_plane2.swf"; $frame.= "<center>"; $frame.= "<embed src=\"$project[$num]\" "; $frame.= "width =\"300\" height=\"250\" bgcolor=\"#000000\" border=\"0\"/>"; $frame.= "</a>"; echo($frame);}

function randomflashloader(){ srand(microtime() *1000000); $num= rand (0,3); $project = array(); $project[0] = "http://pv3world.com/labs/PV3interactive/pv3world_cube.swf"; $project[1] = "http://pv3world.com/labs/rays/rays.swf"; $project[2] = "http://pv3world.com/labs/PV3Galaxy/galaxy_cubes_interactive.swf"; $project[3] = "http://pv3world.com/labs/graffitiplane/graffiti_plane2.swf"; $frame.= "<center>"; $frame.= "<embed src=\"$project[$num]\" "; $frame.= "width =\"300\" height=\"250\" bgcolor=\"#000000\" border=\"0\"/>"; $frame.= "</a>"; echo($frame);}

Writing Plugins

The WordPress Plugin Hooks

//Check install directory

$rfl_directory = 'wp-content/plugins/randomflashloader/';if ((!strstr(dirname(__FILE__).'/', $rfl_directory)) && (!strstr(dirname(__FILE__).'\\', str_replace('/', '\\', $rfl_directory)))) { trigger_error(sprintf(__('<b>Random Flash Loader is not installed in the proper directory!</b><br />It won\'t work until installed in <b>%s</b><br />', 'randomflashloader'), $rfl_directory), E_USER_ERROR); return;}// Add the Options Menu

add_action('admin_menu', 'random_flash_loader_options_setup');

//Check install directory

$rfl_directory = 'wp-content/plugins/randomflashloader/';if ((!strstr(dirname(__FILE__).'/', $rfl_directory)) && (!strstr(dirname(__FILE__).'\\', str_replace('/', '\\', $rfl_directory)))) { trigger_error(sprintf(__('<b>Random Flash Loader is not installed in the proper directory!</b><br />It won\'t work until installed in <b>%s</b><br />', 'randomflashloader'), $rfl_directory), E_USER_ERROR); return;}// Add the Options Menu

add_action('admin_menu', 'random_flash_loader_options_setup');

// Setup the Options Page

function random_flash_loader_options_setup() {global $random_flash_loader_data;add_options_page($random_flash_loader_data['Name'], 'RandomFlashLoader', 8, basename(__FILE__), 'random_flash_loader_page');}

// Activation and Deactivation Hooks

register_deactivation_hook(__FILE__, 'random_flash_loader_deactivate');register_activation_hook(__FILE__, 'random_flash_loader_activate');

// Setup the Options Page

function random_flash_loader_options_setup() {global $random_flash_loader_data;add_options_page($random_flash_loader_data['Name'], 'RandomFlashLoader', 8, basename(__FILE__), 'random_flash_loader_page');}

// Activation and Deactivation Hooks

register_deactivation_hook(__FILE__, 'random_flash_loader_deactivate');register_activation_hook(__FILE__, 'random_flash_loader_activate');

*Download plugin here http://www.dropthedigibomb.com/randomflashloader.rar

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

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/

Where to find me…

Thank Youhttp://www.brendanserashriar.comhttp://www.dropthedigibomb.com

dropit@dropthedigibomb.comhttp://www.twitter.com/digibomb