WP Portfolio

Power Your Portfolio
With WordPress

Matt Wiebe http://somadesign.ca/ @mattwiebe
Wednesday, 24 August, 11

Knowledge.


Knowledge.
• Make a Child Theme


Knowledge.
• Make a custom content type


Knowledge.
• Add and retrieve meta data


Knowledge.
• Add and retrieve meta data
• Create a custom content type template


Child Themes


Child Themes
• Quick
• DRY (Don’t Repeat Yourself)


style.css
/*
Theme Name: My Portfolio
Template: twentyeleven
*/


Parent/Child Terminology
Parent | Child
Template | Stylesheet


Parent Theme (Template)


Child Theme (Stylesheet)


Child Theme Inheritance
• WP looks in the child theme ﬁrst


• If a ﬁle isn't there, it looks in the parent theme


• exception: both functions.php ﬁles will be loaded


• exception: both functions.php ﬁles will be loaded
• functions.php is like your theme's mini-plugin


Child Themes:
ONLY CHANGE WHAT NEEDS CHANGING


Child Themes:
OR:


Child Themes:
OR:

WORK SMARTER, NOT HARDER


Let's Code


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


Crash Course in Hooks


• The foundation of WP’s plugin system


• ACTIONS run at various points


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>?
}


• FILTERS run and allow you to modify data


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;
}


• 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 $args
$args = array(
'supports' => array('title', 'editor',
'thumbnail')
);


$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 speciﬁc 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.php
add_image_size('sd_portfolio', 1000, 500, true);

// in your theme
the_post_thumbnail('sd_portfolio');


Custom Image Sizes
// width


Custom Image Sizes
// height


Custom Image Sizes
// crop (optional, false default)


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


More Portfolio Info
• Work Done
• Agency (if you’re a freelancer)
• URL of ﬁnished work
• Client quote
• Other?

We'll Make This:


This is a rare thing that
WordPress does
NOT
make 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 this
if ( 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-ﬁelds


Simpler Metaboxes
• More Fields Plugin
• http://wordpress.org/extend/plugins/more-ﬁelds
• 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 metabox
new Tribe_Meta_Box($meta_box);


Theme It.
• 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


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


Single Portfolio Item
single-sd_portfolio.php


// in loop


// in loop
// featured image
the_post_thumbnail('your_image_id');


// in loop
// featured image
the_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
true );


Displaying Metadata
// the meta key (set previously)
true );


Displaying Metadata
// single piece of metadata
// Usually want true (default false)
true );


Displaying Metadata
true );

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


Displaying Metadata
true );

// security WIN
<a href="<?php echo esc_url($live_url); ?>">View</a>


WP Security 101
1. 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)


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


Portfolio Archive Template
archive-sd_portfolio.php


• Similar bits to the single portfolio item, but with
less detail


• 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>


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


// URL of JS file.



// An array of possible dependencies. Optional.



// Version number of script. Optional.



// Load in footer. Optional (defaults to false).



$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


Review
• Made a custom content type (post_type)


Review
• Added and retrieved meta data (securely!)


Review
• Created a custom content type template


Review
• Created a custom content type template
• Added JS the WP Way

Hang Out With WP Nerds
Winnipeg WordPress Meetup:
http://winnipegwpmeetup.wordpress.com/


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

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

WP Portfolio

More Related Content

Similar to WP Portfolio (20)

Recently uploaded (20)

WP Portfolio