Linking Portfolio Items to Pages

A user on the WordPress forums recently asked when using my portfolio plugin, how could we set up the plugin to link to a portfolio item’s specific page as opposed to a larger version of the featured image. While this should be a fairly straightforward customization, because of the number of themes out there and how different they can be, this may or may not be an easy customization. Using Twenty Ten as an example, I’ll go through how to properly link each portfolio item to its full page.

But before we even start mucking around in code, the first thing you want to do is check if you even need to do anything at all. Most properly written themes* will employ a single.php file, and WordPress will load that file if it doesn’t find a single-{post-type}.php file. If single.php exists in your theme, then change your portfolio shortcode parameters and add link=”page” inside of the braces — [ portfolio link=”page” ] and reload your portfolio page. The links on the images should now be pointing to the page instead of the image, so click an image and see what happens. In most cases you should see the portfolio item’s title and main content, if you entered any. You may or may not see the featured image, and if you’re using the ‘features’ tag functionality, that will not be present.

*There are properly written themes that do not use this file. In those cases you may need to consult the theme author for assistance.

If what you see is acceptable, then you don’t actually have to do any more and can stop reading. But if it’s not (and what fun would this tutorial be if we ended it here?), then we need to create a single-portfolio.php and use that to house our customizations.

In the TwentyTen folder, make a copy of single.php and rename the copy single-portfolio.php. If you look inside the file, you’ll note it doesn’t have a whole lot for us

All this file does is call get_template_part to load the single loop. Delete that function call and the comment code above it. Open the loop-single.php file, and we’ll see the following code we want:

This is where all the heavy lifting occurs, and we want to copy this code into our single-portfolio.php file in place of the code we just deleted. Now that we have our base file, we can start our modifications.

For the sake of this tutorial, let’s say I want to make the following basic customizations:

  • Remove the post-navigation (above and below)
  • Show the large portfolio image
  • Remove the author-box
  • Remove comments
  • Remove the categories function
  • Show the custom feature tags

Since most of what I’m removing is pretty straightforward (just delete the code), I’ll focus on the portfolio image and the feature tags.

To show the featured image, add the following just above the_content();

You can certainly replace that image size with any image size you’ve added yourself or any other built-in image size.

To add the custom feature tags, add the following code just inside the entry-utility class

That will leave us with the following file:

This process should be easy enough to modify to suit nearly any theme, but if you run into any difficulties, let me know and I’ll see if I can help. Also, you may have to play with your stylesheet a bit to get it to look how you want. Just make sure you roll your CSS the right way to ensure you don’t lose changes when the plugin is updated.

  • Sten

    i am trying to implement this to twenty twelve but with no luck….

    • Sten, sorry for the troubles you’re having. What kind of problems are you running into?

  • Lindseeeeee

    Hi, I was wondering if you could talk a little about how this would work with the 2013 theme? Thanks!

    • Sure. The basic process is the same.

      Make a copy of single.php, rename it to single-portfolio.php and remove the block of code within the while ( have_posts() section — this is assuming we’re making the same customizations as we did above.

      Copy the code from content.php into that now vacant section, and add line 16 of the last code block I show in the tutorial above just inside

      I have never run TwentyThirteen myself so I don’t know exactly how it’ll look, but that should get you 85% of the way there.

  • Pingback: Displaying Your Portfolio | Arconix Computers()

  • Pingback: Displaying the Portfolio | Arconix Computers Documentation()