The 16-Step Build System Behind a $500 WordPress Site

This SOP exists so the build happens the same way every time, no guessing and no surprises. You follow it step by step, in order, and you don’t skip ahead. It tells you exactly what to set up, what to check, what to fix, and what “done” means at each stage. If you’re new, this keeps you from getting lost. If you’re experienced, it keeps you from drifting or improvising. Start at step one, do the work, mark it complete, and move to the next.

The 6P Framework

GOFP runs on six phases. Each phase has fixed outputs and hands cleanly into the next. No sideways movement. No loops except Probe ⇄ Prototype.

1. Probe, Scan the stack. Check DNS, hosting, email, plugins, speed, layout, content gaps. Log everything before acting.
2. Prototype, Run fast throwaway fixes. Test hosting, caching layers, email headers, plugin conflicts, theme stability. Keep what works; discard the rest.
3. Plan, Lock scope. Define pages, wireframe structure, content needs, server setup, forms, features, and migration targets. No ambiguity after this point.
4. Produce, Build the site using real content. Configure server, install WordPress, load content, create wireframes, finalize layout, add features, test forms, stabilize mobile, run QA.
5. Polish, Tighten everything in one batch: spacing, internal links, mobile refinements, image compression, caching order, PageSpeed checks, content nits.
6. Protect, Migrate, switch DNS, verify SSL, deliver credentials, run tutorial, watch Search Console, fix indexing issues, keep uptime stable.

More on the builder: Meet Nolan

Project Flow (Summarized From All SOP PDFs)

Every GOFP build follows the same linear path. This list merges the full set of procedures from PDFs 01-16.

• Server Setup, Cloudflare first. DNS controlled by owner. Stage domain created. Local build isolated from live environment.
• Email Setup, SPF, DKIM, DMARC. Test headers until clean. Fix spoof-like behavior.
• Content Intake, Client fills structured doc. JR imports text, media, and past posts. Missing content flagged early.
• Wireframe, Real content only. No lorem. Layout tested with true spacing and image ratios.
• Design & Structure, Build pages, refine hierarchy, reuse sections, maintain spacing rules, preserve consistency.
• Interactive Elements, Forms, accordions, menus, buttons, galleries, sliders, embeds. Test every interaction.
• Content Loading, Add final copy, images (100-200KB), internal links, alt text, and metadata.
• QA & Testing, Device checks, form tests, caching order, network tab review, layout jump detection.
• Migration Prep, Export DB, files, configs. Verify hosting environment. Drop TTL. Private DNS switch.
• Migration, Upload files, import DB, confirm paths, SSL, email routing, caching.
• DNS Switch, One-record flip. Mobile checks. Instant rollback available.
• Credential Handover, Domain, hosting, WordPress, Cloudflare, email, analytics. All in one structured document.
• Tutorial Session, Walkthrough: CMS basics, updates, pages, posts, media, plugin usage.
• Monitoring, Search Console indexing, uptime, broken links, mobile usability, caching behavior.

See this flow in real builds: Works

Roles (Condensed)

• PM, Collect content, confirm approvals, track deadlines.
• Sr Dev, Make final architectural calls, fix edge-case issues.
• Jr Dev, Execute SOP steps in order; escalate when blocked.
• Client, Provide content, approvals, and credentials.

Tools Used Across All Steps

• Server Setup Checklist
• Content Intake Template
• Wireframe Template
• QA Checklist
• Payment Checklist

Why This Overview Exists

This block is the high-altitude map. It compresses the entire GOFP workflow so every SOP makes sense before you dive into specifics. If the JR follows this order, the build completes cleanly, predictably, and with no rework.

P1, Server & WordPress Setup

Step 1. First we set up the server and WordPress. Log in to the hosting panel, create a staging subdomain, and install WordPress on that subdomain. Make sure the site opens over HTTPS and the login page loads without errors. In WordPress, set the site title, timezone, and permalinks to “Post name.” Turn on backups and a basic security plugin, then create and delete a test page to prove the install works cleanly.

Step 1, Log Into Hostinger

1. Open https://hpanel.hostinger.com.
2. Enter the provided Hostinger email and password.
3. Confirm you are inside the correct client account.
4. On the dashboard, click Websites.
5. Click Add Website.

Step 2, Create the Staging Subdomain

1. Open the Subdomains panel.
2. Create a subdomain named stage or stage.clientdomain.com.
3. Wait for the subdomain to finish provisioning.

Step 3, Install WordPress

1. Open the control panel of the new subdomain.
2. Open Auto Installer.
3. Select WordPress.

4. Fill in the required fields exactly:
   • Website Title: client’s site name.
   • Administrator Email: client’s admin email.
   • Administrator Username: unique, non-generic.
   • Administrator Password: strong, unique.
   • Database: leave at “Create new database”.

5. Set Application Version to the recommended option.
6. Set Update Schedule to “Update only to minor version”.
7. Click Install.

Verification

• Installer completes without errors.
• WordPress login page loads at https://stage.domain.com/wp-admin.

Step 4, Apply Required WordPress Settings

1. Log into the WordPress admin dashboard.
2. Open Settings → General.
3. Set:
   • Site Title: correct client title.
   • Tagline: empty or client-provided.
   • Timezone: client’s local timezone.
   • Date Format: standard format (Y-m-d or default).
4. Scroll down. Confirm both URLs use https://.
5. Save changes.
6. Open Settings → Permalinks.
7. Select Post name.
8. Save changes.

