WordPress is NOT just a blog anymore! For the seasoned WordPress developer or anyone coding in PHP, CSS, and jQuery, we will look at how you can take your theme to the next level. I will explain how theme architecture works, how to extend this architecture with custom template files, and how to create custom functions. I will also walk through the some interested CSS frameworks, like 960grid, implementing intermediate to advanced jQuery features, and how to customize the back end. Finally I will briefly discuss how to take your theme mobile using WPTouch and WPMobile.

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!

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

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

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

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

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