How to Build a Single Page Portfolio Theme – Part 3 – Expanding Grid Portfolio

Posted on 25th August, 2014 2 Comments

In part 3 we’re adding our second CPT and we’ll also add some more of those handy metaboxes. The portfolio functionality is provided by code supplied by codrops which I’m modding to work with WordPress. That article covers adding a “thumbnails grid with expanding preview” , which is similar to the image gallery that google images use, nice! A perfect addition to our theme.

Functions.php

We will register our new “Portfolio” post type.

// Hook into the 'init' action
add_action( 'init', 'about_us_post_type', 0 );
// ADD CODE BELOW HERE

/*
 * PORTFOLIO US POST TYPE
 **************************************************************/
 // Register Custom Post Type
function portfolio_post_type() {

	$labels = array(
		'name'                => 'Portfolio',
		'singular_name'       => 'Portfolio',
		'menu_name'           => 'Portfolio',
		'parent_item_colon'   => 'Parent Item:',
		'all_items'           => 'All Items',
		'view_item'           => 'View Item',
		'add_new_item'        => 'Add New Item',
		'add_new'             => 'Add New',
		'edit_item'           => 'Edit Item',
		'update_item'         => 'Update Item',
		'search_items'        => 'Search Item',
		'not_found'           => 'Not found',
		'not_found_in_trash'  => 'Not found in Trash',
	);
	$args = array(
		'label'               => 'portfolio',
		'description'         => 'Where you describe your work',
		'labels'              => $labels,
		'supports'            => array( 'title', 'editor', 'thumbnail' ),
		'hierarchical'        => false,
		'public'              => true,
		'show_ui'             => true,
		'show_in_menu'        => true,
		'show_in_nav_menus'   => true,
		'show_in_admin_bar'   => true,
		'menu_position'       => 6,
		'menu_icon'           => ' ',
		'can_export'          => true,
		'has_archive'         => false,
		'exclude_from_search' => true,
		'publicly_queryable'  => true,
		'capability_type'     => 'page',
	);
	
	register_post_type( 'portfolio', $args );

}
// Hook into the 'init' action
add_action( 'init', 'portfolio_post_type', 0 );

// Include a special taxomony for the portfolio
	function portfolio_taxonomy() {  
       register_taxonomy(  
        'portfolio_categories',  
        'portfolio',  
        array(  
            'hierarchical' => true,  
            'label' => 'Portfolio Categories',  
            'query_var' => true,  
            'rewrite' => array('slug' => 'portfolio-categories')  
        )  
    );  
    }  
      
    add_action( 'init', 'portfolio_taxonomy' );

meta-boxes.php

In our meta folder open up the meta-boxes.php, go to line 61.

Add this, which will register and save our meta boxes used for the portfolio section.

elseif (!is_null($new_data))
	{
		add_post_meta($post_id,'_wptricks_about_meta',$new_data,TRUE);
	}

	return $post_id;
}
// ADD BELOW THIS

/* PORTFOLIO META BOXES ADDED BELOW */
add_action('admin_init','wptricks_portfolio_meta_init');

function wptricks_portfolio_meta_init()
{

	wp_enqueue_style('wptricks_portfolio_meta_css', WPTRICKS_STARTER_PATH . '/portfolio/portfolio.css');

	foreach (array('portfolio') as $type) 
	{
		add_meta_box('wptricks_portfolio_meta', /* EDIT THIS SECTION TO ADJUST THE MAIN TITLE */ '<div class="dashicons dashicons-id"></div> Enter Your Details', 'wptricks_portfolio_meta_setup', $type, 'normal', 'high');
	}
	
	add_action('save_post','wptricks_portfolio_meta_save');
}

function wptricks_portfolio_meta_setup()
{
	global $post;
	$portfoliometa = get_post_meta($post->ID,'_wptricks_portfolio_meta',TRUE);
	include(WPTRICKS_STARTER_THEME . '/portfolio/portfolio.php');
 
	echo '<input type="hidden" name="wptricks_portfolio_meta_noncename" value="' . wp_create_nonce(__FILE__) . '" />';
}

