LearnPress Developer Documentation

Setting Up the Development Environment

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

learnpress/
├── assets/
│ ├── src/
│ │ ├── js/
│ │ └── scss/
│ └── dist/
│ ├── js/
│ └── css/
└── package.json

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.

Copy Link