Verification

• Site reloads over HTTPS.
• Permalinks set to Post name.
• No redirect loops.

Step 5, Confirm Admin Access

1. Return to Hostinger dashboard.
2. Click Admin Panel.
3. Confirm direct access opens the same WordPress admin successfully.

Step 6, Enable Safety Essentials

• Install a backup plugin (any standard plugin is acceptable).
• Enable daily or weekly backups.
• Install basic security plugin (example: Wordfence or comparable).
• Run the security plugin’s initial scan.

Step 7, Functional Test

1. Create a sample page called “Test Page”.
2. Publish it.
3. Load it in a private browser window.
4. Delete the page after confirming it loads.

Verification

• Admin dashboard reachable without errors.
• HTTPS working.
• Creating and deleting content works.
• No SSL or mixed content warnings.

P1 is complete when WordPress loads over HTTPS, admin access is stable, backups and security are installed, and a test page loads successfully.

P1, Upload Content to WordPress

Step 2. Next we bring all the client’s content into WordPress. Collect every image and video, then rename each file so the name actually describes what it shows, not “IMG_5920.” Resize and compress the images so they are web friendly. Upload everything in one batch into the Media Library, but do not waste time on alt text yet. Paste the client’s raw text into the pages so we can see how real content sits in the layout. The only rule is simple: no lorem ipsum left on the site.

Step 1, Gather & Rename Media

1. Collect all client-provided images and videos.
2. Rename every file locally before uploading. Use descriptive hyphens. Example., client-name-service-location.jpg
3. Do NOT keep generic names like IMG_5920.jpg or WhatsApp_Image.jpeg

Step 2, Optimize Images

1. Ensure width is ≤ 2048px (1920×1280 preferred).
2. Compress JPEGs to quality 82 via Squoosh.app or TinyPNG.
3. Convert icons/graphics to PNG or SVG; photos to JPEG/WebP.

Step 3, Bulk Upload to Media Library

1. Log in to /wp-admin.
2. Go to Media → Add New.
3. Drag ALL project assets into the upload area.
4. STOP: Do not add Alt Text, Captions, or Descriptions yet. This happens in P3.

Step 4, Paste Raw Text

1. Open the target pages.
2. Paste the client's raw text into the corresponding sections.
3. Do not format perfectly. The goal is to see if the content length breaks the wireframe layout.
4. Ensure ZERO Lorem Ipsum remains on the site.

P1 Content Upload is complete when the Media Library is full of clean-filename images, and pages contain raw client text with no placeholder Latin.

P1, Advanced Server & Email Setup

Step 3. Now we harden the server and email. In hosting, switch PHP to the latest stable version and set memory and execution limits to the recommended values. Confirm gzip is on and any needed cron jobs exist. Then create the client’s email accounts and record the login details. In Cloudflare, add MX, SPF, DKIM, and DMARC records, and set SSL mode to Full. Use tools like MX Toolbox and a Gmail test to confirm that outgoing and incoming mail both work and that SPF, DKIM, and DMARC all pass.

Step 1, Configure Advanced Server Settings

1. Log into the Hostinger control panel.
2. Open Server Management.
3. Apply required settings:
   • Set PHP Version to the latest stable release.
   • Set memory_limit and max_execution_time to Hostinger’s recommended values for WordPress.
   • Confirm gzip compression is enabled.
   • Set required cron jobs if specified in the Security Audit Procedures.

Verification

• PHP version updated.
• Memory and execution limits applied.
• Gzip enabled.
• No server errors after saving settings.

Step 2, Create Email Accounts

1. Open the Emails section in Hostinger.
2. Click Create Email Account.
3. Enter the email address and password.
4. Save credentials.
5. Note the IMAP/POP3 and SMTP settings shown on screen.
6. Create aliases or forwarding rules if required.

Verification

• Email account created and visible in Hostinger.
• IMAP/SMTP settings recorded.
• Aliases and forwards working.

Step 3, Add DNS Records in Cloudflare

1. Log in to Cloudflare.
2. Select the correct domain.
3. Add required DNS records for email:
   • MX records pointing to Hostinger mail servers.
   • TXT records:
     • SPF
     • DKIM
     • DMARC
   • CNAME records for verification if required.
4. Open SSL/TLS and set SSL mode to Full.
5. Open Caching and confirm standard defaults.
6. Enable Cloudflare security tools:
   • DDoS protection
   • Firewall rules

Verification

• MX, SPF, DKIM, DMARC, and CNAME records present.
• No Cloudflare DNS warnings.
• SSL → Full.

Step 4, Configure DKIM, SPF, and DMARC

DKIM

1. Open Hostinger’s email control panel.
2. Generate DKIM keys.
3. Add the DKIM TXT record to Cloudflare exactly as provided.

SPF

1. Create an SPF rule listing all authorized sending servers.
2. Add the SPF TXT record to Cloudflare.

DMARC

1. Create a DMARC policy. Example: v=DMARC1; p=none; rua=mailto:client@domain.com;
2. Add the DMARC TXT record to Cloudflare.

Verification

• DKIM record detected by Cloudflare.
• SPF record valid (no syntax warnings).
• DMARC policy active.

Step 5, Test Email Deliverability

1. Open MX Toolbox.
2. Run tests:
   • MX Lookup
   • DNS Check
   • SPF Check
   • DKIM Check
   • DMARC Check
