NovaFolio v1.7.0

A minimal, high-performance portfolio WordPress theme built for creative professionals — photographers, designers, art directors and studios.

Requirements

Installation

Import Demo Content

The file demo/demo-content.xml includes:

• 6 pages — Home, Portfolio, About, Services, Contact, Blog — each pre-assigned to the correct page template.
• 3 blog posts — Sample articles with categories (Photography, Design, Inspiration).
• 4 portfolio items — Horizon, Monolith, Synthesis, Paysage — with project metadata.
• 2 nav menus — Primary Menu and Footer Menu, linked to the correct pages.

After import, complete these steps

1. Settings → Reading → Set Home as the static front page and Blog as the posts page.
2. Appearance → Menus → Assign menus to locations.
3. Appearance → Customize → Upload your logo and configure colors/fonts.

Customizer Guide

All theme settings live in Appearance → Customize. NovaFolio adds the following panels and sections:

• Site IdentityLogo, site title, tagline, site icon (favicon). Supports SVG logos.
• ColorsPrimary accent color, background, text, links. All exported as CSS variables.
• TypographyHeadings font, body font, sizes, weights, line-height. 1,400+ Google Fonts supported.
• HeaderHeader layout (centered / left / split), sticky behavior, header background color & transparency.
• FooterFooter background color, text color, border-top, footer credit text, widget columns layout (1–4).
• ButtonsButton border-radius, background, text color, hover state. Applied globally via CSS variables.
• PortfolioGrid columns (1–4), hover overlay style, lightbox on/off, image aspect-ratio.
• BlogArchive layout (grid / list), featured image display, excerpt length.
• WooCommerceProducts per row, catalog sort controls, cart icon in header.

Design System

NovaFolio v1.7.0 introduces a token-driven Design System accessible via Appearance → Customize → Design System. All values are exported as CSS custom properties and propagate automatically to every block, template, and pattern.

Colors

A 12-color palette built on neutral tones + accent. All colors are defined as CSS variables (--nvf-accent, --nvf-surface, --nvf-ink, etc.) and mapped to WordPress block editor presets.

Typography

Configure body, headings and mono fonts (1,400+ Google Fonts). Fluid sizing uses clamp() for seamless scaling across breakpoints. Individual H1–H6 size, weight, line-height and letter-spacing controls.

Rhythm & Spacing

Choose between Compact, Standard and Airy spacing presets. These set the base spacing unit used by blocks and the layout system.

Shapes & Shadows

Border radius presets (Sharp / Soft / Rounded) and shadow intensity (Soft / Medium / Strong) applied globally.

Header Variants

NovaFolio provides three distinct header layouts, configurable in Customize → Header & Navigation → Header.

Sticky header

Enable via Customize → Header → Sticky Header. The header shrinks slightly and gains a background on scroll. All three variants support sticky mode.

Transparent header

Set the header background to transparent in the Customizer. Useful for hero sections where the header overlays the content.

Dark Mode

NovaFolio includes a complete dark mode implementation:

• Auto-detection: Respects prefers-color-scheme: dark by default.
• Manual toggle: A moon/sun icon in the header lets visitors switch. Their preference is stored in localStorage.
• Token remapping: All 12 color tokens are remapped in dark mode. No layout changes — only colors flip.

Enable or disable the dark mode toggle in Customize → General → Dark Mode.

Page Templates

Assign a template when editing a page via the Page Attributes → Template dropdown.

Navigation Menus

Go to Appearance → Menus to create and assign menus. NovaFolio registers three menu locations:

Gutenberg Blocks

The NovaFolio Core plugin registers these custom blocks, available in the Block Inserter under the NovaFolio category:

Portfolio

Portfolio items are a custom post type registered by NovaFolio Core. They appear under Portfolio in the WordPress admin sidebar.

Creating a portfolio item

