gail villanueva add muscle to your wordpress site

AddAddAdd muscleto your

websiteWordPressby: Gail Villanueva

sheeromedia.comkutitots.com

WordCamp Philippines 2010 ● 2 October 2010 ● College of St. Benilde

Introduction

Rationale Review of Concepts

So why am I here?

Promote WP as a low-cost, compact CMS Don't fear WP codes!

Backup your database Test codes locally

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

WP: Not just a CMS

Using WordPress as a jobsite, portfolio, or e-commerce web site

The “usual” website

What's in the most basic CMS-driven website? Homepage News Section Inside Pages

WordPress can do more than that!

Portfolio website

Job Site

E-Commerce website

Coding fun!

Post Thumbnails Single, Meta, Archive The Homepage Search

Post Thumbnails

Displays a thumbnail image by uploading through the Post Edit screen.

Must be enabled in the functions.php first!

Post Thumbnails: Code

Add to function.php:add_theme_support('post-thumbnails');

Add to template file:<?php the_post_thumbnail( array(300,200) ); ?>

Making our own Custom Post Type

Getting dirty with functions.php Tie 'em up to the template!

Creating a custom panel

Creating a custom panel: The Codeadd_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 );

}

Creating custom taxonomies

Creating custom taxonomies: The Code

register_taxonomy("Catalog", array("product"), array("hierarchical" => true, "label" => "Catalog", "singular_label" => "Catalog", "rewrite" => true, 'public' => true));

Creating custom More Options

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");

}

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

}

Product Details Panelfunction 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

}

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"]);

}

Load and closeadd_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;

}

}?>

Details Page

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

Details Page: The Code<?php the_post(); ?>

<?phpquery_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 »</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('« %link') ?></div><div class="alignright"><?php next_post_link('%link »') ?></div>

</div>

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!

Listing Page: The Code<?php /* Template Name: Product Archive */ ?>

<?php get_header(); ?><div id="content-col1">

<?phpglobal $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('« Older Entries') ?></div><div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div></div>

<?php get_sidebar(); ?><?php get_footer(); ?>

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

The Home Page

News and Updates (or Blog) section Latest from the Listing

Generate all latest custom post entries

<?phpglobal $wp_query;query_posts( array('post_type' => array( 'product' ),'showposts' => 4));?>

<?php while ( have_posts() ) : the_post(); ?>


<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; ?>

Generate latest from custom taxonomy

<?phpglobal $wp_query;query_posts( array( 'catalog' => 'featured-products', 'showposts' => 4 ) );?>

<?php while ( have_posts() ) : the_post(); ?>


<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; ?>

Searching Meta Data

Meta Data are excluded from standard search Solution: Search Everything plugin :)

https://core.sproutventure.com/projects/show/search-everything

When to “plugin”

When, why and why you shouldn't

Useful Plugins

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.

Useful Plugins Custom Post Types

Custom Post Types UI: http://wordpress.org/extend/plugins/custom-post-type-ui/

PortfolioWoothemes: http://www.woothemes.com/25 Free Portfolio and Gallery Themes: http://www.1stwebdesigner.com/wordpress/free-portfolio-photo-gallery-wordpress-themes/

Job ListingJob Manager Plugin: http://pento.net/projects/wordpress-job-manager-plugin/WP Job Board Plugin: http://wpjobboard.net/

E-CommerceWP E-Commerce: http://www.instinct.co.nz/e-commerce/WordPress Shopping Cart Plugin: http://tribulant.com/

http://wpjobboard.net/

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

Learn by Deconstruction!

Monochrome Wireframe theme XAMPP for Mac and Windows Search Everything plugin

Thank you!

Gail Villanuevasheeromedia.com | kutitots.com | binaryfeet.com

Work Email: [email protected]

gail villanueva add muscle to your wordpress site

Technology

new product item

type product

product page

product details

search product

view product item

registerfunction product

code product price