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.

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!

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

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

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

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

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(); ?>

<?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(); ?>

<?php query_posts("showposts=8&cat=-5,-6,-10"); ?>

<?php while (have_posts()) : the_post(); ?>

or

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 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 } ?>

<?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

1.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"); ?><?php wp_enqueue_script("jquery"); ?>

Templating

3 simple ways to load  jQuery in WordPress

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>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Templating

3 simple ways to load  jQuery in WordPress

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>

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

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

<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 startedThere 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');

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');

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" />'; }

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

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

http://www.brendanserashriar.comhttp://www.dropthedigibomb.com

dropit@dropthedigibomb.combrendan.sera-shriar@optimalpayments.com

@digibomb@OptimalPayments