Portfolio Press

Posted

I’m proud to announce a new html5 portfolio theme. It uses custom post types for portfolio pages, WordPress menus, supports image and gallery post formats, and has a ton of other neat features.

Here’s a video screencast of how it works:

Download It | Demo It

The theme is in the WordPress Themes Directory. You can demo it here. Or download a copy and try it out.

Suggested Plugins

You will need to Portfolio Post Type plugin to use the portfolio features.

You will need to the Options Framework plugin to enable the options panel.

Examples of the Portfolio Theme in Action

Golden Retriever Adoption
Black Frame Media
Panama Hats for Sale
Saturday Afternoon Filmmakers

Credits

Portfolio was built on the solid foundation of Toolbox:
http://wordpress.org/extend/themes/toolbox

Styles, especially the menus and buttons, were inspired by Canvas:
http://www.woothemes.com/2010/02/canvas/

Jquery rollovers for portfolio items was based on code by:
http://graphpaperpress.com/themes/workspace/

Translations by Eduardo-Martí­n Larequi Garcí­a, Wolforg, Erling Håmsø, and Sandro Bauer.

Special Thanks

Also, special thanks to Michael Fields and Jake M Gold who helped test the theme and gave excellent feedback + code suggestions.

Instructions and Common Questions

How to Set Up a Portfolio Item:

When you activate Portfolio Press, you will see a new post type called “Portfolio”. Click “Add New Item” and you will be taken to the edit page where you can add a title, description, and tags for your portfolio piece.

To add the portfolio image, click “Set featured image” on the right side of the screen beneath “Portfolio Tags”. This will take you to the media uploader to add your image. When you finish, click “Use as Featured Image”.

How to Set Up the Menus

A lot of people were asking how the menus work. Here’s a video that explains it, plus instructions for how to create different portfolio sections.

Whitescreen of Death:

404 Errors:

This theme uses custom post types. If you are getting a 404 error when you try and view the portfolio posts, reset your permalinks. You can do this by going to “Settings > Permalinks” and re-saving the permalink structure.

Portfolio Items Disappear:

If you deactivate the “Portfolio Post Type” plugin, your portfolio items will disappear. They are still saved in the database, but you need the plugin in order to access them.

How can I have different portfolio sections?

Use the portfolio tags or categories. These are like the regular tags in posts. You can also put the links in the menu- so, Portfolio could be your main menu item that display all the items, and then have a drop down menu with illustration, websites, etc that link to the tag urls and just displays those items.

How do I change the size of the thumbnail images?

At some point I will probably make theme options for this, but for now you’ll have to do this through the code. Open the file portfolio-post-type.php in the “extensions” folder, and fine the line of code that says: add_image_size( ‘portfolio-thumbnail’, 215, 175, true );. The first number “215″ is the width- the second number “175″ is the height. Note, that there is a clear div generated every 3 items to start the next row- so if you change this to only have two items across, you’ll also need to update that code in archive-portfolio.php.

If you change the thumbnail size, you was also need to install this plugin and regenerate thumbnails.

Can I stop the featured image showing in double in the portfolio?

Yes, install the options panel and choose “Display images manually.”

How can I make the portfolio display on the home page?

