Presentation slides for WordCamp Toronto 2009 by Nick La, www.ndesign-studio.com.

1. VARIOUS WAYS OF USING
WordPress
Customizing
BY: NICK LA
www.ndesign-studio.com

2. Big Thanks to WordPress!
N.Design Studio Web Designer Wall
ndesign-studio.com webdesignerwall.com
Best Web Gallery IconDock
bestwebgallery.com icondock.com

3. Why WordPress?
• Easy to learn & use
Good documentation and simple admin panel
• Flexible and dynamic
Create dynamic sites with Template Tags
• SEO friendly
Friendly URL and semantic coding
• FREE!
Free open source + plugins and themes

4. Things You Should Know
• Custom Fields
http://codex.wordpress.org/Using_Custom_Fields
• Conditional Tags
http://codex.wordpress.org/Conditional_Tags
• Query_Posts
http://codex.wordpress.org/Template_Tags/query_posts
• Page Template
http://codex.wordpress.org/Pages
• Finding Good Plugins
http://wordpress.org/extend/plugins

5. How I Use WordPress:
Blog Gallery Shop
bestwebgallery.com
webdesignerwall.com icondock.com

6. Using WordPress As
Blog

7. Displaying A Custom Post Image

8. Custom Fields
Use custom field to display a post image
Custom field

9. Custom Fields
Assigning custom field (Admin > Write)
Custom field Image URL

10. Custom Fields
Outputting custom field in template file
index.php
<?php $postimage = get_post_meta($post->ID, 'post_image', true); ?>
<?php if ($postimage != quot;quot;) { ?>
<a href=quot;<?php the_permalink() ?>quot;><img src=quot;<?php echo $postimage; ?>quot; /></a>
<?php } ?>

11. Displaying A Dynamic <title> Tag

12. Conditional Tags
Use Conditional Tags to display a dynamic <title> tag
header.php
<title>
<?php if (is_home()) {
echo bloginfo('name');
} elseif (is_404()) {
echo '404 Not Found';
} elseif (is_category()) {
echo 'Category:'; wp_title('');
} elseif (is_search()) {
echo 'Search Results';
} elseif ( is_day() || is_month() || is_year() ) {
echo 'Archives:'; wp_title('');
} else {
echo wp_title('');
}
?>
</title>

13. Using WordPress As
Gallery

14. Managing Posts With Custom Fields

15. Custom Fields
Use custom fields to display post content
Thumb
URL
Large Image

16. Plugin: Custom Write Panel
Save time by using Custom Write Panel plugin to manage posts
Custom Write Panel
http://wordpress.org/extend/plugins/custom-write-panel/

17. Theme Switcher

18. Plugin: Theme Switcher
With Theme Switcher, visitors can pick their layout preference
Theme Switcher
http://wordpress.org/extend/plugins/theme-switcher/
Large Preview
Thumbnail Details

19. Themes
Overview of template files

20. PHP Include
Use Conditional Tags to dynamically include template file from the “master” theme
<?php if (is_page()) { /*
Theme Name: Details
include ('./wp-content/themes/master/page.php');
*/
} elseif (is_404()) {
include ('./wp-content/themes/master/404.php');
} elseif (in_category(8)) {
include ('./wp-content/themes/master/category-8.php');
} elseif (is_single()) {
include ('./wp-content/themes/master/single.php');
} else {?>
<?php include ('./wp-content/themes/master/header.php'); ?>
<div>. . . display posts . . . </div>
<?php include ('./wp-content/themes/master/sidebar.php'); ?>
<?php include ('./wp-content/themes/master/footer.php'); ?>
<?php }?>

21. Using WordPress As
Shop / Blog

22. Displaying The 5 Latest Posts

23. Query_Posts
Use query_posts to display the 5 latest posts
Display 5 latest posts

24. Query_Posts
Sample code: query_posts and the loop
index.php
<?php query_posts('showposts=5'); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); $loopcounter++; ?>
<?php if ($loopcounter <= 1) { ?>
<div> first post content </div>
<ul class=quot;recent-postquot;>
<?php } else { ?>
<li> last 4 post links </li>
<? } ?>
<?php endwhile;?>
</ul>
<?php else : ?>
...code...
<?php endif; ?>

25. Conditional Tags
If the post is in the free icon category, display the post rating plugin
<?php if (in_category('28')) { ?>
<p>credits</p>
<?php if(function_exists('the_ratings')) { the_ratings(); } ?>
<?php } else { ?>
<p>regular post data</p>
<? } ?>

26. Managing Free Icon Posts With Custom Fields

27. Custom Fields
Custom fields on the free icon page
WP PostRatings
http://wordpress.org/extend/plugins/wp-postratings/
credits
description
download url
preview

28. Plugin: Flutter
Use Flutter to manage the free icon posts
Flutter
http://flutter.freshout.us

29. Getting Rid Of The Category Base

30. Free Icon Template
Creating a Page template for the free icon page
<?php
/*
Template Name: Template - Free Icons
*/
?>
template-free-icon.php <?php get_header(); ?>
<?php $page_num = $paged;
if ($pagenum='') $pagenum =1;
query_posts('cat=28&posts_per_page=-1&paged='.$page_num); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div> display post here </div>
<? endwhile;endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

31. Free Icon Template
Create a blank page (Free Icons) and assign the template
blank page
(no content)
Page template

32. Creating A Shop With WP ECommerce Plugin

33. Download WP eCommerce
http://www.instinct.co.nz/e-commerce/

34. Inspiration

35. 45Royale Inc.
http://www.45royale.com
Creative Depart
http://www.creativedepart.com
Typographica
http://new.typographica.org
FlickOut
http://flickout.com
Jeff Finley
http://www.jefffinley.org

36. Thank You