/* SAVE PORTFOLIO META FOR LATER */
function wptricks_portfolio_meta_save($post_id) 
{
	if (!wp_verify_nonce($_POST['wptricks_portfolio_meta_noncename'],__FILE__)) return $post_id;
	if ($_POST['post_type'] == 'page') 
	{
		if (!current_user_can('edit_page', $post_id)) return $post_id;
	} else {
		if (!current_user_can('edit_post', $post_id)) return $post_id;
	}

	$current_data = get_post_meta($post_id, '_wptricks_portfolio_meta', TRUE);	
 
	$new_data = $_POST['_wptricks_portfolio_meta'];

	wptricks_meta_clean($new_data);
	
	if ($current_data) 
	{
		if (is_null($new_data)) delete_post_meta($post_id,'_wptricks_portfolio_meta');
		else update_post_meta($post_id,'_wptricks_portfolio_meta',$new_data);
	}
	elseif (!is_null($new_data))
	{
		add_post_meta($post_id,'_wptricks_portfolio_meta',$new_data,TRUE);
	}

	return $post_id;
}

Portfolio.php

Then add the front end suff for our metaboxes; Add a new file in our /meta/portfolio/ folder call it portfolio.php.

Add this.

<div class="wptricks_meta_control">
	<!-- AGAIN... USING DASH ICONS -->

	<label><div class="dashicons dashicons-edit"></div> Skills</label>
	<p>
		<input type="text" name="_wptricks_portfolio_meta[skillsused]" value="<?php if(!empty($portfoliometa['skillsused'])) echo $portfoliometa['skillsused']; ?>"/>
		<span>Enter in the skills used for the above project, seperate them how you like (ex. "| / - ,"). </span>
	</p>
<hr>
	<label><div class="dashicons dashicons-admin-links"></div> Link to the online project</label>

	<p>
		<input type="text" name="_wptricks_portfolio_meta[weburl]" value="http://<?php if(!empty($portfoliometa['weburl'])) echo $portfoliometa['weburl']; ?>"/>
		<span>Enter a web url above omitting the <strong>http://</strong>.</span>
	</p>
<hr>

</div>

Portfolio.css

Finally for our metaboxes add our CSS; Add a new file in our /meta/portfolio/ folder call it portfolio.css.
We don’t need to add that much, just an icon for the main menu in the admin dashboard.

/* Also add an icon to our menu. Using WP built in icon font http://melchoyce.github.io/dashicons/ */
#adminmenu .menu-icon-portfolio div.wp-menu-image:before {
			content: "\f233";
}

Open up the new portfolio CPT and take a look at the what we’ve got here.

portfolio page

functions.php

Looking good, Now lets add two new image sizes for the portfolio section. Open the functions.php and find the add_theme_support( ‘post_thumbnails’ );. Below this add our new image sizes.

	add_image_size('portfolio_image_thumbnail', 260, 260,true);
	add_image_size('portfolio_image_large', 720, 600);

home-page-template.php

Below the about-us section, Add our new portfolio loop…
We’re outputting the title, skills and content in data-attributes which are going to be converted into portfolio items preview section.
and are only going to display the image on the main front end, with the title showing when we hover the thumbnail.

<?php 

		/* INCLUDE OUR PORTFOLIO SECTION
		 *****************************************************/
