Gail villanueva add muscle to your wordpress site


Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Gail villanueva add muscle to your wordpress site

  1. 1. Add muscle to yourby: Gail Villanueva WordPress website WordCamp Philippines 2010 ● 2 October 2010 ● College of St. Benilde
  2. 2.  Rationale Review of Concepts Introduction
  3. 3. So why am I here? Promote WP as a low-cost, compact CMS Dont fear WP codes!  Backup your database  Test codes locally
  4. 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. 5. Using WordPress as a jobsite, portfolio, or e-commerce web site WP: Not just a CMS
  6. 6. The “usual” website Whats in the most basic CMS-driven website?  Homepage  News Section  Inside Pages WordPress can do more than that!
  7. 7. Portfolio website
  8. 8. Job Site
  9. 9. E-Commerce website
  10. 10.  Post Thumbnails Single, Meta, Archive The Homepage Search Coding fun!
  11. 11. Post Thumbnails Displays a thumbnail image by uploading through the Post Edit screen. Must be enabled in the functions.php first!
  12. 12. Post Thumbnails: CodeAdd to function.php: add_theme_support(post-thumbnails);Add to template file: <?php the_post_thumbnail( array(300,200) ); ?>
  13. 13. Making our own Custom Post Type Getting dirty with functions.php Tie em up to the template!
  14. 14. Creating a custom panel
  15. 15. Creating a custom panel
  16. 16. 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 );}
  17. 17. Creating custom taxonomies
  18. 18. Creating custom taxonomies: The Coderegister_taxonomy("Catalog", array("product"), array("hierarchical" => true, "label" => "Catalog", "singular_label" => "Catalog", "rewrite" => true, public => true));
  19. 19. Creating custom More Options
  20. 20. 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");}
  21. 21. 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}
  22. 22. 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}
  23. 23. 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"]);}
  24. 24. 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; }} ?>
  25. 25. Details Page Copy single.php Rename new file to “single-product.php” Coding time again!
  26. 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. 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. 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. 29. Publish an empty “Product” page using “Product Archive” template
  30. 30. The Home Page News and Updates (or Blog) section Latest from the Listing
  31. 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. 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. 33. Searching Meta Data Meta Data are excluded from standard search Solution: Search Everything plugin :)
  34. 34.  When, why and why you shouldnt Useful Plugins When to “plugin”
  35. 35. 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.
  36. 36. Useful Plugins Custom Post Types Custom Post Types UI: Portfolio Woothemes: 25 Free Portfolio and Gallery Themes: themes/ Job Listing Job Manager Plugin: WP Job Board Plugin: E-Commerce WP E-Commerce: WordPress Shopping Cart Plugin:
  37. 37. Reading Material Query_Posts: Post Thumbnails: images/ If you want to learn more about custom taxonomies:
  38. 38. Learn by Deconstruction! Monochrome Wireframe theme XAMPP for Mac and Windows Search Everything plugin
  39. 39. Thank you! Gail | | Work Email: