Coconella WordPress Theme

Custom portfolio theme for Coconella. Black & white editorial aesthetic with FF Cocon display typography.

---

Setup Instructions

1. Install the Theme

Copy the coconella/ folder to:

/wp-content/themes/coconella/

Then activate it in Appearance → Themes.

---

2. Required Plugins

Install these before configuring:

Plugin	Purpose	Link
Advanced Custom Fields (ACF)	Project fields, homepage content	wordpress.org/plugins/advanced-custom-fields
WP Mail SMTP	Contact form email delivery	wordpress.org/plugins/wp-mail-smtp
Yoast SEO	SEO meta tags	wordpress.org/plugins/wordpress-seo

Note: Custom Post Type UI is NOT needed — the project CPT is registered in functions.php.

---

3. Add FF Cocon Font

Place your licensed webfont files in /assets/fonts/:

assets/fonts/
├── FFCocon-Regular.woff2
├── FFCocon-Regular.woff
└── FFCocon-Bold.woff2

Then add to the top of style.css:

@font-face {
  font-family: 'FF Cocon';
  src: url('assets/fonts/FFCocon-Regular.woff2') format('woff2'),
       url('assets/fonts/FFCocon-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'FF Cocon';
  src: url('assets/fonts/FFCocon-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Purchase FF Cocon webfont license: https://www.myfonts.com/collections/ff-cocon-font-fontfont

---

4. Create WordPress Pages

In Pages → Add New, create these pages with the correct templates:

Page Title	Template / Slug
Home	Set as Front Page (Reading Settings)
Work	Uses archive-project.php automatically
About	Assign page-about.php template
Contact	Assign page-contact.php template

---

5. Configure Homepage Content (ACF)

Go to the Home page in wp-admin and fill in:

• Hero headline, subtext, CTA label
• Hero images (main + secondary)
• About heading, text, image
• Marquee / client names
• Testimonial quote + author
• CTA prompt text

---

6. Add Projects

Go to Projects → Add New and fill in:

• Title, featured image, content (description)
• Project Details: subtitle, year, client, services, URL, gallery
• Check Feature on Homepage for projects to show in the homepage grid
• Assign Project Categories (e.g. Branding, Web, Illustration)

---

7. Navigation

Go to Appearance → Menus and set the Primary menu if you want custom navigation order.

---

File Structure

coconella/
├── style.css              # Design tokens + all styles
├── functions.php          # Theme setup, CPT, ACF, AJAX
├── header.php             # Site header + mobile nav
├── footer.php             # Site footer
├── index.php              # Fallback template
├── front-page.php         # Homepage
├── archive-project.php    # Portfolio grid (/work)
├── single-project.php     # Case study template
├── page-about.php         # About page
├── page-contact.php       # Contact page
├── assets/
│   ├── js/main.js         # Scroll reveal, mobile nav, filters, contact form
│   └── fonts/             # ← Place FF Cocon files here
└── acf-json/              # ACF field group JSON (auto-created, commit this)

---

Customisation Notes

• Colors: Edit CSS variables in the :root block at the top of style.css
• Scallop border: The SVG path in front-page.php (About section) can be adjusted for tighter/looser waves
• Marquee speed: Change animation: marquee 20s duration in style.css
• Project grid layout: The first featured project spans 2 columns — reorder projects via menu_order in wp-admin

---

ACF JSON

The /acf-json/ folder is auto-created when you first save a field group via the ACF UI. Commit this folder to version control so field group definitions stay in sync across environments.