Portfolio

$68

Portfolio is a refined and responsive theme for designers, filmmakers, photographers, and creative professionals. Portfolio gives you the power to effortlessly build, update and manage your online portfolio, with a design that is clean and beautiful on all screens and mobile devices.

Responsive design

Portfolio was designed from the start to look good on mobile phones, tablets, and computer screens big and small. Your content will automatically scale to fit the size of the window it is viewed in.

Portfolio pages

The focus of Portfolio is on your work. Whether you want to showcase photography, client work, illustration, videography or even writing, Portfolio provides a clean page template for readers to browse your showcase.

Your portfolio items are standard WordPress posts. To create a portfolio item, simply check “This is a portfolio item” after you’ve finished writing. You can also easily add, remove and even sort your portfolio items on your portfolio pages using the drag-and-drop interface:

View the portfolio page template on the demo site.

Home page

Portfolio also features a homepage template, which includes a featured slider and your three most recent portfolio items.

To add a post to the featured slider, check the “Show in featured slider” box and set a featured image. Once you publish, your post will automatically be added to the homepage slideshow.

View the homepage template on the demo site.

Typography

Great typography and style keeps your website visually interesting, engaging, and enjoyable. We’ve added several extra buttons to the visual editor to make styling your content easier than ever. With Portfolio, you have the power to effortlessly insert several pre-defined content styles in your posts and pages with the click of a button. No shortcodes or HTML – just easy, visual editing.

View the typographic elements in action on the demo site.

Font choices

To compliment the great typographic elements there are also 7 fonts included with Portfolio, selectable on the Theme Options page. Choose a combination of accent and body fonts that fit your style from the convenience of your WordPress dashboard.

Not just for your portfolio

Even though the focus of Portfolio is on your portfolio items, it still includes a great looking blog layout for publishing your textual and image content. Portfolio supports the Image, Aside and Standard post formats.

View the Portfolio blog page on the demo site.

Customize with theme options

To top things off, Portfolio features additional theme options to help you craft the theme to match the feel of your site. Options include:

  • Upload an image for your site’s logo
  • Change the slider animation effect
  • Choose the site’s primary color (used on links, buttons and other accents)
  • Hide or show dates, categories, authors and tags
  • Enable or disable an image fading effect
  • Add your Twitter, Facebook, Google Plus or Flickr URLs to be used with Portfolio’s hand-crafted icons

Try Portfolio today

While designing Portfolio, we worked hard to make it clean, beautiful and easy to set up and configure. We think you’ll have a pleasant experience building your Portfolio-powered site.

Also included with your purchase is access to the top-notch support we’ve become known for at The Theme Foundry. We’re happy to answer any questions you have as you get started on your site!

Quick Specs (all measurements in pixels):

  1. Portfolio is a flexible-width, responsive design.
  2. The main column maximum width is 550 with the sidebar.
  3. The main column maximum width is 860 without the sidebar.
  4. Slider and featured images are 860 by 450.
  5. Portfolio page and Homepage thumbnails are 242 by 135.

All images and videos will scale to fit the viewing screen.

Portfolio theme documentation

Video overview of setting up your Portfolio site

We wanted to demonstrate how the demo site is set up, so we recorded a 30 minute video doing a nearly complete walkthrough of setting up the demo site.

View the demonstration here.

Posting overview

Portfolio supports 3 post formats, selectable from the Edit Post screen: standard (text), Aside (updates) and Image.

The post format you choose determines how your post will look.

Standard: Posting articles

Articles work just like regular WordPress posts, leave the post format set to Standard and create your post.

Image: Posting images

To publish a single highlighted image, select Image as your post format. Then, set the Featured Image of your post to the image you want to highlight.

The Featured Image will be included at the top of the post and includes a link to the single post view.

Aside: Posting updates

To share a brief update, select the Aside post format. Then, type your message.

This post format is not intended to display images and other typographic elements.

Styling your content

Portfolio Theme adds a set of buttons to the visual editor; these buttons allow you to easily format your content with Portfolio’s custom typographic elements.

View the styling example page to see these various buttons in use.

Adding posts to the featured slider

To make a post “featured”, follow these steps:

  1. On your admin dashboard, go to Posts → All Posts;
  2. Click “edit” to get to the Edit Post screen for the post you want to add to the slider;
  3. Find the “Portfolio Theme Post Options” meta box:
  4. Check the “Show in featured slider” box;
  5. Make sure you’ve set a featured image for the post;
  6. Save the post, and you’ll now see your post in the slider!

Configuring the featured slider

In your WordPress dashboard, navigate to the Appearance → Theme Options page.

Under the “Logo & featured slider” section, you can toggle the featured slider’s autostart behavior as well as choose the animation effect for the slider (fade or slide).

Enabling gallery slider on posts and pages

Enabling a slideshow slider on a page or post is as easy as adding a gallery to your page or post and modifying the shortcode.

  1. Add a gallery to your page or post
  2. Click the Text tab above the editor to view your content in text only mode
  3. You should see a gallery shortcode with a list of ids, (e.g., [gallery ids="743,741,749"])
  4. Add the argument “slider” with value “true” to the shortcode. For instance, if your shortcode appears as [gallery ids="743,741,749"], you should modify it to [gallery ids="743,741,749" slider="true"]
  5. Save the page or post

If you followed these steps, you will have a slideshow similar to the one shown in the image below:

Slider Demonstration

Using the regular [gallery] shortcode will remove the slider styling and return to the default WordPress gallery.

Enabling gallery autostart on posts and pages

To autostart a slideshow in your post and pages, add your slideshow gallery; then, append the “autostart” argument with value “true” to the [gallery] shortcode. For instance, you should have a shortcode similar to the following:

