How to Create WordPress Portfolio Site with Uncode Theme?

Sometime back we were looking for building a WordPress portfolio site. Free themes available in WordPress repository are no way used for a quality portfolio site and plugins also did not met our expectation. After searching a while we found some decent themes in themeforest like Uncode, Highend, Marble, etc. Out of all we checked, Uncode was standing out of the crowd with its unbeatable portfolio features. We purchased Uncode theme and built a WordPress portfolio site. As it took few weeks for us to understand the theme, here is a simple tutorial on how to Create WordPress portfolio site with Uncode theme.

Before Starting with Uncode Theme

You need to understand few points before start working with Uncode theme, you can view the complete review of the theme here.

• Uncode is a customized variation of Visual Composer plugin which is bundled with the theme for free. So you need to get yourself familiar with Visual Composer page builder for WordPress.
• Demo content needs to be imported as a bulk. This means you can’t import only portfolio demo sites as showing on the sales page. You should install all the demo content and then start customizing the portfolio related stuffs.
• Uncode theme works with content blocks. These are the central layouts to be assigned to header, footer and content area. The assignments can be done globally using theme options and can be customized on the editor for individual portfolio items.

Ensure to discourage search engines from indexing your pages till the time your site is ready for public.

Step 1 – Importing Demo Content

As mentioned before, all demo content needs to be imported at once. Navigate to “Uncode > Install Demo” and install the demo content.

If you are not interested in installing the complete demo content, then choose which layouts you want to import from “Single Layouts” option. You can choose all portfolio layouts or the one you like from the demo page.

Step 2 – Portfolio Content Blocks

Uncode theme works differently compared with other portfolio themes. Basically each page is divided into content blocks for header, content and footer. These content blocks are then assigned to page layouts to create beautiful pages. You can use predefined content blocks imported from the demo content or create your own.

In the above screenshot there is a content block for “Content | Archive | Portfolio Masonry”. This block can be used on the portfolio archive page’s content section to create masonry archive layout.

Step 3 – Customizing Portfolio Global Settings

Once the demo content is installed, navigate to “Uncode > Theme Options”. You will see two tabs for portfolio related settings – “Portfolio” and “Portfolios” under layouts section. The portfolio settings will be applied to individual items and the portfolios settings will be applied to archives. You can change the name “Portfolio” to any other name like “Art”, “Work”, etc. This will be added in the URL like “yoursite.com/art/title/” (the structure of URL will change based on your permalinks settings). Below is the screenshot showing the word “Art” is used instead of “Portfolio“.

The portfolio and archive layouts settings are categorized and grouped under menu, header, content, footer, navigation, details and custom fields sections. Customize each section as per your need and assign content blocks wherever required. For example, you can display related portfolio items by assigning the “Related Posts | Portfolio List (aka Fake Related)” under the “Content” tab.

The portfolio details can be added under “Details” tab and the layout can be chosen to show the details on top, bottom, left or right side of the portfolio item.

Step 4 – Creating Portfolio Items

Once all your global settings are saved, navigate to “Portfolio > Portfolio Categories” and create the categories for your portfolio items. Later you assign the category in the editor similar to normal posts.

You can create different types of layouts like centered gallery, sidebar stack, etc. On portfolio editor you have the following important options:

Title – portfolio title similar to post title

Content area – for adding content

Excerpt – the text entered here will be shown against the portfolio details section. If no text is entered then first few lines will be shown from the content.

Medias – you can use isotope, carousel and stack options for showing media items on the portfolio page.

Page Options – here you can override all global settings setup under “Theme Options“.

Play around with different options available under “Medias” and “Page Options” meta boxes to create different portfolio layouts for your site. Below picture explains the layout details of a portfolio page with single stack image and the details on sidebar to explain each component.

1. Title of the portfolio item.
2. The image is added using “Medias” meta box with “Stack” option.
3. Content entered in the excerpt area. If no content is entered then few lines from content area will be shown here.
4. Content details – to be entered under “Details” section of the “Page Options“.
5. Social sharing as setup in global theme options.
6. Content from the content area.
7. Related posts from global settings which you can change under “Content > Content Block – After Content” under “Page Options” meta box.

Step 5 – Customizing Visual Composer Posts Element

Content blocks related to portfolio archive pages will use “Posts” element in Visual Composer to build the isotope or carousel portfolio layouts. So it is important to understand each options in the “Posts” element to build your portfolio archives.

Huge set of options are available in “Posts” element for customizing items, overlay, content, pagination, filtering, etc. One important setting is to choose the “portfolio” option by clicking “Build Query” button under “General” tab. Here you can filter the portfolio items to be displayed based on author and portfolio categories.

Step 6 – Finishing the Work

After creating all your portfolio items and archive pages, you can create standard posts and pages in similar manner. Once the site is finalized, go to “Uncode > Install Demo” and click on the “Delete Demo Media” button to cleanup the imported placeholder images. Delete all demo posts, pages and portfolio items and enable search engine crawling under “Settings > Reading” section.