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

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.

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