Hi, I've attempted to put together a portfolio on my WP blog using php, jquery, and this tutorial- http://wp.tutsplus.com/tutorials/theme-development/create-a-quicksand-portfolio-with-wordpress/
I've gone to my WP site and tried to put it together, but nothing seems to work.
Aside from "what's wrong?" I'd also like to know how do I utilize these features to display my portfolio? (Simply post images in the page/post, set featured images, etc.)
My apologies for this perhaps not being the easiest question, but thorough help and advice is greatly appreciated. If further information is needed, please let me know.
functions.php
<?php
// portfolio
include("portfolio/portfolio-post-types.php");
// Register our scripts
function register_js()
{
if ( !is_admin() )
{
wp_register_script( 'quicksand', get_template_directory_uri() . '/js/jquery.quicksand.js', 'jquery' );
wp_register_script( 'easing', get_template_directory_uri() . '/js/jquery.easing.1.3.js', 'jquery' );
wp_register_script( 'custom', get_template_directory_uri() . '/js/jquery.custom.js', 'jquery', '1.0', true );
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'quicksand' );
wp_enqueue_script( 'easing' );
wp_enqueue_script( 'custom' );
}
}
add_action('init', 'register_js');
// Register our styles
function register_css()
{
if (!is_admin()) {
wp_register_style( 'prettyPhoto', get_template_directory_uri() . '/css/prettyPhoto.css' );
wp_enqueue_style( 'prettyPhoto' );
}
}
add_action( 'init', 'register_css' );
// sidebar functions
if(function_exists('register_sidebar'))
{
register_sidebar();
}
// add thumbnail support
add_theme_support('post-thumbnails');
// disable autoformat with raw
function my_formatter($content) {
$new_content = '';
$pattern_full = '{(\[raw\].*?\[/raw\])}is';
$pattern_contents = '{\[raw\](.*?)\[/raw\]}is';
$pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);
foreach ($pieces as $piece) {
if (preg_match($pattern_contents, $piece, $matches)) {
$new_content .= $matches[1];
} else {
$new_content .= wptexturize(wpautop($piece));
}
}
return $new_content;
}
remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');
add_filter('the_content', 'my_formatter', 99);
?>
portfolio.php
<?php
/*
Template Name: Portfolio
*/
?>
<?php get_header(); ?>
<!-- #content BEGIN -->
<div id="content" class="clearfix">
<ul class="filterable-grid clearfix">
<?php $wpbp = new WP_Query(array( 'post_type' => 'portfolio', 'posts_per_page' =>'-1' ) ); ?>
<?php if ($wpbp->have_posts()) : while ($wpbp->have_posts()) : $wpbp->the_post(); ?>
<?php $terms = get_the_terms( get_the_ID(), 'filter' ); ?>
<li data-id="id-<?php echo $count; ?>" data-type="<?php foreach ($terms as $term) { echo strtolower(preg_replace('/\s+/', '-', $term->name)). ' '; } ?>">
<?php if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) : ?>
<?php the_post_thumbnail('portfolio'); ?>
<?php endif; ?>
<p><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></p>
</li>
<?php $count++; ?>
<?php endwhile; endif; ?>
<?php
$large_image = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), 'fullsize', false, '' );
$large_image = $large_image[0];
?>
<?php wp_reset_query(); ?>
</ul>
</div><!-- #content END -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
portfolio-post-types.php
<?php
// function: post_type BEGIN
function post_type()
{
$labels = array(
'name' => __( 'Portfolio'),
'singular_name' => __('Portfolio'),
'rewrite' => array(
'slug' => __( 'portfolio' )
),
'add_new' => _x('Add Item', 'portfolio'),
'edit_item' => __('Edit Portfolio Item'),
'new_item' => __('New Portfolio Item'),
'view_item' => __('View Portfolio'),
'search_items' => __('Search Portfolio'),
'not_found' => __('No Portfolio Items Found'),
'not_found_in_trash' => __('No Portfolio Items Found In Trash'),
'parent_item_colon' => ''
);
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => null,
'supports' => array(
'title',
'editor',
'thumbnail'
)
);
register_post_type(__( 'portfolio' ), $args);
} // function: post_type END
// function: portfolio_messages BEGIN
function portfolio_messages($messages)
{
$messages[__( 'portfolio' )] =
array(
0 => '',
1 => sprintf(('Portfolio Updated. <a href="%s">View portfolio</a>'), esc_url(get_permalink($post_ID))),
2 => __('Custom Field Updated.'),
3 => __('Custom Field Deleted.'),
4 => __('Portfolio Updated.'),
5 => isset($_GET['revision']) ? sprintf( __('Portfolio Restored To Revision From %s'), wp_post_revision_title((int)$_GET['revision'], false)) : false,
6 => sprintf(__('Portfolio Published. <a href="%s">View Portfolio</a>'), esc_url(get_permalink($post_ID))),
7 => __('Portfolio Saved.'),
8 => sprintf(__('Portfolio Submitted. <a target="_blank" href="%s">Preview Portfolio</a>'), esc_url( add_query_arg('preview', 'true', get_permalink($post_ID)))),
9 => sprintf(__('Portfolio Scheduled For: <strong>%1$s</strong>. <a target="_blank" href="%2$s">Preview Portfolio</a>'), date_i18n( __( 'M j, Y @ G:i' ), strtotime($post->post_date)), esc_url(get_permalink($post_ID))),
10 => sprintf(__('Portfolio Draft Updated. <a target="_blank" href="%s">Preview Portfolio</a>'), esc_url( add_query_arg('preview', 'true', get_permalink($post_ID)))),
);
return $messages;
} // function: portfolio_messages END
// function: portfolio_filter BEGIN
function portfolio_filter()
{
register_taxonomy(
__( "filter" ),
array(__( "portfolio" )),
array(
"hierarchical" => true,
"label" => __( "Filter" ),
"singular_label" => __( "Filter" ),
"rewrite" => array(
'slug' => 'filter',
'hierarchical' => true
)
)
);
} // function: portfolio_filter END
add_action( 'init', 'post_type' );
add_action( 'init', 'portfolio_filter', 0 );
add_filter( 'post_updated_messages', 'portfolio_messages' );
jquery.custom.js
function portfolio_quicksand() {
// Setting up our variables
var $filter;
var $container;
var $containerClone;
var $filterLink;
var $filteredItems
// Set our filter
$filter = $('.filter li.active a').attr('class');
// Set our filter link
$filterLink = $('.filter li a');
// Set our container
$container = $('ul.filterable-grid');
// Clone our container
$containerClone = $container.clone();
// Apply our Quicksand to work on a click function
// for each of the filter li link elements
$filterLink.click(function(e)
{
// Remove the active class
$('.filter li').removeClass('active');
// Split each of the filter elements and override our filter
$filter = $(this).attr('class').split(' ');
// Apply the 'active' class to the clicked link
$(this).parent().addClass('active');
// If 'all' is selected, display all elements
// else output all items referenced by the data-type
if ($filter == 'all') {
$filteredItems = $containerClone.find('li');
}
else {
$filteredItems = $containerClone.find('li[data-type~=' + $filter + ']');
}
// Finally call the Quicksand function
$container.quicksand($filteredItems,
{
// The duration for the animation
duration: 750,
// The easing effect when animating
easing: 'easeInOutCirc',
// Height adjustment set to dynamic
adjustHeight: 'dynamic'
});
});
$container.quicksand($filteredItems,
function () { lightbox(); }
);
}
function lightbox() {
jQuery("a[rel^='prettyPhoto']").prettyPhoto({
animationSpeed:'fast',
slideshow:5000,
theme:'pp_default',
show_title:false,
overlay_gallery: false,
social_tools: false
});
}
if(jQuery().prettyPhoto) {
lightbox();
}
