I’m proud to announce a new html5 portfolio theme. It uses custom post types for portfolio pages, takes advantage of the new menu navigation, and includes a ton of neat features. Here’s a video screencast of how it works:
Download It | Demo It
The theme just got included in the WordPress Themes Directory. You can demo it here. Or download a copy and try it out.
Examples of the Portfolio Theme in Action
Peter Bergting – Comic Book Artist and Writer
What’s New in Version 0.4
- Changed title filter priority in simple-custom-post-type-archives.php
- Added better handling for the Simple Custom Post Type Archives plugin
- Updated the menu_postion for the portfolio post type
- Combined the portfolio post type and custom taxonomy into the same init hook
- Added better labels to the portfolio post type
- Updated the hover states on the menu to use stop(true)
- Added thumbnails and taxonomy tags to the column view for portfolio post type
- Added an icon to the portfolio post type
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/
Uses Custom Post Type Archives plugin to enable portfolio paging and permalinks:
http://www.cmurrayconsulting.com/software/wordpress-custom-post-type-archives/
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 the Portfolio Theme, 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”.
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 change themes, chances are your portfolio pieces will disappear from the dashboard. Fear not! They are still saved in the database- your new theme just wasn’t programmed to list and display them.
If you are handy with code, you can just copy the two extensions “portfolio-post-type.php” and “simple-custom-post-type-archives.php” into your new theme and call them from the functions.php file. You’ll also have to build new template files to display the custom post types in your theme. If coding isn’t your thing, you could hire a WordPress developer to help you out with the project.
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 type-portfolio.php.
Can I stop the featured image showing in double in the portfolio?
The featured image should not show up twice in the single post view. Make sure that you didn’t accidentally insert the image into the post (it pulls automatically). If you want to manually insert the images and put whatever content you want into the post- delete these lines from single-portfolio.php:
34 35 36 | <?php if (has_post_thumbnail()) { the_post_thumbnail('large'); }?> |
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.
Can I change the permalink slug from “portfolio” to a name of my own choosing?
If you know a little about how custom post types work it shouldn’t be that difficult. You’d need to change the registered post type from “portfolio” to something like “art” (for example), and update the labels and queries. Perhaps in a later version of the theme I’ll make an option for this, but for now you’ll have to dig through the code a bit or hire someone to make the needed changes.






