WordPress Development Confoo 2010

Theme Development *For the seasoned WordPress developer or anyone coding in PHP, CSS, and jQuery.

Hello! I'm Brendan Sera-Shriar A.K.A. digibomb , a WP hacker, designer, blogger, social addict, techy, and published author from Montreal, Canada.

What is ? … and it’s FREE

Where do I find ?

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.

, NOT just a blog anymore!

Theming
Create a visual mockup in Photoshop. 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(hopefully ).

Theming How it all works If you go to 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 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

Templating Let’s start with the Template System Template Tags Conditional Tags 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 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
Once you have a grasp of the basic theme architecture and template tags it’s easy to take it to the next level!
Things to consider:
The if statement is your best friend
CSS will make all the difference
UI is key (consider jQuery or something similar)
Going beyond just a blog

Templating The Loop The Loop is used to display posts and it also lets you control how/what to display. Basically, The Loop checks if there are posts in your blog, while there are posts, display it, if no posts found, say "Not Found“ or something else.

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 display the_date() and the_content() . Finally for fun we call link_pages() .

Theming <?php query_posts("showposts=8&cat=10"); ?> <?php while (have_posts()) : the_post(); ?> Playing with the loop <?php query_posts("showposts=8&cat=-5,-6,-10"); ?> <?php while (have_posts()) : the_post(); ?> or

Templating Playing with the code <?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.

Templating Playing with the code <ul> <li id="categories"> <?php wp_dropdown_categories('title_li=&hierarchical=0&show_count=1&child_of=9'); ?> <script type="text/javascript">  </script> </li> </ul> What if I wanted to display specific categories and have them in a dropdown box? * See the full tutorial at dropthedigibomb.com

Templating Playing with the code <?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 Custom Post/Pages We’ve already looked at the basic template files that make up WordPress … but, if we want to go beyond the blog we need more!
index.php
header.php
sidebar.php
footer.php
and
single.php
page.php
404.php
category.php
archive.php
footer.php

Theming Custom Post/Pages Creating your own template files is the most powerful way to gain full control over how your WordPress site looks, feels, and functions…and it’s really easy too! Creating your template: The best way to start is by modifying an existing template, like single.php or page.php.

Theming Custom Post/Pages <?php /* Template Name: blog */ ?> <?php get_header(); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h2><?php the_title(); ?></h2> etc…. } This defines the template

Theming <?php if ( is_home() ) { ?> <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/home.css" type="text/css" media="screen" /> <?php } elseif( is_page("blog")) { ?> <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/blog.css" type="text/css" media="screen" /> <?php } elseif( in_category("tutorials") ) { ?> <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/tuts.css" type="text/css“ <?php } else { ?> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <?php } ?> Alternate Stylesheets * See it in action at créer magazine

Templating
3 simple ways to load jQuery in WordPress
Load the jQuery library that comes bundled with WordPress.
To do this we use the wp_enqueue_script() function, which automatically enqueue’s the JavaScript file in your theme header. Open your header.php file and paste the following within the <head> and </head> tags:
*I have heard that this does not work all the time in WordPress 2.8.1. have not fully tested yet in 2.9, but seems to be working fine.
Quick tip: One thing worth taking note of is the conflict with prototype which may cause it to not work in IE. Be sure to call the noConflict() method.
$j = jQuery.noConflict(); And you can call any jQuery functions like this: $j(this).fadeTo("normal", 0.5);
Integrating jQuery <?php wp_enqueue_script("jquery"); ?>

Templating
2. Load jQuery remotely from Google , this way you can be assured you’re always using the most up-to-date version. Otherwise, the version included inside WordPress may be dated.
Integrating jQuery <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Templating
3. Load jQuery from your server. So, if you have downloaded a specific version you can enqueue it internally. To do this, open your header.php file and paste the following within the <head> and </head> tags:
* I usually put all my scripts in a includes directory located in my theme directory. You could also use an absolute path if your file is located elsewhere.
Integrating jQuery <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/includes/js/jquery.js"></script>

Templating Very simple slider Integrating jQuery <script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script> Load jQuery <div class="panes"> <div> <?php query_posts("cat=1"); ?> <?php while (have_posts()) : the_post(); ?> <?php the_title(); ?> <?php endwhile; ?> </div> Load jQuery

Templating Very simple slider That’s it! Integrating jQuery <script> // perform JavaScript after the document is scriptable. $(function() { // setup ul.tabs to work as tabs for each div directly under div.panes $("ul.tabs").tabs("div.panes > div"); }); </script> Activate the tabs

Templating Integrating jQuery More jQuery Examples

Templating The Dashboard
How to get started There are essentially 3 ways we can customize the dashboard.
plugins (don’t always meet every need)
core files (can change with every new version of WP)
functions.php (flexible and simple)
* See the full tutorial at dropthedigibomb.com

Templating The Dashboard Custom login function my_custom_login_logo() { echo '<style type="text/css"> h1 a { background-image:url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; } </style>'; } add_action('login_head', 'my_custom_login_logo');

Templating The Dashboard Custom logo function my_custom_logo() { echo '<style type="text/css"> #header-logo { background-image: url('.get_bloginfo('template_directory').'/images/dash_logo.png) !important; }</style>'; } add_action('admin_head', 'my_custom_logo');

Templating The Dashboard Custom widget add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets'); function my_custom_dashboard_widgets() { global $wp_meta_boxes; wp_add_dashboard_widget('custom_ad_widget', 'Ads', 'custom_dashboard_ad'); } function custom_dashboard_ad() { echo '<p>Check out some other cool stuff</p><br /><img src="http://www.webdesignerwall.com/wp-content/uploads/2010/01/p2h-banner.jpg" />'; }

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.

Mobile Install

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

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

Resources
Documentation
Codex - http://codex.wordpress.org/Main_Page
Site Architecture – http://codex.wordpress.org/Site_Architecture_1.5
Template Hierarchy - http://codex.wordpress.org/Template_Hierarchy
WordPress Plugins - http://www.webdesignerwall.com/general/useful-wordpress-plugins/
WordPress Theme Hacks - http://www.webdesignerwall.com/tutorials/wordpress-theme-hacks/
Tutorials
Web Designer Wall - http://www.webdesignerwall.com
Six Revisions – http://www.sixrevisions.com
NetTuts - http://net.tutsplus.com/
Tutorial 9 – http://www.tutorial9.net
WPTopics - http://www.wptopics.com/
WordPress Tutorials - http://www.wp-tutorials.org/
Themes
Function - http://wefunction.com
WPSnap - http://www.wpsnap.com/
WooThemes – http://www.woothemes.com
StyleShout - http://www.styleshout.com

Resources
Plugins
Simplified 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 scratch
Using AJAX with your WordPress Plugin , also at DevLounce.net
How to Write a Simple WordPress Plugin at ATD
Other
BuddyPress - 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
http://www.brendanserashriar.com
http://www.dropthedigibomb.com
[email_address]
[email_address]
@digibomb
@OptimalPayments

http://dropthedigibomb.com	26
http://digibombinc.com	7
http://www.slideshare.net	3
http://digibomb.posterous.com	1

WordPress Development Confoo 2010

by Brendan Sera-Shriar on Mar 12, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 37

Statistics

WordPress Development Confoo 2010 — Presentation Transcript