New Portfolio Theme

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

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:

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.

Readability Test

All children, except one, grow up. They soon know that they will grow up, and the way Wendy knew was this. One day when she was two years old she was playing in a garden, and she plucked another flower and ran with it to her mother. I suppose she must have looked rather delightful, for Mrs. Darling put her hand to her heart and cried, “Oh, why can’t you remain like this for ever!” This was all that passed between them on the subject, but henceforth Wendy knew that she must grow up. You always know after you are two. Two is the beginning of the end.

Continue reading

Images Test

Image Alignment Tests

Centered Image with Caption

This should be centered and a box behind it.

Center-align, no caption

Centered image with no caption, and text before and after. And here’s the after text.

Left-align, no caption

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed odio nibh, tincidunt adipiscing, pretium nec, tincidunt id, enim. Fusce scelerisque nunc vitae nisl. Quisque quis urna in velit dictum pellentesque. Vivamus a quam. Curabitur eu tortor id turpis tristique adipiscing. Morbi blandit. Maecenas vel est. Nunc aliquam, orci at accumsan commodo, libero nibh euismod augue, a ullamcorper velit dui et purus. Aenean volutpat, ipsum ac imperdiet fermentum, dui dui suscipit arcu, vitae dictum purus diam ac ligula.

Right-align, no caption

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed odio nibh, tincidunt adipiscing, pretium nec, tincidunt id, enim. Fusce scelerisque nunc vitae nisl. Quisque quis urna in velit dictum pellentesque. Vivamus a quam. Curabitur eu tortor id turpis tristique adipiscing. Morbi blandit. Maecenas vel est. Nunc aliquam, orci at accumsan commodo, libero nibh euismod augue, a ullamcorper velit dui et purus. Aenean volutpat, ipsum ac imperdiet fermentum, dui dui suscipit arcu, vitae dictum purus diam ac ligula.

No alignment, no caption

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed odio nibh, tincidunt adipiscing, pretium nec, tincidunt id, enim. Fusce scelerisque nunc vitae nisl. Quisque quis urna in velit dictum pellentesque. Vivamus a quam. Curabitur eu tortor id turpis tristique adipiscing. Morbi blandit. Maecenas vel est. Nunc aliquam, orci at accumsan commodo, libero nibh euismod augue, a ullamcorper velit dui et purus. Aenean volutpat, ipsum ac imperdiet fermentum, dui dui suscipit arcu, vitae dictum purus diam ac ligula.

Other Image Tests

Wide Image, Resized In Editor

Image is 900x598px, resized in editor to 329×222.

test-image-landscape-900

Wide Image, Not Resized

Image is 900x598px, not resized in editor.

test-image-landscape-900

Image Thumbnails

There are several images attached to this post.  Here’s a gallery:

It’s the simplest form of the gallery tag.  Most of the images are from the public domain site burningwell.org.

The images have various combinations of titles, captions, and descriptions.

Clearing Floats

The last item in this post is a floated image. Make sure any elements after it are clearing properly.

Page 1 of 212