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 tofalse.state.wpSource.prefix: The prefix of the API. Defaults to/wp-json. It is not used ifisWpComistrue.
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.1
// frontity.settings.js
2
export default {
3
packages: [
4
{
5
name: "@frontity/wp-source",
6
state: {
7
source: {
8
url: "https://test.frontity.org",
9
},
10
},
11
},
12
],
13
};
Copied!
In this example the computed values would be:
state.source.api:https://test.frontity.org/wp-json(value computed fromstate.source.urlandstate.wpSource.prefix).state.wpSource.isWpCom:false(value derived fromstate.source.api)
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.1
// frontity.settings.js
2
export default {
3
packages: [
4
{
5
name: "@frontity/wp-source",
6
state: {
7
source: {
8
url: "https://frontitytest.wordpress.com/",
9
},
10
},
11
},
12
],
13
};
Copied!
In this example the computed values would be:
state.source.api:https://frontitytest.wordpress.com/wp-json(value computed fromstate.source.urlandstate.wpSource.prefix).state.wpSource.isWpCom:true(value derivedstate.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.1
// frontity.settings.js
2
export default {
3
packages: [
4
{
5
name: "@frontity/wp-source",
6
state: {
7
source: {
8
url: "https://test-premium-plan.frontity.org",
9
},
10
wpSource: {
11
isWpCom: true
12
}
13
},
14
},
15
],
16
};
Copied!
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 fromstate.source.url&state.wpSource.isWpCom)
Summary
All these scenarios and their different settings combinations are summarized in the following table
needs
state.source.urlYES
YES
YES
needs
state.wpSource.isWpComNO
YES
NO
Last modified 1yr ago