WP Portfolio

1,384 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
1,384
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WP Portfolio

  1. 1. Power Your Portfolio With WordPress Matt Wiebe http://somadesign.ca/ @mattwiebeWednesday, 24 August, 11
  2. 2. Knowledge.Wednesday, 24 August, 11
  3. 3. Knowledge. • Make a Child ThemeWednesday, 24 August, 11
  4. 4. Knowledge. • Make a Child Theme • Make a custom content typeWednesday, 24 August, 11
  5. 5. Knowledge. • Make a Child Theme • Make a custom content type • Add and retrieve meta dataWednesday, 24 August, 11
  6. 6. Knowledge. • Make a Child Theme • Make a custom content type • Add and retrieve meta data • Create a custom content type templateWednesday, 24 August, 11
  7. 7. Child ThemesWednesday, 24 August, 11
  8. 8. Child Themes • Quick • DRY (Don’t Repeat Yourself)Wednesday, 24 August, 11
  9. 9. style.css /* Theme Name: My Portfolio Template: twentyeleven */Wednesday, 24 August, 11
  10. 10. style.css /* Theme Name: My Portfolio Template: twentyeleven */Wednesday, 24 August, 11
  11. 11. Parent/Child Terminology Parent | Child Template | StylesheetWednesday, 24 August, 11
  12. 12. Parent Theme (Template)Wednesday, 24 August, 11
  13. 13. Child Theme (Stylesheet)Wednesday, 24 August, 11
  14. 14. Child Theme Inheritance • WP looks in the child theme firstWednesday, 24 August, 11
  15. 15. Child Theme Inheritance • WP looks in the child theme first • If a file isnt there, it looks in the parent themeWednesday, 24 August, 11
  16. 16. Child Theme Inheritance • WP looks in the child theme first • If a file isnt there, it looks in the parent theme • exception: both functions.php files will be loadedWednesday, 24 August, 11
  17. 17. Child Theme Inheritance • WP looks in the child theme first • If a file isnt there, it looks in the parent theme • exception: both functions.php files will be loaded • functions.php is like your themes mini-pluginWednesday, 24 August, 11
  18. 18. Child Themes: ONLY CHANGE WHAT NEEDS CHANGINGWednesday, 24 August, 11
  19. 19. Child Themes: ONLY CHANGE WHAT NEEDS CHANGING OR:Wednesday, 24 August, 11
  20. 20. Child Themes: ONLY CHANGE WHAT NEEDS CHANGING OR: WORK SMARTER, NOT HARDERWednesday, 24 August, 11
  21. 21. Lets CodeWednesday, 24 August, 11
  22. 22. Portfolios Need Items add_action(init, sd_init); function sd_init { $args = array(); register_post_type(sd_portfolio, $args); }Wednesday, 24 August, 11
  23. 23. Crash Course in HooksWednesday, 24 August, 11
  24. 24. Crash Course in Hooks • The foundation of WP’s plugin systemWednesday, 24 August, 11
  25. 25. Crash Course in Hooks • The foundation of WP’s plugin system • ACTIONS run at various pointsWednesday, 24 August, 11
  26. 26. Action Hook Example add_action(wp_head, my_wp_head); function my_wp_head() { // Does something in a themes header // Maybe echo a Typekit <script>? }Wednesday, 24 August, 11
  27. 27. Crash Course in Hooks • The foundation of WP’s plugin system • ACTIONS run at various points • FILTERS run and allow you to modify dataWednesday, 24 August, 11
  28. 28. Filter Hook Example add_filter(the_title, no_orphans); function no_orphans($title) { // run an awesome piece of code // ALWAYS return the passed-in filter value return $title; }Wednesday, 24 August, 11
  29. 29. Crash Course in Hooks • The foundation of WP’s plugin system • ACTIONS run at various points • FILTERS run and allow you to modify data • Both connect a hook with a function of your ownWednesday, 24 August, 11
  30. 30. add_action(init, sd_init); function sd_init { $args = array(); register_post_type(sd_portfolio, $args); }Wednesday, 24 August, 11
  31. 31. add_action(init, sd_init); function sd_init { $args = array(); register_post_type(sd_portfolio, $args); }Wednesday, 24 August, 11
  32. 32. add_action(init, sd_init); function sd_init { $args = array(); register_post_type(sd_portfolio, $args); }Wednesday, 24 August, 11
  33. 33. add_action(init, sd_init); function sd_init { $args = array(); register_post_type(sd_portfolio, $args); }Wednesday, 24 August, 11
  34. 34. add_action(init, sd_init); function sd_init { $args = array(); register_post_type(sd_portfolio, $args); }Wednesday, 24 August, 11
  35. 35. register_post_type $args $args = array( supports => array(title, editor, thumbnail) ); register_post_type(sd_portfolio, $args);Wednesday, 24 August, 11
  36. 36. register_post_type $args $args = array( rewrite => array(slug => portfolio) ); // Sets URL for single Portfolio Item // example.com/portfolio/some-portfolio-itemWednesday, 24 August, 11
  37. 37. register_post_type $args $args = array( has_archive => portfolio ); // Sets URL for all portfolio items // example.com/portfolio/Wednesday, 24 August, 11
  38. 38. register_post_type $args $args = array( labels => array( name => Portfolio Items singular_name => Portfolio Item, // more labels can be set ) );Wednesday, 24 August, 11
  39. 39. register_post_type $args $args = array( // Show on front end public => true, // Show the admin UI show_ui => true );Wednesday, 24 August, 11
  40. 40. Featured Image • AKA thumbnail / post thumbnail • Associate a specific image with a post/page/ portfolio item/whatever • Perfect for a portfolio: show an image for a portfolio itemWednesday, 24 August, 11
  41. 41. Custom Image Sizes // in your functions.php add_image_size(sd_portfolio, 1000, 500, true); // in your theme the_post_thumbnail(sd_portfolio);Wednesday, 24 August, 11
  42. 42. Custom Image Sizes // width add_image_size(sd_portfolio, 1000, 500, true);Wednesday, 24 August, 11
  43. 43. Custom Image Sizes // height add_image_size(sd_portfolio, 1000, 500, true);Wednesday, 24 August, 11
  44. 44. Custom Image Sizes // crop (optional, false default) add_image_size(sd_portfolio, 1000, 500, true);Wednesday, 24 August, 11
  45. 45. There’s More to a Portfolio Than a Title & an ImageWednesday, 24 August, 11
  46. 46. More Portfolio Info • Work Done • Agency (if you’re a freelancer) • URL of finished work • Client quote • Other?Wednesday, 24 August, 11
  47. 47. Well Make This:Wednesday, 24 August, 11
  48. 48. This is a rare thing that WordPress does NOT make easyWednesday, 24 August, 11
  49. 49. add_meta_box(porfolio-meta, Portfolio Metadata, sd_portfolio_metabox, sd_portfolio, normal ); function sd_portfolio_metabox() { $url = get_post_meta(get_the_ID(), live_url, true); ?> <table class="form-table"> <tr> <th>Live Site URL:</th> <td><input type="text" name="live_url" value="<?php echo $url ?>" /></td> </tr> </table> <?php } add_action( admin_init , sd_save_portfolio_metadata ); function sd_save_portfolio_metadata() { // horribly insecure never actually do this if ( isset($_POST[live_url]) ) { update_post_meta(get_the_ID(), live_url, $_POST[live_url]); } }Wednesday, 24 August, 11
  50. 50. Blech.Wednesday, 24 August, 11
  51. 51. Simpler Metaboxes • More Fields Plugin • http://wordpress.org/extend/plugins/more-fieldsWednesday, 24 August, 11
  52. 52. Simpler Metaboxes • More Fields Plugin • http://wordpress.org/extend/plugins/more-fields • Tribe_Meta_Box class • Not yet released. But awesome. • A few lines of code = no manual metabox labourWednesday, 24 August, 11
  53. 53. $meta_fields = array( array( name => Live site URL, meta => live_url, type => text ) ); // define our box $meta_box = array( id => portfolio-meta, title => Portfolio Metadata, pages => array(sd_portfolio), fields => $meta_fields ); // Initialize metabox new Tribe_Meta_Box($meta_box);Wednesday, 24 August, 11
  54. 54. Theme It. • archive-sd_portfolio.php • 10 most recent portfolio itemsWednesday, 24 August, 11
  55. 55. Theme It. • archive-sd_portfolio.php • 10 most recent portfolio items • single-sd_portfolio.php • a single portfolio itemWednesday, 24 August, 11
  56. 56. Loop Refresher while ( have_posts() ) : the_post(); // do some HTML + template_tags // title, featured image, metadata... endwhile;Wednesday, 24 August, 11
  57. 57. Single Portfolio Item single-sd_portfolio.phpWednesday, 24 August, 11
  58. 58. Single Portfolio Item single-sd_portfolio.phpWednesday, 24 August, 11
  59. 59. Single Portfolio Item // in loopWednesday, 24 August, 11
  60. 60. Single Portfolio Item // in loop // featured image the_post_thumbnail(your_image_id);Wednesday, 24 August, 11
  61. 61. Single Portfolio Item // in loop // featured image the_post_thumbnail(your_image_id); // add_image_size(your_image_id);Wednesday, 24 August, 11
  62. 62. Displaying Metadata // in loop! $live_url = get_post_meta( get_the_ID(), live_url, true );Wednesday, 24 August, 11
  63. 63. Displaying Metadata // the current posts ID $live_url = get_post_meta( get_the_ID(), live_url, true );Wednesday, 24 August, 11
  64. 64. Displaying Metadata // the meta key (set previously) $live_url = get_post_meta( get_the_ID(), live_url, true );Wednesday, 24 August, 11
  65. 65. Displaying Metadata // single piece of metadata // Usually want true (default false) $live_url = get_post_meta( get_the_ID(), live_url, true );Wednesday, 24 August, 11
  66. 66. Displaying Metadata $live_url = get_post_meta( get_the_ID(), live_url, true ); // security FAIL <a href="<?php echo $live_url; ?>">View</a>Wednesday, 24 August, 11
  67. 67. Displaying Metadata $live_url = get_post_meta( get_the_ID(), live_url, true ); // security WIN <a href="<?php echo esc_url($live_url); ?>">View</a>Wednesday, 24 August, 11
  68. 68. WP Security 101 1. Never trust any user-submitted dataWednesday, 24 August, 11
  69. 69. WP Security 101 1. Never trust any user-submitted dataWednesday, 24 August, 11
  70. 70. 1. esc_ is the prefix for WP escaping functions. 2. attr is the contexts. The available contexts are attr, html, js, sql, url, url_raw, and textarea. 3. _e is the optional translation suffix. The available suffixes for 2.8 are __, and _e. If you omit the suffix, no translation is performed, and your string is just returned. Source: http://wp.me/p56-52 (Mark Jaquith)Wednesday, 24 August, 11
  71. 71. WP Security 101 1. Never trust any user-submitted data 2. Watch Mark Jaquith’s security presentation on WordPress.tv: http://wp.me/pllYY-1mOWednesday, 24 August, 11
  72. 72. Portfolio Archive Template archive-sd_portfolio.phpWednesday, 24 August, 11
  73. 73. Portfolio Archive Template • Similar bits to the single portfolio item, but with less detailWednesday, 24 August, 11
  74. 74. Portfolio Archive Template • Similar bits to the single portfolio item, but with less detail • Add JavaScript for the whooshy bitsWednesday, 24 August, 11
  75. 75. Managing JS the WP Way <script src="http://example.com/file.js"></script>Wednesday, 24 August, 11
  76. 76. Managing JS the WP Way <script src="http://example.com/file.js"></script>Wednesday, 24 August, 11
  77. 77. Managing JS the WP Way // Your script name. Useful if you register first // and selectively load later. wp_register_script( script-name, http://path/to/ script.js, array(jquery), 1.0, true ); wp_enqueue_script( script-name );Wednesday, 24 August, 11
  78. 78. Managing JS the WP Way // URL of JS file. wp_register_script( script-name, http://path/to/ script.js, array(jquery), 1.0, true );Wednesday, 24 August, 11
  79. 79. Managing JS the WP Way // An array of possible dependencies. Optional. wp_register_script( script-name, http://path/to/ script.js, array(jquery), 1.0, true );Wednesday, 24 August, 11
  80. 80. Managing JS the WP Way // Version number of script. Optional. wp_register_script( script-name, http://path/to/ script.js, array(jquery), 1.0, true );Wednesday, 24 August, 11
  81. 81. Managing JS the WP Way // Load in footer. Optional (defaults to false). wp_register_script( script-name, http://path/to/ script.js, array(jquery), 1.0, true );Wednesday, 24 August, 11
  82. 82. Managing JS the WP Way $theme_url = get_stylesheet_directory_uri() . /; wp_register_script( flexslider, $theme_url . jquery.flexslider-min.js, array(jquery), 1.2, true ); wp_register_script( portfolio-slideshow, $theme_url . slideshow.js, array(flexslider), null, true ); wp_enqueue_script( portfolio-slideshow );Wednesday, 24 August, 11
  83. 83. Review • Made a Child ThemeWednesday, 24 August, 11
  84. 84. Review • Made a Child Theme • Made a custom content type (post_type)Wednesday, 24 August, 11
  85. 85. Review • Made a Child Theme • Made a custom content type (post_type) • Added and retrieved meta data (securely!)Wednesday, 24 August, 11
  86. 86. Review • Made a Child Theme • Made a custom content type (post_type) • Added and retrieved meta data (securely!) • Created a custom content type templateWednesday, 24 August, 11
  87. 87. Review • Made a Child Theme • Made a custom content type (post_type) • Added and retrieved meta data (securely!) • Created a custom content type template • Added JS the WP WayWednesday, 24 August, 11
  88. 88. Hang Out With WP Nerds Winnipeg WordPress Meetup: http://winnipegwpmeetup.wordpress.com/Wednesday, 24 August, 11
  89. 89. Questions? The code: https://github.com/mattwiebe/My-Portfolio-Theme Matt Wiebe http://somadesign.ca/ @mattwiebeWednesday, 24 August, 11

×