WP Portfolio

Power Your PortfolioWith WordPress

Matt Wiebe http://somadesign.ca/ @mattwiebe

Wednesday, 24 August, 11

Knowledge.


Knowledge.• Make a Child Theme



• Make a custom content type




• Add and retrieve meta data




• Add and retrieve meta data

• Create a custom content type template


Child Themes


Child Themes• Quick

• DRY (Don’t Repeat Yourself)


/*Theme Name: My PortfolioTemplate: twentyeleven*/

style.css


/*Theme Name: My PortfolioTemplate: twentyeleven*/

style.css


Parent/Child TerminologyParent | Child

Template | Stylesheet


Parent Theme (Template)


Child Theme (Stylesheet)


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




• exception: both functions.php files will be loaded

• functions.php is like your theme's mini-plugin


Child Themes:ONLY CHANGE WHAT NEEDS CHANGING



O R :



O R :

WORK SMARTER, NOT HARDER


Let's Code


Portfolios Need Itemsadd_action('init', 'sd_init');function sd_init { $args = array(); register_post_type('sd_portfolio', $args);}


Crash Course in Hooks


Crash Course in Hooks• The foundation of WP’s plugin system



• ACTIONS run at various points


Action Hook Exampleadd_action('wp_head', 'my_wp_head');function my_wp_head() { // Does something in a theme's header // Maybe echo a Typekit <script>?}




• FILTERS run and allow you to modify data


Filter Hook Exampleadd_filter('the_title', 'no_orphans');function no_orphans($title) { // run an awesome piece of code // ALWAYS return the passed-in filter value return $title;}




• FILTERS run and allow you to modify data

• Both connect a hook with a function of your own


add_action('init', 'sd_init');function sd_init { $args = array(); register_post_type('sd_portfolio', $args);}










$args = array( 'supports' => array('title', 'editor', 'thumbnail'));register_post_type('sd_portfolio', $args);

register_post_type $args


$args = array( 'rewrite' => array('slug' => 'portfolio'));// Sets URL for single Portfolio Item// example.com/portfolio/some-portfolio-item



$args = array( 'has_archive' => 'portfolio');// Sets URL for all portfolio items// example.com/portfolio/



$args = array( 'labels' => array( 'name' => 'Portfolio Items' 'singular_name' => 'Portfolio Item', // more labels can be set ));



$args = array( // Show on front end 'public' => true, // Show the admin UI 'show_ui' => true);



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


Custom Image Sizes// in your functions.phpadd_image_size('sd_portfolio', 1000, 500, true);

// in your themethe_post_thumbnail('sd_portfolio');


Custom Image Sizes// widthadd_image_size('sd_portfolio', 1000, 500, true);


Custom Image Sizes// heightadd_image_size('sd_portfolio', 1000, 500, true);


Custom Image Sizes// crop (optional, false default)add_image_size('sd_portfolio', 1000, 500, true);


There’s More to a Portfolio Than a Title & an Image


More Portfolio Info• Work Done

• Agency (if you’re a freelancer)

• URL of finished work

• Client quote

• Other?


We'll Make This:


This is a rare thing that WordPress does

NOTmake easy


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 thisif ( isset($_POST['live_url']) ) {

update_post_meta(get_the_ID(), 'live_url', $_POST['live_url']);}

}


Blech.


Simpler Metaboxes• More Fields Plugin

• http://wordpress.org/extend/plugins/more-fields


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


$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 metaboxnew Tribe_Meta_Box($meta_box);


• archive-sd_portfolio.php

• 10 most recent portfolio items

Theme It.


• archive-sd_portfolio.php

• 10 most recent portfolio items

• single-sd_portfolio.php

• a single portfolio item

Theme It.


Loop Refresherwhile ( have_posts() ) : the_post(); // do some HTML + template_tags // title, featured image, metadata...endwhile;


Single Portfolio Itemsingle-sd_portfolio.php


Single Portfolio Itemsingle-sd_portfolio.php


Single Portfolio Item// in loop


Single Portfolio Item// in loop// featured imagethe_post_thumbnail('your_image_id');


Single Portfolio Item// in loop// featured imagethe_post_thumbnail('your_image_id');// add_image_size('your_image_id');


Displaying Metadata// in loop!$live_url = get_post_meta( get_the_ID(), 'live_url', true );


Displaying Metadata// the current post's ID$live_url = get_post_meta( get_the_ID(), 'live_url', true );


Displaying Metadata// the meta key (set previously)$live_url = get_post_meta( get_the_ID(), 'live_url', true );


Displaying Metadata// single piece of metadata// Usually want true (default false)$live_url = get_post_meta( get_the_ID(), 'live_url', true );


Displaying Metadata$live_url = get_post_meta( get_the_ID(), 'live_url', true );

// security FAIL<a href="<?php echo $live_url; ?>">View</a>


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>


WP Security 1011. Never trust any user-submitted data




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)



2. Watch Mark Jaquith’s security presentation on WordPress.tv: http://wp.me/pllYY-1mO


Portfolio Archive Template archive-sd_portfolio.php


Portfolio Archive Template • Similar bits to the single portfolio item, but with

less detail


Portfolio Archive Template • Similar bits to the single portfolio item, but with

less detail

• Add JavaScript for the whooshy bits


Managing JS the WP Way<script src="http://example.com/file.js"></script>


Managing JS the WP Way<script src="http://example.com/file.js"></script>


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


Managing JS the WP Way// URL of JS file.

wp_register_script( 'script-name', 'http://path/to/script.js', array('jquery'), '1.0', true );


Managing JS the WP Way// An array of possible dependencies. Optional.



Managing JS the WP Way// Version number of script. Optional.



Managing JS the WP Way// Load in footer. Optional (defaults to false).



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


Review• Made a Child Theme



• Made a custom content type (post_type)




• Added and retrieved meta data (securely!)





• Created a custom content type template





• Created a custom content type template

• Added JS the WP Way


Hang Out With WP NerdsWinnipeg WordPress Meetup:

http://winnipegwpmeetup.wordpress.com/


Questions?

The code: https://github.com/mattwiebe/My-Portfolio-Theme

Matt Wiebe http://somadesign.ca/ @mattwiebe


WP Portfolio

Technology

child theme inheritance

script script

child theme rstwednesday

true wp

child themewednesday

wp waywednesday

child themeswednesday

parent theme templatewednesday