How to add Jetpack Portfolio Custom Post Type into WordPress – Part 1

WordPressForPhotographers-1

I have been maintaining a self-hosted WordPress site for my photography portfolio and blog for some years now. Broadly speaking, the user content (text, images, gallery, video, etc) displayed on WordPress sites could broadly be pushed into either WordPress Pages or Posts. I always believes that conceptually Portfolio was something different from both, the Page and the Post. Till recently, photographers and other creatives had to either use Page or Post to display their Portfolio content. But, now Portfolio can be managed separately as a Custom Post Type. This is a guide on how to add Jetpack Portfolio Custom Post Type to an existing WordPress site.

The old way – Portfolio as a Page or Post.

With the amount of work creative professionals like us do, the number of projects in our repository increases, and hence our portfolio also evolves over a period of time. I didn’t see Portfolio fit into the scheme of pages. Page is too static, whereas portfolio represented something dynamic.

The normal blog posts do have some amount of scalability, with all published posts arranged into a taxonomy of categories. But then, implementing blog posts and portfolio together wasn’t the right thing in my opinion. I would have liked portfolio and blog to have different handling. For example: Different way to display Portfolio from blog posts.

Like everyone else I had to choose between the two available options. I did a trade-off and decided to implement my portfolio as WordPress Posts but in a different category all together. And that’s how it has stayed all this while. My WordPress Theme, Photocrati, like other WordPress themes does not have any out-of-the-box support to have different display template based on categories.

The new(better) way – Portfolio as Custom Post Type

Recently, WordPress introduced Custom Post Types(CPT). I think WordPress was a bit late in introducing it. Conceptually it does make sense to have portfolio as a CPT than as Post or as a Page. I saw WordPress.com introduce Portfolio Custom Post Type(CPT) first. Now, Jetpack plugin has enabled Portfolio CPT through a recent update. Also, another popular plugin that enables a Portfolio CPT is Justin Tadlock’s ‘Custom Content Portfolio’ (CCP).

Now, the WordPress theme developers can start providing a separate display template to Portfolio CPT projects in their themes just like the way they have separate templates for displaying single posts, pages and archives. Few themes are already doing it I guess. In themes that don’t yet support the new feature, the Portfolio CPT will be handled as single posts for now. But, at least there is now an extension, for themes to use and handle posts and portfolio in separate ways.

Jetpack Portfolio CPT

I have integrated Jetpack Portfolio CPT on my site now. And this is a step-by-step guide on how to add Jetpack Portfolio CPT to an existing WordPress site.

If you are starting on a fresh WordPress site with no content, then adding a Portfolio CPT is a straightforward task. But, for someone like me who already has an existing site with Portfolio implemented in other ways, there is some amount tweaking and making changes involved before we add the new Jetpack Portfolio Type. Though for this guide I have used Jetpack Portfolio CPT, but the concepts and idea shared here should hold good for any Portfolio CPT.

This guide assumes that you have self-hosted WordPress site and have a basic knowledge of using WordPress Dashboard.

Prerequisites:

  • Update WordPress to the latest version. At the time of writing this article the latest WordPress version is 3.9.2
  • Update Jetpack plugin to the latest version. At the time of writing this article the latest Jetpack version  is 3.1.1

Backup

Take a backup of your WordPress installation files and database before making any changes. There are many WordPress plugins to take automated backups of your entire site, and also to restoration of your site from a backup. I use Blogvault to take automated backup my website. I will write another guide on this someday.

Additional Plugins:

  • Post Type Switcher – Post Type Switcher is one of the plugins that lets us switch between different Post Types. We use this plugin to convert existing Portfolio content implemented as Posts(or Pages) to Jetpack Portfolio CPT.
  • Safe Redirect Plugin – Once we convert old Posts and Pages to new Portfolio CPT, the permalink or URL to the content changes. We may have to add redirections to make old permalinks/URLs redirect to the new Portfolio CPT. This is essential to avoid “Page not found” or “404” errors when users try to access the site with old links.

First Steps to avoid conflicts with existing content

At the moment, Jetpack seems to use ‘Portfolio’ slug by design in the permalinks of new Portfolio CPT projects (the individual posts of Portfolio CPT are called as projects). So, we need to change certain references to avoid conflict before enabling the Portfolio CPT.

