I thought I would explain how I got the Custom Post Type for my portfolio section to work. While I got the code from a tutorial, getting the pagination to work on the Custom Post Type page was frustrating. After hours or searching and trial and error I finally got it to work.
1. Creating the Custom Post Type
First of all I had to make a Custom Post Type called ‘portfolio’. I did this by following the tutorial at Ash Blue’s Blog and stopping at the ‘Creating a Custom Loop’ section.
2. Creating a Custom Loop on a Page
Instead of putting the Custom Loop in the functions.php file like the tutorial suggests, I put it directly on the page I was going to display my portfolio. To do this I went to my theme folder, I duplicated the default ‘page.php’ file and called it ‘page-portfolio.php’.
The first bit of code I placed in this file is to find the custom post type to display.
<?php
$type = 'portfolio';
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args=array(
'post_type' => $type,
'post_status' => 'publish',
'paged' => $paged,
'posts_per_page' => 4,
'caller_get_posts'=> 1
);
$temp = $wp_query; // assign original query to temp variable for later use
$wp_query = null;
$wp_query = new WP_Query();
$wp_query->query($args);
?>
<?php if($wp_query->have_posts()) : while($wp_query->have_posts()) : $wp_query->the_post(); ?>
If you read through the code above you’ll see where to call your custom post type, and how many posts you want displayed.
I Logged into my Admin and created a new page called Portfolio, but I made the slug read ‘web-portfolio’. If the slug was just ‘portfolio’ it would interfere with the custom post type code we’ve used and pagination would not work. I Chose ‘Web Portfolio’ as the template and saved the page.
Back in the functions.php file, I placed the code to call the portfolio title, portfolio image, wwd items and the url. See code below:
<?php
$portfolio_title = $post->post_title;
$portfolio_wwd = get_the_term_list($post->ID, 'wwd', '', ' ', '' );
// This will turn our What We Did tags into a list and strip out the links
$portfolio_wwd_format = preg_replace('/\<a(.*)\>(.*)\<\/a\>/iU', '<li>$2</li>', $portfolio_wwd);
$portfolio_url = get_post_meta($post->ID, 'dbtr_port_client_url', true);
// This will make our links go from http://www.example.com to example.com
$portfolio_url_display = preg_replace("'^http://'is", "", $portfolio_url);
// Test the portfolio url and spit back different information based upon the results
if (!(empty($portfolio_url))) {
$portfolio_url_format = '<a href="' . $portfolio_url . '" target="blank">' . $portfolio_url_display . '</a>';
}
else {
// If we don't have a link, we should tell people its coming soon.
$portfolio_url_format = 'not available';
}
// We will use the slug name to create our IDs
$portfolio_slug = basename(get_permalink());
// Grab the featured images and strip out the title
$portfolio_image = get_the_post_thumbnail($post->ID, 'portfolio-item');
$portfolio_image_format = preg_replace('/title=\"(.*?)\"/','',$portfolio_image);
// Use our variables above to create our portfolio and skip items that are empty
if ((!(empty($portfolio_title))) && (!(empty($portfolio_image))) && (!(empty($portfolio_wwd)))) {
?>
Next, I positioned and styled everything a bit differently by not adding the description and placing the website link only once. What I added was the ability for each portfolio entry to go to its own detailed page where I could post more information and more pictures for the project, this was done by adding the get_permalink codex. See code below:
<div class="portfolio-item-container">
<div class="portfolioitem-left">
<h2 class="portfolio-title" id="<?php echo $portfolio_slug; ?>"><?php echo $portfolio_title; ?></h2>
<h3 class="portfolio-titleWWD">What We Did</h3>
<ul class="portfolioWWD">
<?php echo $portfolio_wwd_format; ?>
</ul>
Website: <?php echo $portfolio_url_format; ?> </div>
<div class="portfolioitem-right"> <a href="<?php echo get_permalink(); ?>"><?php echo $portfolio_image_format; ?></a> </div>
</div>
<!--end portfolio-item-container-->
Next, I needed to close the loop and add the code to paginate the page. You need to have the WP-PageNavi plugin installed for the pagination to work. See code below:
<?php }
endwhile;
// Always include a reset at the end of a loop to prevent conflicts with other possible loops on your page
wp_reset_query();
?>
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
<?php else : endif; ?>
With that done, try adding some items and see if they display.
3. Giving the Portfolio Items their own Detailed Page
They way I set up everything, I would like each portfolio item to go to its own page when the image is clicked. Up to this point it will work, but the page that comes up is using my blog ‘single.php’ file which is the file used to display all single posts. To fix this, all I did was duplicate the ‘single.php’ and named it ‘single-portfolio.php’. WordPress automatically picks this file up and uses if for my Portfolio custom post type.
A bit of CSS styling and display edits here and there and Voilà! Check out my Portfolio to see the final results.
