AI Tools Directory - WordPress Website

A stunning, modern AI Tools directory website built with WordPress, featuring 33 curated AI tools across 17 categories. The site features a glassmorphism dark theme design, SEO optimization, and a beautiful responsive frontend.

🌟 Features

Content

• 33 AI Tools - Comprehensive directory of popular AI tools including:

  • Midjourney, DALL·E, Stable Diffusion (Image Generation)
  • ChatGPT, Claude, Perplexity AI (Text Generation)
  • Suno, AIVA, Udio (Music Generation)
  • Runway ML, Pika Labs, Sora (Video Generation)
  • ElevenLabs (Voice Generation)
  • And many more...

• 17 Categories - Organized tool classification:

  • Image Generation, Video Generation, Text Generation
  • Music Generation, Voice Generation, Design
  • Content Writing, Productivity, Translation
  • Meeting Assistant, Transcription, Search/Research
  • Video/Audio Editing, Image Enhancement, 3D Generation
  • Writing Assistant

• Rich Tool Data - Each tool includes:

  • Description and company information
  • Launch year and platforms
  • Pricing plans with features
  • Key features list
  • Use cases
  • Integrations
  • API availability
  • Tags for discovery

Design

• Modern Glassmorphism UI - Dark theme with glass-effect cards
• Responsive Design - Mobile-first approach with Tailwind CSS
• Animated Effects - Hover animations, glow effects, transitions
• Material Icons - Google Material Symbols for consistent iconography
• Plus Jakarta Sans - Modern typography

SEO

• Dynamic Meta Tags - Auto-generated titles and descriptions
• Open Graph & Twitter Cards - Social media optimization
• Schema.org Markup - Structured data for tools and categories
• SEO-Friendly URLs - Clean permalink structure

🛠 Tech Stack

• WordPress (Latest) - Content Management System
• MySQL 8.0 - Database
• Docker - Containerization
• Tailwind CSS (CDN) - Utility-first CSS framework
• WP-CLI - WordPress command-line interface
• Custom Theme - ai-tools-directory theme

📁 Project Structure

ai-toolz-wordpress/
├── docker-compose.yml        # Docker services configuration
├── Dockerfile                # Custom WordPress image with WP-CLI
├── setup-wordpress.sh        # WordPress installation script
├── ai-tools-plugin.php       # Custom plugin for SEO features
├── ai-tools.json             # AI tools data (33 tools)
├── import-tools.php          # Tool import script
├── migrate-to-posts.php      # Migration script (CPT to posts)
├── populate-taxonomies.php   # Taxonomy population script
├── themes/
│   └── ai-tools-directory/   # Custom WordPress theme
│       ├── style.css         # Theme styles & metadata
│       ├── functions.php     # Theme functions
│       ├── header.php        # Header template
│       ├── footer.php        # Footer template
│       ├── front-page.php    # Homepage template
│       ├── single.php        # Single tool page template
│       ├── archive.php       # Category/tag archive template
│       └── index.php         # Fallback template
└── README.md                 # This file

🚀 Quick Start

Prerequisites

• Docker Desktop installed and running
• Docker Compose installed

Installation

1. Clone the repository

   git clone <repository-url>
   cd ai-toolz-wordpress

2. Build and start containers

   docker-compose up -d --build

3. Wait for initialization (60-90 seconds for first run)

4. Access the site

   • 🌐 Frontend: http://localhost:8000
   • 🔐 Admin: http://localhost:8000/wp-admin
   • 👤 Username: admin
   • 🔑 Password: admin

Import AI Tools Data

If tools aren't already imported:

# Copy import script
docker cp import-tools.php wordpress_app:/tmp/

# Copy JSON data
docker cp ai-tools.json wordpress_app:/tmp/

# Run import
docker exec wordpress_app wp eval-file /tmp/import-tools.php --allow-root --path=/var/www/html

Activate Theme & Plugin

