A modern WordPress portfolio theme built with Sage, TailwindCSS, and Advanced Custom Fields (ACF). This theme is designed for showcasing projects, services, and client feedback with custom post types and relationships.
- Built on Sage 10 (WordPress starter theme with modern development workflow)
- TailwindCSS 4.0 for styling
- Advanced Custom Fields (ACF) for content management
- Three custom post types: Projects, Services, and Feedback
- Custom relationships between post types
- Custom ACF blocks for flexible page building
- Contact form with Cloudflare Turnstile captcha support
- Theme options page for easy configuration
- Modern development workflow with Vite
Before installing this theme, make sure you have:
- WordPress 6.6 or higher
- PHP 8.2 or higher
- Composer
- Node.js 20.0.0 or higher
- Advanced Custom Fields Pro plugin (required)
Download or clone this theme into your WordPress themes directory:
cd wp-content/themes
git clone https://github.com/KhawarMehfooz/wp-portfolio-theme.git
cd wp-portfolio-themeInstall Composer dependencies:
composer installInstall npm packages:
npm install- Go to your WordPress admin panel
- Navigate to Appearance > Themes
- Activate Portfolio Theme
This theme requires ACF Pro to function properly. Make sure to install and activate it:
- Install ACF Pro plugin
- Activate it from the WordPress plugins page
For development, run the build process:
npm run devFor production, build optimized assets:
npm run build- Go to Theme Options in your WordPress admin menu
- Configure the following settings:
- Archive page descriptions for Projects, Services, and Feedback
- Contact form email settings (sender and receiver)
- Cloudflare Turnstile captcha settings (optional)
The theme includes three custom post types:
- Projects - Showcase your portfolio projects
- Services - Display services you offer
- Feedback - Collect and display client testimonials
Projects are the main portfolio items. Each project can have:
- Title and content
- Featured image
- Project date (ACF field)
- Related feedback (one feedback per project)
- Technology taxonomy
- Project category taxonomy
Archive URL: /projects/
Services represent the services you offer. Each service can have:
- Title and content
- Featured image
- Service icon (ACF image field)
- Related projects (up to 4 projects)
- Excerpt
Archive URL: /services/
Feedback items are client testimonials. Each feedback can have:
- Title
- Author name (ACF field)
- Author country (ACF field)
- Testimonial text (ACF field)
Archive URL: /feedbacks/
Each project can have one related feedback. The feedback is displayed on the single project page.
How it works:
- When editing a project, you'll see an ACF relationship field
- Select one feedback item to link to the project
- The feedback will automatically display on the project's single page
Each service can have up to 4 related projects. These projects are displayed on the single service page.
How it works:
- When editing a service, you'll see an ACF relationship field
- Select up to 4 projects to link to the service
- The projects will automatically display on the service's single page
The theme includes several custom ACF blocks:
- Hero Block - Full-width hero section
- About Me Block - About section
- Stats Block - Statistics display
- Posts Block - Display posts/projects/services
- Feedback Block - Showcase testimonials
- Contact Form Block - Contact form with AJAX submission
These blocks can be added to any page using the WordPress block editor.
wp-portfolio-theme/
├── app/
│ ├── Blocks/ # ACF block classes
│ ├── Fields/ # ACF field definitions
│ ├── Options/ # Theme options pages
│ ├── Providers/ # Service providers
│ └── View/ # View composers
├── config/ # Configuration files
├── resources/
│ ├── css/ # Stylesheets
│ ├── js/ # JavaScript files
│ └── views/ # Blade templates
└── public/ # Compiled assets
# Start development server with hot reloading
npm run dev
# Build for production
npm run buildStyles are located in resources/css/app.css. The theme uses TailwindCSS, so you can:
- Add custom styles in
app.css - Use Tailwind utility classes in templates
- Configure Tailwind in
tailwind.config.js(if needed)
Templates use Blade syntax and are located in resources/views/. Key templates:
single-project.blade.php- Single project pagesingle-service.blade.php- Single service pagesingle-feedback.blade.php- Single feedback pagearchive-project.blade.php- Projects archivearchive-service.blade.php- Services archivearchive-feedback.blade.php- Feedback archive
For deployment instructions, please refer to the Sage documentation.
-
Build production assets:
npm run build
-
Install production dependencies:
composer install --optimize-autoloader --no-dev
-
Upload to server:
- Upload the entire theme directory to your server
- Make sure to exclude
node_modulesand.gitdirectory
-
Set permissions:
- Ensure proper file permissions on your server
-
Activate theme:
- Go to WordPress admin and activate the theme
- Always run
npm run buildbefore deploying to production - Make sure ACF Pro is installed and activated on the production site
- Export ACF field groups if needed (or they will sync automatically)
- Check that all required PHP extensions are installed on the server
For issues related to:
- Sage framework: Sage Documentation
- ACF: ACF Documentation
- Theme-specific issues: Please open an issue in the repository
This theme is licensed under the MIT License.
Khawar Mehfooz
- Website: https://khawarmehfooz.com/
This theme was built with ❤️ using Sage, TailwindCSS, and ACF.