Skip to content

Getting Started

This section will help you to install the Oxywind plugin on your WordPress site.

INFO

Wakaloka Plain Classes and Wakaloka Oxywind are the best combinations for easier, faster, and productive development

Server Requirements

Oxywind has a few system requirements. Of course, modern hosting satisfies all of these requirements, so it's highly recommended that you use modern hosting to run the Oxywind.

You will need to make sure your server meets the following requirements:

  • PHP 7.4+
  • WordPress 5.6+

Step. 1: Install the plugin

You can easily install the Oxywind plugin by uploading a zip archive of the plugin from your local computer through the Plugins admin screen.

If you have any issues or confusion about how on installing a plugin, WordPress has a comprehensive guide on how to install a plugin that will help you out.

Once installed, you can activate the plugin by clicking on the "Activate" link in the Plugins admin screen.

Step. 2: (Optional) localhost development

Oxywind is using Worker (external server) to generate the CSS cache. The task is running in the background and the result will be received via the webhook.

If you are running the site locally, your site may not reachable by the Worker server. You are required to expose the site to the internet to make the Worker server can reach and send the CSS cache to your site to be saved.

Some part of the guide below are required you to write the code. You can write the provided code using snippet plugins such as Script Organizer, WPCodeBox or Code Snippets plugins.

LocalWP development environment

Fortunately, the LocalWP app has a built-in tunnel to expose your site to the internet, called "Live Links".

To be able to use the Live Links feature, you should logged to your account on the LocalWP app.

Logged to LocalWP

Start your site and enable the "Live Links" feature.

Enable Live Links on LocalWP

Open the "Live Links" details panel. (The detail on your LocalWP app may differ from the screenshot below)

Live Links details panel

You can use the below snippet code, and replace the __USERNAME__, __PASSWORD__, and __LIVE_LINK__ with the "Live Links" details:

<?php

add_filter('f!Wakaloka\\Oxywind\\Core\\Worker::webhook_endpoint_host', function ($_) {

    $username = '__USERNAME__';
    $password = '__PASSWORD__';
    $live_link = '__LIVE_LINK__';

    return "https://{$username}:{$password}@{$live_link}/";
});

Example:

<?php

add_filter('f!Wakaloka\\Oxywind\\Core\\Worker::webhook_endpoint_host', function ($_) {

    $username = 'admin';
    $password = 'admin';
    $live_link = 'silky-train.localsite.io';

    return "https://{$username}:{$password}@{$live_link}/";
});

Now your site is reachable by the Worker server.

Other local development environment

If you are using other local development environment, you may try Ngrok to expose your site to the internet.

Run the following command to start the ngrok service, and replace the YOUR_SITE_PORT with the port of your site:

ngrok http YOUR_SITE_PORT

Example:

ngrok http 3000

Once the ngrok service running, ngrok will bridge the connection between your site and the internet.

Ngrok

You can use the below snippet code, and replace the __FORWARDING__ with the forwarding URL of ngrok service:

<?php

add_filter('f!Wakaloka\\Winden\\Core\\Worker::webhook_endpoint_host', function ($_) {

    $forwarding = '__FORWARDING__';

    return "{$forwarding}/";
});

Example:

<?php

add_filter('f!Wakaloka\\Winden\\Core\\Worker::webhook_endpoint_host', function ($_) {

    $forwarding = 'https://e186-180-254-227-5.ap.ngrok.io';

    return "{$forwarding}/";
});

Now your site is reachable by the Worker server.

What's next?

By now, you can start to build your modern websites with Tailwind CSS inside the Oxygen editor.