3. Send a test message from the new email to a Gmail address.
4. Open Gmail → More → Show Original.
5. Verify:
   • DKIM = pass
   • SPF = pass
   • DMARC = pass
6. Send a reply from Gmail back to the domain mailbox.
7. Confirm it arrives.

Verification

• MX Toolbox shows no critical errors.
• Outbound mail passes DKIM, SPF, DMARC.
• Inbound and outbound mail working.

P1 Advanced Server & Email Setup is complete when server settings are configured, email accounts exist, DNS authentication records are active, and test mail passes all authentication checks.

P1, Create Wireframe

Step 4. With the base ready, we build the wireframe. Import the chosen Astra Starter Site and make sure all pages come in. Open the homepage and reorder sections so the page sells clearly: hero with one main call to action, trust, reviews, work examples, services, process, about, blog, service areas, and a solid footer. Swap all placeholder text and stock images for real client content in the key spots, like hero images and about photos. Clean the spacing and flow so the page feels simple and direct, then review it internally and with the client until the structure is approved.

Step 1, Install Astra Starter Site

1. Log in to /wp-admin.
2. Open Astra Sites in the dashboard.
3. Locate the template selected in the Complete Intake Forms card.
4. Import the starter site.

Verification

• All starter pages imported.
• No missing sections or import errors.

Step 2, Restructure Layout for CRO

Analyze Default Layout

1. Open the homepage in the WordPress editor.
2. Scan the structure top to bottom.

Rearrange Key Sections

1. Hero: ensure a clear value proposition, relevant image/video, and a single CTA.
2. Reviews & Trust: move high on the page for credibility.
3. Portfolio: show key projects with before/after images.
4. Services: list core services with short descriptions.
5. Contact info: ensure access from header, footer, and multiple CTA points.

Implementation

1. Use the WordPress editor to move, delete, or edit sections.
2. Follow the “Roofing Website Design Blueprint” layout:
   • Navbar
   • Hero
   • Reviews
   • Trust Badges
   • Portfolio
   • Process
   • Services
   • About
   • Blog
   • Service Areas
   • Footer

Verification

• Sections appear in the order above.
• Hero communicates value in one sentence.
• All CTAs visible and functional.

Step 3, Replace Placeholder Content

1. Remove all Lorem Ipsum (if any remains).
2. Structural Images Only: Replace the theme's default images for:
   • Hero Backgrounds
   • About Us (Main Team/Owner shot)
   • Service Card Anchors (Featured Images)
3. Leave galleries, sliders, and minor decorative images for P3.
4. Ensure raw text is present to validate container sizes.

Verification

• No remaining placeholder text.
• No stock images left on the site.
• Brand colors, fonts, and styles match client guidelines.

Step 4, Review and Refine

Internal Review

1. Review the full wireframe with the design team.
2. Confirm CRO alignment and page flow.
3. Fix spacing, alignment, and section hierarchy.

Client Presentation

1. Show the wireframe to the client.
2. Walk through each section.
3. Record all feedback.

Adjustments

1. Implement all approved feedback.
2. Re-verify layout order and spacing.

Verification

• Wireframe matches client requirements.
• CTAs point to correct destinations.
• No broken images or unstyled elements.

Step 5, Finalize Wireframe

1. Conduct a final internal review.
2. Ensure all structural elements are complete.
3. Prepare for handoff:
   • All sections are labelled.
   • All notes and annotations in place.
   • Wireframe is stable for development.

Verification

• Wireframe approved internally and by client.
• All annotations clear.
• Layout ready for P2 development.

P1 Wireframing is complete when a fully structured, client-approved, CRO-aligned wireframe exists with all placeholders replaced and all sections ready for production.

P2, Finalize Design

Step 5. Once the wireframe is locked, we finalize the design. Collect all client feedback into one clear task list and sort it by importance. The internal lead reviews every page against the brief, the intake form, and the wireframe. We fix layout, spacing, color, and hierarchy issues, and then update any high-fidelity design files so they match what is actually built. We check that headers, footers, buttons, forms, and navigation look and behave the same across the site, then prepare a simple walk-through so the client can see what changed and approve it.

Step 1, Gather and Organize Prototype Feedback

1. Collect all client feedback from the Prototype review.
2. Convert feedback into a task list.
3. Sort tasks into:
   • High priority
   • Medium priority
   • Low priority
4. Upload the organized list to the project card for the team.

Verification

• All client notes captured.
• No feedback missing from card.
• Feedback grouped by priority.

Step 2, Internal Design Review

1. Client Manager/Liaison reviews all pages.
2. Check alignment with:
   • Client Intake Form
   • Project brief
   • Wireframe structure
3. Verify:
   • Visual hierarchy
   • User flow
   • Consistency of spacing, color, typography
   • High-level responsiveness
4. Document required revisions in detail.
5. Assign corrections to Jr/Sr Dev.

Verification

• Revisions listed clearly.
• Instructions visible on the project card.

Step 3, Implement Internal Revisions

1. Jr/Sr Developer opens the revision list.
2. Apply layout, structure, and design corrections.
3. Fix any visual hierarchy or spacing issues.
4. Document all changes made.
5. Notify the Client Manager/Liaison when complete.

Verification

• All listed revisions implemented.
• No deviation from instructions.

Step 4, Update High-Fidelity Design Mockups

1. Open the design file in Figma, XD, or Sketch.
2. Apply required adjustments:
   • Layout corrections
   • Color and contrast changes
   • Font and typography corrections
   • Spacing, alignment, and grid fixes
