Gail villanueva   add muscle to your wordpress site
Upcoming SlideShare
Loading in...5
×
 

Gail villanueva add muscle to your wordpress site

on

  • 2,475 views

 

Statistics

Views

Total Views
2,475
Views on SlideShare
2,475
Embed Views
0

Actions

Likes
0
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Gail villanueva   add muscle to your wordpress site Gail villanueva add muscle to your wordpress site Presentation Transcript

  • Add muscle to yourby: Gail Villanueva sheeromedia.com kutitots.com WordPress website WordCamp Philippines 2010 ● 2 October 2010 ● College of St. Benilde
  •  Rationale Review of Concepts Introduction
  • So why am I here? Promote WP as a low-cost, compact CMS Dont 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
  • Using WordPress as a jobsite, portfolio, or e-commerce web site WP: Not just a CMS
  • The “usual” website Whats 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
  •  Post Thumbnails Single, Meta, Archive The Homepage Search Coding fun!
  • Post Thumbnails Displays a thumbnail image by uploading through the Post Edit screen. Must be enabled in the functions.php first!
  • Post Thumbnails: CodeAdd 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
  • 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 Coderegister_taxonomy("Catalog", array("product"), array("hierarchical" => true, "label" => "Catalog", "singular_label" => "Catalog", "rewrite" => true, public => true));
  • Creating custom More Options
  • Initialize the Optionsadd_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 Panelfunction 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 Detailsadd_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(); ?><?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>
  • 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"><?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(); ?>
  • 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<?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; ?>
  • 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; ?>
  • Searching Meta Data Meta Data are excluded from standard search Solution: Search Everything plugin :) https://core.sproutventure.com/projects/show/search-everything
  •  When, why and why you shouldnt Useful Plugins When to “plugin”
  • When, Why, and Why You Shouldnt Coding your own themes and custom settings is a great learning experience. Dont 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/ 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/
  • 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: gail@sheeromedia.com