1. Add muscle
to your
by: Gail Villanueva
sheeromedia.com
kutitots.com
WordPress
website
WordCamp Philippines 2010 ● 2 October 2010 ● College of St. Benilde

2. 
Rationale

Review of Concepts
Introduction

3. So why am I here?

Promote WP as a low-cost, compact CMS

Don't fear WP codes!

Backup your database

Test codes locally

4. Review of Concepts

Post Types

WordPress Loop
Begins here:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
Ends here:
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

Conditional Tags

Custom Fields

5. Using WordPress as a
jobsite, portfolio, or
e-commerce web site
WP: Not just a CMS

6. The “usual” website

What's in the most basic CMS-driven website?

Homepage

News Section

Inside Pages
WordPress can do
more than that!

7. Portfolio website

8. Job Site

9. E-Commerce website

10. 
Post Thumbnails

Single, Meta, Archive

The Homepage

Search
Coding fun!

11. Post Thumbnails

Displays a thumbnail image by uploading
through the Post Edit screen.

Must be enabled in the functions.php first!

12. Post Thumbnails: Code
Add to function.php:
add_theme_support('post-thumbnails');
Add to template file:
<?php the_post_thumbnail( array(300,200) ); ?>

13. Making our own Custom Post Type

Getting dirty with functions.php

Tie 'em up to the template!

14. Creating a custom panel

15. Creating a custom panel

16. Creating a custom panel: The Code
add_action('init', 'product_register');
function product_register() {
$labels = array(
'name' => _x('Products', 'post type general name'),
'singular_name' => _x('Product Item', 'post type singular name'),
'add_new' => _x('Add New', 'product item'),
'add_new_item' => __('Add New Product Item'),
'edit_item' => __('Edit Product Item'),
'new_item' => __('New Product Item'),
'view_item' => __('View Product Item'),
'search_items' => __('Search Product'),
'not_found' => __('Nothing found'),
'not_found_in_trash' => __('Nothing found in Trash'),
'parent_item_colon' => ''
);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'menu_icon' => get_stylesheet_directory_uri() . '/article16.png',
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => null,
'exclude_from_search' => false,
'supports' => array('title','editor','revisions','thumbnail')
);
register_post_type( 'product' , $args );
}

17. Creating custom taxonomies

18. Creating custom taxonomies: The Code
register_taxonomy("Catalog", array("product"),
array("hierarchical" => true, "label" => "Catalog",
"singular_label" => "Catalog", "rewrite" => true,
'public' => true));

19. Creating custom More Options

20. Initialize the Options
add_action("admin_init", "admin_init");
function admin_init(){
add_meta_box("price-meta", "Product Price",
"price", "product", "side", "low");
add_meta_box("details_meta", "Product
Details", "details_meta", "product",
"normal", "low");
}

21. Product Price Panel
function price(){
global $post;
$custom = get_post_custom($post->ID);
$price = $custom["price"][0];
?>
<label>Price:</label>
<input name="price" value="<?php echo $price; ?>" />
<?php
}

22. Product Details Panel
function details_meta() {
global $post;
$custom = get_post_custom($post->ID);
$itemcolor = $custom["itemcolor"][0];
$itemsize = $custom["itemsize"][0];
?>
<p><label>Item Color:</label><br />
<textarea cols="50" rows="1" name="itemcolor"><?php
echo $itemcolor; ?></textarea></p>
<p><label>Available Sizes:</label><br />
<textarea cols="50" rows="1" name="itemsize"><?php echo
$itemsize; ?></textarea></p>
<?php
}

23. Save Details
add_action('save_post', 'save_details');
function save_details(){
global $post;
update_post_meta($post->ID, "price",
$_POST["price"]);
update_post_meta($post->ID, "itemcolor",
$_POST["itemcolor"]);
update_post_meta($post->ID, "itemsize",
$_POST["itemsize"]);
}

24. Load and close
add_action("manage_posts_custom_column", "product_custom_columns");
add_filter("manage_edit-product_columns", "product_edit_columns");
function product_edit_columns($columns){
$columns = array(
"cb" => "<input type="checkbox" />",
"title" => "Product Title",
"description" => "Description",
"price" => "Product Price",
"catalog" => "Catalog",
);
return $columns;
}
function product_custom_columns($column){
global $post;
switch ($column) {
case "description":
the_excerpt();
break;
case "price":
$custom = get_post_custom();
echo $custom["price"][0];
break;
case "catalog":
echo get_the_term_list($post->ID, 'Catalog', '', ', ','');
break;
}
}
?>

25. Details Page

Copy single.php

Rename new file to “single-product.php”

Coding time again!

