Power Your Portfolio With WordPress

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

View Slide

Knowledge.

View Slide

Knowledge.
• Make a Child Theme

View Slide

Knowledge.
• Make a custom content type

View Slide

Knowledge.
• Add and retrieve meta data

View Slide

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

View Slide

Child Themes

View Slide

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

View Slide

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

View Slide

Parent/Child Terminology
Parent | Child
Template | Stylesheet

View Slide

Parent Theme (Template)

View Slide

Child Theme (Stylesheet)

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

Child Themes:
ONLY CHANGE WHAT NEEDS CHANGING

View Slide

Child Themes:
OR:

View Slide

Child Themes:
OR:
WORK SMARTER, NOT HARDER

View Slide

Let's Code

View Slide

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

View Slide

Crash Course in Hooks

View Slide

• The foundation of WP’s plugin system

View Slide

• ACTIONS run at various points

View Slide

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

• FILTERS run and allow you to modify data

View Slide

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

View Slide

• FILTERS run and allow you to modify data
• Both connect a hook with a function of your own

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

Custom Image Sizes
// in your functions.php
add_image_size('sd_portfolio', 1000, 500, true);
// in your theme
the_post_thumbnail('sd_portfolio');

View Slide

Custom Image Sizes
// width

View Slide

Custom Image Sizes
// height

View Slide

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

View Slide

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

View Slide

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

View Slide

We'll Make This:

View Slide

This is a rare thing that
WordPress does
NOT
make easy

View Slide

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

View Slide

Blech.

View Slide

Simpler Metaboxes
• More Fields Plugin
• http://wordpress.org/extend/plugins/more-ﬁelds

View Slide

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

View Slide

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

View Slide

• archive-sd_portfolio.php
• 10 most recent portfolio items
Theme It.

View Slide

• archive-sd_portfolio.php
• 10 most recent portfolio items
• single-sd_portfolio.php
• a single portfolio item
Theme It.

View Slide

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

View Slide

Single Portfolio Item
single-sd_portfolio.php

View Slide

// in loop

View Slide

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

View Slide

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

View Slide

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

View Slide

Displaying Metadata
// the current post's ID
true );

View Slide

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

View Slide

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

View Slide

Displaying Metadata
true );
// security FAIL
View

View Slide

Displaying Metadata
true );
// security WIN
View

View Slide

WP Security 101
1. Never trust any user-submitted data

View Slide

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)

View Slide

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

View Slide

Portfolio Archive Template
archive-sd_portfolio.php

View Slide

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

View Slide

• Similar bits to the single portfolio item, but with
less detail
• Add JavaScript for the whooshy bits

View Slide

Managing JS the WP Way


View Slide

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

View Slide

// URL of JS file.

View Slide

// An array of possible dependencies. Optional.

View Slide

// Version number of script. Optional.

View Slide

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

View Slide

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

View Slide

Review
• Made a Child Theme

View Slide

Review
• Made a custom content type (post_type)

View Slide

Review
• Added and retrieved meta data (securely!)

View Slide

Review
• Created a custom content type template

View Slide

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

View Slide

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

View Slide

Questions?
The code: https://github.com/mattwiebe/My-Portfolio-Theme
Matt Wiebe http://somadesign.ca/ @mattwiebe

View Slide

Power Your Portfolio With WordPress

Power Your Portfolio With WordPress

Matt Wiebe

More Decks by Matt Wiebe

Other Decks in Programming

Featured

Transcript