3. Ensure all changes match the project goals and the client's brand.
4. Update all pages, not just the ones with feedback.

Verification

• All pages updated.
• No inconsistent elements across pages.

Step 5, Enforce Cross-Page Consistency

1. Check:
   • Headers
   • Footers
   • Navigation
   • Buttons
   • Icons
   • Forms
   • Section spacing
2. Verify every repeated element matches the design system.
3. Confirm responsiveness for desktop/tablet/mobile.

Verification

• Zero mismatched styles.
• Responsive behavior correct across breakpoints.

Step 6, Prepare Client Presentation

1. Generate export of updated mockups.
2. Create a simple before/after list of changes.
3. Prepare a page-by-page walkthrough outline.
4. Upload the presentation to the client card.

Verification

• Mockups exported cleanly.
• Change log organized and accurate.

Step 7, Present Final Design to Client

1. Conduct a review call or async walkthrough.
2. Explain updates page by page.
3. Collect all final feedback.
4. Record feedback on the project card.

Verification

• All final client requests documented.

Step 8, Apply Final Adjustments

1. Jr/Sr Developer implements all final feedback.
2. Ensure adjustments are accurate and consistent.
3. Perform final internal review.
4. Confirm design is stable and ready for development.

Verification

• No pending client requests.
• All pages consistent and approved.

P2 Finalize Design is complete when internal revisions, client feedback, and final adjustments are implemented consistently across all pages, and the design is approved for development.

P2, Review Content Strategy

Step 6. In parallel, we tighten the content strategy. We load the original content plan and check that all needed page types are covered, like services, landing pages, blog posts, and product descriptions if needed. We audit the client’s current material across their site, PDFs, social posts, and brochures, and list what must be created, updated, or repurposed. We align that list with real business goals such as leads, traffic, or clearer messaging. Then we set simple content rules for tone and reading level, create page templates, and get explicit client sign-off so writers and editors know exactly what to produce.

Step 1, Review Initial Content Plan

1. Locate the initial content plan created during discovery.
2. Confirm required content types are listed:
   • Service pages
   • Landing pages
   • Blog posts
   • Product descriptions (if applicable)
3. Verify no required topics are missing.

Verification

• Content plan loaded.
• All expected content types accounted for.

Step 2, Conduct Content Audit

1. Review all existing client content:
   • Website pages
   • PDFs
   • Social posts
   • Brochures
   • Documents
2. Identify:
   • Content gaps
   • Weak or outdated text
   • Missing assets
   • Opportunities to repurpose existing material
3. Create a list of items that must be:
   • Created
   • Updated
   • Rewritten
   • Repurposed

Verification

• Full inventory of existing content.
• Gap list documented.
• Actionable content list created.

Step 3, Align Content With Client Objectives

1. Confirm project goals:
   • Traffic growth
   • Lead generation
   • Brand clarity
   • SEO outcomes
2. Adjust the content plan to support these goals.
3. Document changes on the project card.

Verification

• Content plan matches client goals.
• No content misaligned with objectives.

Step 4, Define Content Guidelines

1. Set final rules for:
   • Tone
   • Voice
   • Style
   • Reading level
2. Create templates/outlines for:
   • Service pages
   • Blog posts
   • Landing pages
   • Product descriptions
3. Upload guidelines and templates to the project card.

Verification

• Guidelines documented and accessible.
• Templates available for all major content types.

Step 5, Review and Finalize Content Plan With Client

1. Present the revised content plan to the client (async or call).
2. Record all requested adjustments.
3. Update the plan accordingly.
4. Obtain explicit client approval.

Verification

• Client-approved plan stored in project card.
• No outstanding questions or unaddressed items.

Step 6, Prepare for Content Creation

1. Assign content tasks to writers/designers.
2. Attach required resources:
   • Guidelines
   • Templates
   • Tone/voice rules
   • SEO notes
3. Set deadlines per page/post.
4. Define the content creation workflow:
   • Draft → Internal Review → Revision → Client Review → Final

Verification

• All tasks assigned.
• Writers have guidelines and templates.
• Deadlines visible in card.

Detailed Design + Content Review (Integrated SOP)

Step 7. We then run a joint design and content review. The client manager checks colors, fonts, spacing, buttons, icons, and form fields against the design system, and proofreads all copy for accuracy and brand voice. They log every needed change in one place. The developer works through that list, updates the build, and reports back. The updated design and content then go to the client for a final pass, and any last changes are applied and rechecked. At this point, both design and text are stable enough to move into full production.

Step 1, Internal Review by Client Manager/Liaison

1. Review detailed design elements:
   • Colors
   • Fonts
   • Spacing
   • Buttons/icons/form fields
2. Proofread all content for accuracy and consistency.
3. Ensure messaging aligns with brand voice.
4. Document all required revisions.
5. Assign revisions to Jr/Sr Developer.

Verification

• Revision list complete.
• Content accuracy confirmed.

Step 2, Revisions by Jr/Sr Developer

1. Open the revision list.
2. Apply all design and content corrections.
3. Notify Client Manager/Liaison when complete.

Verification

• No remaining unchecked revision items.

Step 3, Client Review & Final Adjustments

1. Present updated design and content to client.
2. Document all requested changes.
3. Assign changes to Jr/Sr Developer.
4. Developer implements changes.
5. Run a final internal review.

