[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] How do I use the VTEX product summary 2.91.0 ProductSummaryImage app? Provide documentation and configuration details.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/guides/vtex-io-deprecated-apps)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/guides/vtex-io-deprecated-apps)

---

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/vtex-io-apps)

Product Summary Image

[vtex.product-summary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary)

Version: 2.91.0

Latest version: 2.91.0

`product-summary-image` is a block exported by the [Product Summary app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-product-summary) that renders the product image.

![{"base64":"  ","img":{"width":2878,"height":1504,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":674472,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-summary-productsummaryimage-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-summary-productsummaryimage-0.png)

## Configuration

1. Import the `vtex.product-summary` app to your theme dependencies in the `manifest.json`:

`1

 "dependencies": {

2

 "vtex.product-summary": "2.x"

3

 }

`

1. Add the `product-summary-image` block as a child of the `product-summary.shelf` block:

`1

{

2

 "shelf#home": {

3

 "blocks": ["product-summary.shelf"]

4

 },

5

 "product-summary.shelf": {

6

 "children": [

7

 "product-summary-name",

8

 "product-summary-description",

9

 "product-summary-image",

10

 "product-summary-price",

11

 "product-summary-sku-selector",

12

 "product-summary-buy-button"

13

 ]

14

 },

`

1. Then, declare the `product-summary-image` and configure its behavior using the props stated below.

`1

 "product-summary-image": {

2

 "props": {

3

 "showBadge": true,

4

 "height": 220

5

 }

6

 }

7

}

`

| Prop name       | Type    | Description                                                                                | Default value |
| --------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| showBadge       | boolean | Determines whether a discount badge is displayed on the product image. Setting it to true displays the badge if applicable, while false hides it.                                                                                | true          |
| badgeText       | string  | Specify the text to be displayed on the discount badge (if the badge is configured to be shown in the product image).                                                                                | undefined     |
| showCollections | boolean | ![{"base64":"  ","img":{"width":73,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Deprecated-red"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/-Deprecated-red) Determines whether collection badges, if available, will be displayed (true) or not (false). This prop is deprecated. Use the \[Product Highlights\] component instead.                                                                                | false         |
| displayMode     | enum    | Defines the Product Summary Image display mode. Possible values are: normal and inline.                                                                                | normal        |
| placeholder     | string  | Defines the Product Summary Image placeholder image.                                                                                | undefined     |
| mainImageLabel  | string  | Matches the value defined in the imageLabel field from the Admin Catalog. When matched, it determines which product image will be used as the main image displayed in the Product Summary component.                                                                                | undefined     |
| hoverImageLabel | string  | ![{"base64":"  ","img":{"width":73,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/-Deprecated-red"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/-Deprecated-red) Text value that matches the value defined in the imageLabel field from the Admin Catalog. When matched, it determines which product image will be displayed when the user hovers over the product. If you set a label and no match is found, no image will be displayed during hover. This prop is deprecated. Use the hoverImage prop instead. | undefined     |
| hoverImage      | object  | Defines the criteria that should determine the hover image based on the product images in the Admin Catalog.                                                                                | undefined     |
| width           | object  | Defines the Product Summary Image width.                                                                                | undefined     |
| height          | object  | Defines the Product Summary Image height.                                                                                | undefined     |
| aspectRatio     | object  | Defines the aspect ratio of the Product Summary Image, determining whether the image should be displayed in a square, portrait, landscape, or another format. The prop value should follow the [standard aspect ratio notation](https://read.calvincode.net/reader?url=https://en.wikipedia.org/wiki/Aspect%5Fratio%5F%28image%29), which consists of two numbers separated by a colon. For example, you can use 1:1 for a square format or 3:4 for an upright portrait. This prop will not work if the width or height props are configured.                                                               | undefined     |
| maxHeight       | object  | Sets the maximum height for the Product Summary Image. This prop will only work if the width or height props are configured.                                                                                | undefined     |
| fetchpriority   | string  | Sets the fetch priority hint to ('high', 'low', 'auto', or 'byPosition'). Choose 'byPosition' to adjust the image fetch priority based on its rendering position within search results or lists. This prioritization optimizes performance by ensuring images are fetched based on their relevance in the context.                                                                                | 'byPosition'  |

* `mainImageLabel` object:

| Prop name          | Type   | Description                                                                                | Default value |
| ------------------ | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| label              | string | Matches the text value with the value defined in the imageLabel field from the Admin Catalog. When matched, it determines which product image will be displayed as the main image in the Product Summary component. If you set a label and no match is found, the main image of the product will be shown instead.                                                                                | undefined     |
| labelMatchCriteria | enum   | Specifies the criteria for searching the image label value. It determines whether the image label should match exactly as provided or if it just needs to contain the substring anywhere in the image label. Possible values are: exact (finds the image that matches exactly the string entered in the label field) and contains (finds the first image that includes the substring entered in the label field). | exact         |

* `hoverImage` object:

| Prop name          | Type   | Description                                                                                | Default value |
| ------------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| criteria           | enum   | Defines the criteria that should determine the hover image based on the product images from the Admin Catalog. Possible values are: label (the hover image will be the one that matches the label value) and index (the hover image will be the one with the same index value).                                                                                | label         |
| label              | string | Determines the text string to match the desired image's label value. No image will be displayed during the hover if no match is found. _Caution_: This prop should only be used when the criteria prop is set to label.                                                                                | undefined     |
| labelMatchCriteria | enum   | Defines the criteria for searching the image label value, determining whether the image label should match exactly as provided or just need to contain the substring anywhere in the image label. Possible values are: exact (finds the image that matches exactly the string entered the label field) and contains (finds the first image that includes the substring entered the label field). _This prop should only be used when the criteria prop is set to label_. | exact         |
| index              | number | Index number to match with the desired images. No image will be displayed during hover if no match is found. _This prop should only be used when the criteria prop is set to index_.                                                                                | undefined     |

* `width` object:

| Prop name | Type   | Description                    | Default value |
| --------- | ------ | ------------------------------ | ------------- |
| desktop   | number | Image width for desktop users. | undefined     |
| mobile    | number | Image width for mobile users.  | undefined     |

* `height` object:

| Prop name | Type   | Description                     | Default value |
| --------- | ------ | ------------------------------- | ------------- |
| desktop   | number | Image height for desktop users. | undefined     |
| mobile    | number | Image height for mobile users.  | undefined     |

* `aspectRatio` object:

| Prop name | Type   | Description                           | Default value |
| --------- | ------ | ------------------------------------- | ------------- |
| desktop   | string | Image aspect ratio for desktop users. | undefined     |
| mobile    | string | Image aspect ratio for mobile users.  | undefined     |

* `maxHeight` object:

| Prop name | Type   | Description                             | Default value |
| --------- | ------ | --------------------------------------- | ------------- |
| desktop   | string | Image maximum height for desktop users. | undefined     |
| mobile    | string | Image maximum height for mobile users.  | undefined     |

The `width`, `height`, `aspectRatio`, and `maxHeight` props use the [responsive values logic](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/responsive-values%23vtexresponsive-values).

## Customization

To apply CSS customizations to this and other blocks, please see the [Using CSS handles for store customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization) guide.

| CSS handles         |
| ------------------- |
| hoverImage          |
| hoverEffect         |
| imageContainer      |
| imageInline         |
| imageNormal         |
| imageStackContainer |
| mainImageHovered    |

See also

[Vtex.product SummaryVTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/apps/vtex.product-summary)[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage%23configuration)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage/docs/apps/vtex.product-summary@2.91.0/ProductSummaryImage%23customization)

Was this helpful?

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] How do I use the VTEX wordpress integration app? Provide documentation and configuration details.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/guides/vtex-io-deprecated-apps)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/guides/pixel-apps)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/guides/vtex-io-deprecated-apps)

---

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/vtex-io-apps)

Wordpress Integration

Official extension

Version: 2.25.2

Latest version: 2.25.2

## ⚠ Maintenance ⚠

_Starting June 1st 2023, this application will no longer be maintained by VTEX._

---

[![{"base64":"  ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)

The Wordpress Integration app provides a way to bring in blog data from the Wordpress API and create a blog homepage, category pages, and blog post pages on your store, using your existing store header, footer, and styling.

## Configuration

### Step 1 - Installing the Wordpress Integration app

Using your terminal and [VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-install), log in to the VTEX account you are working on and [install](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/store/installing-an-app) the `vtex.wordpress-integration@2.x` app.

### Step 2 - Defining the app settings

In your VTEX account's admin, perform the following actions:

1. Access the **Apps** section and then **My Apps**.
2. Select the **Wordpress Integration** app box and open the Settings section.
3. If your VTEX store uses multiple bindings, enable the **configuration by binding** option to configure the app settings specific to each binding.
4. Enter your **Wordpress URL**. This should be the domain where the Wordpress API endpoint is hosted and Wordpress is administered.
5. If your Wordpress installation's API is hosted under a path other than `wp-json/wp/v2/`, enter the path in the **Wordpress API path** field. For example, if the `posts` endpoint looks like `https://example.wordpress.com/index.php?rest_route=/wp/v2/posts`, enter `index.php?rest_route=/wp/v2/` here. If unsure, leave the field blank.
6. Enter the **Title tag for block homepage** which will determine the title tag for the Wordpress portions of your store.
7. Enter the **Store blog home path** which is used to include Wordpress posts in the sitemap and be indexed by search engines. For example, the path to your store's blog is [www.my-store.com/blog](https://read.calvincode.net/reader?url=http://www.my-store.com/blog), you would enter 'blog'.
8. Select the filters that you want to show, this filters will appear as part of the pagination in both search posts and all posts views, you can filter by category, tag, and/or date.
9. Save your changes.

⚠ If you have a security plugin installed on your WordPress installation (such as WordFence), ensure it is not blocking requests to `/users` or `/?author=N` queries.

ℹ _The settings option `Create Sitemap Entries` will likely not need to be modified. This setting tells the app to create the initial sitemap entries. Once this is done, the app programmatically updates this setting to prevent duplicate sitemap entires._

### Step 3 - Creating the blog pages

It is time to create the store pages that will host the blog content. Before performing the following actions, make sure you already are logged into the desired VTEX account and working on a [Developer workspace](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/development/creating-a-development-workspace/).

1. Open your Store Theme app in your code editor.
2. Add the `wordpress-integration` app as a `peerDependency` in your theme's `manifest.json` file:

`1

 "peerDependencies": {

2

+ "vtex.wordpress-integration": "2.x"

3

 }

`

1. In the `store/routes.json` file, create paths for the blog's new pages as shown below:

`1

"store.blog-home": {

2

 "path": "/blog"

3

},

4

"store.blog-category": {

5

 "path": "/blog/category/:categoryslug_id"

6

},

7

"store.blog-post": {

8

 "path": "/blog/post/:slug_id"

9

},

10

"store.blog-search-result": {

11

 "path": "/blog/search/:term_id"

12

}

`

ℹ _You may change `blog` in each route to another string of your choosing._

| Blog page                | Description                                                                                |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
| store.blog-home          | The homepage of your blog. This can also be extended (i.e. store.blog-home#custom) to create additional custom blog pages, if needed. |
| store.blog-category      | A listing of blog posts belonging to a particular category, derived from a category slug in the page route.                           |
| store.blog-post          | A detail view of a single blog post, derived from a post slug in the page route.                                                      |
| store.blog-search-result | A listing of blog posts matching a search query, derived from a search term in the page route.                                        |

If you wish to display WordPress **pages** on your store site in addition to **posts**, you can add a route like the one shown below:

`1

"store.custom#blog-page": {

2

 "path": "/blog/page/:slug"

3

}

`

In addition to that, you can optionally add `:page` parameters for URL-controlled pagination. For example:

`1

"store.blog-home": {

2

 "path": "/blog(/page/:page)"

3

},

4

"store.blog-category": {

5

 "path": "/blog/category/:categoryslug_id(/page/:page)"

6

},

7

"store.blog-search-result": {

8

 "path": "/blog/search/:term_id(/page/:page)"

9

},

`

If the `:page` parameter is not provided, pagination can alternatively be controlled by query string, such as `/blog/category/example-category?page=2` .

### Step 4 - Declaring the pages' blocks

Once the routes are set up, you may populate each blog page with blocks.

The Wordpress Integration app provides the following blocks for your use:

| Block name                                               | Description                                                                                |
| -------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| blog-all-posts.wordpress-all-posts                       | Paginated list of all blog posts, starting with the most recent. Recommended to be placed on store.blog-home page.                                                                                |
| blog-category-list.wordpress-category-list               | Paginated list of blog posts from a specific category. This must be placed on the store.blog-category page, as the category slug is provided by the parameter in the page route.                                                                                |
| blog-post-details.wordpress-post-details                 | Shows the details for a single blog post. This must be placed on the store.blog-post page, as the post slug is provided by the parameter in the page route.                                                                                |
| blog-page-details.wordpress-page-details                 | Shows the details for a single blog page. This must be placed on a customized store.blog-home#page page to render the contents via the slug passed through the route parameter.                                                                                |
| blog-latest-posts-preview.wordpress-latest-posts-preview | Shows teasers for the most recent 3-5 posts (default is 3).                                                                                |
| blog-category-preview.wordpress-category-preview         | Shows teasers for the most recent 3-5 posts from a specific category (default is 3). The category ID must be provided as a prop.                                                                                |
| blog-search.wordpress-search                             | Search box that shoppers can use to search blog articles. When submitted, the shopper is redirected to the store.blog-search-list page.                                                                                |
| blog-search-list.wordpress-search-list                   | Paginated list of blog post search results. This must be placed on the store.blog-search page, as the search terms are provided by the parameter in the page route.                                                                                |
| search-blog-articles-preview.wordpress                   | Shows teasers for the most recent 3-5 posts in the store search results page with a link to the store.blog-search-list page. This can only be placed on the main store.search-result template and uses the same search query as the product search component on that page.                                                                                |
| search-blog-articles-list.wordpress                      | An alternative to the search-blog-articles-preview.wordpress block, but instead this block shows a _complete_ paginated list of posts in the search results page. It automatically uses the same search query as the product search component on that page.                                                                                |
| blog-related-products.wordpress-related-products         | A specialized wrapper for a product shelf that can be placed on the store.blog-post page. It must be a child of the blog-post-details.wordpress-post-details block. This allows you to tag Wordpress posts with product reference codes, and the products in question will then be displayed in the shelf. The tags must be in the format prod-\[reference code\]. For example, if your product had a reference code of VTEX01, the tag should be prod-VTEX01. This block must have product-summary.shelf as a child. |
| blog-post-container.wordpress                            | A context component that provides data for an individual blog post to its child blocks. This must be placed on the store.blog-post page.                                                                                |
| blog-post-navigation.wordpress                           | A component that renders "Previous Article" and "Next Article" buttons. Must be placed as a child of a blog-post-container.wordpress block.                                                                                |
| blog-related-posts.wordpress-related-posts               | Similar to the above, but the reverse: this is a block intended to be placed in the theme's store.product page template which will show teasers for 3-5 blog posts (3 by default) that are tagged with the reference code of the product being viewed.                                                                                |
| blog-breadcrumb.wordpress-breadcrumb                     | A breadcrumb component intended to be placed at the top of each blog page.                                                                                |
| blog-search-list.wordpress-category-related-posts        | A block that can be used to display the title and body of one or more posts on a store category or department page. Use case: SEO text for your store's departments. By default, when placed on a store category or department page, the block will attempt to display a WordPress post tagged category-{id}, where {id} is the numeric ID of your VTEX store department.                                                                                |

#### `blog-all-posts.wordpress-all-posts` props

| Prop Name    | Type          | Description                                                                                | Default value |
| ------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| mediaSize    | MediaSizeEnum | WordPress media image size that should be used in the blog's preview blocks.                                                                                | full          |
| ampLinks     | boolean       | Whether the links from each blog post should point to the external blog AMP (Accelrated Mobile Page) in a new tab (true) or not (false). Only valid for AMPs generated using the [WordPress AMP plugin](https://read.calvincode.net/reader?url=https://wordpress.org/plugins/amp/).                                                                                | false         |
| ampUrlFormat | string        | URL structure for AMP links. ampPathSuffix appends /amp to the end of the external blog post URL. ampQuery appends ?amp and ampQueryValue appends ?amp=1.  For example, possible URLs are <https://www.wordpressblog.com/blog-post/amp>, <https://www.wordpressblog.com/blog-post?amp>, or <https://www.wordpressblog.com/blog-post?amp=1>. | ampPathSuffix |
| excerptLink  | boolean       | Whether the post excerpts should be clickable links (true) or not (false).                                                                                | false         |

#### `blog-category-list.wordpress-category-list` props

| Prop Name    | Type          | Description                                                                                | Default value |
| ------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| mediaSize    | MediaSizeEnum | WordPress media image size that should be used in the blog's preview blocks.                                                                                | full          |
| ampLinks     | boolean       | Whether the links from each blog post should point to the external blog AMP (Accelrated Mobile Page) in a new tab (true) or not (false). Only valid for AMPs generated using the [WordPress AMP plugin](https://read.calvincode.net/reader?url=https://wordpress.org/plugins/amp/).                                                                                | false         |
| ampUrlFormat | string        | URL structure for AMP links. ampPathSuffix appends /amp to the end of the external blog post URL. ampQuery appends ?amp and ampQueryValue appends ?amp=1.  For example, possible URLs are <https://www.wordpressblog.com/blog-post/amp>, <https://www.wordpressblog.com/blog-post?amp>, or <https://www.wordpressblog.com/blog-post?amp=1>. | ampPathSuffix |
| excerptLink  | boolean       | Whether the post excerpts should be clickable links (true) or not (false).                                                                                | false         |

#### `blog-latest-posts-preview.wordpress-latest-posts-preview` props

| Prop Name         | Type          | Description                                                                                | Default value |
| ----------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| title             | string        | Title to be displayed above the block.                                                                                | null          |
| numberOfPosts     | number        | The number of posts to be displayed.                                                                                | 3             |
| tags              | array         | Array of tag IDs allowed. When this property is included, only posts that contain all the listed tags will be displayed.                                                                                | undefined     |
| excludeTags       | array         | Array of tag IDs to be excluded. Posts containing any of the excluded tags will not be displayed.                                                                                | undefined     |
| excludeCategories | array         | Array of category IDs to be excluded. Posts containing any of the excluded categories will not be displayed.                                                                                | undefined     |
| useTextOverlays   | boolean       | Whether each blog post data (title, category, etc) should be overlaid on the post's featured image (true) or not (false). If false, date of publication and category are shown above the image, title and excerpts are shown below it.                                                                                | false         |
| showCategories    | boolean       | Whether the post category should be shown (true) or not (false).                                                                                | true          |
| showDates         | boolean       | Whether the date of publication should be shown (true) or not (false).                                                                                | true          |
| showAuthors       | boolean       | Whether the post author should be shown (true) or not (false).                                                                                | false         |
| showExcerpts      | boolean       | Whether the post excerpts should be shown (true) or not (false).                                                                                | false         |
| excerptLink       | boolean       | Whether the post excerpts should be clickable links (true) or not (false).                                                                                | false         |
| mediaSize         | MediaSizeEnum | WordPress media image size that should be used in the blog's preview blocks.                                                                                | full          |
| absoluteLinks     | boolean       | Whether the links from each blog post should point to the external blog in a new tab (true) or not (false).                                                                                | false         |
| ampLinks          | boolean       | Whether the links from each blog post should point to the external blog AMP (Accelrated Mobile Page) in a new tab (true) or not (false).  Only valid for AMPs generated using the [WordPress AMP plugin](https://read.calvincode.net/reader?url=https://wordpress.org/plugins/amp/). If true but AMP is not enabled for a particular post and absoluteLinks is enabled, then the the external blog post link will be used instead. | false         |
| ampUrlFormat      | string        | URL structure for AMP links. ampPathSuffix appends /amp to the end of the external blog post URL. ampQuery appends ?amp and ampQueryValue appends ?amp=1.  For example, possible URLs are <https://www.wordpressblog.com/blog-post/amp>, <https://www.wordpressblog.com/blog-post?amp>, or <https://www.wordpressblog.com/blog-post?amp=1>.                                                 | ampPathSuffix |

#### `blog-category-preview.wordpress-category-preview` props

| Prop Name        | Type          | Description                                                                                | Default value            |
| ---------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
| category         | number        | The numeric ID of the category in the WordPress system.                                                                                | 0                        |
| title            | string        | Title to be displayed above the component.                                                                                | null                     |
| description      | string        | Subheader to be displayed below the component's title.                                                                                | null                     |
| customLinkText   | string        | Text to be displayed as a link to the store.blog-category page (according to the given category).                                                                                | All \[category\] Posts > |
| customLinkTarget | string        | If you would like the aforementioned link to direct the user somewhere other than the store.blog-category page, you may enter a different target using this prop.                                                                                | undefined                |
| numberOfPosts    | number        | Number of posts to be displayed.                                                                                | 3                        |
| useTextOverlays  | boolean       | Whether each blog post data (title, category, etc) should be overlaid on the post's featured image (true) or not (false). If false, date of publication and category are shown above the image, title and summary are shown below it.                                                                                | false                    |
| showDates        | boolean       | Whether the date of publication should be shown (true) or not (false).                                                                                | true                     |
| showAuthors      | boolean       | Whether the post author should be shown (true) or not (false).                                                                                | false                    |
| showExcerpts     | boolean       | Whether the post excerpts should be shown (true) or not (false).                                                                                | false                    |
| excerptLink      | boolean       | Whether the post excerpts should be clickable links (true) or not (false).                                                                                | false                    |
| mediaSize        | MediaSizeEnum | WordPress media image size that should be used in the blog's preview blocks.                                                                                | full                     |
| absoluteLinks    | boolean       | Whether the links from each blog post should point to the external blog in a new tab (true) or not (false).                                                                                | false                    |
| showPostButton   | boolean       | Displays a button that allows the user to link directly to WP post (true) or not (false).                                                                                | false                    |
| ampLinks         | boolean       | Whether the links from each blog post should point to the external blog AMP (Accelrated Mobile Page) in a new tab (true) or not (false).  Only valid for AMPs generated using the [WordPress AMP plugin](https://read.calvincode.net/reader?url=https://wordpress.org/plugins/amp/). If true but AMP is not enabled for a particular post and absoluteLinks is enabled, then the the external blog post link will be used instead. | false                    |
| ampUrlFormat     | string        | URL structure for AMP links. ampPathSuffix appends /amp to the end of the external blog post URL. ampQuery appends ?amp and ampQueryValue appends ?amp=1.  For example, possible URLs are <https://www.wordpressblog.com/blog-post/amp>, <https://www.wordpressblog.com/blog-post?amp>, or <https://www.wordpressblog.com/blog-post?amp=1>.                                                 | ampPathSuffix            |

#### `blog-search.wordpress-search` props

| Prop Name   | Type   | Description                    | Default value      |
| ----------- | ------ | ------------------------------ | ------------------ |
| placeholder | string | Component's input placeholder. | Search articles... |

#### `blog-search-list.wordpress-search-list` props

| Prop Name    | Type          | Description                                                                                | Default value |
| ------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| mediaSize    | MediaSizeEnum | WordPress media image size that should be used in the blog's preview blocks.                                                                                | full          |
| ampLinks     | boolean       | Whether the links from each blog post should point to the external blog AMP (Accelrated Mobile Page) in a new tab (true) or not (false). Only valid for AMPs generated using the [WordPress AMP plugin](https://read.calvincode.net/reader?url=https://wordpress.org/plugins/amp/).                                                                                | false         |
| ampUrlFormat | string        | URL structure for AMP links. ampPathSuffix appends /amp to the end of the external blog post URL. ampQuery appends ?amp and ampQueryValue appends ?amp=1.  For example, possible URLs are <https://www.wordpressblog.com/blog-post/amp>, <https://www.wordpressblog.com/blog-post?amp>, or <https://www.wordpressblog.com/blog-post?amp=1>. | ampPathSuffix |
| excerptLink  | boolean       | Whether the post excerpts should be clickable links (true) or not (false).                                                                                | false         |

#### `search-blog-articles-preview.wordpress` props

| Prop Name       | Type          | Description                                                                                | Default value |
| --------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| numberOfPosts   | number        | The number of posts to be displayed.                                                                                | 3             |
| useTextOverlays | boolean       | Whether each blog post data (title, category, etc) should be overlaid on the post's featured image (true) or not (false). If false, date of publication and category are shown above the image, title and excerpts are shown below it.                                                                                | false         |
| showCategories  | boolean       | Whether the post category should be shown (true) or not (false).                                                                                | true          |
| showDates       | boolean       | Whether the date of publication should be shown (true) or not (false).                                                                                | true          |
| showAuthors     | boolean       | Whether the post author should be shown (true) or not (false).                                                                                | false         |
| showExcerpts    | boolean       | Whether the post excerpts should be shown (true) or not (false).                                                                                | false         |
| excerptLink     | boolean       | Whether the post excerpts should be clickable links (true) or not (false).                                                                                | false         |
| mediaSize       | MediaSizeEnum | WordPress media image size that should be used in the blog's preview blocks.                                                                                | full          |
| absoluteLinks   | boolean       | Whether the links from each blog post should point to the external blog in a new tab (true) or not (false).                                                                                | false         |
| ampLinks        | boolean       | Whether the links from each blog post should point to the external blog AMP (Accelrated Mobile Page) in a new tab (true) or not (false).  Only valid for AMPs generated using the [WordPress AMP plugin](https://read.calvincode.net/reader?url=https://wordpress.org/plugins/amp/). If true but AMP is not enabled for a particular post and absoluteLinks is enabled, then the the external blog post link will be used instead. | false         |
| ampUrlFormat    | string        | URL structure for AMP links. ampPathSuffix appends /amp to the end of the external blog post URL. ampQuery appends ?amp and ampQueryValue appends ?amp=1.  For example, possible URLs are <https://www.wordpressblog.com/blog-post/amp>, <https://www.wordpressblog.com/blog-post?amp>, or <https://www.wordpressblog.com/blog-post?amp=1>.                                                 | ampPathSuffix |

#### `blog-related-posts.wordpress-related-posts` props

| Prop Name       | Type          | Description                                                                                | Default value |
| --------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| title           | string        | Title to be displayed above the component.                                                                                | null          |
| numberOfPosts   | number        | The number of posts to be displayed.                                                                                | 3             |
| useTextOverlays | boolean       | Whether each blog post data (title, category, etc) should be overlaid on the post's featured image (true) or not (false). If false, date of publication and category are shown above the image, title and excerpts are shown below it.                                                                                | false         |
| showCategories  | boolean       | Whether the post category should be shown (true) or not (false).                                                                                | true          |
| showDates       | boolean       | Whether the date of publication should be shown (true) or not (false).                                                                                | true          |
| showAuthors     | boolean       | Whether the post author should be shown (true) or not (false).                                                                                | false         |
| showExcerpts    | boolean       | Whether the post excerpts should be shown (true) or not (false).                                                                                | false         |
| showExcerpts    | boolean       | Whether the post excerpts should be shown (true) or not (false).                                                                                | false         |
| excerptLink     | boolean       | Whether the post excerpts should be clickable links (true) or not (false).                                                                                | false         |
| mediaSize       | MediaSizeEnum | WordPress media image size that should be used in the blog's preview blocks.                                                                                | full          |
| absoluteLinks   | boolean       | Whether the links from each blog post should point to the external blog in a new tab (true) or not (false).                                                                                | false         |
| ampLinks        | boolean       | Whether the links from each blog post should point to the external blog AMP (Accelrated Mobile Page) in a new tab (true) or not (false).  Only valid for AMPs generated using the [WordPress AMP plugin](https://read.calvincode.net/reader?url=https://wordpress.org/plugins/amp/). If true but AMP is not enabled for a particular post and absoluteLinks is enabled, then the the external blog post link will be used instead. | false         |
| ampUrlFormat    | string        | URL structure for AMP links. ampPathSuffix appends /amp to the end of the external blog post URL. ampQuery appends ?amp and ampQueryValue appends ?amp=1.  For example, possible URLs are <https://www.wordpressblog.com/blog-post/amp>, <https://www.wordpressblog.com/blog-post?amp>, or <https://www.wordpressblog.com/blog-post?amp=1>.                                                 | ampPathSuffix |

#### `blog-search-list.wordpress-category-related-posts` props

| Prop Name          | Description                                                                                | Type                                 | Default value  |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------- |
| categoryIdentifier | You may manually specify the ID to be used in the WordPress tag. For example, if you set this prop to "test", the block will look for a WordPress post tagged "category-test". | String                               | (empty string) |
| numberOfPosts      | number                                                                                | The number of posts to be displayed. | 3              |

#### `MediaSizeEnum` Possible Values

| Enum Name    | Enum Value    | Description                                                 |
| ------------ | ------------- | ----------------------------------------------------------- |
| Thumbnail    | thumbnail     | Uses the WordPress Media Settings Thumbnail size values.    |
| Medium       | medium        | Uses the WordPress Media Settings Medium size values.       |
| Medium Large | medium\_large | Uses the WordPress Media Settings Medium Large size values. |
| Large        | large         | Uses the WordPress Media Settings Large size values.        |
| Full         | full          | Uses the original image size values.                        |

### Paginated List Customization

Blocks that use a paginated list accept some common props that allow customization of the paginated list behavior.

These blocks include:

* `blog-all-posts.wordpress-all-posts`
* `blog-category-list.wordpress-category-list`
* `blog-search-list.wordpress-search-list`
* `search-blog-articles-list.wordpress`

| Prop Name    | Description                                            | Type   | Default value |
| ------------ | ------------------------------------------------------ | ------ | ------------- |
| postsPerPage | Number of posts to be displayed in the paginated list. | Number | 10            |

## Advanced configuration

### Multiple WordPress installations

Starting with version 1.6.0 of this app, blog content from **multiple WordPress installations** is supported.

To accomplish this, a `customdomainslug` parameter must be added to your blog routes, and your WordPress blocks must be updated with various props.

ℹ _This configuration is not required if you only wish to display blog content from a single WordPress domain._

#### Step 1 - Adding the `customdomainslug` parameter

It is time to create the store pages that will host the blog content. Before performing the following actions, make sure you already are logged into the desired VTEX account and working on a [Developer workspace](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/development/creating-a-development-workspace/).

1. In the `store/routes.json` file, add the `customdomainslug` parameter to the paths for the blog's new pages. For example:

`1

"store.blog-home": {

2

 "path": "/blog"

3

},

4

"store.blog-category": {

5

 "path": "/:customdomainslug/category/:categoryslug_id"

6

},

7

"store.blog-post": {

8

 "path": "/:customdomainslug/post/:slug_id"

9

},

10

"store.blog-search-result": {

11

 "path": "/:customdomainslug/search/:term_id"

12

},

13

"store.custom#blog-page": {

14

 "path": "/:customdomainslug/page/:slug_id"

15

}

`

⚠ **\*Note that the blog homepage should continue to use a specific path**. It can be `blog` as in the example, or a different string of your choice. All other routes should use the `:customdomainslug` dynamic parameter.\*

#### Step 2 - Updating the blocks' props

In order to support multiple WordPress installations, you will need to update the theme block's list of props.

First, add the `customDomains` prop to blocks that use the URL params to load blog data. Namely, they are:

* `blog-category-list.wordpress-category-list`
* `blog-post-details.wordpress-post-details`
* `blog-post-details.wordpress-page-details`
* `blog-search-list.wordpress-search-list`
* `blog-breadcrumb.wordpress-breadcrumb`

The value of the `customDomains` prop should be a JSON list of domain "slugs" and the domain that each slug represents. The first entry should be your "default" slug and domain.

For example, if you wanted URLs with the slug `blog` to load content from `http://www.blog.com/` and URLs with the slug `other-blog` to load content from `http://www.otherblog.com/`, you would give each block a prop like this:

`1

{

2

 "props": {

3

 "customDomains": "{ \"blog\":\"http://www.blog.com/\",\"other-blog\":\"http://www.otherblog.com/\" }"

4

 }

5

}

`

ℹ _Make sure to follow the format of the example value, including the brackets and escaped double quotes._

Blocks that do not use URL params should be given a different set of props, namely `customDomainSlug` and `customDomain`. These blocks are:

* `blog-all-posts.wordpress-all-posts`
* `blog-latest-posts-preview.wordpress-latest-posts-preview`
* `blog-category-preview.wordpress-category-preview`
* `blog-search.wordpress-search`
* `search-blog-articles-preview.wordpress`
* `search-blog-articles-list.wordpress`
* `blog-related-posts.wordpress-related-posts`
* `blog-search-list.wordpress-category-related-posts`

`customDomainSlug` must be provided for _all_ blocks when using multiple WordPress installations. `customDomain`, in turn, only needs to be provided for blocks that are _not_ using the default WordPress domain from the app settings.

Continuing the example from above, any block that shows content from the "default" WordPress domain should receive the `customDomainSlug` prop with a value of `blog`. Blocks that show content from the secondary WordPress domain should receive a `customDomainSlug` prop with a value of `other-blog` and a `customDomain` prop with a value of `http://www.other-blog.com/` also. For example:

`1

"store.blog-home": {

2

 "blocks": [

3

 "blog-search.wordpress-search",

4

 "blog-latest-posts-preview.wordpress-latest-posts-preview",

5

 "blog-category-preview.wordpress-category-preview#test",

6

 "blog-all-posts.wordpress-all-posts"

7

 ]

8

 },

9

 "blog-search.wordpress-search": {

10

 "props": {

11

 "customDomainSlug": "blog"

12

 }

13

 },

14

 "blog-latest-posts-preview.wordpress-latest-posts-preview": {

15

 "props": {

16

 "title": "Latest Posts",

17

 "useTextOverlays": true,

18

 "customDomainSlug": "blog"

19

 }

20

 },

21

 "blog-category-preview.wordpress-category-preview#test": {

22

 "props": {

23

 "category": 5,

24

 "description": "Description of category",

25

 "useTextOverlays": false,

26

 "customDomain": "http://www.otherblog.com/",

27

 "customDomainSlug": "other-blog"

28

 }

29

 },

30

 "blog-all-posts.wordpress-all-posts": {

31

 "props": {

32

 "customDomainSlug": "blog"

33

 }

34

 },

`

ℹ _Make sure to follow the format of the example value, including the brackets and escaped double quotes._

### Adding Subcategories to blog URLs

To have subcategories included in your blog URLs (`/blog/category/subcategory`), you will need to update your store's `routes.json`, as well as the theme's blocks that display category-related URLs.

Add an additional category route including the `:categoryslug` and `:subcategoryslug_id` parameter:

`1

"store.blog-category": {

2

 "path": "/blog/category/:categoryslug_id"

3

},

4

"store.blog-category#subcategory": {

5

 "path": "/blog/category/:categoryslug/:subcategoryslug_id"

6

},

`

Declare the subcategory block:

`1

"store.blog-category#subcategory": {

2

 "blocks": [

3

 "blog-category-list.wordpress-category-list"

4

 ]

5

},

`

Add the prop `subcategoryUrls` with a value of `true` to the blocks below:

* 'blog-all-posts.wordpress-all-posts'
* `blog-breadcrumb.wordpress-breadcrumb`
* 'blog-category-list.wordpress-category-list'
* 'blog-category-preview.wordpress-category-preview'
* 'blog-latest-posts-preview.wordpress-latest-posts-preview'
* `blog-post-details.wordpress-post-details`
* 'blog-related-products.wordpress-related-products'
* 'search-blog-articles-list.wordpress'
* 'search-blog-articles-preview.wordpress'

For example:

`1

"blog-all-posts.wordpress-all-posts": {

2

 "props": {

3

 "subcategoryUrls": true

4

 }

5

},

`

## WordPress Plugins Support

### Yoast SEO

The [Yoast SEO plugin](https://read.calvincode.net/reader?url=https://yoast.com/wordpress/plugins/seo/) provides meta tags and structured data for your WordPress content. If your WordPress installation has this plugin, the app will include this data on your posts or pages.

### AMP (Accelerated Mobile Pages)

The [AMP plugin](https://read.calvincode.net/reader?url=https://wordpress.org/plugins/amp/) lets you build AMP pages in your WordPress site. If your WordPress installation has this plugin, and your blog posts are AMP enabled, then the app will allow you to redirect visitors to the AMP version of your blog posts.

## Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).

| CSS Handles                          |
| ------------------------------------ |
| breadcrumbContainer                  |
| breadcrumbHomeLink                   |
| breadcrumbLink                       |
| breadcrumbSeparator                  |
| breadcrumbCurrentPage                |
| categoryBlockContainer               |
| categoryBlockTitle                   |
| categoryBlockDescription             |
| categoryBlockFlex                    |
| categoryBlockFlexItem                |
| categoryBlockLink                    |
| categorySelectContainer              |
| dateSelectContainer                  |
| dateSelectInnerContainer             |
| dateRangeInputsContainer             |
| dateInputContainer                   |
| dateFilterButtonsContainer           |
| filtersContainer                     |
| latestPostsBlockContainer            |
| latestPostsBlockTitle                |
| latestPostsBlockFlex                 |
| latestPostsBlockFlexFirstColumnItem  |
| latestPostsBlockFlexSecondColumn     |
| latestPostsBlockFlexSecondColumnItem |
| latestPostsBlockFlexItem             |
| listTitle                            |
| listContainer                        |
| listFlex                             |
| listFlexItem                         |
| paginationComponent                  |
| postFlex                             |
| postContainer                        |
| postTitle                            |
| postMeta                             |
| postMetaDate                         |
| postMetaAuthor                       |
| postMetaCategory                     |
| postFeaturedImage                    |
| postFeaturedImageContainer           |
| postBody                             |
| postCategoryLink                     |
| postChildrenContainer                |
| postNavigationContainer              |
| postNavigationFlex                   |
| postNavigationFlexItem               |
| postNavigationLink                   |
| relatedPostsBlockContainer           |
| relatedPostsBlockTitle               |
| relatedPostsBlockFlex                |
| relatedPostsBlockFlexItem            |
| searchBlockContainer                 |
| searchListTitle                      |
| searchListContainer                  |
| searchListFlex                       |
| searchListFlexItem                   |
| searchResultBlockContainer           |
| searchResultBlockTitle               |
| searchResultBlockFlex                |
| searchResultBlockFlexItem            |
| searchResultBlockLink                |
| tagSelectContainer                   |
| teaserAuthor                         |
| teaserCategoryLink                   |
| teaserContainer                      |
| teaserDate                           |
| teaserGradientOverlay                |
| teaserHeader                         |
| teaserImageContainer                 |
| teaserImage                          |
| teaserBody                           |
| teaserSeparator                      |
| teaserTextOverlay                    |
| teaserTextOverlayTitle               |
| teaserTextOverlayMeta                |
| teaserTitle                          |
| teaserTitleLink                      |
| wordpressContentLink                 |
| wordpressRelatedProducts             |

See also

[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[⚠ Maintenance ⚠](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/apps/vtex.wordpress-integration%23-maintenance-)

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/apps/vtex.wordpress-integration%23configuration)

[Step 1 - Installing the Wordpress Integration app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/apps/vtex.wordpress-integration%23step-1-installing-the-wordpress-integration-app)[Step 2 - Defining the app settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/apps/vtex.wordpress-integration%23step-2-defining-the-app-settings)[Step 3 - Creating the blog pages](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/apps/vtex.wordpress-integration%23step-3-creating-the-blog-pages)[Step 4 - Declaring the pages' blocks](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/apps/vtex.wordpress-integration%23step-4-declaring-the-pages-blocks)[Paginated List Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/apps/vtex.wordpress-integration%23paginated-list-customization)

[Advanced configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/apps/vtex.wordpress-integration%23advanced-configuration)

[Multiple WordPress installations](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/apps/vtex.wordpress-integration%23multiple-wordpress-installations)[Adding Subcategories to blog URLs](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/apps/vtex.wordpress-integration%23adding-subcategories-to-blog-urls)

[WordPress Plugins Support](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/apps/vtex.wordpress-integration%23wordpress-plugins-support)

[Yoast SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/apps/vtex.wordpress-integration%23yoast-seo)[AMP (Accelerated Mobile Pages)](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/apps/vtex.wordpress-integration%23amp-accelerated-mobile-pages)

[Customization](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.wordpress-integration/docs/apps/vtex.wordpress-integration%23customization)

Was this helpful?

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)