URL/Slug change for Old Portfolio Category:

If you use a Category with a slug ‘Portfolio’, or if it appears in the permalinks of your posts, then you will have to change the slug.

  • From your Dashboard, navigate to Posts -> Categories.
  • Edit the Portfolio category.
  • Change the slug to something unique (Example: “portfolio-old“)
  • Click Update to save your changes.
Changing Portfolio Slug

Change the slug of Portfolio Category to “portoflio_old”

 

 

URL change for any Page that has the name Portfolio:

If you use any WordPress Page with a slug ‘Portfolio’, then you will need to change it too.

  • From your Dashboard, navigate to Page.
  • Edit any Page that has the name “Portfolio”.
  • Change the permalink to something unique (i.e., “portfolio-page“)
  • Click Update to save your changes.

Changing Portfolio Page Permalink

 

Check that there is nothing found for a permalink of the form www.your-domain-name.com/portfolio . If yes, then go back and edit that the slug for that resource.

Confirm Nothing Found

Jetpack Portfolio Custom Post Type(CPT)

Enable Jetpack Portfolio CPT

  • Navigate to Dashboard->Settings->Writing
  • Scroll Down to bottom of the screen
  • Check the box for ‘Enable Portfolio Projects for this site’.
  • Save your changes.

Enable Jetpack Portfolio CPT

A New Portfolio Section in the Dashboard.

  • You will now see a new section called Portfolio enabled in the column of the dashboard.
  • Click on that, and you will see a similar section like adding posts or pages where you can start adding new Portfolio projects.
  • All projects can be given a ‘Project-Type’ similar to Post Categories.
  • They can be tagged with ‘Project-Tags’ similar to post tags.

New Portfolio Item On WP Dashboard

Update setting of any extra plugins

  • Update any plugins for SEO, sharing, etc that support CPT to recognise the new Portfolio CPT.
  • In my case, I had to update All In One SEO plugin settings for SEO description, Facebook social meta, and Sitemaps, to add support to Portfolio CPT.
All In One Seo Plugin

All In One SEO setting for CPT

All In One SEO Plugin

All In One SEO Plugin Facebook Meta setting for CPT

All In One SEO Plugin

All In One SEO Plugin Sitemaps setting

  • I also had to enable Social media sharing buttons(I use sharing buttons of Jetpack) on Portfolio CPT. For this navigate to Dashboard->Settings->Sharing section and enable it.

Jetpack Plugin Sharing Module

At this moment, you can start adding new Portfolio projects while assigning project-types and project-tags. The process is just like adding a new post.

In the next part of this guide, we will see how to convert existing Posts and Pages into Portfolio CPT Projects, and how to assign Project-Types and add Project-tags. In the third and final part of this guide, we will see how to add redirection using Safe Redirect Manager plugin to compensate for the modifications due to Portfolio CPT.

Next: How to add Jetpack Portfolio Custom Post Type into WordPress – Part 2


This 3-part guide was written by me under a new series of articles under the category “WordPress For Photographers“. I am a photographer using WordPress for my portfolio website and blog. Through this series I want share with the photographer community my experiences, learning and best practices of maintaining a WordPress site. Though the target audience of this series are photographers, this should be of help to other independent creatives and bloggers who have WordPress Blog or Portfolio website. Do share this article with them.

  • If you want to follow my updates on Social Media, do follow me on Google Plus at +NishantRatnakarPhotographer.
  • If you need to contact me for assignments, photography related queries, or for anything in general :), then do write me using the contact form at this link.
  • If you liked this post, then please do share it with others using one of the sharing options given below.
Nishant Ratnakar
Follow me

Nishant Ratnakar

Photographer | Visual Storyteller at www.nishantratnakar.com
Nishant is a Bangalore, India based Wedding, Portrait & Editorial Photographer. He is available for assignments across India. He also conducts photography workshops and offers personal photography mentorship.
Nishant Ratnakar
Follow me

Latest posts by Nishant Ratnakar (see all)

This entry was posted in Wordpress For Photographers and tagged , , , , , , , , , , , , .

Leave a Reply

avatar
  Subscribe  
Notify of