39 Comments
Its a nice work, but fortunately or unfortunately i am also facing the same issue, since I was pushed the blog as
/blog/%year%/%monthnum%/%postname%/via the Permalink Settings and i am so sucked in this, your example also up to the same ashttp://themequery.com/blog/portfolio/irresistible/how to solve this problem to make the URL fixed as
http://themequery.com/portfolio/irresistible/hope will get a positive response.
Yoosuf
http://eyoosuf.com
Hey Yoosuf. Your comment got caught in the spam filter, so sorry for the delayed response. There’s a few issues with the permalinks I still have to work out. I’ll post a not when I get a solution.
Okay. Version .3 just dropped. I think I have all the issues resolved now.
Awesome theme, great work bro!
This is a cool theme. Is it completely done? I want to add it to my site and get you some more downloads :)
Hi Aj. It should still be considered beta. I got a thorough code check from another developer last night, and am going to implement all of his suggestions. These are more enhancements rather than bug fixes- but it would be worth waiting for. I also submitted the theme to the WordPress repository and want it to go through their review process. As soon as that’s finished we should be good to go.
Thanks for the quick answer Devin. If you want me to showcase your theme let me know when its done. :)
Good job!!
I would like to recommend WPESP: WordPress Portfolio Theme as an other option to learn how to create a basic Portfolio. Thanks!!
Updated the theme to version 0.4. There’s a ton of nice enhancements if people want to check them out. Changelog posted here.
Great theme Devin!
I posted a quick blog post telling my readers to check out your theme.
Ed
Hi Devin,
Love your theme ;)
I’m wondering about a few things:
- Can I change the size of the portfolio window (showing on my home page) to give them a 16:9 look?
- Can I stop the featured image showing in double in the portfolio?
(http://www.jessicaforde-art.com/portfolio/dn/)
-Can I stop the portfolio items being linked somehow to BLOG and not to WORK as I would love it?
If yes, how ???
- Can I replace the website title= home (Jessica Forde) by an active jpg image in the font of my choice?
Thanks for your great job ;)
Hi Jessica. Excellent questions. I posted the answers above in the post. Glad you are liking the theme.
Hello,
Great use of the custom post types. Trying to adapt to my own portfolio site and have one question, is there a way to customise the order of appearance? It seems to be ordered on date of entry, similar to a blog, but I would prefer to customise somehow.
Thanks
You can change the query in type-portfolio.php to something that better suits your purposes. Try reading up on how query posts works: http://codex.wordpress.org/Function_Reference/query_posts. The orderby parameter is probably what you’re looking for.
Hey everyone. This theme just got included in the WordPress repository: http://wordpress.org/extend/themes/portfolio-theme
saw the tweet via @themelab thats sounds awesome
Nice ;)
Hey, thank you for that theme, I really ‘ve come to like it. There’s only one thing that bothers me. I used to make footnotes to my posts with the sup-tag. Unfortunately they are not displayed the way I believe they should be displayed. Setting the tag behind a word doesn’t seem do change anything, setting it behind a number seems to change the number, not the thing within the tag. As my English is not that good, I enclose a screenshot so you hopefully can see what I’m trying to say. http://yfrog.com/jusupuj
Maybe you can help me?
Thanks for the bug report! It appears I was a little over-zealous in my css reset.
You can grab the styles for sub and sup from the style.css of 2010 (the WordPress default theme) and paste them into the portfolio stylesheet for now. But I’ve made the changes and submitted it the repository- so hopefully this will get updated soon.
It appears that pages using the Portfolio template don’t show the content entered in the dashboard for that page. Is there a way to include the page contents in the portfolio page template? I’m a bit of a WordPress newbie so if my question is confusing, I’ll try to rephrase.
Hi Steve. It wasn’t set up to work like that, but that functionality can be added in. (I e-mailed an updated file over to Steve. If anyone else needs it, let me know.)
You would need to add the_title() and the_content() in underneath the portfolio id in type-portfolio.php. You can look page.php and just copy the code from there (or, again, just send me an e-mail).
Hi Devin,
I’m new to WordPress and really like your Portfolio theme but was wondering if it is possible to insert a logo or image into the header rather than the text caption. I have looked at the styles.css but can see no way of doing it as i really know very little about coding.
Thanks,
Richard
It is possible. I’d look at another theme that does it (for instance, my site) and see how the css works (background image, text indent -9999px).
There is also this tutorial, which shows how to insert the image directly: http://www.arsgrafik.com/custom-logo-wordpress/
Devin,
I am using the Google Fonts API plug-in:
http://adrian3.com/projects/wordpress-plugins/wordpress-google-fonts-plugin/
This allows nice fonts from the Google Fonts Directory to be rendered in WordPress blogs. This works with your theme, but only partly:
- it works well on blog posts: fonts are rendered as I specified them in the Google Fonts plug-in
- it does not work on Pages
- it does not work on the text which is in the header (overall blog title and subtile)
What can be done to make Google Fonts work everywhere in your theme?
I’d like to request a change be made to the stylesheet.css, in the #branding/#logo part of it, so that a site’s logo does not sit glued to the left side of a browser window, when such window is narrow.
You can see what I mean when you view websites with the Portfolio theme on devices with low resolution, such as smartphones, tablets or iPods for example.
I don’t think there’s anything in the theme that would prevent Google Fonts from working with it. I’d double check that your plugin settings are correct and the appropriate tags are being targeted: http://wordpress.org/extend/plugins/wp-google-fonts/screenshots/
Noted. I’ll look at that in the next update. Let me know there’s a method you prefer to do that (min-width, etc).
With regards to the issue with “WP Google Fonts”, I found what was causing it.
The Portfolio-theme’s stylesheet.css contains several “hard-coded” font definitions (e.g. it enforces the Georgia font in a number of places, such as the site-logo and the site-logo-description).
Because of this, the font defintions set by the “WP Google Fonts” plugin (or any other method of using webfonts for that matter) are overridden by the fonts coded into the stylesheet.
So, I had to manually edit the theme’s stylesheet.css, and comment-out all instances where fonts were set to Georgia, Helvetica, et al.
ps: it would be nice to have a version of the Portfolio-theme available which does not included hard-coded fonts.
With regards to the “site logo position on narrow browser-windows” issue, there is no CSS-method I have a preference for (I am not qualified enough to make a recommendation about this).
From a user perspective, I think the best solution would be for the site-logo to line-up nicely with the content of postings/pages. By align nicely, I mean: in such a way that the margin between the left-edge of the browser window and the logo is the same as the margin for the content, and this at **any width*** of the browser window.
A few more suggestion for future version of the Portfolio-theme:
- add detailed comments to the stylesheet, so as to make it easier for the user to know where to modify certain settings
- make sure that all post/page content is centered within a browser window, at any width of the browser window
- allow user to easily set the background color of the header and the content parts of posts/pages from within the WordPress user interface (i.e. without having to edit stylesheet.css)
- allow user to specify a background image for the header and content parts of posts/pages (idem)
- allow user to specify which fonts are used for various elements (type,style,size,color) with an option for “do not set font”) (idem)
- allow user to specify the width of the post/page content area and the sidebar area
Hi Vo. Thanks for the suggestions. I’ll definitely work some of them in for the next release (iphone, header background, etc).
As far as specifying fonts, I’m not sure how I could have different ones on the theme without “hardcoding” them in the css or a long options panel. :) It looked like the Google Font plugin had options where you specify the css styles to override. Did that not work?
For the upcoming release, I’m working to have portfolio tags display the same as the base portfolio page (which has been highly requested), and perhaps an options panel for where the menu goes (some people have very long ones that drop in the wrong spot), possibly a logo uploader, and to change the footer text.
Does anyone else have anything they’d really like to see (that would be of use to a large base)?
Just installed this theme. And got a white screen on the dashboard and the front end. With this error:
syntax error, unexpected T_OBJECT_OPERATOR in portfolio-theme/extensions/simple-custom-post-type-archives.php on line 108
This is a WP 3.0 multisite. Thanks
Daniel
That’s odd. The demo site is actually running on a 3.0 multisite install. Have you tried disabling all your plugins and then reactivating the theme to see if it’s a plugin conflict?
A little late… Thank you, no everything works fine. My site also is wp 3.01 multiside, so thats not the problem with daniels page…
Devin asked: “It looked like the Google Font plugin had options where you specify the css styles to override. Did that not work?”
-> No, for a reason unknown to me, the font specs in the theme’s style.css still override any custom css settings entered in the Google Fonts plugin”. So, the only solution was to edit the theme’s style.css file, and comment-out the font definitions.
Devin,
I re-installed the Portfolio Theme after downloading it from your site, to see if it was a problem with a corrupted file. It still does not work. I am getting the same error.
And I have not commented out
function scpta_wp_title($title, $sep, $seplocation)and I am no longer getting a white screen.
So the error I am getting is “T_OBJECT_OPERATOR” on line 108, which is the following line:
$title = get_post_type_object( get_query_var('post_type') )->label;Thanks for your help.
Daniel
PS. Just to be clear I commented out the entire function, not just the line quoted above.
Are you sure your server is running PHP5? (Install this plugin to check if there’s any issues with your server environment: http://wordpress.org/extend/plugins/serverbuddy-by-pluginbuddy)
Did you disable all your plugins too to see if there was a conflict?
Just submitted version Portfolio Theme 0.5 to the WordPress repository. It has support for the portfolio tags, so you can easily set up an illustration portfolio and a photography portfolio (for example), and have them at different urls. Let me know if you need help customizing this more and I can write a tutorial for it.
I also created a full page portfolio template for those of you that don’t want the sidebar on your main portfolio pages. I had several requests for this.
It should be available in a couple days for download. Be careful about upgrading if you have made significant changes to the theme.
The next version of this theme will include an options panel to change the footer text and select colors for the header, content area, and footer- but this is a couple weeks off.
One Trackback
[...] The full details of the theme can be found on the main Portfolio Theme details page. [...]