Power Your Portfolio With WordPress

In this intermediate step-by-step session, you'll learn how to bend WordPress to your will by building a WordPress-powered portfolio. You'll learn WordPress development techniques that boost your productivity and will make your life easier. This session is targeted toward code-savvy designers who are already familiar with WordPress and want to take their skills to the next level, and developers who are looking to strengthen their WordPress chops.

Transcript

1. Power Your Portfolio With WordPress Matt Wiebe http://somadesign.ca/ @mattwiebe Wednesday, 24 August, 11
2. Knowledge. Wednesday, 24 August, 11
3. Knowledge. • Make a Child Theme Wednesday, 24 August, 11
4. Knowledge. • Make a Child Theme • Make a custom content type Wednesday, 24 August, 11
5. Knowledge. • Make a Child Theme • Make a custom content type • Add and retrieve meta data Wednesday, 24 August, 11
6. Knowledge. • Make a Child Theme • Make a custom content type • Add and retrieve meta data • Create a custom content type template Wednesday, 24 August, 11
7. Child Themes Wednesday, 24 August, 11
8. Child Themes • Quick • DRY (Don’t Repeat Yourself) Wednesday, 24 August, 11
9. /* Theme Name: My Portfolio Template: twentyeleven */ style.css Wednesday, 24 August, 11
10. /* Theme Name: My Portfolio Template: twentyeleven */ style.css Wednesday, 24 August, 11
11. Parent/Child Terminology Parent | Child Template | Stylesheet Wednesday, 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 first Wednesday, 24 August, 11
15. Child Theme Inheritance • WP looks in the child theme first • If a file isn't there, it looks in the parent theme Wednesday, 24 August, 11
16. Child Theme Inheritance • WP looks in the child theme first • If a file isn't there, it looks in the parent theme • exception: both functions.php files will be loaded Wednesday, 24 August, 11
17. Child Theme Inheritance • WP looks in the child theme first • If a file isn't there, it looks in the parent theme • exception: both functions.php files will be loaded • functions.php is like your theme's mini-plugin Wednesday, 24 August, 11
18. Child Themes: ONLY CHANGE WHAT NEEDS CHANGING Wednesday, 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 HARDER Wednesday, 24 August, 11
21. Let's Code Wednesday, 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 Hooks Wednesday, 24 August, 11
24. Crash Course in Hooks • The foundation of WP’s plugin system Wednesday, 24 August, 11
25. Crash Course in Hooks • The foundation of WP’s plugin system • ACTIONS run at various points Wednesday, 24 August, 11
26. Action Hook Example add_action('wp_head', 'my_wp_head'); function my_wp_head() { // Does something in a theme's 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 data Wednesday, 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 own Wednesday, 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. $args = array( 'supports' => array('title', 'editor', 'thumbnail') ); register_post_type('sd_portfolio', $args); register_post_type $args Wednesday, 24 August, 11
36. $args = array( 'rewrite' => array('slug' => 'portfolio') ); // Sets URL for single Portfolio Item // example.com/portfolio/some-portfolio-item register_post_type $args Wednesday, 24 August, 11
37. $args = array( 'has_archive' => 'portfolio' ); // Sets URL for all portfolio items // example.com/portfolio/ register_post_type $args Wednesday, 24 August, 11
38. $args = array( 'labels' => array( 'name' => 'Portfolio Items' 'singular_name' => 'Portfolio Item', // more labels can be set ) ); register_post_type $args Wednesday, 24 August, 11
39. $args = array( // Show on front end 'public' => true, // Show the admin UI 'show_ui' => true ); register_post_type $args 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 item Wednesday, 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 Image Wednesday, 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. We'll Make This: Wednesday, 24 August, 11
48. This is a rare thing that WordPress does NOT make easy Wednesday, 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-fields Wednesday, 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 labour Wednesday, 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. • archive-sd_portfolio.php • 10 most recent portfolio items Theme It. Wednesday, 24 August, 11
55. • archive-sd_portfolio.php • 10 most recent portfolio items • single-sd_portfolio.php • a single portfolio item Theme It. Wednesday, 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.php Wednesday, 24 August, 11
58. Single Portfolio Item single-sd_portfolio.php Wednesday, 24 August, 11
59. Single Portfolio Item // in loop Wednesday, 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 post's 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 data Wednesday, 24 August, 11
69. WP Security 101 1. Never trust any user-submitted data Wednesday, 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-1mO Wednesday, 24 August, 11
72. Portfolio Archive Template archive-sd_portfolio.php Wednesday, 24 August, 11
73. Portfolio Archive Template • Similar bits to the single portfolio item, but with less detail Wednesday, 24 August, 11
74. Portfolio Archive Template • Similar bits to the single portfolio item, but with less detail • Add JavaScript for the whooshy bits Wednesday, 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 Theme Wednesday, 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 template Wednesday, 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 Way Wednesday, 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/ @mattwiebe Wednesday, 24 August, 11