Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordPress Development Confoo 2010


Published on

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.

Published in: Technology
  • New Resesrch Shows 74% Of Men Are More Attracted To Women Who Do This One Thing, Click Here ★★★
    Are you sure you want to  Yes  No
    Your message goes here
  • hm nice i think that Wordpress Development will be a king of CMS
    Are you sure you want to  Yes  No
    Your message goes here

WordPress Development Confoo 2010

  1. 1. Theme Development *For the seasoned WordPress developer or anyone coding in PHP, CSS, and jQuery.
  2. 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. 3. What is ? … and it’s FREE
  4. 4. Where do I find ?
  5. 5. This number changes every few minutes. 8, 000, 000 People publish blogs on 200 million people visit one or more blogs every month.
  6. 6. , NOT just a blog anymore!
  7. 16. Theming <ul><li>Create a visual mockup in Photoshop. Create a static HTML+CSS template of each page . </li></ul>
  8. 17. Theming <ul><li>Why Create a Static HTML File First? </li></ul><ul><li>Mainly because it will make the development process a lot </li></ul><ul><li>easier. I usually create a HTML file for every template that I </li></ul><ul><li>need, test it across all browsers, validate both HTML and CSS </li></ul><ul><li>markups, then all I have to do is cut & paste the WordPress </li></ul><ul><li>code. By doing so, I don’t have to worry about HTML or CSS </li></ul><ul><li>bugs during my theme making process(hopefully ). </li></ul>
  9. 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 ).
  10. 19. Theming
  11. 20. Theming Splitting the file
  12. 21. Theming Styles.css /* Theme Name: Theme NAME Theme URI: Description: My cool theme. Version: 1.6 Author: Brendan Sera-Shriar Author URI: */ body { … } H1, h2, h3 { … } #header { … } #content { … } #sidebar { … } #footer { … } .post { … } .comments { … } } This defines the template theme } Theme id’s and classes
  13. 22. Templating Let’s start with the Template System Template Tags Conditional Tags PHP Function Calls
  14. 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
  15. 24. Templating <ul><li>Once you have a grasp of the basic theme architecture and template tags it’s easy to take it to the next level! </li></ul><ul><li>Things to consider: </li></ul><ul><ul><li>The if statement is your best friend </li></ul></ul><ul><ul><li>CSS will make all the difference </li></ul></ul><ul><ul><li>UI is key (consider jQuery or something similar) </li></ul></ul>Going beyond just a blog
  16. 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.
  17. 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() .
  18. 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
  19. 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.
  20. 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
  21. 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
  22. 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! <ul><ul><li>index.php </li></ul></ul><ul><ul><li>header.php </li></ul></ul><ul><ul><li>sidebar.php </li></ul></ul><ul><ul><li>footer.php </li></ul></ul>and <ul><ul><li>single.php </li></ul></ul><ul><ul><li>page.php </li></ul></ul><ul><ul><li>404.php </li></ul></ul><ul><ul><li>category.php </li></ul></ul><ul><ul><li>archive.php </li></ul></ul><ul><ul><li>footer.php </li></ul></ul>
  23. 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.
  24. 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
  25. 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
  26. 35. Templating <ul><li>3 simple ways to load  jQuery in WordPress </li></ul><ul><li>Load the jQuery library that comes bundled with WordPress. </li></ul><ul><li>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: </li></ul><ul><ul><li>*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. </li></ul></ul><ul><ul><li>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. </li></ul></ul><ul><ul><li>$j = jQuery.noConflict(); And you can call any jQuery functions like this: $j(this).fadeTo(&quot;normal&quot;, 0.5); </li></ul></ul>Integrating jQuery <?php wp_enqueue_script(&quot;jquery&quot;); ?>
  27. 36. Templating <ul><li>3 simple ways to load  jQuery in WordPress </li></ul><ul><li>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. </li></ul>Integrating jQuery <script type=&quot;text/javascript&quot; src=&quot;;></script>
  28. 37. Templating <ul><li>3 simple ways to load  jQuery in WordPress </li></ul><ul><li>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: </li></ul><ul><ul><li>* 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. </li></ul></ul>Integrating jQuery <script type=&quot;text/javascript&quot; src=&quot;<?php bloginfo('template_directory'); ?>/includes/js/jquery.js&quot;></script>
  29. 38. Templating Very simple slider Integrating jQuery <script src=&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
  30. 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
  31. 40. Templating Integrating jQuery More jQuery Examples
  32. 41. Templating The Dashboard <ul><li>How to get started There are essentially 3 ways we can customize the dashboard. </li></ul><ul><ul><li>plugins (don’t always meet every need) </li></ul></ul><ul><ul><li>core files (can change with every new version of WP) </li></ul></ul><ul><ul><li>functions.php (flexible and simple) </li></ul></ul>* See the full tutorial at
  33. 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');
  34. 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');
  35. 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;; />'; }
  36. 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. WordPress MU, or multi-user, is designed to do exactly that. It is most famously used for where it serves tens of millions of hits on millions of blogs each day.
  37. 46. Extending When a visitor browses to a 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.
  38. 47. Mobile Install
  39. 48. Theming <ul><li>Loop Resources </li></ul><ul><li>The Loop in Action </li></ul><ul><li>Template Tags </li></ul><ul><li>Using the Loop in Template Files </li></ul><ul><li>Matt Read Loop Article </li></ul><ul><li>MaxPower Dynamic Sticky Tutorial </li></ul><ul><li>IfElse Query_post Redux </li></ul><ul><li>1001 WordPression Loops </li></ul><ul><li>Global Variables and the WordPress Loop </li></ul><ul><li>WordPress Triple Loop Tutorial </li></ul><ul><li>Multiple Loops with Multiple Columns </li></ul><ul><li>WordPress - modified, dependent and extra Loops </li></ul><ul><li>Super Loop: Exclude Categories and Limit Number of Posts </li></ul><ul><li>Easily Adaptable WordPress Loop Templates: Basic Loops, Mullet Loops, and More </li></ul>* See my presentation on WordPress Theme Design
  40. 49. Essential Plugins <ul><li>Ad Rotator - </li></ul><ul><li>Advanced Random Post - </li></ul><ul><li>AFD Admin Theme - </li></ul><ul><li>Akismet - </li></ul><ul><li>All in One SEO Pack - </li></ul><ul><li>Article Templates - </li></ul><ul><li>Audio player - </li></ul><ul><li>Blogroll Page - </li></ul><ul><li>Different Posts Per Page - </li></ul><ul><li>Disable WordPress Core Update - </li></ul><ul><li>Executable PHP widget - </li></ul><ul><li>Kimili Flash Embed - </li></ul><ul><li>Lightbox 2 - </li></ul><ul><li>Maintenance Mode - </li></ul><ul><li>myStatus - </li></ul><ul><li>NextGEN Gallery - </li></ul>
  41. 50. Essential Plugins <ul><li>p2pConverter - </li></ul><ul><li>Post2pdf - </li></ul><ul><li>PXS Mail Form - </li></ul><ul><li>QuickTime Embed - </li></ul><ul><li>Random Featured Post - </li></ul><ul><li>Riffly Video/Audio Comments - </li></ul><ul><li>Role Manager - er </li></ul><ul><li>Widget Logic - </li></ul><ul><li>WordPress Database Backup - </li></ul><ul><li>Wordpress Download Monitor - </li></ul><ul><li>WP Cache - </li></ul><ul><li>WP e-commerce - </li></ul><ul><li>WP Polls - </li></ul><ul><li>WP SpamFree - </li></ul><ul><li>WP-Sticky - </li></ul><ul><li>WP Shopping Cart - </li></ul>
  42. 51. Resources <ul><li>Documentation </li></ul><ul><li>Codex - </li></ul><ul><li>Site Architecture – </li></ul><ul><li>Template Hierarchy - </li></ul><ul><li>WordPress Plugins - </li></ul><ul><li>WordPress Theme Hacks - </li></ul><ul><li>Tutorials </li></ul><ul><li>Web Designer Wall - </li></ul><ul><li>Six Revisions – </li></ul><ul><li>NetTuts - </li></ul><ul><li>Tutorial 9 – </li></ul><ul><li>WPTopics - </li></ul><ul><li>WordPress Tutorials - </li></ul><ul><li>Themes </li></ul><ul><li>Function - </li></ul><ul><li>WPSnap - </li></ul><ul><li>WooThemes – </li></ul><ul><li>StyleShout - </li></ul>
  43. 52. Resources <ul><li>Plugins </li></ul><ul><li>Simplified AJAX For WordPress Plugin Developers using Jquery </li></ul><ul><li>“Desenvolvendo Plugins para WordPress” by Rafael Dohms (in Brazilian Portuguese) </li></ul><ul><li>12 part “How to Write a Wordpress Plugin” at by Ronald Huereca ( PDF ) </li></ul><ul><li>How to create WordPress Plugin from a scratch </li></ul><ul><li>Using AJAX with your WordPress Plugin , also at </li></ul><ul><li>How to Write a Simple WordPress Plugin at ATD </li></ul><ul><li>Other </li></ul><ul><li>BuddyPress - </li></ul><ul><li>WordPress MU – </li></ul><ul><li>WP e-Commerce – </li></ul><ul><li>Thematic – </li></ul><ul><li>WpTouch – </li></ul><ul><li>WordPress Mobile – </li></ul>
  44. 53. <ul><li>Thank You </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li>[email_address] </li></ul><ul><li>[email_address] </li></ul><ul><li>@digibomb </li></ul><ul><li>@OptimalPayments </li></ul>