Create a Portfolio

December 24, 2013| Styled Themes

Most if not all the themes I’ve seen from others have portfolios which are popular if you need one. They are generally built into the theme with a custom post type which has to be coded into the theme by the developer. However, there are problems with this method:

  • the custom post type is only available as part of your theme
  • if you change themes, you lose it
  • coding for the portfolio may become incompatible with future versions of WordPress
  • coding may conflict with plugins
  • harder to keep up to date

I decided to make the portfolio a lot easier, stable, scalable, filterable, flexible, and more, all while taking advantage of what WordPress already gives you. You will need one plugin, but the advantage here is that it’s a plugin which lets you use it even if you change themes. 

IMPORTANT: When creating your portfolio, it’s important you create a parent category as “Portfolio“. However, if you create additional portfolio categories within “Portfolio”, these can be named anything you want.

This is a multi-stage tutorial, so take it one step at a time and you will be fine as we make this Portfolio from the demo website:

Demo Portfolio

portfolio-screenshot

Part 1 – Create a Category

  1. Go to Posts >> Categories
  2. Create a new “parent” category with the name asPortfolio, slug asportfolio, and an optional description (but I recommend one)
  3. Click on “Add New Category

Part 2 – Choose Your Portfolio Column Count

  1. Go to Appearance >> Themes >> click on the Customize text link
  2. Click on the “Basic Settings” tab
  3. For the portfolio, select either: Portfolio 1, Portfolio 2, Portfolio 3, or Portfolio 4
    celestial-portfolio-setting
  4. Click “Save & Publish

Part 3 – Prevent Portfolio Category showing in the Blog

Because we are making a portfolio using the standard WordPres category and post method, this means our posts will show up in the blog. However, we do not want this to happen, so there is another method which is taking advantage of another nice plugin (which is a great addition to any website) called “Simply Exclude” by Paul Menard. For more details of what this plugin can do, check out the plugin page:

Simply Exclude

  1. Go to Plugins >> Add New
  2. Search for “Simply Exclude” and then click install, then activate
  3. In the left side column of your admin, click on Simply Exclude >> Settings
  4. We will only focus on the Category settings for now, so select “Exclude” on the “Front/Home” line under the Actions column….this will automatically save.
  5. Go to Posts >> Categories 
  6. Put a check in the box labeled as “Front/Home” which means that we are excluding this category from showing up on the main blog home page, whether the blog is on a static page inside your site or on the front page. Checking this box will automatically save.
    celestial-portfolio-category

Part 4 – Create a Menu Item

Now it’s time to create a menu item (link) to your portfolio category.

  1. Go to Appearance >> Menus
  2. Look for the meta box labeled as “Categories” and add the “Portfolio” category to your menu
    celestial-add-cat-menu
  3. Click “Save Menu”

Part 5 – Begin Adding Portfolio Items

Setting up portfolio items is done the exact same way as you do with regular blog posts, but if you need the steps, see below:

  1. Go to Posts >> Add New
  2. Add your title, your portfolio item content such as description details, specifics, more images, anything…
  3. Select the “Portfolio” category, or if you have a subcategory setup for your portfolio, select that one.
  4. To add an image, use the “Featured Image” method which will show up on the Portfolio front page in the columns.
  5. Click “Publish

Part 6 – Adding a Portfolio Filter Menu (Optional)

When all done, you can make additional “sub categories” of the Portfolio category if you want to separate and categorize your items. You also get the opportunity to create a portfolio menu that works similar to typical portfolio filters, but this one I think is better because it’s an actual menu.

  1. Go to Appearance >> Menus
  2. Create a new menu and call it “Portfolio Menu” and click “Create Menu
  3. In the left side under “Menu Locations” for the Portfolio menu, select the Portfolio Menu and then save it.
    celestial-port-menu
  4. Now you can begin adding portfolio categories into this menu.

When you’ve made your portfolio menu, it’ll show up on your portfolio page above the item posts.

portfolio-filter

Categories: Setup Tutorials for Preference

Leave a Reply