Custom One-Page WordPress Site from Figma

Job Title:

**WordPress Developer Needed for Custom One-Page Website (Figma to WordPress, ACF, SCSS, Webpack)**

Job Description:

We are looking for an experienced **WordPress developer** to build a **single-page (one-pager) custom WordPress website** based on a **Figma design**. The website will include one simple contact form (5 fields) using **Contact Form 7**.

This is a **custom theme build** — no use of pre-made themes or page builders (such as Elementor).
The final website must be **responsive, pixel-perfect, lightweight, SEO-friendly, and easy for the client to manage**.

Key Project Details:

* **Type:** Single-page WordPress website (One Pager)
* **Design:** Provided in **Figma**
* **Contact Form:** One form with 5 fields (Contact Form 7)
* **Plugins to be used:**

1. **ACF Pro (Advanced Custom Fields Pro)** – for content management.
2. **Contact Form 7** – for the contact form.
3. **Rank Math SEO Pro** – for SEO management.
4. **Yoast Duplicate Post** – for duplicating pages (for future scalability if needed).

---

## Development Requirements & Process:

To be considered for this job and to receive full payment, the following process **must be followed**:

1) Design Review & Planning

* Review the **Figma design** carefully and create a development plan.
* Identify key sections, components, and any potential technical challenges.

2) Local Environment & Setup

* Install **WordPress locally**.
* Create a **blank custom theme** specifically for this project.

---

3) Theme File Structure & Build Tools

* Set up the theme’s file structure in an organized and scalable way.
* Configure **Webpack** to:

* Compile and minify assets.
* Support **SCSS**.
* Optimize development workflow.

Theme Structure Overview:

**Folders:**

* `acf-json` — For storing ACF field definitions.
* `assets` — CSS, JS, images, fonts.
* `templates` — Custom page template files.

**Files:**

* `header.php` and `footer.php` — Theme header and footer.
* `functions.php` — Theme functions and hooks.
* `index.php` or a custom `page-home.php` — for the one-page layout.
* `style.css` — Theme metadata and styles.
* `screenshot.png` — Theme thumbnail.

**Development Files:**

* `sources/` — Raw SCSS, JS, and assets.
* `webpack.config.js`, `package.json`, `node_modules/` — for development environment.

4) Layout Development (Based on Figma)

* Start by building the **Header** and **Footer**.
* Move on to the **one-pager sections**, developing each based on the Figma layout.

5) Content Management (ACF Pro)

* Use **ACF Pro** to make **all content editable**:

* Each section should be modular and manageable via custom fields.
* Create a **Theme Options** panel for global settings (logo, footer, etc.).
* The site must be **easy for non-technical users to update**.

6) Contact Form Integration

* Add one simple **Contact Form 7** form (5 fields).
* Ensure the form is styled according to the design and is fully functional.

7) Responsive Design & Testing

* Each section must be made **fully responsive immediately after development** (not as a separate step).
* Test responsiveness across devices (desktop, tablet, mobile) before moving to the next section.

8) Animations & Browser Compatibility

* Add **on-scroll animations**.
* Ensure **cross-browser compatibility** (Chrome, Firefox, Safari, Edge).

---

9) SEO & Plugins Setup

* Install and configure **Rank Math SEO Pro** for SEO.
* Install **Yoast Duplicate Post** for future page duplication.
* Make sure the site is fast, optimized, and SEO-friendly.

10) Deployment & Handover

* Deploy the website to the provided server/hosting.
* Conduct final checks and deliver clear instructions or documentation if needed.

Key Skills Required:

* Custom **WordPress theme development** (without page builders).
* Strong knowledge of **SCSS**, **JavaScript**, and **Webpack**.
* Proficiency with **ACF Pro** and **Contact Form 7**.
* Ability to create **pixel-perfect, fully responsive** layouts from Figma.
* Good understanding of **SEO best practices**.

Payment Terms:

**Full payment will be released only if:**

* The final website matches the **design**.
* All **content** is editable via **ACF** in a simple way.
* The site is **responsive**, **functional**, and **SEO-ready**.

**To apply, please provide:**

1. Links to your **custom WordPress projects** (no pre-made themes or page builders).
2. Brief description of your development process.
3. Your **timeline** and **cost estimate**.