This document serves as a comprehensive guide for seasoned WordPress developers, focusing on theme development using PHP, CSS, and jQuery. It covers the basics of theming, templating, and creating custom post/pages while providing practical examples and best practices for integrating features such as jQuery and custom dashboard elements. The document also highlights essential plugins and resources to enhance blog functionality and design.

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

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

3. What is ? … and it’s FREE

4. Where do I find ?

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. , NOT just a blog anymore!

16. Theming Create a visual mockup in Photoshop. Create a static HTML+CSS template of each page .

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

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

19. Theming

20. Theming Splitting the file

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

22. Templating Let’s start with the Template System Template Tags Conditional Tags PHP Function Calls

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

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

25. 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 &quot;Not Found“ or something else.

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

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

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

29. Templating Playing with the code <ul> <li id=&quot;categories&quot;> <?php wp_dropdown_categories('title_li=&hierarchical=0&show_count=1&child_of=9'); ?> <script type=&quot;text/javascript&quot;> <!-- var dropdown = document.getElementById(&quot;cat&quot;); function onCatChange() { if ( dropdown.options[dropdown.selectedIndex].value > 0 ) { location.href = &quot;<?php echo get_option('home'); ?>/?cat=&quot;+dropdown.options[dropdown.selectedIndex].value; } } dropdown.onchange = onCatChange; --> </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

30. Templating Playing with the code <?php if(is_page(&quot;landing&quot;)) : ?> <h5 class=&quot;tagline&quot;> Hello! I'm Brendan Sera-Shriar A.K.A. <span class=&quot;blue&quot;>digibomb</span>, a freelance web designer from Montreal, Canada. </h5> <?php elseif(is_page(&quot;work&quot;) || is_page(&quot;branding&quot;) || is_page(&quot;other-projects&quot;) || is_page(&quot;client-list&quot;)) : ?> <h5 class=&quot;tagline&quot;> I don't just build <span class=&quot;blue&quot;>websites</span> I build <span class=&quot;blue&quot;>communities</span>! </h5> <?php endif; ?> What if I wanted to display different taglines on each page? * See it in action at digibombinc.com

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

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

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

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

35. 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(&quot;normal&quot;, 0.5); Integrating jQuery <?php wp_enqueue_script(&quot;jquery&quot;); ?>

36. 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=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js&quot;></script>

37. 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=&quot;text/javascript&quot; src=&quot;<?php bloginfo('template_directory'); ?>/includes/js/jquery.js&quot;></script>

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

39. 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 $(&quot;ul.tabs&quot;).tabs(&quot;div.panes > div&quot;); }); </script> Activate the tabs

40. Templating Integrating jQuery More jQuery Examples

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

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

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

44. 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=&quot;http://www.webdesignerwall.com/wp-content/uploads/2010/01/p2h-banner.jpg&quot; />'; }

45. 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/

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

47. Mobile Install

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

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

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

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

52. 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/

53. Thank You http://www.brendanserashriar.com http://www.dropthedigibomb.com [email_address] [email_address] @digibomb @OptimalPayments