$30 off During Our Annual Pro Sale. View Details »

Power Your Portfolio With WordPress

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.

Matt Wiebe

September 26, 2011
Tweet

More Decks by Matt Wiebe

Other Decks in Programming

Transcript

  1. Power Your Portfolio
    With WordPress
    Matt Wiebe http://somadesign.ca/ @mattwiebe
    Wednesday, 24 August, 11

    View Slide

  2. Knowledge.
    Wednesday, 24 August, 11

    View Slide

  3. Knowledge.
    • Make a Child Theme
    Wednesday, 24 August, 11

    View Slide

  4. Knowledge.
    • Make a Child Theme
    • Make a custom content type
    Wednesday, 24 August, 11

    View Slide

  5. Knowledge.
    • Make a Child Theme
    • Make a custom content type
    • Add and retrieve meta data
    Wednesday, 24 August, 11

    View Slide

  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

    View Slide

  7. Child Themes
    Wednesday, 24 August, 11

    View Slide

  8. Child Themes
    • Quick
    • DRY (Don’t Repeat Yourself)
    Wednesday, 24 August, 11

    View Slide

  9. /*
    Theme Name: My Portfolio
    Template: twentyeleven
    */
    style.css
    Wednesday, 24 August, 11

    View Slide

  10. /*
    Theme Name: My Portfolio
    Template: twentyeleven
    */
    style.css
    Wednesday, 24 August, 11

    View Slide

  11. Parent/Child Terminology
    Parent | Child
    Template | Stylesheet
    Wednesday, 24 August, 11

    View Slide

  12. Parent Theme (Template)
    Wednesday, 24 August, 11

    View Slide

  13. Child Theme (Stylesheet)
    Wednesday, 24 August, 11

    View Slide

  14. Child Theme Inheritance
    • WP looks in the child theme first
    Wednesday, 24 August, 11

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  18. Child Themes:
    ONLY CHANGE WHAT NEEDS CHANGING
    Wednesday, 24 August, 11

    View Slide

  19. Child Themes:
    ONLY CHANGE WHAT NEEDS CHANGING
    OR:
    Wednesday, 24 August, 11

    View Slide

  20. Child Themes:
    ONLY CHANGE WHAT NEEDS CHANGING
    OR:
    WORK SMARTER, NOT HARDER
    Wednesday, 24 August, 11

    View Slide

  21. Let's Code
    Wednesday, 24 August, 11

    View Slide

  22. Portfolios Need Items
    add_action('init', 'sd_init');
    function sd_init {
    $args = array();
    register_post_type('sd_portfolio', $args);
    }
    Wednesday, 24 August, 11

    View Slide

  23. Crash Course in Hooks
    Wednesday, 24 August, 11

    View Slide

  24. Crash Course in Hooks
    • The foundation of WP’s plugin system
    Wednesday, 24 August, 11

    View Slide

  25. Crash Course in Hooks
    • The foundation of WP’s plugin system
    • ACTIONS run at various points
    Wednesday, 24 August, 11

    View Slide

  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 ?<br/>}<br/>Wednesday, 24 August, 11<br/>

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  30. add_action('init', 'sd_init');
    function sd_init {
    $args = array();
    register_post_type('sd_portfolio', $args);
    }
    Wednesday, 24 August, 11

    View Slide

  31. add_action('init', 'sd_init');
    function sd_init {
    $args = array();
    register_post_type('sd_portfolio', $args);
    }
    Wednesday, 24 August, 11

    View Slide

  32. add_action('init', 'sd_init');
    function sd_init {
    $args = array();
    register_post_type('sd_portfolio', $args);
    }
    Wednesday, 24 August, 11

    View Slide

  33. add_action('init', 'sd_init');
    function sd_init {
    $args = array();
    register_post_type('sd_portfolio', $args);
    }
    Wednesday, 24 August, 11

    View Slide

  34. add_action('init', 'sd_init');
    function sd_init {
    $args = array();
    register_post_type('sd_portfolio', $args);
    }
    Wednesday, 24 August, 11

    View Slide

  35. $args = array(
    'supports' => array('title', 'editor',
    'thumbnail')
    );
    register_post_type('sd_portfolio', $args);
    register_post_type $args
    Wednesday, 24 August, 11

    View Slide

  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

    View Slide

  37. $args = array(
    'has_archive' => 'portfolio'
    );
    // Sets URL for all portfolio items
    // example.com/portfolio/
    register_post_type $args
    Wednesday, 24 August, 11

    View Slide

  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

    View Slide

  39. $args = array(
    // Show on front end
    'public' => true,
    // Show the admin UI
    'show_ui' => true
    );
    register_post_type $args
    Wednesday, 24 August, 11

    View Slide

  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

    View Slide

  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

    View Slide

  42. Custom Image Sizes
    // width
    add_image_size('sd_portfolio', 1000, 500, true);
    Wednesday, 24 August, 11

    View Slide

  43. Custom Image Sizes
    // height
    add_image_size('sd_portfolio', 1000, 500, true);
    Wednesday, 24 August, 11

    View Slide

  44. Custom Image Sizes
    // crop (optional, false default)
    add_image_size('sd_portfolio', 1000, 500, true);
    Wednesday, 24 August, 11

    View Slide

  45. There’s More to a Portfolio
    Than a Title & an Image
    Wednesday, 24 August, 11

    View Slide

  46. More Portfolio Info
    • Work Done
    • Agency (if you’re a freelancer)
    • URL of finished work
    • Client quote
    • Other?
    Wednesday, 24 August, 11

    View Slide

  47. We'll Make This:
    Wednesday, 24 August, 11

    View Slide

  48. This is a rare thing that
    WordPress does
    NOT
    make easy
    Wednesday, 24 August, 11

    View Slide

  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); ?>


    Live Site URL:



    }
    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

    View Slide

  50. Blech.
    Wednesday, 24 August, 11

    View Slide

  51. Simpler Metaboxes
    • More Fields Plugin
    • http://wordpress.org/extend/plugins/more-fields
    Wednesday, 24 August, 11

    View Slide

  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

    View Slide

  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

    View Slide

  54. • archive-sd_portfolio.php
    • 10 most recent portfolio items
    Theme It.
    Wednesday, 24 August, 11

    View Slide

  55. • archive-sd_portfolio.php
    • 10 most recent portfolio items
    • single-sd_portfolio.php
    • a single portfolio item
    Theme It.
    Wednesday, 24 August, 11

    View Slide

  56. Loop Refresher
    while ( have_posts() ) : the_post();
    // do some HTML + template_tags
    // title, featured image, metadata...
    endwhile;
    Wednesday, 24 August, 11

    View Slide

  57. Single Portfolio Item
    single-sd_portfolio.php
    Wednesday, 24 August, 11

    View Slide

  58. Single Portfolio Item
    single-sd_portfolio.php
    Wednesday, 24 August, 11

    View Slide

  59. Single Portfolio Item
    // in loop
    Wednesday, 24 August, 11

    View Slide

  60. Single Portfolio Item
    // in loop
    // featured image
    the_post_thumbnail('your_image_id');
    Wednesday, 24 August, 11

    View Slide

  61. Single Portfolio Item
    // in loop
    // featured image
    the_post_thumbnail('your_image_id');
    // add_image_size('your_image_id');
    Wednesday, 24 August, 11

    View Slide

  62. Displaying Metadata
    // in loop!
    $live_url = get_post_meta( get_the_ID(), 'live_url',
    true );
    Wednesday, 24 August, 11

    View Slide

  63. Displaying Metadata
    // the current post's ID
    $live_url = get_post_meta( get_the_ID(), 'live_url',
    true );
    Wednesday, 24 August, 11

    View Slide

  64. Displaying Metadata
    // the meta key (set previously)
    $live_url = get_post_meta( get_the_ID(), 'live_url',
    true );
    Wednesday, 24 August, 11

    View Slide

  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

    View Slide

  66. Displaying Metadata
    $live_url = get_post_meta( get_the_ID(), 'live_url',
    true );
    // security FAIL
    View
    Wednesday, 24 August, 11

    View Slide

  67. Displaying Metadata
    $live_url = get_post_meta( get_the_ID(), 'live_url',
    true );
    // security WIN
    View
    Wednesday, 24 August, 11

    View Slide

  68. WP Security 101
    1. Never trust any user-submitted data
    Wednesday, 24 August, 11

    View Slide

  69. WP Security 101
    1. Never trust any user-submitted data
    Wednesday, 24 August, 11

    View Slide

  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

    View Slide

  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

    View Slide

  72. Portfolio Archive Template
    archive-sd_portfolio.php
    Wednesday, 24 August, 11

    View Slide

  73. Portfolio Archive Template
    • Similar bits to the single portfolio item, but with
    less detail
    Wednesday, 24 August, 11

    View Slide

  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

    View Slide

  75. Managing JS the WP Way

    Wednesday, 24 August, 11

    View Slide

  76. Managing JS the WP Way

    Wednesday, 24 August, 11

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  83. Review
    • Made a Child Theme
    Wednesday, 24 August, 11

    View Slide

  84. Review
    • Made a Child Theme
    • Made a custom content type (post_type)
    Wednesday, 24 August, 11

    View Slide

  85. Review
    • Made a Child Theme
    • Made a custom content type (post_type)
    • Added and retrieved meta data (securely!)
    Wednesday, 24 August, 11

    View Slide

  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

    View Slide

  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

    View Slide

  88. Hang Out With WP Nerds
    Winnipeg WordPress Meetup:
    http://winnipegwpmeetup.wordpress.com/
    Wednesday, 24 August, 11

    View Slide

  89. Questions?
    The code: https://github.com/mattwiebe/My-Portfolio-Theme
    Matt Wiebe http://somadesign.ca/ @mattwiebe
    Wednesday, 24 August, 11

    View Slide