Transcript
Power Your PortfolioWith WordPress
Matt Wiebe http://somadesign.ca/ @mattwiebe
Wednesday, 24 August, 11
Knowledge.
Wednesday, 24 August, 11
Knowledge.• Make a Child Theme
Wednesday, 24 August, 11
Knowledge.• Make a Child Theme
• Make a custom content type
Wednesday, 24 August, 11
Knowledge.• Make a Child Theme
• Make a custom content type
• Add and retrieve meta data
Wednesday, 24 August, 11
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
Child Themes
Wednesday, 24 August, 11
Child Themes• Quick
• DRY (Don’t Repeat Yourself)
Wednesday, 24 August, 11
/*Theme Name: My PortfolioTemplate: twentyeleven*/
style.css
Wednesday, 24 August, 11
/*Theme Name: My PortfolioTemplate: twentyeleven*/
style.css
Wednesday, 24 August, 11
Parent/Child TerminologyParent | Child
Template | Stylesheet
Wednesday, 24 August, 11
Parent Theme (Template)
Wednesday, 24 August, 11
Child Theme (Stylesheet)
Wednesday, 24 August, 11
Child Theme Inheritance• WP looks in the child theme first
Wednesday, 24 August, 11
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
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
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
Child Themes:ONLY CHANGE WHAT NEEDS CHANGING
Wednesday, 24 August, 11
Child Themes:ONLY CHANGE WHAT NEEDS CHANGING
O R :
Wednesday, 24 August, 11
Child Themes:ONLY CHANGE WHAT NEEDS CHANGING
O R :
WORK SMARTER, NOT HARDER
Wednesday, 24 August, 11
Let's Code
Wednesday, 24 August, 11
Portfolios Need Itemsadd_action('init', 'sd_init');function sd_init { $args = array(); register_post_type('sd_portfolio', $args);}
Wednesday, 24 August, 11
Crash Course in Hooks
Wednesday, 24 August, 11
Crash Course in Hooks• The foundation of WP’s plugin system
Wednesday, 24 August, 11
Crash Course in Hooks• The foundation of WP’s plugin system
• ACTIONS run at various points
Wednesday, 24 August, 11
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>?}
Wednesday, 24 August, 11
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
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;}
Wednesday, 24 August, 11
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
add_action('init', 'sd_init');function sd_init { $args = array(); register_post_type('sd_portfolio', $args);}
Wednesday, 24 August, 11
add_action('init', 'sd_init');function sd_init { $args = array(); register_post_type('sd_portfolio', $args);}
Wednesday, 24 August, 11
add_action('init', 'sd_init');function sd_init { $args = array(); register_post_type('sd_portfolio', $args);}
Wednesday, 24 August, 11
add_action('init', 'sd_init');function sd_init { $args = array(); register_post_type('sd_portfolio', $args);}
Wednesday, 24 August, 11
add_action('init', 'sd_init');function sd_init { $args = array(); register_post_type('sd_portfolio', $args);}
Wednesday, 24 August, 11
$args = array( 'supports' => array('title', 'editor', 'thumbnail'));register_post_type('sd_portfolio', $args);
register_post_type $args
Wednesday, 24 August, 11
$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
$args = array( 'has_archive' => 'portfolio');// Sets URL for all portfolio items// example.com/portfolio/
register_post_type $args
Wednesday, 24 August, 11
$args = array( 'labels' => array( 'name' => 'Portfolio Items' 'singular_name' => 'Portfolio Item', // more labels can be set ));
register_post_type $args
Wednesday, 24 August, 11
$args = array( // Show on front end 'public' => true, // Show the admin UI 'show_ui' => true);
register_post_type $args
Wednesday, 24 August, 11
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
Custom Image Sizes// in your functions.phpadd_image_size('sd_portfolio', 1000, 500, true);
// in your themethe_post_thumbnail('sd_portfolio');
Wednesday, 24 August, 11
Custom Image Sizes// widthadd_image_size('sd_portfolio', 1000, 500, true);
Wednesday, 24 August, 11
Custom Image Sizes// heightadd_image_size('sd_portfolio', 1000, 500, true);
Wednesday, 24 August, 11
Custom Image Sizes// crop (optional, false default)add_image_size('sd_portfolio', 1000, 500, true);
Wednesday, 24 August, 11
There’s More to a Portfolio Than a Title & an Image
Wednesday, 24 August, 11
More Portfolio Info• Work Done
• Agency (if you’re a freelancer)
• URL of finished work
• Client quote
• Other?
Wednesday, 24 August, 11
We'll Make This:
Wednesday, 24 August, 11
This is a rare thing that WordPress does
NOTmake easy
Wednesday, 24 August, 11
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']);}
}
Wednesday, 24 August, 11
Blech.
Wednesday, 24 August, 11
Simpler Metaboxes• More Fields Plugin
• http://wordpress.org/extend/plugins/more-fields
Wednesday, 24 August, 11
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
$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);
Wednesday, 24 August, 11
• archive-sd_portfolio.php
• 10 most recent portfolio items
Theme It.
Wednesday, 24 August, 11
• archive-sd_portfolio.php
• 10 most recent portfolio items
• single-sd_portfolio.php
• a single portfolio item
Theme It.
Wednesday, 24 August, 11
Loop Refresherwhile ( have_posts() ) : the_post(); // do some HTML + template_tags // title, featured image, metadata...endwhile;
Wednesday, 24 August, 11
Single Portfolio Itemsingle-sd_portfolio.php
Wednesday, 24 August, 11
Single Portfolio Itemsingle-sd_portfolio.php
Wednesday, 24 August, 11
Single Portfolio Item// in loop
Wednesday, 24 August, 11
Single Portfolio Item// in loop// featured imagethe_post_thumbnail('your_image_id');
Wednesday, 24 August, 11
Single Portfolio Item// in loop// featured imagethe_post_thumbnail('your_image_id');// add_image_size('your_image_id');
Wednesday, 24 August, 11
Displaying Metadata// in loop!$live_url = get_post_meta( get_the_ID(), 'live_url', true );
Wednesday, 24 August, 11
Displaying Metadata// the current post's ID$live_url = get_post_meta( get_the_ID(), 'live_url', true );
Wednesday, 24 August, 11
Displaying Metadata// the meta key (set previously)$live_url = get_post_meta( get_the_ID(), 'live_url', true );
Wednesday, 24 August, 11
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
Displaying Metadata$live_url = get_post_meta( get_the_ID(), 'live_url', true );
// security FAIL<a href="<?php echo $live_url; ?>">View</a>
Wednesday, 24 August, 11
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>
Wednesday, 24 August, 11
WP Security 1011. Never trust any user-submitted data
Wednesday, 24 August, 11
WP Security 1011. Never trust any user-submitted data
Wednesday, 24 August, 11
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
WP Security 1011. 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
Portfolio Archive Template archive-sd_portfolio.php
Wednesday, 24 August, 11
Portfolio Archive Template • Similar bits to the single portfolio item, but with
less detail
Wednesday, 24 August, 11
Portfolio Archive Template • Similar bits to the single portfolio item, but with
less detail
• Add JavaScript for the whooshy bits
Wednesday, 24 August, 11
Managing JS the WP Way<script src="http://example.com/file.js"></script>
Wednesday, 24 August, 11
Managing JS the WP Way<script src="http://example.com/file.js"></script>
Wednesday, 24 August, 11
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
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
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
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
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
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
Review• Made a Child Theme
Wednesday, 24 August, 11
Review• Made a Child Theme
• Made a custom content type (post_type)
Wednesday, 24 August, 11
Review• Made a Child Theme
• Made a custom content type (post_type)
• Added and retrieved meta data (securely!)
Wednesday, 24 August, 11
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
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
Hang Out With WP NerdsWinnipeg WordPress Meetup:
http://winnipegwpmeetup.wordpress.com/
Wednesday, 24 August, 11
Questions?
The code: https://github.com/mattwiebe/My-Portfolio-Theme
Matt Wiebe http://somadesign.ca/ @mattwiebe
Wednesday, 24 August, 11
top related