LearnPress Developer Documentation

1. Local Environment Setup

• Using XAMPP
  • Install XAMPP with PHP 7.0 or higher
  • Create a new database in phpMyAdmin
  • Install WordPress in the htdocs directory
  • Install the LearnPress plugin
  • Configure wp-config.php with the database information
• Using Docker (Recommended)

  # docker-compose.yml
  version: '3'
  services:
  wordpress:
  image: wordpress:latest
  ports:
  - "8080:80"
  environment:
  WORDPRESS_DB_HOST: db
  WORDPRESS_DB_USER: wordpress
  WORDPRESS_DB_PASSWORD: wordpress_password
  WORDPRESS_DB_NAME: wordpress
  volumes:
  - ./wp-content:/var/www/html/wp-content
  - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.inidb:
  image: mysql:5.7
  environment:
  MYSQL_DATABASE: wordpress
  MYSQL_USER: wordpress
  MYSQL_PASSWORD: wordpress_password
  MYSQL_ROOT_PASSWORD: somewordpress
  volumes:
  - db_data:/var/lib/mysql
  
  volumes:
  db_data: {}
  
  

  2. Debugging Tools for WordPress

  When working with WordPress, debugging is essential to find and fix issues. Here are some useful tools and how to use them:

  2.1. WordPress Debug Mode

  You can enable WordPress debugging by adding the following lines to your wp-config.php file:

  • define(‘WP_DEBUG’, true); – Turns on debugging mode.
  • define(‘WP_DEBUG_LOG’, true); – Saves errors to a log file (usually found in wp-content/debug.log).
  • define(‘WP_DEBUG_DISPLAY’, false); – Hides errors from showing on the website (better for live sites).

  This setup helps you track problems without affecting users.

  2.2. Query Monitor

  Query Monitor is a handy plugin for WordPress developers:

  • Install and activate it from the WordPress admin panel.
  • Once active, it shows you detailed information like:
    • Database queries (what’s running and how long it takes).
    • Hook execution (which actions or filters are firing).
    • Template loading (which files are being used).
    • HTTP API calls (requests to external services).

  It’s great for spotting performance issues or bugs.

  2.3. Debug Bar

  Another useful plugin is Debug Bar:

  • Install and activate it in the WordPress admin area.
  • It adds a toolbar to your site (visible only to admins) that shows:
    • PHP errors and warnings.
    • Database queries.
    • Cache performance (hits and misses).
    • Template loading details.

  This is perfect for quick checks while developing.

3. Development Tools

Before you begin developing LearnPress, ensure you have the following tools installed on your system:

Required Tools

1. PHP Environment
   • PHP 7.4 or higher
   • MySQL 5.7 or higher
   • Web server (Apache/Nginx)
2. Node.js and npm
   • Node.js (v14 or higher)
   • npm (v6 or higher)

   # Check Node.js and npm versions
   node -v
   npm -v

Development Setup

1. Clone the Repository

   git clone https://github.com/LearnPress/LearnPress.git
   cd learnpress

2. Install Dependencies

   # Install Node.js dependencies
   npm install

3. NPM Scripts

   # Start development mode with file watching
   npm run start
   
   # Build assets for production
   npm run build
   
   # Format JavaScript files
   npm run format-js
   
   # Build assets and run development tasks
   npm run dev-build
   
   # Generate translation files
   npm run makepot
   
   # Build assets, generate translations, and create release package
   npm run build-makepot-zip
   
   # Create a release package
   npm run release

Development Workflow

The project uses npm scripts for asset compilation and development workflow. Here are the main commands:

1. CSS Processing
   • SCSS compilation
   • Auto-prefixing
   • Minification for production
   • Source maps generation
2. JavaScript Processing
   • Bundling modules
   • Babel transpilation
   • Minification for production
   • Source maps generation
3. Watch Mode
   • Automatically recompiles assets when files change
   • Supports hot reloading for development

Project Structure

NPM Scripts Configuration

The package.json file defines several important scripts:

// Actual scripts in package.json
{
  "scripts": {
    "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider wp-scripts start",
    "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider wp-scripts build",
    "format-js": "cross-env wp-scripts format ./assets/src",
    "dev-build": "cross-env npm run build && gulp styles && npm run dev",
    "makepot": "npm rum makepot:js && npm run makepot:cli && gulp updatePot",
    "build-makepot-zip": "npm run build && npm run makepot && gulp styles && gulp release"
  }
}

Troubleshooting

1. Node.js Dependencies

   # Clear npm cache
   npm cache clean --force
   
   # Remove node_modules and reinstall
   rm -rf node_modules
   rm package-lock.json
   npm install

2. Build Issues

   # If you encounter OpenSSL issues
   # The project already uses NODE_OPTIONS=--openssl-legacy-provider
   
   # For complete rebuild
   npm run build
   gulp styles

Development Best Practices

1. Working with Assets
   • Always work with source files in assets/src/
   • Never modify files directly in assets/dist/
   • Run

     npm run start

     during development

   • Run

     npm run build

     before committing

2. Version Control
   • Commit compiled assets in assets/dist/
   • Include source maps in development
   • Keep package.json and package-lock.json up to date

Need help? Check our documentation or reach out to the development team for support.