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.

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.

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