?>
	
	<section class="portfolio">
    	<header>
			<div class="wrapper">
            	<h2>Portfolio</h2>
        	</div>
        </header>
			<div class="wrapper">
				<?php
					
					$fits = array('post_type' => 'portfolio', 'posts_per_page' => 1);
					
						if($fits){
					
							echo '<ul id="og-grid" class="clearfix og-grid">';
							$args = array('post_type' => 'portfolio', 'posts_per_page' => 999);
							$loop = new WP_Query($args);
							while ($loop->have_posts()) : $loop->the_post(); 
							
								global $post;
							
							echo '<li class="clearfix">';
				
								  $thumb_url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'portfolio_image_large' );
								  
								  // Check we have the portfolio content 
									$my_portfolio_meta = get_post_meta($post->ID,'_wptricks_portfolio_meta',TRUE);
							
									$portfolioskills = $my_portfolio_meta['skillsused'];
									$project = get_the_content();
									$externallink = $my_portfolio_meta['weburl'];
									$title = get_the_title();
									
								echo '<a class="portfolio-image clearfix"' .
									 //include the image
									 ' data-largesrc="' .$thumb_url[0] .
									 //include the content 
									 '" data-description="' .  $portfolioskills . $project . '"' .
									 //inclue the title
									 ' data-title="' . $title . 
									 //Add the url
									 '" href="' . $externallink . 
									 '" target="new" >';	//end opening anchor			
								the_post_thumbnail('portfolio_image_thumbnail');
							echo  '<h3>' . $title . '</h3>' . 
								  '</a>'; //end closing anchor 
								
							echo  '</li>';
							endwhile;
						  
							echo '</ul>';
						};
				
				?>
			</div><!-- /.wrapper -->
		</section> <!-- /.portfolio -->

<?php 

		/* END PORTFOLIO US SECTION
		 *****************************************************/
?>

These will provide our featured image sizes that will be use for our gallery, next add the required script files from the codrops post mentioned above for this gallery to work. Download these Files (CSS + JS) add them to your theme folder then we’ll include calls to the files from our header.php and footer.php

Header.php

Open up the header.php and around line 35 link to our css, for the gallery.

        <?php if ( is_front_page() ) { ?>
            <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/jquery.bxslider.css" media="screen">   
// ADD BELOW HERE
            <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/component.css" media="screen">

Footer.php

Open your footer.php find line 27 and include our scripts.

        <?php if ( is_fron+page() ) { ?>
			<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/javascript/jquery.bxslider.min.js"></script>
// ADD OUR NEW SCRIPTS
            <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/javascript/modernizr.grid.js"></script> 	
			<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/javascript/grid.js"></script>

Contact Form Section

Go there now… Click Here

Comments

To preserve code added to a comment you can wrap your code in short tags
by using [square brackets]:

PHP use - [php] <?php code here ?> [/php]
CSS use - [css] #code-here {} [/css]
HTML use - [html] <div> code here </div> [/html]
JS use - [js] $(".codeHere") [/js]

Harry

03rd, Dec, 14

Hello

Great tutorial, I have followed it along to the end now, and it all works except I can’t work out a way to display separate categories for the expanding grid. I am bassically want three categories on different pages with different content, but still retaining the expanding grid functionality. If you could point me in the right direction that would be most helpful.

Keep up the good work

All the best

Aaron

04th, Dec, 14

That will be a whole other tutorial, you’ll need to add the code that displays the gallery to a category based template. http://codex.wordpress.org/Category_Templates.
To output the loop you’ll use something like this:

<?php 
$args = array ( 'category' => ID, 'posts_per_page' => 5);
$myposts = get_posts( $args );
foreach( $myposts as $post ) :	setup_postdata($post);
 ?>
//Style Posts here
<?php endforeach; ?>

This uses the get_posts template tag in order to call an array of posts that adhere to the criteria that you set. In this instance, make sure you change “ID” to the category ID number you wish to show. The posts_per_page parameter simply states how many posts you would like to display from this category. We have set the number here to 5.

All that info is included in the link provided.

WPtricks

WordPress Theme Development

How to Build a Single Page Portfolio Theme – Part 3 – Expanding Grid Portfolio

Functions.php

meta-boxes.php

Portfolio.php

Portfolio.css

functions.php

home-page-template.php

Header.php

Footer.php

Contact Form Section

Comments

Harry

Aaron

Leave a Comment

Functions.php

meta-boxes.php

Portfolio.php

Portfolio.css

functions.php

home-page-template.php

Header.php

Footer.php

Contact Form Section

Share This…

Comments

Leave a Comment