Create a new page, call it whatever you like, and choose the page template “Portfolio” (on the right side of the screen in page attributes”. This will now display the portfolio on this page.

Then under “Settings” > “Reading” click “Front page displays” a static page. Then select the page you just created that has the portfolio.

Can I display my portfolio items in with my regular posts?

Yes, but you’ll just need to update the query call on every template where you want both to appear. See Justin Tadlock’s article about this. The intention of this theme was to have them live separately.

My Thumbnails Looks Distorted, Cropped or Weird

Try installing this plugin and regenerating them: http://wordpress.org/extend/plugins/regenerate-thumbnails/

Do you like the theme?

Rate it at: http://wordpress.org/extend/themes/portfolio-press

About Devin

I'm a WordPress developer based in Austin, Texas. Follow my projects on GitHub, or more general WordPress ramblings as @devinsays on twitter.

942 comments on “Portfolio Press”

  3. Hi Devan

    Thanks for a great theme. Quick Q, how would I go about to make the overlay hover an image? I.e. the the featured image shows and when I hover another image shows. Is this possible?

    Thanks!

    Reply ↓

    • Not simple enough to explain easily in a quick comment, but you’d do something similar to how the overlay text is shown. Instead of fading in absolutely positioned text, you’d fade in an absolutely positioned image. I’d try getting it close and then asking in the WordPress forums if you need more assistance.

      Reply ↓

      • Hi Devin

        I cannot find a solution to my problem on the forums. The theme seems to deactivate the featured image option under my normal posts. i.e. if i have twenty eleven as the theme my posts have option to set featured image, with portfolio press it does not. Any ideas on how to fix so that both my portfolio and my posts have option for featured image?

        Thx!

      • ok I have solved part of the problem. The functions.php file needs the following line: add_theme_support( ‘post-thumbnails’ ); then it shows the thumbnail in the normal post. Now I just need the portfolio to show two featured images and then I am home free :-)

      • and still closer we get…the following code added to functions.php adds the option to have an additional featured image to each portfolio post:
        if (class_exists(‘MultiPostThumbnails’)) {
        new MultiPostThumbnails(array(
        ‘label’ => ‘Second Featured Image’,
        ‘id’ => ‘second-featured-image’,
        ‘post_type’ => ‘portfolio’
        )
        );
        }

        now just to get this as the image when i hover over the post. hopefully more soon!

      • ok i think we mostly there: replace line 44 in archive-portfolio.php => <a href="” rel=”bookmark” title=” ” class=”title-overlay”>

        with the following:

        <a href="” rel=”bookmark” title=” ” class=”title-overlay”>

        and voila, a different image when you hover over the portfolio post….if anyone was interested ;-)

      • my apologies, I was unaware that code could not be posted here, anyway, should anyone be interested you could just post here. Thanks for the theme Devin.

  4. In the theme options it allows for changing the background color in the header, but I can’t find where to change the color of the menu links. I want to reverse it and make the background white and the text black, but I am only getting white on white.

    Anyone point me in right direction?

    Reply ↓

      • Thanks. Under theme options, style & layout I was able to change the header color from black to white.

        But in the style.css I haven’t been able to determine which line controls the color for the fonts in the header.

        I will keep experimenting till I find it – it is a great learning experience anyway.

  5. I just submitted a new version of Portfolio Press for theme review. The review process can take a couple weeks, but if anyone wants to get an early copy it can be downloaded from GitHub: https://github.com/devinsays/portfolio-press

    The main update in this version is that the portfolio post type functionality will now be provided by a plugin rather baked into the theme directly. This should allow you more freedom to switch themes if you decide to do so in the future.

    There have also been a number of other small fixes and updates in this update, so thanks to anyone who submitted a bug report in the past.

    This newer version will not work in any version of WordPress below 3.1, so if you’re using an older version, be sure to upgrade first.

    Reply ↓

  6. Hi Devin, we are progressing well with our site using the Portfolio theme. I have a ‘Home’ page and a ‘Products’ page with navigation buttons at the top right. These navigation buttons show fine using safari on the mac, but do not show on internet explorer using the PC. On the website there is a black header bar, which we are happy with, and we see this on the mac with safari browser. We don’t see the black header bar on the PC using Internet Explorer, and the header is white and because the text is white, we don’t see any of this in our header area using internet explorer. If we move the mouse over to where the navigation buttons are, they are visible on hover, but if we didn’t know they were there, it appears as if it is all white. Please can you give us some advice. Sorry if the question rambles. :-) Thanks in advance for your help.

    Reply ↓

  9. Hi Devin,

    I love this theme and the portfolio view is exactly what I was looking for.

    Even better is that you’ve taken the time to create a short video on how to set it up, something that many theme designers don’t do.

    Many thanks,
    Karl

    Reply ↓

  10. Hi Devin. Is there a plugin that displays Random/Related/Featured images for this theme? Also, is there a search module that can search tags other than just titles?

    Reply ↓

  11. The them works great. It took some getting used to, but I got it. I was wondering how to create a contact page for my site. Is there a way to create one using your theme or do I need to use a plug-in?

    Reply ↓

  12. Devin, I’ve just started using the Portfolio Press theme. I liked it so much I tried using your latest unreleased version on GitHub. I downloaded it as a zip. When I install it, I get, “Fatal error: Call to undefined function wpt_portfolio_posttype() in /home/brassner/public_html/vegasfranchise.com/wp-content/themes/devinsays-portfolio-press-2e75d3c/functions.php on line 147″ and then it kills the site, can’t log in. If I go to FTP and then delete the theme folder, I’m okay again, luckily. User error or a bug? If I continue to develop on version 0.7.5 will I have to redo the “posts” when the new version comes out since you are changing the custom post type?

    Reply ↓

    • No, it’s a bug. Thanks for flushing that out. I just updated the version on GitHub. You’re also fine developing on the older version, the post types will be compatible, but I’d encourage you to try the GitHub version again if you’re up for it. It’s in theme review and should be released shortly.

      Reply ↓

  16. I’m using your portfolio theme for my client’s miniature horse website. I want to put a background image in the “brand” section of the header. I see the code in the css style sheet but so far I have not been successful putting a background image in the code there. Here is what I put in:
    /* Branding */

    #branding {
    position:relative;
    display:block;
    background:url(images/CFBkgrd.jpg);
    padding:0 0 0;
    }
    Thanks for your help. Susan

    Reply ↓

    • It’s being overriden by the color you set using the options panel. Set your options back to default (or the header color back to black), and it should work.

      Reply ↓

  17. I haven’t found any bugs in this release, Devin. Great job.

    I’m just trying to figure out how to add some text above the portfolio as in the link you gave for The Golden Retriever Rescue web site. If you set the destination page as a Portfolio template, any content on that page does not display (other than the Portfolio posts themselves).

    Reply ↓

  18. Ok, I think I must be missing something simple, but how do you get a thumbnail for the portfolio posts? I don’t see anywhere to set it and I tried using the featured image, but it still says “none”. Please help

    Reply ↓

  19. Hi Devin,

    Firstly, I would like to thank you for creating such a great theme. However, being an adventurous newbie in creating my own online shop via this theme is proving a little hard for me now. I have two issues:

    1. Portfolio thumbnail page – thumbnails appear fine until cursor goes over the image. A black-reverse-L crops out/ appears on the bottom right corner. It doesn’t happen when viewing with Safari but with IE, it does.

    2. Since I’ve made the Portfolio page my front page, I would like to add some text above the thumbnails, like a blurb about the site. Prior to making this the front page, it’s linked to /shop. I’ve tried typing out my blurb there but it’s oviously not appearing on the site.

    I have tired googling and going through your FAQs for both issues but to no avail. So, it would be great if you could please put me in the right direction. Awaiting your reply….

    Thank you!

    Reply ↓

  20. Hey Devin,

    Thanks a lot for this amazing work ! I’m using it right now to design the website of a fashion designer friend of mine.

    I have a question for you : Is it possible to use a videos for the thumbnails of the portfolio posts, replacing the “featured image” ?

    Reply ↓

  21. Thanks for a great theme.

    Although I miss the blogroll, that usually is on the right column, but it seems not to be in this theme. Have I missed out on something (or what setting do I need to do)?

    Thanx in advance

    //Hans

    Reply ↓

    • I managed to add ‘excerpt’ to the line

      'supports' => array( 'title', 'editor', 'thumbnail', 'comments', 'excerpt'),

      of the portfolio-post-type.php,

      So that I now have an “excerpt” field on my Portfolio Item creation page, but I can’t figure out how to display these excerpts on the actual website.

      I hope what I say is clear, I’m french and I sometimes have difficulties to be understandable.

      Reply ↓

  23. Hi, I’m about to switch my blog over to Portfolio Press. I have one, really basic question that I can’t seem to figure out: how do I format existing posts using the Portfolio template? Or import them into the Portfolio folder if that fails?

    Thank you – and sorry for the n00b q!

    Reply ↓

      • Cool, thank you! I’m also using the Post Type Switcher plugin individually while I test the new version vs. old version.

        In a way that explains another q that’s come up since, too – because I’m using it for the whole blog I don’t want the ‘/portfolio/’ slug added (because it’ll mess up the existing permalinks). I guess this is partly a taxonomy issue relating to the custom post type, too – unless there’s a way of fixing this currently by hacking the code? (Despite my amateur q I’m okay with hacking code!)

        Thanks again for your help :)

      • Hi Devin. Always thankful for your theme! I’ve installed the plugin ‘Convert Post Types 1.1′. But before I activate it and convert the posts, I wanted to know if I’ll have to be running the convert process every time I add a new portfolio post, or do the new posts get converted automatically?

        Jason

      • For new posts you have the option of creating regular posts or postfolio posts. So, no, you wouldn’t need to convert again unless you change themes and want to convert them back.

  24. Hi Devin,
    Thank you again for the great theme, I’m still working on exactly how I’m going to organize it, but I’ve changed the front page to the Portfolio page. The only problem I have is that when I click the “Older Posts” link it takes me to a Yahoo search page. I’m not sure how to fix the code so that it doesn’t do this, can you help?

    Thank you,

    Kathie

    Reply ↓

  25. Hi! love this theme. I’m very new to wordpress. I seem to be having issues when I make a gallery in a post: the thumbnails below the image are centered to the correct width, but the featured image, or full size image is always left-aligned. Even when I select center alignment for each image and center the gallery in the post. How do I fix this?

    Reply ↓

  26. Super theme – clean & simple. I’m hoping for some help on customizing it. I want to be able to hand-pick the items that appear on the homepage, which is already set to show a full-width portfolio. At the moment, the homepage shows my most recent items, which are not necessarily the best. Is there a way to customize which items appear here?

    The hacky solution I’ve tinkered with is to alter the publish dates so that the things I want to appear on the homepage have the most recent dates. I’m hoping there’s something more elegant though. Maybe alter the default query to search for a ‘home’ tag? I’m OK with PHP, but don’t know where to get started within the WP frameworks.

    Here’s the site-in-progress: http://devildream.com

    Thanks in advance for any advice or thoughts!

    Reply ↓

      • Thanks! Can you recommend a resource for creating that template and setting the variable? I’m still in my first week or so of trying to modify WP themes.

  27. Hey Devin,

    One last question :)
    Your theme uses the superfish plugin to create the menu. Could I change that to another plugin, like ‘JQuery Accordion Menu Widget’ for example?
    The fact is, I need an accordion menu, and it doesn’t look like superfish can do this.

    Thanks again Devin !

    Reply ↓

    • Um, not sure an accordion menu would work in the header. You can definitely add a menu in the widget area though, and code it out with whatever plugins/scripts you’d like to use.

      Reply ↓

  28. Hey Devin, quick question regarding number of thumbs listing –
    “Edit archive-portfolio.php where is says: ‘posts_per_page’ => 9 and change the query filter in portfolio-post-type.php (wpt_portfolio_custom_posts_per_page).”
    Instructions above doesn’t work for me, although it should be quite simple – is it ok if I simply change the numbers in archive and post.type files or is there something else that I’m missing?
    Thank you for great theme, which will be my best if I figure out this thumb listing;)

    Reply ↓

    • Yes, people have been reporting issues with this. Try also changing the query on the page, or at worst, altering it manually in “Settings” > “Reading Options” > “Posts Per Page”. I’ll look into it.

      Reply ↓

      • Hi Devin,
        I too would like to add more than 9 Portfolio thumbs. But when I went to archive-portfolio.php, I didn’t see ‘posts_per_page’ => 9. This was the only code I saw:

        This is my first WP site. I work in Dreamweaver. It’s a different environment. Please help.

  29. Devin,

    I have a page on my website to show my curriculum vitae. I tried to copy/paste in the text from my Word document, but all the formatting was lost after I published the page. Is there a way to keep the formatting from changing? Currently I have a plugin installed to show my cv, but it creates a window within my page. I’d prefer a more seamless display if possible. Thanks!

    Reply ↓

  32. Hi Devin, excellent work!

    One thing I haven’t been able to figure out, however, is how to set categories for the portfolio items. I’d like to set up the categories widget and clicking on them would show the related portfolio items.

    Any suggestions?

    Reply ↓

  33. I have created my website and started the portfolio page. Success!
    But I have not been able to put multiple images on the home page. I would then
    like to link each image on the home page to its own portfolio sequence. Is this possible?
    A neophyte, but learning. Thank you so much for creating this tool

    Reply ↓

    • There’s currently no way to have portfolios nested in other portfolios. You can insert a regular gallery inside a portfolio post though. Use the options panel to turn off images displaying by default in portfolio posts if you go that route.

      Reply ↓

  34. Is there a way to create multiple different portfolio pages? I’m trying to create more of a standard Web site, (less like a blog), for my photo business. I’d like to have a portfolio page for my main landing page with the entries commercial, editorial, fine art and people.

    When you click on those links, rather than showing a standard page, I’d like it to display another portfolio page that shows the subgenre from each section. (i.e. under commercial, there’s advertising, industrial and product).

    Then, if you clicked on one of those subgenre thumbnails, I’d like to see a gallery of that type of photo. WAYYY to complicated for a first Web site!

    Can this be done with your template? I love it, and hope I can get it to work! I hope I haven’t confused you! I don’t know anything about WP yet, a friend is helping me and she’s stumped!

    Reply ↓

    • Doh! I just read the entry above mine. Apparently there is a lot of interest in doing the same thing I want to do! Sorry to bug ya!

      Reply ↓

  35. Hi Devin,
    I was following your demo video. I had just got the featured photo in and went to the step about changing the Peralinks. I deselected default and selected month/year like you showed. When I clicked Save changes the page went to blue text and lines, like all the styling was gone. When I clicked the browser back button it gave a 404 error. I shut down and rebooted. I my computer can’t find the any pages so I can log in and edit the theme. I typed:sugarcookystudio.com/wordpress which usually gets me in. Got the 404 error. Typed:sugarcookystudio.com/wordpress/wp-login.php Got the 404 error. Typed:sugarcookystudio.com/wordpress/wp-admin Got the 404 error. Do I have to re-install WP and start my site over from scratch??

    Reply ↓

  36. Hi,

    When I upload a logo, it always appears on the left side of the area above the portfolio. Center and right options have no effect.
    How could I make the logo go further to the right?

    Thanks
    ken

    Reply ↓

  37. Hi Devin,

    For the top navigation menu, is it possible to change the font color on an “active” page? I was able to make the font change color on hover by adding this to my child theme copy:

    #navigation a:hover {
    color: #D8D8D8;
    }

    but when I tried…

    #navigation a:active {
    color: #D8D8D8;
    }

    …and still nothing happens. I even tried editing directly from the parent file, and still nothing happens. If it’s possible, could you please tell me how? Thanks!

    Reply ↓

  38. Also, after updating to version 0.8.3, in portfolio-post-type.php, there is no longer add_image_size( ‘portfolio-thumbnail’, 215, 175, true ), so how would we change the size of the thumbnails?

    Great theme by the way! Absolutely love it :)

    Reply ↓

    • Ok, for some reason it isn’t taking the home page to portfolio page properly. Home shows the portfolio page, but without the older navigation below. If I go to home/portfolio it shows the same thing, but with the proper navigation.

      Also, how do you increase displayed thumbnails from 9 now?

      Reply ↓

  40. Hello !!
    I have a little problem, the tittles in the index page looks very bad on internet explorer 8, the example is in this link from my website:
    http://jpavon.es/inicio/
    I think the problem with explorer 8 is in the class “element.style {opacity: 1;}” for the titles overlay, but this class is defined in php archives and I don’t find it….
    Maybe the solution would be delete this class for the titles….
    Can you help me ???
    What do you think about the problem ??

    any solution??
    Thank you !!!

    Reply ↓

  41. Portfolio 0.8.3 and WordPress 3.3 may not like each other. I seem to have lost the navigation to go back to older posts after upgrading both. It’s my own fault for ignoring the compatibility warnings, I know.

    Reply ↓

  42. A couple folks have reported issues with paging on portfolio archives in the latest version of the theme. I did test it, but obviously I must have overlooked something.

    Until then, it’s generally always worked to set the post number in the WordPress options under “Settings” > “Reading Options” > “Posts per Page”.

    I know this isn’t a long term solution as you might prefer to have a different number of posts on your blog versus your portfolio, but can hopefully get you through until I can track down the bug.

    Reply ↓

    • I tried the posts setting as suggested but doesn’t work for me – don’t know if it makes a difference but I don’t use the blog at all, everything is under the Portfolio.

      Forgot to say I’m using Firefox 8.0 (but when I checked on IE 9 I have the same problem). I also have the Options Framework 0.9 and Portfolio Post Type 0.3 plugins.

      Thanks for your continuing work on this excellent theme :-)

      Reply ↓

  44. Hi Devin, sorry to bother you again – how do I change the background color to white? I thought I figured it out in the style sheet, but when I entered the hex code nothing changed. Thank you for your help!

    Kathie

    Reply ↓

    • Hi Devin,
      Sorry, but I’ve tried and tried to change the background color to white using the Editor. I’ve googled and searched wordpress. I’m at my wit’s end. Can you tell me where in the code to change the background color to white? Thank you for your help,

      Kathie

      Reply ↓

      • Kathie, it looks like the background is actually a “picture.” The easiest solution is for you to probably to replace “bg-texture.png” with a white one. I’m assuming it is a 1-pixel png but I haven’t looked myself. CSS referenced below:

        /* Structure */

        #main {
        background:#fff url(images/bg-texture.png);
        padding:40px 0 20px 0;

      • After further review, I think you are better off making a new white png with a new name and change the url reference to that new png. I just tried it, it works.

        Disclaimer: I’m not a web designer nor engineer. I just play one on TV. Use at your own risk.

  46. Thank you to everyone – for anyone else who’d like to change the background color to white:

    #main {
    background:#fff;

    remove the “url(images/bg-texture.png)”
    Thanks again!

    Reply ↓

  47. I want to disable the sidebar. In the widgets in the dashboard nothing is activated by default but I still see stuff. I noticed in the theme folder there are 2 files called full-width-page and full-width-portfolio. I renamed my index.php to something different, then I tried renaming these pages to index.php. They don’t get activated. They both don’t have a sidebar but it still shows up.

    I also checked the source in my browsers and they all show the default index.php, even after I rename it. I also tried renaming the ‘powered by’ text in the footer and that also doesn’t show up. I tried it out on http://www.browsershots.org and everything shows the same page. Is there are problem with my FTP host or something?

    I changed some margins and colors in style.css and those changes do show up, but nothing in the index.php files.

    Reply ↓

    • I’d like more than 9 thumbs on the Portfolio pg, but I’m not that bright. Would you be so kind as to share more details.
      Thanks!!

      Reply ↓

      • Sure,
        In your wordpress interface :
        Appearance > Edit
        Open the content-portfolio.php and search :
        “‘posts_per_page’ => 9,”
        Then change the 9 by the number of thumbnails you want on your page.

        Hope it’s clearer

  49. I click on the Portfolio thumbnails and go to the Enlarge art page. Each of the enlarged pages has this warning under each page photo:
    Catchable fatal error: Object of class WP_Error could not be converted to string in /home/content/s/u/g/suga4803/html/wp-content/themes/portfolio-press/single-portfolio.php on line 59

    It all works fine. It’s just look dumb having it there. Where do I go to fix this?

    Reply ↓

  50. Anyone experienced this and have a fix. My Firefox and Internet Explorer browsers are up to date. The top banner (black) is “short” and not the full width of the website page. The lower background color turned light blue and is also not at full width. So I can’t see all the text or photos. Any ideas??

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>