Portfolio Item Creation
Every project you showcase in Monogram lives as a Portfolio item - a dedicated custom post type with rich fields for media, metadata, and layout control.
#Creating a New Portfolio Item
Go to Dashboard > Portfolio > Add New. You will see the standard WordPress editor along with a set of custom field tabs provided by Monogram.
#Organizing with Taxonomies
Portfolio items support three levels of categorization:
| Taxonomy | Purpose | Example Terms |
|---|---|---|
| Industry | Primary categorization | Web Design, Branding, Mobile App |
| Category | Secondary categorization | E-commerce, SaaS, Landing Page |
| Tag | Tertiary tags | UI/UX, React, Animation, 3D |
Assign at least an Industry to each item - it appears in portfolio cards and single page metadata.
#Overview Tab
The Overview tab controls how your project page looks and what introductory text appears.
| Field | Type | Description |
|---|---|---|
| Layout Style | Button group | Choose one of four single-page layouts (see below). Default: Style 1 |
| Project Subtitle | Short text (2 rows) | A single sentence shown below the project title, e.g., "Brand identity & website redesign for a fintech startup" |
| Project Summary | Text (3 rows) | A brief overview (2-4 sentences) shown near the top of the page - summarize the challenge, solution, and result |
#Media Tab
The Media tab determines the primary visual for your project. Select a Primary Media Type and the matching upload field appears automatically.
| Media Type | What It Shows | Card Indicator |
|---|---|---|
| Image | Featured image with optional parallax | Standard thumbnail |
| Gallery | Swiper carousel with prev/next and slide counter | "+N Images" badge |
| Video | Self-hosted file, YouTube, or Vimeo | Play button overlay |
| GIF | Animated image | Standard thumbnail |
| 3D Object | Interactive GLB/GLTF model viewer | 3D icon badge |
Each media type has its own sub-article below with detailed instructions.
#Video Settings
When you set the Primary Media Type to Video, choose where the video lives:
| Source | When to Use |
|---|---|
| Self-hosted | Full control, no third-party branding. Uses your bandwidth. Accepts MP4 (H.264) and WebM. |
| YouTube | Offload streaming to YouTube. Paste a standard youtube.com/watch?v=…, youtu.be/…, youtube.com/embed/…, or youtube.com/shorts/… URL. |
| Vimeo | Offload streaming to Vimeo. Paste vimeo.com/…, channel/showcase URLs, or player.vimeo.com/video/…. |
For self-hosted videos, upload the file directly. For YouTube and Vimeo, paste the full URL - the theme extracts the video ID and builds a privacy-friendly embed automatically (youtube-nocookie.com for YouTube, DNT-on for Vimeo).
The Video Poster Image is shown before playback starts. It is required for self-hosted videos and used as the card thumbnail. YouTube and Vimeo serve their own poster, so the field is optional for those sources.
#Player Controls
Four toggles let you tune how the video plays back. They apply to all three sources (self-hosted, YouTube, Vimeo) consistently.
| Toggle | Default | Behavior |
|---|---|---|
| Autoplay | On | Starts the video as soon as it appears. Browsers block autoplay with sound, so combine with Muted for it to actually start. |
| Muted | On | Starts the video with audio muted. Required by most browsers for autoplay to work. |
| Loop | On | Replays the video continuously when it ends. |
| Show Player Controls | Off | Shows play/pause/scrub controls. Disable for an immersive ambient-loop look. |
Tip: On the single project page, the inline hero video uses the toggles you set here. The lightbox (opened by the play button on a card) always shows controls so visitors can scrub freely.
#Introduction Media
Below the primary media fields you will find an Introduction Media repeater. Use it to add one or more secondary visuals that appear in the project introduction section, between the summary and the editor content.
Each row in the repeater can be either an image or a video, and you can mix the two freely:
- Image - upload a single image. It renders with a parallax scroll effect.
- Video - same three sources as the primary media (self-hosted, YouTube, Vimeo) with the same Autoplay / Muted / Loop / Controls toggles per row.
Add as many rows as you need - they render in the order you set them.
Tip: If the Introduction Media repeater is empty, the older single-image Introduction Image field is rendered instead. Existing projects keep working without changes.
#Meta Information Tab
| Field | Type | Description |
|---|---|---|
| Client Name | Text | The official brand name (e.g., "Acme Corp") - shown in the project meta section |
| Client Logo | Image (100x100 px) | Square logo or brand mark with transparent background. If left empty, the theme looks up a previously saved logo for this client name |
| Project Duration | Text | How long the project took, e.g., "6 weeks", "3 months", "Ongoing" |
#Extra Details Tab
| Field | Type | Description |
|---|---|---|
| Live Project URL | URL | Link to the live website or app - renders as a "Visit site" button. Leave empty for confidential projects |
| Featured Project | Toggle | Marks this item for special sections like homepage showcases. Keep no more than 3-5 items featured at once |
#Single Page Layout Styles
Each portfolio item uses one of four layout styles, selected in the Overview tab.
#Style 1 - Side-by-Side
A header with back button, title, and subtitle. Below that, a two-column layout: the left column shows metadata (year, industry, category, timeline, client with avatar, tags, project URL button, and share buttons) while the right column displays the project media.
#Style 2 - Full-Width Stacked
The media appears full-width at the top with the title and back button overlaid. The metadata section sits below the media. Gallery navigation appears below the media if the project uses a gallery.
#Style 3 - Asymmetric Split with Sticky Text
60% of the width goes to media on the left. A 40% sticky info panel on the right holds the back button, title, subtitle, industry, category, timeline, project URL button, year, client, tags, and share buttons. The info panel stays visible as you scroll through long media.
#Style 4 - Immersive Full-Screen
The media fills the entire viewport as a background. A minimal overlay at the bottom displays the title and subtitle. Meta information appears over the media. Best suited for visually striking projects.
#Common Sections (All Styles)
Regardless of which layout style you choose, every portfolio single page includes these sections below the hero area:
- Summary badge with view counter and like button
- Introduction media with parallax effect (if set in the Media tab)
- Editor content - the full WordPress editor area for your detailed project write-up
- Previous/Next navigation with thumbnail previews of adjacent projects
- Recent projects - the 5 most recent portfolio items
Last updated
Was this article helpful?
Resources
On this page