Verification

• Client approval received.
• Design and content ready for development.

P2 Content Strategy Review is complete when the content plan is approved, guidelines are set, content tasks are assigned, and detailed design and content have passed internal and client review.

P3, Technical Overview & Interactive Review

Step 8. Before we go deep into development, we do a technical and interactive review. We prepare a short technical summary that explains the hosting setup, PHP version, memory limits, SSL, firewall, backups, and key integrations in plain language. Internally, we click every button, form, slider, tab, and animation and trace full user flows from landing to contact. We log any broken or confusing interactions and hand that list to the developer. After fixes, the client gets a combined call or async walkthrough that covers both the technical foundations and how every interactive piece behaves, and we capture their revision requests.

Step 1, Prepare Technical Documentation

(Restored from Raw File 07)

1. Server Details: Document the hosting environment (Hostinger), PHP version, and memory limits.
2. Security Measures: List active protections to build client trust:
   • SSL Certificate status (HTTPS).
   • Firewall configuration.
   • Backup schedule (Daily/Weekly).
3. Integrations: List all active third-party tools (Analytics, Payment Gateways, CRM connections).
4. CMS Overview: Prepare a brief summary of the WordPress configuration (Theme used, key plugins).

Verification

• Technical summary document created.
• All security measures confirmed active.

Step 2, Internal QA by Client Manager/Liaison

1. Check all interactive elements:
   • Buttons
   • Forms
   • Sliders
   • Tabs/accordions
   • Animations
2. Test full user flow:
   • Navigation
   • Form submission (check receipt of emails)
   • Modal triggers
   • Scroll interactions
3. Identify problems:
   • Broken actions
   • Incorrect links
   • Unexpected behavior
   • Inconsistent interaction patterns
4. Document all revisions and mark the card for the developer.

Verification

• All interactive elements tested internally.
• Issues documented on the project card.

Step 3, Revisions by Jr/Sr Developer

1. Open the revision card and review all items.
2. Fix interactive issues:
   • Button/link behavior
   • Form validation and submission
   • Sliders, tabs, accordions
   • Animations or micro-interactions
3. Test each fix immediately after applying it.
4. Notify Client Manager/Liaison when complete.

Verification

• All revisions implemented accurately.
• No new issues introduced.

Step 4, CM/Liaison Verification

1. Retest every updated interactive element.
2. Confirm:
   • Actions trigger correctly
   • User flow is smooth
   • No broken or inconsistent interactions
3. Mark additional revisions only if necessary.

Verification

• All functionality stable.
• User flow confirmed.
• Ready for client viewing.

Step 5, Client Meeting: Technical & Interactive

1. Part A: Technical Presentation:
   • Present the Technical Documentation from Step 1.
   • Explain how the server security and backups protect their business.
   • Confirm ownership of all accounts.
2. Part B: Interactive Walkthrough:
   • Walk through each feature (Forms, Sliders, Nav).
   • Demonstrate successful form submissions.
3. Document all requested client revisions.
4. Upload revisions to the project card.

Verification

• Client understands technical value.
• Client feedback recorded fully.
• Revision list updated.

Step 6, Final Developer Adjustments

1. Developer implements client-requested revisions.
2. Ensure changes follow project requirements and interaction patterns.
3. Run a full interaction test across all pages.

Verification

• All client revisions solved.
• Interactions consistent across the site.

Step 7, Final Internal Review

1. Conduct a final interaction pass:
   • Buttons
   • Forms
   • Modals
   • Sliders/accordions
   • Navigation
   • Animations
2. Confirm functional stability across breakpoints:
   • Desktop
   • Tablet
   • Mobile

Verification

• All interactive elements functional.
• No UX blockers.
• Site ready for P3 Testing & QA.

P3 Technical & Interactive Review is complete when the client has been briefed on infrastructure, internal issues are resolved, and all interactive elements work consistently across all devices.

P2, Feedback and Tweaks

Step 9. After that, we run a focused feedback and tweaks loop. We gather all client comments into one list and sort them by design, content, layout, and function. We clarify anything vague, then only implement what has been approved. We keep the changes small and targeted: text edits, spacing fixes, minor behavior tweaks, not big structural changes. We review everything internally to be sure we did exactly what was requested, then show the client the updated version. When they confirm that these tweaks match what they asked for, we mark the feedback phase as done.

Step 1, Gather Client Feedback

1. Collect all feedback from the client (async or meeting).
2. Document every item as an actionable task.
3. Organize the list by category:
   • Design
   • Content
   • Layout
   • Functionality

Verification

• All feedback captured.
• No missing tasks.

Step 2, Review Feedback with Internal Team

1. Share the feedback list with design and development.
2. Prioritize tasks by:
   • High importance
   • Medium importance
   • Low importance
3. Clarify any ambiguous feedback.

Verification

• Team aligned on priorities.

Step 3, Make Required Adjustments

1. Implement all approved changes:
   • Design corrections
   • Content edits
   • Layout fixes
   • Minor functional tweaks
2. Ensure all adjustments improve user experience and match project goals.

Verification

• All revisions implemented.
• No new issues created.

Step 4, Internal Review

1. Review updated pages internally.
2. Verify all client-requested changes are completed.
3. Check that revisions meet project requirements and maintain consistency.

Verification

• Internal review passed.
• All updates correct and stable.

Step 5, Present Final Tweaks to Client

