Setting the URL of the WordPress data source

The most important setting in a Frontity project is the WordPress installation that can be used as the source of data.

The format of the URL used to access the WordPress REST API varies depending on the type of WordPress installation used as the data source for the Frontity project, so the type of WordPress installation determines how this URL should be set in the Frontity configuration file frontity.settings.js.

The main property in frontity.settings.js needed for determining the URL of the WordPress data source is:

  • state.source.url: The URL of the WordPress. Required.

Mind how state.source.url should point to just the URL of your WordPress (i.e. https://test.frontity.org) and not the URL of your WordPress REST API (i.e. https://test.frontity.org/wp-json). The URL of of the REST API will be calculated by Frontity depending on each use case.

There are some other properties implied in determining this URL of the WordPress data source, but they need to be set only for specific use cases:

  • state.wpSource.isWpCom: A flag to indicate a special use case of WordPress.com sites (Personal or Premium plans). It is not required for Free WordPress.com sites. Defaults to false.

  • state.wpSource.prefix: The prefix of the API. Defaults to /wp-json. It is not used if isWpCom is true.

From version 1.10 of the @frontity/wp-source package, the property state.source.api should never be set manually by the end users (it will be computed from the properties mentioned above)

WordPress scenarios

A Self-hosted WordPress site

Most Frontity projects will use a self-hosted WordPress site (wp.org) with a custom domain, such as, for example, https://test.frontity.org/.

The recommended way to set this URL is via the state.source.url property.

// frontity.settings.js
export default {
  packages: [
    {
      name: "@frontity/wp-source",
      state: {
        source: {
          url: "https://test.frontity.org",
        },
      },
    },
  ],
};

In this example the computed values would be:

  • state.source.api: https://test.frontity.org/wp-json (value computed from state.source.url and state.wpSource.prefix).

  • state.wpSource.isWpCom: false (value derived from state.source.api)

The same recommendation applies for custom domains used with a WordPress.com Business plan.

A Free WordPress.com plan

Some Frontity projects may use a free WordPress.com installation with the URL pointing to a subdomain of WordPress.com, such as: https://frontitytest.wordpress.com/.

The recommended way to set this URL is also via the state.source.url property.

// frontity.settings.js
export default {
  packages: [
    {
      name: "@frontity/wp-source",
      state: {
        source: {
          url: "https://frontitytest.wordpress.com/",
        },
      },
    },
  ],
};

In this example the computed values would be:

  • state.source.api: https://frontitytest.wordpress.com/wp-json(value computed from state.source.url and state.wpSource.prefix).

  • state.wpSource.isWpCom: true (value derived state.source.api)

A Personal or Premium WordPress.com plan

A less frequent use case is where a Personal or Premium WordPress.com site is used as the data source. These plans allow you to use a custom domain, but in these cases the REST API is available via a different URL format.

The recommended way to set this URL is also via the state.source.url property, but in addition to this you also need to specify that it is a Personal or Premium WordPress.com plan installation by setting state.wpSource.isWpCom to true.

// frontity.settings.js
export default {
  packages: [
    {
      name: "@frontity/wp-source",
      state: {
        source: {
          url: "https://test-premium-plan.frontity.org",
        },
        wpSource: {
          isWpCom: true
        } 
      },
    },
  ],
};

In this example the computed values would be:

  • state.source.api: https://public-api.wordpress.com/wp/v2/sites/test-premium-plan.frontity.org (value computed from state.source.url & state.wpSource.isWpCom)

Summary

All these scenarios and their different settings combinations are summarized in the following table

PreviousGuidesNextUsing Environment Variables in a Frontity project

Last updated