1. Go to Portfolio → Add New.
2. Set a title and featured image (this is the thumbnail shown in the grid).
3. Add content using the block editor — use nvf/gallery-g2 for image galleries.
4. Fill in the Project Details meta box: Client, Year, Role, URL.
5. Assign it to a Portfolio Category for the filter to work.
6. Publish. It will automatically appear on the Portfolio archive page.

Portfolio grid settings

Configure columns, hover style, lightbox and aspect ratio in Appearance → Customize → Portfolio. You can also override these settings per-block in the nvf/portfolio-grid block inspector panel.

Blog

The blog uses standard WordPress posts. Create and manage them via Posts → Add New. NovaFolio provides:

• Grid and list archive layouts (configurable in Customizer → Blog).
• Featured image display control.
• Category and tag archive templates.
• Author archive with bio display.
• Single post with related posts sidebar.

Animations & Transitions

NovaFolio offers scroll-triggered animations and page transitions — all respecting the prefers-reduced-motion preference.

Scroll animations

Add the data-nvf-anim attribute to any element to trigger an entrance animation when it scrolls into view:

<div data-nvf-anim="fade-up">This content fades in on scroll.</div>

Page transitions

Enable in Customize → General → Page Transitions. Three styles: Fade, Slide Up, Wipe. Duration and color are customizable.

Parallax

Optional parallax scrolling on hero images. Controlled per-block or globally.

WooCommerce

NovaFolio has built-in WooCommerce compatibility. To enable it:

1. Install and activate WooCommerce (free, from the plugin repository).
2. Run the WooCommerce setup wizard to configure currency, shipping, and payment.
3. NovaFolio will automatically apply its shop styles to product pages, archives, the cart and checkout.

WooCommerce Customizer options

• Products per row — 2, 3 or 4 columns.
• Cart icon in header — shows a mini cart icon with item count.
• Shop sidebar — show/hide the widget sidebar on shop pages.

Child Theme

A ready-made child theme is included at novafolio-child/ inside the theme package. Using a child theme is recommended if you plan to make CSS or PHP customizations — it ensures your changes survive theme updates.

Activating the child theme

1. Upload the novafolio-child/ folder to wp-content/themes/.
2. Go to Appearance → Themes and activate NovaFolio Child.

Customizing CSS

Add your CSS overrides to novafolio-child/style.css. The child theme automatically enqueues the parent stylesheet first, so your rules always take precedence.

/* novafolio-child/style.css */

/* Example: override accent color */
:root {
  --nvf-accent: #ff4455;
}

/* Example: change heading font size */
h1, h2, h3 {
  letter-spacing: -0.5px;
}

Adding PHP functions

Add custom PHP to novafolio-child/functions.php:

<?php
// Remove the breadcrumb from all pages
add_filter( 'novafolio_show_breadcrumb', '__return_false' );

// Add a custom widget area
add_action( 'widgets_init', function() {
  register_sidebar( [
    'name' => 'My Custom Sidebar',
    'id'   => 'my-sidebar',
  ] );
} );

License & Updates

Activating your license

1. Go to NovaFolio → License in the WordPress admin.
2. Enter your Envato/ThemeForest purchase code (format: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx).
3. Click Activate License.

Once activated, automatic updates will appear in Dashboard → Updates whenever a new version is released.

Finding your purchase code

1. Log in to your ThemeForest account.
2. Go to Downloads.
3. Click Download → License certificate & purchase code next to NovaFolio.
4. Open the text file and copy the Item Purchase Code.

Manual updates

If automatic updates are not available, download the latest novafolio.zip from ThemeForest and upload it via Appearance → Themes → Add New → Upload Theme. WordPress will replace the existing installation.

Frequently Asked Questions

Support

Support is provided exclusively through the Envato ThemeForest item comments section and the dedicated support forum.

What is covered

• Bugs in the theme code as originally designed.
• Help configuring built-in features and Customizer options.
• Guidance for standard demo setup.

What is not covered

• Custom CSS / PHP modifications.
• Third-party plugin conflicts (unless caused by theme code).
• Server configuration and hosting issues.

Changelog