1. Send updated design/content to client (async or call).
2. Walk the client through each adjustment.
3. Record any final feedback.
4. Apply last-minute revisions if required.

Verification

• Client confirms revisions are correct.

Step 6, Confirm Client Approval

1. Obtain explicit client approval on final design and content.
2. Record approval in the project card.
3. Mark the design phase complete.

Verification

• Approval documented.
• Team aligned on final version.

P2 Feedback and Tweaks is complete when all client feedback is applied, verified internally, presented back to the client, and formally approved.

P3, Development Kickoff

Step 10. Now we formally kick off development. We pull together all final documents: approved designs, content, scope, goals, and timeline. We make sure everyone on the team can see them. We set up the development environment, including the server, tools, and Git, and create a shared repository. We break the build into clear tasks, assign them, and load them into whatever board we use. We align the team on scope and deadlines once, then start work and keep progress visible in the board rather than in random chats.

Step 1, Review Project Specifications

1. Gather all finalized project documentation:
   • Approved design
   • Approved content plan
   • Client requirements
   • Scope and goals
   • Timelines
2. Verify all team members have access to these documents.

Verification

• Design and content fully approved.
• Team has access to all documentation.

Step 2, Set Up Development Environment

1. Configure the development server.
2. Install required software and tools.
3. Set up version control (Git).
4. Create a shared repository.
5. Invite all team members to the repository.

Verification

• Repository created.
• Team access verified.
• Environment stable and accessible.

Step 3, Assign Development Tasks

1. Break the project into tasks.
2. Assign each task to the appropriate team member.
3. Load tasks into the project management tool (Trello, Jira, etc.).
4. Set deadlines and expected delivery order.

Verification

• All tasks assigned.
• All deadlines visible in the tool.

Step 4, Conduct Kickoff Meeting

1. Hold a kickoff meeting with the development team.
2. Review:
   • Project specifications
   • Timelines
   • Task assignments
3. Address all questions and uncertainties.

Verification

• Team aligned on scope and timelines.

Step 5, Begin Development

1. Start working on assigned tasks.
2. Follow the project plan strictly.
3. Communicate progress in the project management tool or team channel.
4. Report issues immediately.

Verification

• Progress visible for all active tasks.

Step 6, Conduct Regular Check-Ins

1. Schedule recurring check-ins.
2. Review progress and identify obstacles.
3. Adjust workload or timelines if required.
4. Verify all team members remain on track.

Verification

• Check-ins completed on schedule.
• No unreported blockers.

P3 Development Kickoff is complete when the environment is ready, tasks are assigned, the team is aligned, and active development is underway.

P3, Content Addition

Step 11. As development moves, we finalize content inside the site. In the Media Library, we add alt text and clean titles to all used images so nothing shows up as “IMG_1234” in the back end. On each page, we clean up the raw text we dropped in earlier, set proper headings, add lists where they help, and wire internal links between related pages. We then place secondary images such as galleries or inline photos, and adjust their size and alignment so the page reads well on both desktop and mobile. Content is considered done when everything is readable, scannable, and properly tagged.

Step 1, Finalize Media Metadata (SEO)

1. Go to Media → Library.
2. Click on each image used in the site.
3. Add Alt Text: Describe the image + context.
4. Add Title: Clean, readable title.
5. Add Caption only if visible on the front end.

Verification

• No "IMG_" titles remaining in used media.
• All active images have Alt Text.

Step 2, Finalize Text Formatting

1. Open Pages/Posts.
2. Review the raw text pasted in P1.
3. Apply final styling:
   • Heading hierarchy (H1 -> H2 -> H3)
   • Bold/Italic emphasis
   • Bullet points and lists
   • Internal links

Step 3, Insert Remaining Media

1. Insert secondary images (galleries, sliders, body content images).
2. Adjust alignment and size settings.
3. Verify all structural images (Hero/Cards) set in P1 still look correct with final text.

Verification

• All text formatted and readable.
• All images (Structural + Secondary) placed and tagged.

P3 Content Addition is complete when all approved text is fully formatted, metadata is added to all used media, and secondary visual elements are correctly placed.

P3, Interactive Features

Step 12. We then add and finish all interactive features. We pull the list of required components from the spec, like contact forms, chat widgets, sliders, FAQ toggles, and maps. We install only the plugins we need, configure them, and drop their elements into the right spots using blocks, widgets, or shortcodes. We test each feature end to end, looking for conflicts or slowdowns, and repeat tests on desktop, tablet, and mobile. The client gets a preview or video showing how each feature works, gives feedback, and we adjust until everything feels simple and reliable.

Step 1, Identify Required Interactive Features

1. Review approved project specs.
2. List all required components:
   • Contact forms
   • Live chat tools
   • Sliders or carousels
   • FAQ toggles
   • Maps or embeds
3. Collect required plugins or tools.

Verification

• Every interactive feature listed.
• Plugins/tools identified for each feature.

Step 2, Install and Configure Plugins

1. Log in to /wp-admin.
2. Go to Plugins → Add New.
3. Search, install, and activate required plugins.
4. Open plugin settings and configure:
   • Form settings
   • Styling
   • Behavior
   • Integrations

Verification

• Plugins installed without errors.
• Settings match spec requirements.

Step 3, Add Interactive Elements to Pages or Posts

1. Open the target page or post.
2. Insert the element using:
   • Shortcode
   • Widget
   • Block
   • Page builder element
