Your SlideShare is downloading. ×
0
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
WP Portfolio
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

WP Portfolio

1,119

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,119
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
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. Power Your Portfolio With WordPress Matt Wiebe http://somadesign.ca/ @mattwiebeWednesday, 24 August, 11
  • 2. Knowledge.Wednesday, 24 August, 11
  • 3. Knowledge. • Make a Child ThemeWednesday, 24 August, 11
  • 4. Knowledge. • Make a Child Theme • Make a custom content typeWednesday, 24 August, 11
  • 5. Knowledge. • Make a Child Theme • Make a custom content type • Add and retrieve meta dataWednesday, 24 August, 11
  • 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. Child ThemesWednesday, 24 August, 11
  • 8. Child Themes • Quick • DRY (Don’t Repeat Yourself)Wednesday, 24 August, 11
  • 9. style.css /* Theme Name: My Portfolio Template: twentyeleven */Wednesday, 24 August, 11
  • 10. style.css /* Theme Name: My Portfolio Template: twentyeleven */Wednesday, 24 August, 11
  • 11. Parent/Child Terminology Parent | Child Template | StylesheetWednesday, 24 August, 11
  • 12. Parent Theme (Template)Wednesday, 24 August, 11
  • 13. Child Theme (Stylesheet)Wednesday, 24 August, 11
  • 14. Child Theme Inheritance • WP looks in the child theme firstWednesday, 24 August, 11
  • 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. 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. 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. Child Themes: ONLY CHANGE WHAT NEEDS CHANGINGWednesday, 24 August, 11
  • 19. Child Themes: ONLY CHANGE WHAT NEEDS CHANGING OR:Wednesday, 24 August, 11
  • 20. Child Themes: ONLY CHANGE WHAT NEEDS CHANGING OR: WORK SMARTER, NOT HARDERWednesday, 24 August, 11
  • 21. Lets CodeWednesday, 24 August, 11
  • 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. Crash Course in HooksWednesday, 24 August, 11
  • 24. Crash Course in Hooks • The foundation of WP’s plugin systemWednesday, 24 August, 11
  • 25. Crash Course in Hooks • The foundation of WP’s plugin system • ACTIONS run at various pointsWednesday, 24 August, 11
  • 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. 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. 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. 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. add_action(init, sd_init); function sd_init { $args = array(); register_post_type(sd_portfolio, $args); }Wednesday, 24 August, 11
  • 31. add_action(init, sd_init); function sd_init { $args = array(); register_post_type(sd_portfolio, $args); }Wednesday, 24 August, 11
  • 32. add_action(init, sd_init); function sd_init { $args = array(); register_post_type(sd_portfolio, $args); }Wednesday, 24 August, 11
  • 33. add_action(init, sd_init); function sd_init { $args = array(); register_post_type(sd_portfolio, $args); }Wednesday, 24 August, 11
  • 34. add_action(init, sd_init); function sd_init { $args = array(); register_post_type(sd_portfolio, $args); }Wednesday, 24 August, 11
  • 35. register_post_type $args $args = array( supports => array(title, editor, thumbnail) ); register_post_type(sd_portfolio, $args);Wednesday, 24 August, 11
  • 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. register_post_type $args $args = array( has_archive => portfolio ); // Sets URL for all portfolio items // example.com/portfolio/Wednesday, 24 August, 11
  • 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. register_post_type $args $args = array( // Show on front end public => true, // Show the admin UI show_ui => true );Wednesday, 24 August, 11
  • 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. 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. Custom Image Sizes // width add_image_size(sd_portfolio, 1000, 500, true);Wednesday, 24 August, 11
  • 43. Custom Image Sizes // height add_image_size(sd_portfolio, 1000, 500, true);Wednesday, 24 August, 11
  • 44. Custom Image Sizes // crop (optional, false default) add_image_size(sd_portfolio, 1000, 500, true);Wednesday, 24 August, 11
  • 45. There’s More to a Portfolio Than a Title & an ImageWednesday, 24 August, 11
  • 46. More Portfolio Info • Work Done • Agency (if you’re a freelancer) • URL of finished work • Client quote • Other?Wednesday, 24 August, 11
  • 47. Well Make This:Wednesday, 24 August, 11
  • 48. This is a rare thing that WordPress does NOT make easyWednesday, 24 August, 11
  • 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. Blech.Wednesday, 24 August, 11
  • 51. Simpler Metaboxes • More Fields Plugin • http://wordpress.org/extend/plugins/more-fieldsWednesday, 24 August, 11
  • 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. $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. Theme It. • archive-sd_portfolio.php • 10 most recent portfolio itemsWednesday, 24 August, 11
  • 55. Theme It. • archive-sd_portfolio.php • 10 most recent portfolio items • single-sd_portfolio.php • a single portfolio itemWednesday, 24 August, 11
  • 56. Loop Refresher while ( have_posts() ) : the_post(); // do some HTML + template_tags // title, featured image, metadata... endwhile;Wednesday, 24 August, 11
  • 57. Single Portfolio Item single-sd_portfolio.phpWednesday, 24 August, 11
  • 58. Single Portfolio Item single-sd_portfolio.phpWednesday, 24 August, 11
  • 59. Single Portfolio Item // in loopWednesday, 24 August, 11
  • 60. Single Portfolio Item // in loop // featured image the_post_thumbnail(your_image_id);Wednesday, 24 August, 11
  • 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. Displaying Metadata // in loop! $live_url = get_post_meta( get_the_ID(), live_url, true );Wednesday, 24 August, 11
  • 63. Displaying Metadata // the current posts ID $live_url = get_post_meta( get_the_ID(), live_url, true );Wednesday, 24 August, 11
  • 64. Displaying Metadata // the meta key (set previously) $live_url = get_post_meta( get_the_ID(), live_url, true );Wednesday, 24 August, 11
  • 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. 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. 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. WP Security 101 1. Never trust any user-submitted dataWednesday, 24 August, 11
  • 69. WP Security 101 1. Never trust any user-submitted dataWednesday, 24 August, 11
  • 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. 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. Portfolio Archive Template archive-sd_portfolio.phpWednesday, 24 August, 11
  • 73. Portfolio Archive Template • Similar bits to the single portfolio item, but with less detailWednesday, 24 August, 11
  • 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. Managing JS the WP Way <script src="http://example.com/file.js"></script>Wednesday, 24 August, 11
  • 76. Managing JS the WP Way <script src="http://example.com/file.js"></script>Wednesday, 24 August, 11
  • 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. 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. 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. 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. 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. 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. Review • Made a Child ThemeWednesday, 24 August, 11
  • 84. Review • Made a Child Theme • Made a custom content type (post_type)Wednesday, 24 August, 11
  • 85. Review • Made a Child Theme • Made a custom content type (post_type) • Added and retrieved meta data (securely!)Wednesday, 24 August, 11
  • 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. 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. Hang Out With WP Nerds Winnipeg WordPress Meetup: http://winnipegwpmeetup.wordpress.com/Wednesday, 24 August, 11
  • 89. Questions? The code: https://github.com/mattwiebe/My-Portfolio-Theme Matt Wiebe http://somadesign.ca/ @mattwiebeWednesday, 24 August, 11

×