Manual

What is the Portfolio addon?

The Portfolio addon for Essential Grid lets you build the exact showcase you need, whether you’re after a simple image gallery or an advanced project organizer.

With four ready-made templates to choose from, and a bulk posting tool for rapid content creation, the Portfolio addon allows you to get your work visible to the world in eye-catching style, fast.

What You’ll Learn

In this guide, you’ll learn how to:

• Create a portfolio quickly from a template.
• Create a simple custom portfolio from scratch.
• Use the bulk portfolio item creator.
• Organize your portfolio into filterable categories.

To help give you ideas, we’ll also run through some examples of how the built-in organization system can be applied across different professions.

Create a Portfolio Quickly from a Template

The quickest and easiest way to begin is with a template made for use with the Portfolio addon.

There are four templates to choose from, each catered to specific professions:

• Peak Motion – photography
• Draft & Render – digital art
• Haven – interior design & architecture
• Pixel & Prism – graphic design

Note – how to choose a template:

• Simple – For the simplest starting point, choose the Peak Motion template.
• Advanced – To see the full capabilities of the Portfolio addon, choose the Pixel & Prism template.
• Balanced – If you want something in between, choose the Draft & Render or Haven template.

Create Grid from Template

Go to the Essential Grid plugin dashboard from your WordPress admin sidebar.

Click the Create Grid from Template button.

The Template Gallery will appear.

Search for the name of the template you’d like to use, e.g., “Draft & Render”.

Hover over your desired template, click the + button, then the blue Install Grid button to create a grid.

Once the grid is imported and ready, you’ll see a small confirmation box. On that box, click the purple Open Imported Grid button.

Now you can change the Name and Alias of the new grid to something memorable.

Then save the grid by clicking the green save icon at the top right of the screen.

Edit Demo Portfolio Items

When the template was created, a number of posts were created in the ESG Portfolio Items area, accessible from your admin menu.

You can now go ahead and edit those posts to suit your needs, changing the title, featured image, organization, and extra info.

Note: See below for a full rundown on organization and extra info.

Add Portfolio Grid to Page

The grid is now ready to go; it just needs to be added to a WordPress page or post.

Add a new page (or post), then once you’re in the page editor, click the + button to add a block, and search for Essential Grid.

Add the Essential Grid block to the page, then click the Select Grid button on its right end.

In the box that appears, click the drop-down labeled Grid Base, and from the list, select the grid you just made.

Click the purple Insert / Update button.

Make sure there will be a wide enough content area in your page to accommodate your grid. Whether your grid fits comfortably on your page by default will depend largely on the layout of your theme.

If you have a theme with a narrow content area, the easiest way to make sure you have enough space is to nest the grid block inside a WordPress Group block, with the group block’s Align property set to Full Width:

Depending on your theme and layout preferences, you might also need to toggle the Group block’s Inner blocks use content width setting off, so your grid can expand to full width:

Publish your page and take a look at your new portfolio grid.

Note: If you are using the Draft & Render portfolio grid and wish to recreate the dark gradient background seen in the demo, nest the grid inside a Group block, and set the background color of the Group block to use a linear gradient with the colors #13141B and #646C6E.

Create a Simple Custom Portfolio from Scratch

If you’d prefer not to start with a template, you can instead create a custom portfolio from scratch and choose your own preferred skin.

The first step is to create ESG Portfolio Item posts. For each image you want to display:

• Create an ESG Portfolio Item post and give it a title.
• Set the image as the post’s featured image.

There are a number of other features you can configure, but a post title and featured image are the only essential requirements. For example:

You can create your posts manually if you choose, but the easiest way is to use the Bulk Portfolio Item Creator tool, which you can learn about in the next section.

Once your posts are ready, go to the Essential Grid dashboard and click Create Empty Grid.

Give the grid a Name and Alias.

Switch to the Source tab and set the Post Types to Portfolio Item.

An optional extra step (if you want to create multiple portfolios) is to specify a sub-selection of Post Categories to draw content from.

You can read more about selecting post categories here: Specify a Category or Tag.

Go to the Skins tab and choose an Item Skin you like.

For more information on Item Skins read our guide Configuring Grid Skins.

You can also, optionally, add filters to your grid. The process to create filters is covered in the Organizing Your Portfolio section below.

Save your grid, then add it to a post or page using the process covered earlier.

If you want more information about customizing your grid’s layout, take a look at our guide: Working with Layout, Columns, Cobbles and Spacing.

Use the Bulk Portfolio Item Creator

Rather than manually creating one Portfolio Item post at a time, you can use the Bulk Portfolio Item Creator, found by going to Global Settings, then into the Portfolio tab, and scrolling to the bottom.

To begin, click Add New Portfolio Item.

This creates a box in which you can set up the portfolio item’s title, featured image, and organization. (We’ll go through how to handle organization in the next section.)