3. Configure element-specific options:
   • Form fields
   • Display behavior
   • Triggers
   • Mobile settings

Verification

• Element displays in editor preview.
• Settings applied correctly.

Step 4, Test Interactive Features

1. Test each feature end-to-end:
   • Form submission
   • Chat widget load
   • Slider navigation
   • Accordion toggles
2. Check for:
   • Plugin conflicts
   • Slow loads
   • Console errors
3. Repeat tests on:
   • Desktop
   • Tablet
   • Mobile

Verification

• No broken interactions.
• No layout shifts or errors on any device.

Step 5, Gather Client Feedback

1. Send a preview link or video walkthrough of all interactive features.
2. Log all feedback as tasks.
3. Clarify any uncertain requests.

Verification

• Feedback fully documented.

Step 6, Finalize Interactive Features

1. Apply all requested adjustments.
2. Retest every feature.
3. Confirm everything matches project specs and client expectations.

Verification

• All interactive elements functioning correctly.
• Client approval recorded.

P3 Interactive Features is complete when all elements are installed, configured, tested, adjusted, and approved.

P3, Testing and QA

Step 13. After features are in place, we run full testing and QA. We check every button, link, form, slider, accordion, and embed to be sure it behaves as expected. We test the site in major browsers and on different devices, watching for layout breaks. We run performance tools like PageSpeed and GTmetrix and fix any obvious issues such as huge images, blocking scripts, or missing caching. We scan for security problems, check SSL, and make sure no plugin looks risky. Finally, we invite the client to test the site themselves, collect any bugs or concerns, fix them, and retest until the site is stable.

Step 1, Prepare for Testing

1. Gather all project documentation:
   • Design specs
   • Content specs
   • Feature list
   • Approved revisions
2. Confirm all development tasks are complete and the site is ready for QA.

Verification

• All specs organized.
• Site stable enough for testing.

Step 2, Functional Testing

1. Test every feature:
   • Buttons
   • Navigation
   • Forms
   • Sliders
   • Accordions
   • Embeds
2. Verify all links resolve correctly.
3. Check all interactive elements for correct state changes and responses.

Verification

• No broken links or interactions.
• All features performing as expected.

Step 3, Compatibility Testing

1. Test the full site in:
   • Chrome
   • Firefox
   • Safari
2. Test across devices:
   • Desktop
   • Tablet
   • Mobile

Verification

• No display errors across browsers.
• Responsive layout stable at all breakpoints.

Step 4, Performance Testing

1. Run:
   • Google PageSpeed Insights
   • GTmetrix
2. Check:
   • Load times
   • Largest Contentful Paint
   • CLS stability
   • Caching behavior
3. Fix flagged issues.

Verification

• Site loads fast on normal hardware.
• No unnecessary large files or delays.

Step 5, Security Testing

1. Run security scans for vulnerabilities.
2. Verify:
   • SSL configured correctly
   • Firewall active
   • No mixed-content issues
   • No insecure plugins

Verification

• No security warnings.
• All protections active.

Step 6, User Acceptance Testing (UAT)

1. Present the website to the client.
2. Request full review and testing from the client.
3. Collect all feedback.
4. Clarify any unclear comments and convert them into tasks.

Verification

• Client feedback captured completely.

Step 7, Document and Address Issues

1. Document every issue found during testing.
2. Create tasks for each bug or adjustment.
3. Assign to the development team.
4. Retest all fixed items.
5. Confirm full resolution.

Verification

• All issues resolved.
• All fixes retested and confirmed.

P3 Testing and QA is complete when the site has passed functional, compatibility, performance, and security checks, and all client feedback has been addressed and reverified.

P4, Final Payment Collection

Step 14. With the build approved, we collect the final payment. We confirm that all promised deliverables are done and create a clear invoice that shows what was included and the final amount. We email it with a short summary of the project and simple payment instructions. If payment is late, we send a polite reminder and reattach the invoice. When funds land, we send a receipt and note that the project is now complete from a billing point of view.

Step 1, Prepare the Final Invoice

1. Confirm all deliverables are complete and approved by the client.
2. Create the final invoice with:
   • Full breakdown of services
   • Any remaining charges
   • Final total due

Verification

• Client approval recorded.
• Invoice accurate and complete.

Step 2, Send the Final Invoice

1. Email the invoice to the client.
2. Include:
   • Short project completion summary
   • Payment instructions
   • Accepted payment methods
   • Due date

Verification

• Client received invoice.
• All payment details included.

Step 3, Follow Up if Needed

1. Set a reminder for the payment due date.
2. If no payment arrives:
   • Send a polite reminder
   • Attach the invoice again
   • Repeat payment instructions

Verification

• Follow-up logged.
• Client notified of overdue status.

Step 4, Confirm Receipt

1. Verify payment has been received and processed.
2. Email the client a confirmation:
   • Thank them
   • Confirm the project is complete

Verification

• Payment confirmed.
• Receipt email sent.

Step 5, Close the Project

1. Mark the project as “Completed” in the system.
2. Archive all project files and documentation.

Verification

• Project status updated.
• Archive complete.

P4 Final Payment Collection is complete when the invoice is issued, payment is received, confirmation is sent, and the project is archived.

P4, Website Migration

Step 15. We then migrate the site to the client’s final hosting. We confirm the target hosting details, make full backups of files and database, and prepare the new server. We transfer the files and database, update configuration where needed, and test the copied site on the new host. We then update DNS so the main domain points to the new server, wait for it to propagate, and test that the live site loads and works in the new environment. Only when everything checks out do we consider migration done.

