Introduction

Welcome to the WordPress Camp project! This project serves as a comprehensive guide to creating and managing a basic website using WordPress, HTML, CSS, and JavaScript. It includes lectures, practical examples, and a sample project to help you understand the fundamentals of web development with WordPress.

Setup

1. File Structure

wordpress-camp/

├── index.html
├── styles.css
└── script.js

WordPress Project Architecture

This diagram represents a high-level architecture of a WordPress project.

graph TD
    A[Client] -->|HTTP Requests| B[Web Server]
    B[Web Server] --->|PHP Execution| C[WordPress Core]
    C[WordPress Core] -->|Database Queries| D[(Database)]
    C[WordPress Core] -->|Load Themes| E[Themes]
    C[WordPress Core] -->|Load Plugins| F[Plugins]
    C[WordPress Core] -->|API Requests| G[External APIs]

    subgraph "WordPress Application"
        C[WordPress Core] ---> E[Themes]
        C[WordPress Core] ---> F[Plugins]
    end

    B[Web Server] --> H[Static Assets]
    H[Static Assets] -->|CSS/JS/Images| A[Client]

    A[Client] -->|HTTP Responses| B[Web Server]

Loading

Work Flow

graph TD
    A[Local Development] -->|Code Changes| B[Push to GitHub]
    B[Push to GitHub] --> C[Create Pull Request]
    C[Create Pull Request] --> D[Code Review]
    D[Code Review] -->|Approve| E[Merge to Main Branch]
    D[Code Review] -->|Fail| A[Local Development]
    E[Merge to Main Branch] --> F[GitHub Actions Workflow]
    F[GitHub Actions Workflow] -->|Build and Deploy| G[AWS Lightsail]
    G[AWS Lightsail] -->|Deployed| H[Live WordPress Site]

    A --> I[Docker for Local Development]
    G --> J[Database Migration]
    J -->|Sync Cloud to Local| A
    H -->|Database Migration Plugin| J

Loading

Homework

You can find the sample and repo here ⬇️

sample link 📝

repo link 📂