![Page 1: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/1.jpg)
AddAddAdd muscleto your
websiteWordPressby: Gail Villanueva
sheeromedia.comkutitots.com
WordCamp Philippines 2010 ● 2 October 2010 ● College of St. Benilde
![Page 2: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/2.jpg)
Introduction
Rationale Review of Concepts
![Page 3: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/3.jpg)
So why am I here?
Promote WP as a low-cost, compact CMS Don't fear WP codes!
Backup your database Test codes locally
![Page 4: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/4.jpg)
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
![Page 5: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/5.jpg)
WP: Not just a CMS
Using WordPress as a jobsite, portfolio, or e-commerce web site
![Page 6: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/6.jpg)
The “usual” website
What's in the most basic CMS-driven website? Homepage News Section Inside Pages
WordPress can do more than that!
![Page 7: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/7.jpg)
Portfolio website
![Page 8: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/8.jpg)
Job Site
![Page 9: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/9.jpg)
E-Commerce website
![Page 10: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/10.jpg)
Coding fun!
Post Thumbnails Single, Meta, Archive The Homepage Search
![Page 11: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/11.jpg)
Post Thumbnails
Displays a thumbnail image by uploading through the Post Edit screen.
Must be enabled in the functions.php first!
![Page 12: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/12.jpg)
Post Thumbnails: Code
Add to function.php:add_theme_support('post-thumbnails');
Add to template file:<?php the_post_thumbnail( array(300,200) ); ?>
![Page 13: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/13.jpg)
Making our own Custom Post Type
Getting dirty with functions.php Tie 'em up to the template!
![Page 14: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/14.jpg)
Creating a custom panel
![Page 15: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/15.jpg)
Creating a custom panel
![Page 16: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/16.jpg)
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 );
}
![Page 17: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/17.jpg)
Creating custom taxonomies
![Page 18: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/18.jpg)
Creating custom taxonomies: The Code
register_taxonomy("Catalog", array("product"), array("hierarchical" => true, "label" => "Catalog", "singular_label" => "Catalog", "rewrite" => true, 'public' => true));
![Page 19: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/19.jpg)
Creating custom More Options
![Page 20: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/20.jpg)
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");
}
![Page 21: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/21.jpg)
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
}
![Page 22: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/22.jpg)
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
}
![Page 23: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/23.jpg)
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"]);
}
![Page 24: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/24.jpg)
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;
}
}?>
![Page 25: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/25.jpg)
Details Page
Copy single.php Rename new file to “single-product.php” Coding time again!
![Page 26: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/26.jpg)
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>
![Page 27: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/27.jpg)
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!
![Page 28: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/28.jpg)
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(); ?>
![Page 29: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/29.jpg)
Publish an empty “Product” page using “Product Archive” template
![Page 30: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/30.jpg)
The Home Page
News and Updates (or Blog) section Latest from the Listing
![Page 31: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/31.jpg)
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">
<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; ?>
![Page 32: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/32.jpg)
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">
<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; ?>
![Page 33: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/33.jpg)
Searching Meta Data
Meta Data are excluded from standard search Solution: Search Everything plugin :)
https://core.sproutventure.com/projects/show/search-everything
![Page 34: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/34.jpg)
When to “plugin”
When, why and why you shouldn't
Useful Plugins
![Page 35: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/35.jpg)
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.
![Page 36: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/36.jpg)
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/
![Page 37: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/37.jpg)
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
![Page 38: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/38.jpg)
Learn by Deconstruction!
Monochrome Wireframe theme XAMPP for Mac and Windows Search Everything plugin
![Page 39: Gail villanueva add muscle to your wordpress site](https://reader030.vdocument.in/reader030/viewer/2022020306/5558c612d8b42a995d8b4739/html5/thumbnails/39.jpg)
Thank you!
Gail Villanuevasheeromedia.com | kutitots.com | binaryfeet.com
Work Email: [email protected]