Recipe: Build a Projects Portfolio
The other Content Types guides explain each piece on its own: the fields, the listing page, the item page, adding entries. This one does something different. It takes a single, very common goal, a portfolio of finished work, and walks the whole thing start to finish, so you can follow along and end up with a working section of your site.
The example throughout is Meridian Studio, a design firm that wants to show off completed client work. Swap in your own trade and the shape stays the same: a renovation company showing kitchens, a landscaper showing gardens, a builder showing homes.
What you'll end up with
- A Projects page listing every finished job as a card with a photo.
- Filter buttons above the list so visitors can jump straight to the kind of work they care about.
- A page for each project with its own photo gallery and write-up.
- A "Featured work" strip on your homepage showing your three best, linking through to the rest.
Set up once, then every new project you add gets all of this without any design work.
Step 1: Create the Content Type
Go to Content Types in your dashboard and create a new one. Meridian Studio fills in:
- Name: Projects
- Singular label: Project (this fills in by itself as you type the name, and you can correct it)
- URL slug: projects, so the listing lives at yoursite.com/projects and each project sits underneath it
Turn on Show in navigation if you want Projects to appear in your site menu straight away. You can always add it to the menu by hand later.
Step 2: Choose the fields
This is the step worth slowing down on, because these fields are the form you'll fill in for every project from now on. Ask what a visitor needs to know, and what you'd want to filter or sort by later.
Every Item already comes with a Title, a Featured image, and an Excerpt built in, so you don't create fields for those. Meridian Studio adds five of its own:
| Field | Type | Why |
|---|---|---|
| Location | Text | One line, like "Portland, OR". Reads well on the card and reassures visitors you work near them. |
| Completed | Date | Shows recency, which matters more than people expect on a portfolio. |
| Service | Select | The category. Type the choices as a comma-separated list: Branding, Web Design, Packaging, Motion. |
| Photos | Images | The full set of project photos, uploaded together in one go. |
| The story | Rich Text | The write-up: the brief, the problem, what you did. Headings, bold and links all work here. |
Make Service a Select, not a Text field. This is the decision that pays off two steps from now. Only Select and Multi-select fields can power the filter buttons on your listing page. If you type categories into a plain Text field, you cannot filter by them, and you will find yourself rebuilding the field later and re-editing every project. Use Multi-select instead if a project can genuinely belong to more than one category.
Step 3: Design the listing page
Open the Archive Design tab on the Content Type. This is the Projects page itself.
Give it a heading and a line of intro text, then set up the cards. For a portfolio, photos do the selling, so Meridian Studio picks a grid with a large image on each card, shows the title and the excerpt, and leaves the rest off. A three-column grid on desktop suits work that is best seen big.
Then turn on the filters. Find Filter archive by and choose your Service field. Filter buttons now appear above the list, built automatically from the choices you typed into that field, and visitors can click Branding to see only branding work. Switch on the count if you'd like them to read "Branding (12)" rather than just "Branding".
If the picker says there is nothing to choose, that means the Content Type has no Select or Multi-select field yet. Go back to your fields and add one.
Step 4: Design the item page
Now the Inner Design tab, which is the page a single project gets. "Inner" just means the inside page, as opposed to the outer listing. You build it out of the same sections you use anywhere else on your site, with one addition: each section can pull its content from the project being shown, instead of you typing it in.
A portfolio page that works well:
- A banner at the top, with the heading set to pull from the project's Title and the background pulling the Featured image. One design, and every project fills it in with its own.
- A Gallery section for the photos. This is the piece specific to portfolios: set the Gallery's source to your Projects Content Type, pick your Photos field, and choose This Item. That last setting is the one that matters. It shows the photos belonging to the project being viewed. Leave it on "All" and every project page will show every project's photos.
- A text section pulling from The story.
- A call to action at the bottom, the same on every project: "Like what you see? Start a project."
You can also drop a project's details straight into a sentence. Typing {custom.field.Location} in a line of copy prints that project's location, so "A kitchen renovation in {custom.field.Location}" reads correctly on every project page without you writing it out each time.
Step 5: Add your projects
Now the easy part. Go to Projects in your sidebar, add an Item, and fill in the form you designed. Upload the whole photo set at once by dragging a folder onto the Photos field, then drag the thumbnails to put them in the order you want.
Add three or four before you judge the result. A listing page with one project on it never looks like what it will become.
Each project saves as a draft until you publish it, so you can write up a job over a few sittings without a half-finished page appearing on your site.
Step 6: Put your best work on the homepage
A portfolio buried on its own page does less for you than it should. Edit your homepage, add a Collection Listing section, and point it at Projects.
Two settings turn it from a duplicate of your listing page into a feature strip:
- Set the Limit to 3, so it shows your three most recent rather than everything.
- Leave Show "See all" link on, so visitors who want more go through to the full Projects page.
If you'd rather choose exactly which three appear, switch the section from showing all Items to hand-picking specific ones, and select your favorites.
The payoff
Everything above is a one-time setup. From here, adding a project is filling in a short form and pressing publish. It appears on the listing page, it lands under the right filter, it gets its own page with its gallery and write-up, and if it is one of your three most recent it moves onto the homepage on its own.
That is the whole point of Content Types: the tenth project takes about four minutes, and looks exactly as good as the first.