A custom classic WordPress theme built for Your Name — software engineer and open-source contributor. The theme implements a lightweight PHP MVC layer (Controllers / Models / Views under inc/) and a Tailwind v4 CSS build, recreating a pixel-perfect portfolio and blog. It covers a front-page portfolio grid, blog listing / single / archive, a web résumé template, a contact form, and a 404 — all driven by Customizer settings and two custom post types (Projects, Experience). Requirements: WordPress 6.4+, PHP 7.4+, Node 18+ (only needed when rebuilding CSS; compiled assets are committed).
- Copy (or clone) the
foliocraftfolder intowp-content/themes/. - Activate under Appearance → Themes, or via WP-CLI:
wp theme activate foliocraftCompiled CSS (assets/css/app.css) and hand-written JS (assets/js/main.js) are committed, so a fresh clone renders without running any build step.
Only needed when modifying styles. Requires Node 18+.
npm install
npm run dev # watch mode — rebuilds on every save
npm run build # one-shot minified outputSource files live in assets/src/:
| File | Purpose |
|---|---|
tailwind.css |
Tailwind v4 entry point (imports tokens + components) |
tokens.css |
Design tokens (custom properties) |
components.css |
Hand-authored component overrides |
All three compile to assets/css/app.css. The assets/js/main.js file is hand-written and requires no build step.
-
Go to Settings → Reading and choose:
- A static page as your front page — select the page titled Home (or create one).
- Posts page — select the page titled Blog (or create one).
-
(Optional) Seed demo content — creates sample Projects, Experience entries, and Posts. The script is idempotent (guarded by a
foliocraft_seededoption):
bash tools/seed-content.sh- Go to Projects → Add New.
- Fill in the title and post content (description).
- Set a featured image — used as the project card thumbnail.
- Assign Tech and Contribution Areas terms (taxonomy pills on the front-page grid).
- Complete the Project Details meta box:
- Live URL — link to the deployed project.
- GitHub URL — repository link.
- Stars — displayed as a stat on the card.
- Language — primary programming language badge.
Projects appear in the front-page portfolio grid; Tech terms become interactive filter pills.
Go to Posts → Add New. Publish normally — categories drive the blog filter. The three most-recent published posts appear automatically on the front page; the full paginated list is the Blog page.
- Go to Experience → Add New.
- Add the title (job title) and post content (responsibilities / highlights).
- Complete the Experience Details meta box:
- Company — employer name.
- Date range — e.g.
Jan 2022 – Mar 2024. - Current role — check this box to mark the role as current (displays "Present").
- Control display order via Page Attributes → Order (lower = first).
All visual and copy settings live in Appearance → Customize → Portfolio. Key options:
| Section | Controls |
|---|---|
| Hero | Status badge, name, roles (comma-separated), lead paragraph, CTA button labels + URLs, stat numbers |
| About | About section body copy |
| Skills | Skill list |
| Open Source | Open-source section copy |
| Identity / Brand | Site name, tagline |
| Social Links | GitHub, LinkedIn, Twitter/X, email |
| Accent color | Primary accent used throughout the theme |
| Headshot image | Avatar displayed in the hero |
| Résumé PDF | Downloadable PDF linked from the résumé page |
| Contact | Contact section heading, sub-copy, optional Fluent Forms shortcode |
| Footer | Footer text / credits |
- Create a new Page (any slug;
resumeis conventional). - In Page Attributes → Template, choose Résumé.
- Publish.
The template renders a fully web-based résumé pulled from your Experience CPT entries, skills Customizer fields, and the résumé PDF link set in the Customizer.
The contact form works out of the box — submissions are sent via wp_mail to the site admin email set in Settings → General. The form is protected by a WordPress nonce and a honeypot field.
To swap in Fluent Forms (or any shortcode-based form):
- Install and configure Fluent Forms.
- Copy the form shortcode (e.g.
[fluentform id="1"]). - Paste it into Appearance → Customize → Portfolio → Contact → Form shortcode.
When a shortcode is present the native form is hidden and the shortcode output is used instead.
The theme is translation-ready with text domain foliocraft. Regenerate the POT after adding new strings:
wp i18n make-pot . languages/foliocraft.pot --domain=foliocraft --exclude=node_modules,docsPlace compiled .po / .mo files in languages/ using the standard WordPress locale naming (foliocraft-{locale}.po).
The theme uses a thin MVC-style layer to keep template files clean:
front-page.php ← entry point → Controllers/Front_Page.php
single.php ← entry point → Controllers/Single_Post.php
home.php ← entry point → Controllers/Blog.php
archive.php ← entry point → Controllers/Archive.php
page.php ← entry point → Controllers/Page.php
page-resume.php ← entry point → Controllers/Resume.php
404.php ← entry point → Controllers/Not_Found.php
Each controller resolves the data it needs via a Model (inc/Models/*) and renders a view via FolioCraft\Core\View, which maps to a file under template-parts/. Business logic stays in models; markup stays in template-parts.
inc/
Controllers/ ← request → data
Models/ ← data layer (WP_Query wrappers)
Core/View.php ← view renderer
PostTypes/ ← Project_CPT, Experience_CPT, Taxonomies
Customizer/ ← Customizer panel + settings
Meta/ ← meta boxes
Forms/ ← contact form handler
Assets.php ← enqueue CSS/JS
Autoloader.php ← PSR-4 style class loader
template-parts/
front/ ← hero, projects, about, skills, contact sections
blog/ ← blog listing, pagination
cards/ ← project card, post card
layout/ ← header, footer partials
resume.php ← résumé page view
page.php ← generic page view
404.php ← 404 view
assets/
src/ ← Tailwind source (tailwind.css, tokens.css, components.css)
css/app.css ← compiled output (committed)
js/main.js ← hand-written JS (no build)
docs/ ← design spec and reference