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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Add muscle to yourby: Gail Villanueva 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 Dont 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 Whats 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: CodeAdd 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 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. Creating custom taxonomies
  • 18. Creating custom taxonomies: The Coderegister_taxonomy("Catalog", array("product"), array("hierarchical" => true, "label" => "Catalog", "singular_label" => "Catalog", "rewrite" => true, public => true));
  • 19. Creating custom More Options
  • 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. 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. 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. 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. 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. 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 :)
  • 34.  When, why and why you shouldnt Useful Plugins When to “plugin”
  • 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. 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. Reading Material Query_Posts: Post Thumbnails: images/ If you want to learn more about custom taxonomies:
  • 38. Learn by Deconstruction! Monochrome Wireframe theme XAMPP for Mac and Windows Search Everything plugin
  • 39. Thank you! Gail | | Work Email: