Comprehensive Guide: Getting Started with WordPlate and DeployHQ

Introduction

This guide will walk you through setting up and using WordPlate, a modern WordPress boilerplate, and DeployHQ, an automated deployment tool. We'll also use Volta to manage Node.js versions, ensuring consistency across development environments.

WordPlate: Modern WordPress Development

WordPlate is a WordPress boilerplate that simplifies the setup process and provides a more structured approach to WordPress development.

Prerequisites

1. Volta: For managing Node.js versions
2. Composer: PHP dependency manager
3. PHP: Version 7.4 or higher

Installing Volta

Volta manages Node.js versions efficiently. Install it with:

curl https://get.volta.sh | bash

Restart your terminal after installation.

Setting Up WordPlate

1) Create a new WordPlate project:

composer create-project vinkla/wordplate your-project-name

This command creates a new directory with your project name and installs WordPlate and its dependencies.

2) Navigate to your new project directory:

cd your-project-name

3) Use Volta to set and pin the Node.js version:

volta pin node@14

4) Install JavaScript dependencies:

npm install

Configuration

1) Copy the .env.example file to .env:

cp .env.example .env

2) Update the .env file with your database and other configuration details:

DB_NAME=database_name
DB_USER=database_user
DB_PASSWORD=database_password
WP_PREFIX=wp_

3) Generate WordPress salts:

composer run-script salts

This updates your .env file with secure salt values.

Development Workflow

WordPlate uses Laravel Mix for asset compilation. Start your development server:

npm run watch

For production builds:

npm run build

Customizing WordPlate

Adding Custom Post Types

In public/themes/wordplate/post-types/example.php:

<?php

declare(strict_types=1);

add_action('init', function () {
    register_post_type('example', [
        'labels' => [
            'name' => __('Examples'),
            'singular_name' => __('Example'),
        ],
        'public' => true,
        'has_archive' => true,
        'supports' => ['title', 'editor', 'thumbnail'],
    ]);
});

Creating a Custom Shortcode

In public/themes/wordplate/shortcodes/example.php:

<?php

declare(strict_types=1);

add_shortcode('example', function ($atts, $content = null) {
    $atts = shortcode_atts([
        'class' => 'default-class',
    ], $atts);

    return sprintf('<div class="%s">%s</div>', esc_attr($atts['class']), $content);
});

DeployHQ: Streamlined Deployment

DeployHQ automates the deployment process from your Git repository to your servers.

Setting Up DeployHQ

1. Sign up for a DeployHQ account
2. Create a new project and connect your Git repository
3. Add your server details (SSH or SFTP access required)

Configuring Deployments

1. In the DeployHQ dashboard, go to your project settings
2. Set up deployment commands in the Build Pipeline:

composer install --no-dev
volta run npm install
volta run npm run build

These commands ensure dependencies are installed and assets are built on each deployment.

Automatic Deployments

1. Push changes to your Git repository
2. DeployHQ detects changes and initiates deployment
3. Monitor deployment progress in the DeployHQ dashboard

Integrating WordPlate and DeployHQ

1. Develop locally using WordPlate
2. Commit and push changes to your Git repository
3. DeployHQ automatically deploys changes to your server

This workflow allows for rapid development and consistent deployments.

Conclusion

By combining WordPlate, Volta, and DeployHQ, you create a powerful, modern WordPress development and deployment workflow. WordPlate provides a structured and efficient way to set up WordPress projects, Volta ensures consistent Node.js versions across your team, and DeployHQ automates the deployment process, allowing you to focus on writing code and creating great WordPress sites.

Remember to always refer to the official WordPlate documentation for the most up-to-date information on configuration and best practices.