If you want to add another portfolio item, click Add New Portfolio Item again and a second box will appear. Repeat this for however many portfolio item posts you want to create.

As you go along, a Bulk Portfolio Item Summary table below will be automatically updated. When you’re done, check this table to confirm that your portfolio item posts are configured to your liking.

Once you’re ready to go, click Create Portfolio Items.

Your portfolio item posts will be created, then a table will be displayed with the title of each successfully created post and a link to edit it further should you like.

Organizing Your Portfolio

When designing the Portfolio addon, we closely studied how professionals typically organize their online portfolios.

The result is a flexible organization system that adapts to the needs of different fields, making it easy to structure your portfolio to suit your requirements.

Filterable Post Categories

The backbone of portfolio organization is our system of filterable post categories. These categories allow you to group your portfolio items in the way most suitable for your industry—whatever that industry may be.

There are five kinds of filterable post category:

1. Types
2. Expertise
3. Projects
4. Project Collections
5. Client

Let’s take a look at how they can be used.

Types

Use Types to categorize the type of work the portfolio item represents.

For example, if you’re an architect, you might use types like “Residential,” “Commercial,” or “Hospitality.” If you’re a digital artist, you might use “Concept Art,” “Illustration,” or “Environment.”

Expertise

Use Expertise to categorize the specific skills demonstrated in the portfolio item.

For example, if you’re a graphic artist, you might use categories like “Art Direction,” “Iconography,” or “Print Design.” An interior designer might use “Planning,” “Renovations,” or “Custom Furnishing.”

Projects

Use Projects to group multiple portfolio item posts under an overall project they were a part of.

For example, as a digital artist, you might group a set of items under a video game project you worked on. As an architect, you might group items showcasing a specific building your firm designed.

Project Collections

Use Project Collections to group multiple Projects of a similar kind.

For example, a graphic design portfolio might group projects into collections according to the industry they were produced for, such as wellness, entertainment, fashion, and so on.

An interior design portfolio, on the other hand, might group projects into collections according to the suburb or city in which they were located.

Client

Use Client to group projects into collections by the client—especially useful to showcase multiple projects created for notable clientele.

Adding Filters to Your Portfolio

Once you have organized your Portfolio Items, you can add filters to your portfolio grid so your potential clients can drill down and view subsets of your work at a time.

For an overview of how to add filters to a grid, read our guide: Give Visitors the Ability to Filter and Sort Grids.

For each kind of post category by which you’d like visitors to be able to filter, do the following.

• Add a new filter group, if one isn’t already available.
• Click the + button at the bottom of the list to add filters.
• Scroll to the post category by which you want to filter, and select each of the terms you set up for it. For example, if you used Project Collections to organize by industry, you might select “Wellness,” “Entertainment,” and “Fashion.”
• Click the Save Changes button.

Note: If you’re working from a template, you might already see several filters available in the filter group. Just check the ones you want to use and uncheck the ones you don’t need.

If you change the filter’s Layout from In Line to Dropdown, you may also want to change the Dropdown Start Text. By default, it will say “Filter Categories”—you can change it to suit your organization, e.g., “Filter Industry.”

Organization Examples, by Profession

Let’s take a look at some examples of how the organization system can be leveraged for different professions.

Architect or Interior Designer

• Types: Commercial, Residential, Hospitality
• Expertise: Planning, Renovations, Custom Furnishing
• Projects: Each building designed or decorated, multiple shots per building
• Project Collections: Location, e.g., suburb, city

Check out our Haven template to see this example in action.

Graphic Design Studio

• Types: Brand Identity, UI Design, Web Design, Packaging
• Expertise: Art Direction, Iconography, Print Design, App Development, UI/UX
• Projects: Per-client project collections of shots, e.g., app design for a gym, poster design for an indie film festival, packaging design for an outdoors company
• Project Collections: Group projects by industry, e.g., wellness, entertainment, fashion

Check out our Pixel & Prism template to see this example in action.

Digital Artist

• Types: Concept Art, Illustration, Character, Environment, Animation
• Expertise: Software used, e.g., ZBrush, UE5, Photoshop, Procreate
• Projects: Video game, card game, movie concept
• Project Collections: Original art, Personal work, Video games, Card or board games

Check out our Digital Artist template to see this example in action.

Adding Extra Info

In addition to organizational categories, you can set the following extra information for each of your portfolio items:

• Description
• When
• Duration
• Link

You can set these in the Essential Grid area below the post’s editing area.

The way these extra info items appear in your grid depends on the item template being used.

For example, Haven uses the When field to show a year, and Pixel & Prism uses Duration to show how long a project took to complete.

Note: If you want to add one of these pieces of extra info to your grid, you can do so by editing its item skin with the Item Skin Editor.