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

2,580
views

Published on

Published in: Technology, Business

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,580
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Add muscle to yourby: Gail Villanueva sheeromedia.com kutitots.com 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 :) https://core.sproutventure.com/projects/show/search-everything
  • 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: 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/
  • 37. 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
  • 38. Learn by Deconstruction! Monochrome Wireframe theme XAMPP for Mac and Windows Search Everything plugin
  • 39. Thank you! Gail Villanuevasheeromedia.com | kutitots.com | binaryfeet.com Work Email: gail@sheeromedia.com