# Activate theme
docker exec wordpress_app wp theme activate ai-tools-directory --allow-root --path=/var/www/html

# Activate plugin
docker exec wordpress_app wp plugin activate ai-tools-plugin --allow-root --path=/var/www/html

# Flush rewrite rules
docker exec wordpress_app wp rewrite flush --allow-root --path=/var/www/html

📖 Usage

WP-CLI Commands

# List all posts (AI tools)
docker exec wordpress_app wp post list --post_type=post --allow-root --path=/var/www/html

# List categories
docker exec wordpress_app wp term list category --allow-root --path=/var/www/html

# List tags
docker exec wordpress_app wp term list post_tag --allow-root --path=/var/www/html

# Export content
docker exec wordpress_app wp export --allow-root --path=/var/www/html

Adding New Tools

1. Go to Posts > Add New in WordPress admin
2. Fill in:
   • Title (Tool name)
   • Content (Description)
   • Category (Tool category)
   • Tags (Features, platforms, etc.)
3. Add custom fields:
   • website - Tool URL
   • company - Company name
   • launched - Launch year
   • pricing - JSON pricing data
   • features - JSON array
   • use_cases - JSON array
   • platforms - Comma-separated
   • api_available - true/false
   • integrations - JSON array

🎨 Theme Customization

Color Scheme (Tailwind)

colors: {
    primary: "#0EA5E9",        // Sky blue
    "background-dark": "#0A0C10", // Deep dark
    accent: {
        cyan: "#22D3EE",
        pink: "#F472B6",
        orange: "#FB923C",
        indigo: "#818CF8",
        emerald: "#34D399",
        amber: "#FBBF24"
    }
}

Glass Effect CSS

.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

📊 Data Structure

AI Tool JSON Schema

{
    "id": 1,
    "name": "Tool Name",
    "category": "Category Name",
    "description": "Tool description...",
    "website": "https://example.com",
    "company": "Company Name",
    "launched": "2023",
    "pricing": {
        "free": { "price": "Free", "features": [...] },
        "pro": { "price": "$20/month", "features": [...] }
    },
    "features": ["Feature 1", "Feature 2"],
    "use_cases": ["Use case 1", "Use case 2"],
    "platforms": ["Web", "iOS", "Android"],
    "api_available": true,
    "integrations": ["Service 1", "Service 2"]
}

🔧 Development

Stopping the Environment

docker-compose down

Reset Everything (including data)

docker-compose down -v

Rebuild After Theme Changes

# Copy updated theme
docker cp themes/ai-tools-directory wordpress_app:/var/www/html/wp-content/themes/

# Flush cache
docker exec wordpress_app wp cache flush --allow-root --path=/var/www/html

View Logs

# WordPress logs
docker logs wordpress_app

# MySQL logs
docker logs wordpress_db

📱 Pages & URLs

Page	URL
Homepage	http://localhost:8000/
All Tools	http://localhost:8000/ (blog)
Single Tool	http://localhost:8000/{tool-slug}/
Category	http://localhost:8000/category/{category-slug}/
Tag	http://localhost:8000/tag/{tag-slug}/
Search	http://localhost:8000/?s={query}
Admin	http://localhost:8000/wp-admin/

🔮 Future Enhancements

• [ ] User ratings and reviews
• [ ] Tool comparison feature
• [ ] Favorites/bookmarks system
• [ ] Advanced filtering (pricing, features)
• [ ] API endpoint for tools data
• [ ] User submissions workflow
• [ ] Newsletter integration
• [ ] Analytics dashboard

📄 License

This project is for educational purposes. AI tool data is sourced from publicly available information.

🙏 Credits

• Design Inspiration: Modern AI directory websites
• Icons: Google Material Symbols
• Font: Plus Jakarta Sans
• CSS Framework: Tailwind CSS
• CMS: WordPress

---

Built with ❤️ for the AI community