Slide 1
Slide 1 text
Power Your Portfolio
With WordPress
Matt Wiebe http://somadesign.ca/ @mattwiebe
Wednesday, 24 August, 11
Slide 2
Slide 2 text
Knowledge.
Wednesday, 24 August, 11
Slide 3
Slide 3 text
Knowledge.
• Make a Child Theme
Wednesday, 24 August, 11
Slide 4
Slide 4 text
Knowledge.
• Make a Child Theme
• Make a custom content type
Wednesday, 24 August, 11
Slide 5
Slide 5 text
Knowledge.
• Make a Child Theme
• Make a custom content type
• Add and retrieve meta data
Wednesday, 24 August, 11
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
Child Themes
Wednesday, 24 August, 11
Slide 8
Slide 8 text
Child Themes
• Quick
• DRY (Don’t Repeat Yourself)
Wednesday, 24 August, 11
Slide 9
Slide 9 text
/*
Theme Name: My Portfolio
Template: twentyeleven
*/
style.css
Wednesday, 24 August, 11
Slide 10
Slide 10 text
/*
Theme Name: My Portfolio
Template: twentyeleven
*/
style.css
Wednesday, 24 August, 11
Slide 11
Slide 11 text
Parent/Child Terminology
Parent | Child
Template | Stylesheet
Wednesday, 24 August, 11
Slide 12
Slide 12 text
Parent Theme (Template)
Wednesday, 24 August, 11
Slide 13
Slide 13 text
Child Theme (Stylesheet)
Wednesday, 24 August, 11
Slide 14
Slide 14 text
Child Theme Inheritance
• WP looks in the child theme first
Wednesday, 24 August, 11
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
Child Themes:
ONLY CHANGE WHAT NEEDS CHANGING
Wednesday, 24 August, 11
Slide 19
Slide 19 text
Child Themes:
ONLY CHANGE WHAT NEEDS CHANGING
OR:
Wednesday, 24 August, 11
Slide 20
Slide 20 text
Child Themes:
ONLY CHANGE WHAT NEEDS CHANGING
OR:
WORK SMARTER, NOT HARDER
Wednesday, 24 August, 11
Slide 21
Slide 21 text
Let's Code
Wednesday, 24 August, 11
Slide 22
Slide 22 text
Portfolios Need Items
add_action('init', 'sd_init');
function sd_init {
$args = array();
register_post_type('sd_portfolio', $args);
}
Wednesday, 24 August, 11
Slide 23
Slide 23 text
Crash Course in Hooks
Wednesday, 24 August, 11
Slide 24
Slide 24 text
Crash Course in Hooks
• The foundation of WP’s plugin system
Wednesday, 24 August, 11
Slide 25
Slide 25 text
Crash Course in Hooks
• The foundation of WP’s plugin system
• ACTIONS run at various points
Wednesday, 24 August, 11
Slide 26
Slide 26 text
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 ?
}
Wednesday, 24 August, 11
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
add_action('init', 'sd_init');
function sd_init {
$args = array();
register_post_type('sd_portfolio', $args);
}
Wednesday, 24 August, 11
Slide 31
Slide 31 text
add_action('init', 'sd_init');
function sd_init {
$args = array();
register_post_type('sd_portfolio', $args);
}
Wednesday, 24 August, 11
Slide 32
Slide 32 text
add_action('init', 'sd_init');
function sd_init {
$args = array();
register_post_type('sd_portfolio', $args);
}
Wednesday, 24 August, 11
Slide 33
Slide 33 text
add_action('init', 'sd_init');
function sd_init {
$args = array();
register_post_type('sd_portfolio', $args);
}
Wednesday, 24 August, 11
Slide 34
Slide 34 text
add_action('init', 'sd_init');
function sd_init {
$args = array();
register_post_type('sd_portfolio', $args);
}
Wednesday, 24 August, 11
Slide 35
Slide 35 text
$args = array(
'supports' => array('title', 'editor',
'thumbnail')
);
register_post_type('sd_portfolio', $args);
register_post_type $args
Wednesday, 24 August, 11
Slide 36
Slide 36 text
$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
Slide 37
Slide 37 text
$args = array(
'has_archive' => 'portfolio'
);
// Sets URL for all portfolio items
// example.com/portfolio/
register_post_type $args
Wednesday, 24 August, 11
Slide 38
Slide 38 text
$args = array(
'labels' => array(
'name' => 'Portfolio Items'
'singular_name' => 'Portfolio Item',
// more labels can be set
)
);
register_post_type $args
Wednesday, 24 August, 11
Slide 39
Slide 39 text
$args = array(
// Show on front end
'public' => true,
// Show the admin UI
'show_ui' => true
);
register_post_type $args
Wednesday, 24 August, 11
Slide 40
Slide 40 text
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
Slide 41
Slide 41 text
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
Slide 42
Slide 42 text
Custom Image Sizes
// width
add_image_size('sd_portfolio', 1000, 500, true);
Wednesday, 24 August, 11
Slide 43
Slide 43 text
Custom Image Sizes
// height
add_image_size('sd_portfolio', 1000, 500, true);
Wednesday, 24 August, 11
Slide 44
Slide 44 text
Custom Image Sizes
// crop (optional, false default)
add_image_size('sd_portfolio', 1000, 500, true);
Wednesday, 24 August, 11
Slide 45
Slide 45 text
There’s More to a Portfolio
Than a Title & an Image
Wednesday, 24 August, 11
Slide 46
Slide 46 text
More Portfolio Info
• Work Done
• Agency (if you’re a freelancer)
• URL of finished work
• Client quote
• Other?
Wednesday, 24 August, 11
Slide 47
Slide 47 text
We'll Make This:
Wednesday, 24 August, 11
Slide 48
Slide 48 text
This is a rare thing that
WordPress does
NOT
make easy
Wednesday, 24 August, 11
Slide 49
Slide 49 text
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:
Slide 50
Slide 50 text
Blech.
Wednesday, 24 August, 11
Slide 51
Slide 51 text
Simpler Metaboxes
• More Fields Plugin
• http://wordpress.org/extend/plugins/more-fields
Wednesday, 24 August, 11
Slide 52
Slide 52 text
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
Slide 53
Slide 53 text
$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
Slide 54
Slide 54 text
• archive-sd_portfolio.php
• 10 most recent portfolio items
Theme It.
Wednesday, 24 August, 11
Slide 55
Slide 55 text
• archive-sd_portfolio.php
• 10 most recent portfolio items
• single-sd_portfolio.php
• a single portfolio item
Theme It.
Wednesday, 24 August, 11
Slide 56
Slide 56 text
Loop Refresher
while ( have_posts() ) : the_post();
// do some HTML + template_tags
// title, featured image, metadata...
endwhile;
Wednesday, 24 August, 11
Slide 57
Slide 57 text
Single Portfolio Item
single-sd_portfolio.php
Wednesday, 24 August, 11
Slide 58
Slide 58 text
Single Portfolio Item
single-sd_portfolio.php
Wednesday, 24 August, 11
Slide 59
Slide 59 text
Single Portfolio Item
// in loop
Wednesday, 24 August, 11
Slide 60
Slide 60 text
Single Portfolio Item
// in loop
// featured image
the_post_thumbnail('your_image_id');
Wednesday, 24 August, 11
Slide 61
Slide 61 text
Single Portfolio Item
// in loop
// featured image
the_post_thumbnail('your_image_id');
// add_image_size('your_image_id');
Wednesday, 24 August, 11
Slide 62
Slide 62 text
Displaying Metadata
// in loop!
$live_url = get_post_meta( get_the_ID(), 'live_url',
true );
Wednesday, 24 August, 11
Slide 63
Slide 63 text
Displaying Metadata
// the current post's ID
$live_url = get_post_meta( get_the_ID(), 'live_url',
true );
Wednesday, 24 August, 11
Slide 64
Slide 64 text
Displaying Metadata
// the meta key (set previously)
$live_url = get_post_meta( get_the_ID(), 'live_url',
true );
Wednesday, 24 August, 11
Slide 65
Slide 65 text
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
Slide 66
Slide 66 text
Displaying Metadata
$live_url = get_post_meta( get_the_ID(), 'live_url',
true );
// security FAIL
View
Wednesday, 24 August, 11
Slide 67
Slide 67 text
Displaying Metadata
$live_url = get_post_meta( get_the_ID(), 'live_url',
true );
// security WIN
View
Wednesday, 24 August, 11
Slide 68
Slide 68 text
WP Security 101
1. Never trust any user-submitted data
Wednesday, 24 August, 11
Slide 69
Slide 69 text
WP Security 101
1. Never trust any user-submitted data
Wednesday, 24 August, 11
Slide 70
Slide 70 text
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
Slide 71
Slide 71 text
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
Slide 72
Slide 72 text
Portfolio Archive Template
archive-sd_portfolio.php
Wednesday, 24 August, 11
Slide 73
Slide 73 text
Portfolio Archive Template
• Similar bits to the single portfolio item, but with
less detail
Wednesday, 24 August, 11
Slide 74
Slide 74 text
Portfolio Archive Template
• Similar bits to the single portfolio item, but with
less detail
• Add JavaScript for the whooshy bits
Wednesday, 24 August, 11
Slide 75
Slide 75 text
Managing JS the WP Way
Wednesday, 24 August, 11
Slide 76
Slide 76 text
Managing JS the WP Way
Wednesday, 24 August, 11
Slide 77
Slide 77 text
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
Slide 78
Slide 78 text
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
Slide 79
Slide 79 text
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
Slide 80
Slide 80 text
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
Slide 81
Slide 81 text
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
Slide 82
Slide 82 text
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
Slide 83
Slide 83 text
Review
• Made a Child Theme
Wednesday, 24 August, 11
Slide 84
Slide 84 text
Review
• Made a Child Theme
• Made a custom content type (post_type)
Wednesday, 24 August, 11
Slide 85
Slide 85 text
Review
• Made a Child Theme
• Made a custom content type (post_type)
• Added and retrieved meta data (securely!)
Wednesday, 24 August, 11
Slide 86
Slide 86 text
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
Slide 87
Slide 87 text
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
Slide 88
Slide 88 text
Hang Out With WP Nerds
Winnipeg WordPress Meetup:
http://winnipegwpmeetup.wordpress.com/
Wednesday, 24 August, 11
Slide 89
Slide 89 text
Questions?
The code: https://github.com/mattwiebe/My-Portfolio-Theme
Matt Wiebe http://somadesign.ca/ @mattwiebe
Wednesday, 24 August, 11