Power Your Portfolio With WordPress

3f7cda86b0d471afad79a0b5423d1677?s=47 Matt Wiebe
September 26, 2011

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.

3f7cda86b0d471afad79a0b5423d1677?s=128

Matt Wiebe

September 26, 2011
Tweet

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