26. Details Page: The Code
<?php the_post(); ?>
<?php
query_posts( 'post_type=product');
?>
<h2 id="post-<?php the_ID(); ?>"><?php the_title(); ?></h2>
<?php the_post_thumbnail( array(300,200) ); ?>
<?php the_content('<p class="serif">Read the rest of this entry &raquo;</p>'); ?>
<p>Product Price: Php<?php echo get_post_meta($post->ID, 'price', true) ?></p>
<p>Available Color(s): <?php echo get_post_meta($post->ID, 'itemcolor', true) ?></p>
<p>Sizes: <?php echo get_post_meta($post->ID, 'itemsize', true) ?></p>
<div class="navigation">
<div class="alignleft"><?php previous_post_link('&laquo; %link') ?></div>
<div class="alignright"><?php next_post_link('%link &raquo;') ?></div>
</div>

27. Listing Page

Create a new Page template

Use wp_query to generate the “archive”
(page_products.php)

Create a new page

Apply Page template

Publish!

28. Listing Page: The Code
<?php /* Template Name: Product Archive */ ?>
<?php get_header(); ?>
<div id="content-col1">
<?php
global $wp_query;
query_posts( array('post_type' => array( 'product' ),'showposts' => 8, 'paged'=>$paged )
);?>
<?php if (have_posts()) : ?>
<h2 id="post-<?php the_ID(); ?>"><?php the_title(); ?></h2>
<?php while (have_posts()) : the_post(); ?>
<div class="product">
<div class="product-image"><a href="<?php the_permalink(); ?>"><?php
the_post_thumbnail( array(160,100) ); ?></a></div>
<div class="product-name"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<div class="product-detail">Php<?php echo get_post_meta($post->ID, 'price', true) ?></div>
</div>
<?php endwhile; endif; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

29. Publish an empty “Product” page using “Product Archive” template

30. The Home Page

News and Updates (or Blog) section

Latest from the Listing

31. Generate all latest custom post entries
<?php
global $wp_query;
query_posts( array('post_type' => array( 'product' ),'showposts' => 4));
?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="product">
<div class="product-image">
<a href="<?php the_permalink(); ?>"><?php
the_post_thumbnail( array(160,100) ); ?></a>
</div>
<div class="product-name">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>
<div class="product-detail">
Php<?php echo get_post_meta($post->ID, 'price', true) ?>
</div>
</div>
<?php endwhile; ?>

32. Generate latest from custom taxonomy
<?php
global $wp_query;
query_posts( array( 'catalog' => 'featured-products', 'showposts' => 4 ) );
?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="product">
<div class="product-image">
<a href="<?php the_permalink(); ?>"><?php
the_post_thumbnail( array(160,100) ); ?></a>
</div>
<div class="product-name">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</div>
<div class="product-detail">
Php<?php echo get_post_meta($post->ID, 'price', true) ?>
</div>
</div>
<?php endwhile; ?>

33. Searching Meta Data

Meta Data are excluded from standard search

Solution: Search Everything plugin :)
https://core.sproutventure.com/projects/show/search-everything

34. 
When, why and
why you shouldn't

Useful Plugins
When to “plugin”

35. When, Why, and Why You Shouldn't

Coding your own themes and custom settings is
a great learning experience.

Don't have time? “Plugin!”

Always remember that development and
support for plugins depend on the developer.

36. Useful Plugins

Custom Post Types
Custom Post Types UI: http://wordpress.org/extend/plugins/custom-post-type-ui/

Portfolio
Woothemes: http://www.woothemes.com/
25 Free Portfolio and Gallery Themes:
http://www.1stwebdesigner.com/wordpress/free-portfolio-photo-gallery-wordpress-
themes/

Job Listing
Job Manager Plugin: http://pento.net/projects/wordpress-job-manager-plugin/
WP Job Board Plugin: http://wpjobboard.net/

E-Commerce
WP E-Commerce: http://www.instinct.co.nz/e-commerce/
WordPress Shopping Cart Plugin: http://tribulant.com/

37. Reading Material

Query_Posts:
http://codex.wordpress.org/Function_Reference/query_posts

Post Thumbnails:
http://markjaquith.wordpress.com/2009/12/23/new-in-wordpress-2-9-post-thumbnail-
images/
http://codex.wordpress.org/Function_Reference/the_post_thumbnail

If you want to learn more about custom
taxonomies:
http://www.edesignerz.net/html/14991-introducing-wordpress-3-custom-taxonomies

38. Learn by Deconstruction!

Monochrome Wireframe theme

XAMPP for Mac and Windows

Search Everything plugin

39. Thank you!
Gail Villanueva
sheeromedia.com | kutitots.com | binaryfeet.com
Work Email: gail@sheeromedia.com