> ## Documentation Index
> Fetch the complete documentation index at: https://developer.upsun.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Deploy Vanilla WordPress on Upsun

> Complete the last required steps to successfully deploy Vanilla WordPress on Upsun.


export const DynamicCodeBlock = ({language = 'yaml', filename, icon, lines, wrap, expandable, highlight, focus, children}) => {
  const STORAGE_KEY = 'upsun_versions_cache';
  const COMPOSABLE_STORAGE_KEY = 'upsun_composable_cache';
  const CACHE_TTL = 5 * 60 * 1000;
  const API_URL = 'https://meta.upsun.com/images';
  const COMPOSABLE_API_URL = 'https://meta.upsun.com/composable';
  const DEBUG_PREFIX = '[DynamicCodeBlock cache]';
  const [versionData, setVersionData] = useState(null);
  const [versionError, setVersionError] = useState(false);
  const [composableData, setComposableData] = useState(null);
  const [composableError, setComposableError] = useState(false);
  useEffect(() => {
    const fetchData = async () => {
      let cachedData = null;
      let cachedEtag = null;
      if (typeof localStorage !== 'undefined') {
        try {
          const cached = localStorage.getItem(STORAGE_KEY);
          if (cached) {
            const parsed = JSON.parse(cached);
            cachedData = parsed?.data || null;
            cachedEtag = parsed?.etag || null;
            if (cachedData && Date.now() - parsed.timestamp < CACHE_TTL) {
              return cachedData;
            }
          }
        } catch (err) {
          console.error('Failed to load from cache:', err);
        }
      }
      const requestHeaders = cachedEtag ? {
        'If-None-Match': cachedEtag
      } : {};
      console.debug(`${DEBUG_PREFIX} revalidating`, {
        storageKey: STORAGE_KEY,
        hasCachedData: Boolean(cachedData),
        hasCachedEtag: Boolean(cachedEtag)
      });
      const response = await fetch(API_URL, {
        headers: requestHeaders
      });
      if (response.status === 304 && cachedData) {
        console.debug(`${DEBUG_PREFIX} revalidated (304)`, {
          storageKey: STORAGE_KEY
        });
        if (typeof localStorage !== 'undefined') {
          try {
            const etag = response.headers.get('etag') || cachedEtag;
            localStorage.setItem(STORAGE_KEY, JSON.stringify({
              data: cachedData,
              etag,
              timestamp: Date.now()
            }));
          } catch (err) {
            console.error('Failed to refresh cache metadata:', err);
          }
        }
        return cachedData;
      }
      if (!response.ok) throw new Error(`API request failed: ${response.statusText}`);
      const data = await response.json();
      const etag = response.headers.get('etag');
      console.debug(`${DEBUG_PREFIX} refreshed (200)`, {
        storageKey: STORAGE_KEY,
        etag
      });
      if (typeof localStorage !== 'undefined') {
        try {
          localStorage.setItem(STORAGE_KEY, JSON.stringify({
            data,
            etag,
            timestamp: Date.now()
          }));
        } catch (err) {
          console.error('Failed to cache data:', err);
        }
      }
      return data;
    };
    fetchData().then(data => setVersionData(data)).catch(err => console.error('Failed to fetch version data:', err));
  }, []);
  const findHighestVersion = versionsMap => {
    if (!versionsMap || Object.keys(versionsMap).length === 0) return null;
    const entries = Object.entries(versionsMap);
    const active = entries.filter(([, v]) => v.upsun && v.upsun.status === 'supported' || v.upsun && v.upsun.status === 'deprecated');
    const candidates = active.length > 0 ? active : entries;
    let [highestName] = candidates[0];
    for (let i = 1; i < candidates.length; i++) {
      const [currentName] = candidates[i];
      const cp = currentName.split('.').map(Number);
      const hp = highestName.split('.').map(Number);
      for (let j = 0; j < Math.max(cp.length, hp.length); j++) {
        if ((cp[j] || 0) > (hp[j] || 0)) {
          highestName = currentName;
          break;
        } else if ((cp[j] || 0) < (hp[j] || 0)) {
          break;
        }
      }
    }
    return highestName;
  };
  const getVersion = (lang, requestedVersion = 'latest') => {
    if (lang === 'composable') {
      if (!composableData || !composableData.versions || Object.keys(composableData.versions).length === 0) return null;
      if (requestedVersion && requestedVersion !== 'latest') {
        return (requestedVersion in composableData.versions) ? requestedVersion : null;
      }
      return findHighestVersion(composableData.versions);
    }
    if (!versionData) return null;
    const imageData = versionData[lang];
    if (!imageData || !imageData.versions || Object.keys(imageData.versions).length === 0) {
      return null;
    }
    if (requestedVersion && requestedVersion !== 'latest') {
      return (requestedVersion in imageData.versions) ? requestedVersion : null;
    }
    return findHighestVersion(imageData.versions);
  };
  let code = typeof children === 'string' ? children : String(children || '');
  const codeLines = code.split('\n');
  while (codeLines.length > 0 && codeLines[0].trim() === '') codeLines.shift();
  while (codeLines.length > 0 && codeLines[codeLines.length - 1].trim() === '') codeLines.pop();
  if (codeLines.length > 0) {
    const indents = codeLines.filter(line => line.trim().length > 0).map(line => line.match(/^[ \t]*/)[0].length);
    const minIndent = Math.min(...indents);
    code = codeLines.map(line => line.slice(minIndent)).join('\n');
  }
  code = code.replace(/\{\{version:(.*?)\}\}/g, (match, params) => {
    const parts = params.split(':');
    const lang = parts[0];
    const ver = parts[1] || 'latest';
    const isComposable = lang === 'composable';
    const hasError = isComposable ? composableError : versionError;
    const dataReady = isComposable ? composableData !== null : versionData !== null;
    if (hasError) return '(unavailable)';
    if (dataReady) {
      const resolvedVersion = getVersion(lang, ver);
      return resolvedVersion || match;
    }
    return '...';
  });
  const codeBlockProps = {
    language,
    ...filename && ({
      filename
    }),
    ...icon && ({
      icon
    }),
    ...lines !== undefined && ({
      lines
    }),
    ...wrap !== undefined && ({
      wrap
    }),
    ...expandable !== undefined && ({
      expandable
    }),
    ...highlight && ({
      highlight
    }),
    ...focus && ({
      focus
    })
  };
  return <CodeBlock {...codeBlockProps}>{code}</CodeBlock>;
};