Step 1, Prepare for Migration

1. Confirm final hosting environment details with the client.
2. Create full backups of:
   • Website files
   • Database

Verification

• Hosting details confirmed.
• Backups completed successfully.

Step 2, Set Up the New Hosting Environment

1. Log into the new hosting panel.
2. Configure required server settings.
3. Install required software/tools for the WordPress build.

Verification

• Server ready for migration.
• All required tools installed.

Step 3, Transfer Website Files

1. Export the WordPress database from the development environment.
2. Download all website files.
3. Upload website files to the new hosting environment.
4. Import the database into the new hosting environment.
5. Update configuration files if required (such as wp-config.php).

Verification

• Files transferred successfully.
• Database imported without errors.

Step 4, Update DNS Settings

1. Update DNS to point the domain to the new hosting environment.
2. Verify propagation by checking:
   • DNS lookup tools
   • Browser tests

Verification

• DNS resolves to new server.
• No DNS propagation errors detected.

Step 5, Test the Migrated Website

1. Test the website end-to-end:
   • Page loads
   • Navigation
   • Forms
   • Interactive elements
2. Confirm all links and assets load correctly.

Verification

• Website functional on new hosting.
• No broken elements.

Step 6, Confirm with the Client

1. Notify client that the migration is complete.
2. Provide instructions for accessing the new hosting environment.
3. Gather client feedback.
4. Address any issues reported.

Verification

• Client confirms access and satisfaction.
• All reported issues resolved.

P4 Website Migration is complete when the site is fully functional on the new hosting environment, DNS is pointed correctly, and the client has confirmed successful access.

P4, Credential Handover

Step 16. Last, we hand over control and train the client. We gather every credential into one document: WordPress, hosting, domain registrar, email, and any connected tools like analytics or payment gateways. We test each login to be sure it works, then share the document securely. We schedule a short tutorial, walk the client through logging in, editing pages and posts, managing media, and using key plugins. We answer their questions live. Once they can log into every service themselves and feel comfortable making basic changes, GOFP is complete and the site is fully in their hands.

Step 1, Gather All Credentials

1. Compile a complete list of credentials, including:
   • WordPress CMS login
   • Hosting account login
   • Domain registrar login
   • Email service credentials
   • Analytics, payment gateways, or any other service used

Verification

• No credential or service missing from the list.

Step 2, Verify Credential Accuracy

1. Test each credential.
2. Confirm each account opens with the provided login.
3. Verify all services are properly configured and functional.

Verification

• All logins confirmed working.
• No outdated or incorrect credentials.

Step 3, Prepare Credential Handover Document

1. Create a structured document containing:
   • Service name
   • Login URL
   • Username/email
   • Password
   • Management instructions or notes
2. Organize the document for clear, fast retrieval.

Verification

• Document complete, formatted, and readable.

Step 4, Schedule Handover

1. Schedule a meeting or async walkthrough with the client.
2. Prepare to explain each service and credential.

Verification

• Client aware of handover timing.

Step 5, Conduct the Handover Walkthrough

1. Review each credential with the client.
2. Explain how to access and manage every service.
3. Provide any required training materials or reference notes.

Verification

• Client understands each account and how to use it.

Step 6, Confirm Client Access

1. Have the client log into each service.
2. Confirm successful access.
3. Resolve any login issues immediately.

Verification

• Client verified access to all credentials.

Step 7, Secure Credential Transfer

1. Transfer the credential document securely (encrypted file or password-protected link).
2. Confirm client receipt.
3. Remind the client to store the document securely.

Verification

• Credentials delivered and acknowledged.
• Client informed of security expectations.

P4 Credential Handover is complete when all credentials are gathered, verified, documented, transferred securely, and confirmed working for the client.

P4, Tutorial Session

This procedure conducts the GOFP client tutorial session. Based directly on the project PDF source.

Step 1, Schedule the Tutorial Session

1. Contact the client to schedule the tutorial.
2. Confirm:
   • Date
   • Time
   • Platform (Zoom, Google Meet, etc.)

Verification

• Client confirmed schedule.

Step 2, Prepare for the Tutorial

1. Create a clear tutorial agenda covering all major topics.
2. Prepare supporting materials:
   • Screenshots
   • Guides
   • Short videos

Verification

• Agenda complete.
• All training materials ready.

Step 3, Conduct the Tutorial Session

1. Start the meeting on time.
2. Follow the agenda step by step.
3. Demonstrate:
   • Logging into the CMS
   • Adding and editing pages or posts
   • Managing media (images, PDFs, videos)
   • Updating settings
   • Using installed plugins or tools

Verification

• Client observed full demonstration.

Step 4, Address Client Questions and Concerns

1. Pause for questions at each major section.
2. Provide additional examples or demonstrations when needed.

Verification

• All questions answered.

Step 5, Provide Follow-Up Materials

1. Send the client the prepared materials:
   • Guides
   • Screenshots
   • Videos
2. Send a short summary of what was covered.

Verification

• Client received all materials.

Step 6, Offer Ongoing Support

1. Inform the client which support channels are available.
2. Encourage the client to reach out with any issues or questions.

Verification

• Client knows how to request further assistance.

P4 Tutorial Session is complete when the tutorial is conducted, questions are resolved, materials are delivered, and the client knows where to access ongoing support.

Full service details: Services