[gallery ids="743,741,749" slider="true" autostart="true"]

Setting up your portfolio

Setting up your portfolio involves 2 main tasks: creating your portfolio items and placing them on your portfolio pages. Portfolio items and pages can be created in any order, and we’ll go over the process for setting them up in detail.

You’ll notice the words portfolio item are always in italics – this is because a portfolio item is just a regular old WordPress post with some extra information associated with it. In the following sections you’ll learn how to set up your portfolio items, but if you remember: “A portfolio item is just a post” our instructions will (hopefully) make more sense!

Creating a portfolio item

First, we’ll look at how to create your portfolio items. Each portfolio item represents an individual project, album, work of art, etc. Portfolio items are given a special display on the Portfolio and Homepage page templates, and have a unique look in the “single” view:

To create a portfolio item, follow these steps:

  1. On your admin dashboard, go to Posts → Add New;
  2. Make sure your post is standard format (it will be by default);
  3. Fill in the post title and content;
  4. Set a featured image for your post;
  5. Find the “Portfolio Theme Post Options” meta box;
  6. Check the “This is a portfolio item” box;
  7. Save/publish your post, and you’re done!

The Aside and Image formats cannot be used for portfolio items.

Adding content to your portfolio item sidebar

One of the nifty features of portfolio items is the extra details you can add to the sidebar.

This is demonstrated on the demo site, and it’s actually pretty simple to set up! Portfolio Theme uses the manual excerpt of a post to populate this information.

The “Click to show excerpt HTML help” button provides you with instructions about inserting quotes and buttons into the excerpt.

Manual excerpts are typically short explanations of the post. For your portfolio items, you may want to use the excerpt to include some detailed information about the item: project dates, client names, or materials used – really, anything that is relevant to this project.

Whatever you put in the excerpt box will be used to fill in the sidebar of your portfolio item. If the excerpt box is left empty, the sidebar will not appear.

Editing the short description on the Homepage and Portfolio page templates

On the Portfolio and Homepage page templates, portfolio items are displayed with a short snippet of text. This is grabbed from the beginning of the manual excerpt or content by default, but if you want to have complete control over the short description, you can use the text area provided below the “This is a portfolio item” checkbox:

The text you put here will be used on the Portfolio and Homepage page templates instead of the default text.

Creating a portfolio page

Portfolio pages display your portfolio items in grid format, allowing your visitors to browse the items and click through to the items that interest them.

To create a Portfolio page, go to Pages → Add New on your admin dashboard. Select the “Portfolio” template, give your page a title, save the page and you’re done!

Assigning portfolio items to portfolio page

You can place your portfolio items on your Portfolio pages using the Portfolio Page Options meta box, typically located in the righthand sidebar of the Edit Page screen:

This box allows you to add, remove and rearrange your portfolio items on the page easily from the Edit Page screen. Check/uncheck items to add/remove them from the page, and drag checked items to reorder them. Click “Update” to save your changes, and the items on the page will be updated.

Setting up your Homepage

To create your Homepage, go to Pages → Add New on your admin dashboard. Select the “Homepage” template, give your page a title, save the page and you’re done!

The Homepage template is made up of 2 major elements: the recent portfolio items in the footer, and the featured slider.

The recent portfolio items are automatically populated using the 3 most recent posts marked as portfolio items.

Using the default, “With Sidebar” and Sitemap page templates

Portfolio also includes three other page templates: default, “With Sidebar” and Sitemap.

  • The default template is “full-width” and will display your content without a sidebar.
  • The “With Sidebar” template will add your sidebar to your content.
  • The Sitemap template builds a user-friendly sitemap automatically linking to your pages, posts, categories, tags and archives.

Setting a Featured Image for a page

Pages can also use Featured Images. When you set a Featured Image for a page, it appears above the content as seen on the demo site About page.

To set a Featured Image, check out the “Setting a Featured Image” section of this Featured Image tutorial.

Setting a custom background

In your WordPress dashboard, navigate to Appearance → Background. This will display the options available for adding a custom Background Image and/or Background Color.

Fonts & colors

In your WordPress dashboard, navigate to the Appearance → Theme Options page. Under the “Fonts & Colors” section, there are two options for controlling the font families used across your theme.

The Accent font is used for blockquotes.

The Body font is used for your post copy and all other content that is not styled by the Accent font.

In addition, you can change the primary color for your site. The primary color is used primarily for link coloring, but is also used for buttons and other accents.

Display options

Portfolio allows you to easily remove the author’s name, post navigation, post date, tags and categories from the post display. In your WordPress dashboard, navigate to the Appearance → Theme Options page. Under the “Display options” section, check the appropriate options to prevent them from displaying on all posts and pages.

Within the “Display options” section, you also have the choice to toggle on or off Portfolio’s unique image loading effect, and the option to set a custom sticky post title.

Subscribe links

Sharing buttons are controlled under the “Subscribe links & copyright” section of the Appearance → Theme Options page. To disable all footer icons (including RSS), check “Disable all icons”.

Footer byline

Under the “Subscribe links & copyright” section of the Appearance → Theme Options page, you will find the input field for your footer Copyright text. By default, this field is left empty.

Using keyboard navigation

When viewing the Homepage template, you can use the left and right arrow keys on your keyboard to navigate through images in the Featured Slider.

Image dimensions

Where a height is not provided, feel free to insert your own custom value.

Featured slider image:

Width: 860px
Height: 450px

Portfolio item thumbnail:

Width: 242px
Height: 135px

Blog post image:

Width: 730px

Full width image:

Width: 860px

Page featured image:

Width: 860px