export const GuidesRequirements = ({name}) => {
  const isSymfony = name === "Symfony";
  return <>
      <h2>Before you begin</h2>
      <p>You need:</p>
      <ul>
        <li>
          <a href="https://git-scm.com/downloads">Git</a>.{' '}
          Git is the primary tool to manage everything your app needs to run.
          Push commits to deploy changes and control configuration through YAML files.
          These files describe your infrastructure, making it transparent and version-controlled.
        </li>
        <li>
          An Upsun account.{' '}
          If you don't already have one, <a href="https://auth.upsun.com/register">register for a trial account</a>.{' '}
          You can sign up with an email address or an existing GitHub, Bitbucket, or Google account.
          If you choose one of these accounts, you can set a password for your Upsun account later.
        </li>
        <li>
          The {isSymfony ? <a href="https://symfony.com/download">Symfony CLI</a> : <a href="/cli">Upsun CLI</a>}.{' '}
          This lets you interact with your project from the command line.
          You can also do most things through the <a href="/docs/administration/web">Web Console</a>.
        </li>
      </ul>
    </>;
};

<Info>
  Before you start, check out the [Upsun demo app](https://console.upsun.com/projects/create-project)
  and the main [Getting started guide](/docs/get-started/here).
  They provide all the core concepts and common commands you need to know before using the following materials.
</Info>

For WordPress to successfully deploy and operate, **after completing the [Getting started guide](/docs/get-started/here)**,
you still need to add some required files and make a few changes to your Upsun configuration.

<GuidesRequirements name="WordPress" />

<Info>
  <h4>Assumptions</h4>
  There are many ways you can set up a WordPress site or Upsun project.
  The instructions on this page were designed based on the following assumptions:

  * You selected **PHP** as your runtime, and **MariaDB** as a service during the Getting Started guide. It's also assumed that
    while using the Getting Started guide you named the project `<APP_NAME>`, which you will notice is the top-level key in all
    configuration below.
  * You are currently in the same directory where you created your project during the Getting Started guide.
</Info>

## 1. Add required files

To ensure you have all the required files and directories in your project, follow these steps:

1. If you haven't already, you will need to retrieve the [WordPress](https://wordpress.org/) core files. You can either
   download a zip archive from WordPress.org, or use `curl` to download a tarball:

   ```shell theme={null}
   curl https://wordpress.org/latest -o wordpress.tar.gz
   ```

2. Extract the contents of the archive. If you used curl in step 1. you can extract the contents using `tar`:

   ```shell theme={null}
   tar -xvf wordpress.tar.gz
   ```

3. After extracting the files from the archive, delete the archive as it is no longer needed (e.g. `rm wordpress.tar.gz`)

4. Whether you downloaded the zip, or the tarball, after extraction the extracted files should be contained in a
   directory named `wordpress`. This directory will become your public directory later. If you decide to rename this
   directory, make note of it for later steps.

5. Create a `wp-config.php` file inside the directory from step 4 and copy and paste the contents from
   [this example file](https://github.com/upsun/snippets/blob/main/examples/wordpress-vanilla/wordpress/wp-config.php).

6. To make using [wp-cli](https://wp-cli.org/) easier, add a `wp-cli.yml` file and add the following contents
   to it:

   ```yaml theme={null}
    path: /app/wordpress/
    color: true
   ```

   <Info>
     If you changed the name of the directory at step 4 you'll need to update the `path` property above to match.
   </Info>

7. Add all the files from the steps above to your repository
   ```bash location="Terminal" theme={null}
    git add .
    git commit -m "adds wordpress core files"
   ```

## 2. Update configuration files

1. Open the `.upsun/config.yaml` file created during the [Getting started guide](/docs/get-started/here)

2. Locate the `web:locations` section and update the root (`/`) location as follows:

<DynamicCodeBlock language="yaml" filename=".upsun/config.yaml">
  {
    `applications:
    <APP_NAME>:
      source:
        root: "/"
      type: 'php:{{version:php:latest}}'
      web:
        locations:
          "/":
            passthru: "/index.php"
            root: "wordpress"
            index:
              - "index.php"
            expires: 600
            scripts: true
            allow: true
            rules:
              ^/license\\.text$:
                allow: false
              ^/readme\\.html$:
                allow: false
          "/wp-content/uploads":
            root: "wordpress/wp-content/uploads"
            scripts: false
            allow: false
            rules:
              '(?<!\\-lock)\\.(?i:jpe?g|gif|png|svg|bmp|ico|css|js(?:on)?|eot|ttf|woff|woff2|pdf|docx?|xlsx?|pp[st]x?|psd|odt|key|mp[2-5g]|m4[av]|og[gv]|wav|mov|wm[av]|avi|3g[p2])$':
                allow: true
                expires: 1w`
  }
</DynamicCodeBlock>

<Info>
  If you changed the name of the directory at step 1.4 you'll need to update the `root` property to match for both locations.
</Info>

3. Application containers are read-only by default; WordPress needs a writable location to store uploaded media.
   To make the location writable, set up [a mount](/docs/configure-apps/image-properties/mounts). To do so,
   locate the `mounts:` section that is commented out, and update it as follows:

<DynamicCodeBlock language="yaml" filename=".upsun/config.yaml">
  {
    `applications:
    <APP_NAME>:
      source:
        root: "/"
      type: 'php:{{version:php:latest}}'
      mounts:
        "wordpress/wp-content/uploads":
          source: storage
          source_path: "uploads"`
  }
</DynamicCodeBlock>

<Info>
  When uncommenting, pay attention to the indentation and that the `mounts` key aligns with other sibling keys (e.g. `relationships`, `web`, etc.)
</Info>

4. Once the images for our application have been built, there are a few key tasks that must be completed before our
   newly-built application can receive requests. These tasks include:

   * Flushing the object cache, which might have changed between current production and newly deployed changes
   * Running the WordPress database update procedure, in case core is being updated with the newly deployed changes
   * Running any due cron jobs

   To perform these tasks, we'll utilize  the [`deploy`](/docs/core-concepts/build-deploy#deploy-steps) and
   [`post_deploy`](/docs/configure-apps/hooks/hooks-comparison#post-deploy-hook) hooks. Locate the `deploy:` section
   (below the `build:` section). Update the `deploy:` and `post_deploy:` section as follows:

<DynamicCodeBlock language="yaml" filename=".upsun/config.yaml">
  {
    `applications:
    <APP_NAME>:
      source:
        root: "/"
      type: 'php:{{version:php:latest}}'
      hooks:
        deploy: |
          set -eu
          # Flushes the object cache
          wp cache flush
          # Runs the WordPress database update procedure
          wp core update-db
        post_deploy: |
          set -eu

          # Runs all due cron events
          wp cron event run --due-now`
  }
</DynamicCodeBlock>

5. Add your crons

   Under your application configuration you can now add a cron.

<DynamicCodeBlock language="yaml" filename=".upsun/config.yaml">
  {
    `applications:
    <APP_NAME>:
      source:
        root: "/"
      type: 'php:{{version:php:latest}}'
      ...
      crons:
        wp-cron:
          spec: '*/10 * * * *'
          commands:
            start: wp cron event run --due-now
          shutdown_timeout: 600`
  }
</DynamicCodeBlock>

6. Locate the `routes:` section, and beneath it, the `"https://{default}/":` route. Update the route as follows:

<DynamicCodeBlock language="yaml" filename=".upsun/config.yaml">
  {
    `applications:
    <APP_NAME>:
      source:
        root: "/"
      type: 'php:{{version:php:latest}}'
      ...

    routes:
    "https://{default}/":
      type: upstream
      upstream: "<APP_NAME>:http"
      cache:
        enabled: true
        cookies:
          - '/^wordpress_*/'
          - '/^wp-*/'`
  }
</DynamicCodeBlock>

7. To ensure we are able to perform tasks later in the deployment stage (e.g. updating the database, flushing cache, etc.)
   we need to make sure the [wp-cli](https://wp-cli.org/) utility is a dependency of the application container. While still
   in the `.upsun/config.yaml` file, locate the `dependencies.php` section, and add the following:

<DynamicCodeBlock language="yaml" filename=".upsun/config.yaml">
  {
    `applications:
    <APP_NAME>:
      source:
        root: "/"
      type: 'php:{{version:php:latest}}'
      dependencies:
        php:
          wp-cli/wp-cli-bundle: "^2.4"`
  }
</DynamicCodeBlock>

<Info>
  It is possible the `dependencies` section is commented out. When uncommenting, pay attention to the indentation and that
  the `dependencies` key aligns with other sibling keys (e.g. `build`, `hooks`, etc.)
</Info>

8. Add and commit your changes.

   ```bash Terminal theme={null}
   git add .upsun/config.yaml
   git commit -m "Updates Upsun configuration file"
   ```

## 3. Update `.environment`

The CLI generated a `.environment` file during the Getting started guide. Notice it has already created some environment
variables for you to connect to your database service.

```bash .environment theme={null}
# Set database environment variables
export DB_HOST="$MARIADB_HOST"
export DB_PORT="$MARIADB_PORT"
export DB_PATH="$MARIADB_PATH"
export DB_DATABASE="$DB_PATH"
export DB_USERNAME="$MARIADB_USERNAME"
export DB_PASSWORD="$MARIADB_PASSWORD"
export DB_SCHEME="$MARIADB_SCHEME"
export DATABASE_URL="${DB_SCHEME}://${DB_USERNAME}:${DB_PASSWORD}@${DB_HOST}:${DB_PORT}/${DB_PATH}"
```

To configure the remaining environment variables WordPress needs to run smoothly, open the `.environment` file. Just
after the other database-related variables, add a blank line or two and add the following:

```bash .environment theme={null}
# Routes, URLS, and primary domain
export SITE_ROUTES="$(echo "$PLATFORM_ROUTES" | base64 --decode)"; \
export UPSTREAM_URLS="$(echo "$SITE_ROUTES" | jq -r --arg app "$PLATFORM_APPLICATION_NAME" 'map_values(select(.type == "upstream" and .upstream == $app)) | keys')"; \
export DOMAIN_CURRENT_SITE="$(echo "$SITE_ROUTES" | jq -r --arg app "$PLATFORM_APPLICATION_NAME" 'map_values(select(.primary == true and .type == "upstream" and .upstream == $app)) | keys | .[0] | if (.[-1:] == "/") then (.[0:-1]) else . end')"
```

Save, add, and commit those changes:

```bash Terminal theme={null}
git add .environment
git commit -m "adds remaining environment variables to .environment"
```

## 4. Push and deploy

Now that we've added the required files, you're ready to push your changes and deploy your WordPress site:

```bash Terminal theme={null}
upsun push -y
```

## 5. Routinely run WP Cron (optional)

If your site does not receive enough traffic to ensure [WP Cron jobs](https://developer.wordpress.org/plugins/cron/) run
in a timely manner, or your site uses caching heavily such that WP Cron isn't being triggered, you might consider adding
a [cron job](/docs/configure-apps/image-properties/crons) to your project's configuration to have WP CLI
run those scheduled tasks on a routine basis. To do so, locate the `crons:` section that is commented out, and update it
as follows:

<DynamicCodeBlock language="yaml" filename=".upsun/config.yaml">
  {
    `applications:
    <APP_NAME>:
      source:
        root: "/"
      type: 'php:{{version:php:latest}}'
      crons:
        wp-cron:
          spec: '*/15 * * * *'
          commands:
            start: wp cron event run --due-now
          shutdown_timeout: 600`
  }
</DynamicCodeBlock>

The above example will trigger the wp-cli every 15th minute to run WP Cron tasks that are due. Feel free to adjust based
on your individual requirements.

<Info>
  When uncommenting, pay attention to the indentation and that the `crons` key aligns with other sibling keys (e.g. `hooks`, `dependencies`, etc.)
</Info>

## Further resources

* [All files (Upsun configuration, `.environment`, `wp-cli.yml`, `wp-config.php`)](https://github.com/upsun/snippets/tree/main/examples/wordpress-vanilla)

### Documentation

* [PHP documentation](/docs/languages/php)

* [Extensions](/docs/languages/php/extensions)

* [Performance tuning](/docs/languages/php/tuning)

* [PHP-FPM sizing](/docs/languages/php/fpm)

### Community content

* [PHP topics](https://support.platform.sh/hc/en-us/search?utf8=%E2%9C%93\&query=php)
* [WordPress topics](https://support.platform.sh/hc/en-us/search?utf8=%E2%9C%93\&query=wordpress)

### Blogs

* [To Upsun, a WordPress migration story](https://upsun.com/blog/to-upsun-a-wordpress-migration-story/)