CODEWITHSUNDEEP
javascriptwordpressdynamicgatsbyadvanced-custom-fields
narliecholler
narliecholler

Reputation: 479

How do I dynamically match components in Gatsby to ACF on WordPress pages?

So I am dynamically creating pages in Gatsby from WordPress using the gatsby-source-wordpress plugin and necessary WP plugins. However, if I want to add ACF to specific pages on WordPress, how do I go about matching the ACF fields from the GraphQL query to components - presumably taking the query as component props?

Upvotes: 0

Views: 217

Answers (1)

St3f4NS
St3f4NS

Reputation: 21

You can write your login inside gatsby-node, for gatsby how to create pages. Based on template, id, acf, or whatever you want.

Short example i did for page templates:

    ...
    let pageTemplate = path.resolve(`./src/templates/page.js`);
        
    _.each(pages, ({ node: page }) => {
         switch (page.template) {
             case 'template_about.php':
                  pageTemplate = path.resolve(`./src/templates/about.js`);
             break;
    createPage({
         path: `/${page.slug}/`,
         component: pageTemplate,
         context: {
         id: page.id,
   },});

Upvotes: 1

Related Questions