{"id":19894517,"url":"https://github.com/stepzen-dev/stepzen-wordpress-nextjs","last_synced_at":"2026-06-07T18:31:44.337Z","repository":{"id":109989439,"uuid":"340165056","full_name":"stepzen-dev/stepzen-wordpress-nextjs","owner":"stepzen-dev","description":"Boilerplate showcasing Next.js's Static Generation feature using StepZen as the GraphQL data source, WordPress as the CMS, and Cloudinary for image hosting.","archived":false,"fork":false,"pushed_at":"2021-03-02T17:18:06.000Z","size":5263,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-11T20:15:05.528Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"stepzen-wordpress-nextjs-stepzen.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stepzen-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-18T20:08:39.000Z","updated_at":"2021-03-11T16:23:37.000Z","dependencies_parsed_at":"2023-03-13T13:59:33.320Z","dependency_job_id":null,"html_url":"https://github.com/stepzen-dev/stepzen-wordpress-nextjs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stepzen-dev%2Fstepzen-wordpress-nextjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stepzen-dev%2Fstepzen-wordpress-nextjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stepzen-dev%2Fstepzen-wordpress-nextjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stepzen-dev%2Fstepzen-wordpress-nextjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stepzen-dev","download_url":"https://codeload.github.com/stepzen-dev/stepzen-wordpress-nextjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241322533,"owners_count":19944073,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T18:33:44.840Z","updated_at":"2026-06-07T18:31:44.284Z","avatar_url":"https://github.com/stepzen-dev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A statically generated blog example using StepZen, Next.js, WordPress, and Cloudinary.\n\nThis example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [StepZen](https://stepzen.com) as the GraphQL data source, [WordPress](https://wordpress.org) as the CMS, and [Cloudinary](https://cloudinary.com/) for image hosting.\n\n## Demo\n\n### [https://next-blog-wordpress.now.sh](https://next-blog-wordpress.now.sh)\n![Add new plugin](./docs/homepage-demo.png)\n\n## Deploy your own\n\nOnce you have access to [the environment variables you'll need](#step-4-nextjs-configurations), deploy the example using [Vercel](https://vercel.com):\n\n## How to use\nTable of Contents  \n1. Prepare your WordPress site\n2. Populate Content\n3. Import StepZen schemas\n4. Setting up Cloudinary or Wordpress FeaturedImages\n5. Connect Nextjs to StepZen\n6. Add authentication to Wordpress Environment (optional)   \n\n\u003chr/\u003e\n\n## Configuration\n\n### Step 1. Prepare your WordPress site\n\nFirst, you need a WordPress site. There are many solutions for WordPress hosting, such as [WP Engine](https://wpengine.com/) and [WordPress.com](https://wordpress.com/). [DigitalOcean.com](https://www.digitalocean.com/) has a one-click wordpress installation.\n\nOnce the site is ready, the two highly recommended plugins for a scalable wordpress Headless CMS is [Advanced Custom Fields](https://www.advancedcustomfields.com/) and [Yoast SEO](https://yoast.com/wordpress/plugins/seo/) plugin. Follow these steps to install it:\n\n- Inside your WordPress admin, go to **Plugins** and then click **Add New**. Install the ACF and Yoast SEO plugins.\n\n![Add new plugin](./docs/plugins-add-new.png)\n\n- Once the plugin has been added, activate it from either the **Activate Plugin** button displayed after uploading or from the **Plugins** page.\n\n#### Add the following code to `functions.php` in appearance \u003e theme editor. If you choose not to add it, the front-end will fail and you will need to substitute the featuredImage data in the `/lib/api.js` file.\n\n```bash\n// Expose featuredImage\nfunction register_rest_images(){\n    register_rest_field( array('post'),\n        'featuredImage',\n        array(\n            'get_callback'    =\u003e 'get_rest_featured_image',\n            'update_callback' =\u003e null,\n            'schema'          =\u003e null,\n        )\n    );\n}\nfunction get_rest_featured_image( $object, $field_name, $request ) {\n    if( $object['featured_media'] ){\n        $img = wp_get_attachment_image_src( $object['featured_media'], 'app-thumb' );\n        return $img[0];\n    }\n    return false;\n}\n\nadd_action('rest_api_init', 'register_rest_images' );\n```\n\n\u003e **Note:** After populating content, visit http://your_site.com/wp-json/wp/v2/pages/ and `cmd+f` to ensure your `featuredImage` is populating.\n\n### Step 2. Populate Content\n\nInside your WordPress admin, go to **Posts** and start adding new posts:\n\n- We recommend creating at least **2 posts**\n- Use dummy data for the content. \n- Pick an author from your WordPress users\n- Add a **Featured Image**. You can download one from [Unsplash](https://unsplash.com/)\n- Fill the **Excerpt** field\n\n![New post](./docs/new-post.png)\n\nWhen you’re done, make sure to **Publish** the posts.\n\n\u003e **Note:** Only **published** posts and public fields will be rendered.\n\n### Step 3. StepZen Import\n\na. Import the wordpress schema.  This should confirm that the StepZen CLI is running the schema on `localhost:5000`.\n\n```bash\nnpm install -g stepzen\nmkdir wp-stepzen\ncd wp-stepzen\nstepzen import wordpress cloudinary\n# Add the auth configs for cloudinary. You can also add the configs later in your config.yaml\n# The auth configurations are optional for wordpress. Press [Enter] to skip through those for now.\n```\nb. The index.graphql SDL should look like this. \n\n```bash\nschema\n  @sdl(\n    files: [\n      \"wordpress/posts.graphql\"\n      \"wordpress/pages.graphql\"\n      # If you don't want to include cloudinary, comment it out.\n      \"cloudinary/cloudinary.graphql\"\n    ]\n  ) {\n  query: Query\n}\n```\n\nc. Start up your Stepzen server\n\n```bash\n# In your root folder, run...\nstepzen start\n```\n\nEnsure the endpoint is properly quering from the Wordpress RestAPI\n\n```bash\n{\n  wordpressPages {\n    id\n    title\n    content\n    featuredImage\n    slug\n  }\n  wordpressPosts {\n    id\n    title\n    content\n    featuredImage\n    slug\n  }\n}\n```\n\n### Step 4. Setting up Cloudinary or Wordpress FeaturedImages\n\nIf you want to use FeaturedImages rather than Cloudinary Images, remove all the `cloudinaryImage` queries found in `/lib/api.js`.\n\n#### Adding Cloudinary Images\n1. Add all the images you want to feature on your pages with the slug of the matching post and page.  \n```\nWordpress Post or Page url - https://yoursite.com/post/hello-world\nCloudinary Image Name (PublicId) - hello-world\n```\n2. Uncomment the `cloudinaryImage` data found on `index.js` and `[slug].js` for `getStaticProps` and `coverImage`.\n3. Delete `{post.featuredImage}` found on `index.js` and `[slug].js`.\n4. Save the project. \n\n### Step 5. Nextjs Configurations\n\nCopy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git):\n\n```bash\ncp .env.local.example .env.local\n```\n\nThen open `.env.local` and set `STEPZEN_API_URL` to be the URL to your GraphQL endpoint in WordPress. For example: `https://{stepzenid}.stepzen.net/tutorials/helloworld/__graphql`.\n\nYour `.env.local` file should look like this:\n\n```bash\nSTEPZEN_API_URL=...\nSTEPZEN_AUTH_REFRESH_TOKEN=\n```\n\n### Step 4. Run Next.js in development mode\n\n```bash\n# Clone the repository and run these commands in the root folder\nnpm install\nnpm run dev\n\n# or\n\nyarn install\nyarn dev\n```\n\nYour blog should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub Issues](https://github.com/stepzen-samples/stepzen-next/issues).\n\n### Step 5. Add authentication for Preview Mode (Optional)\n\n**This step is optional.** By default, the blog will work with public posts from your WordPress site. Private content such as unpublished posts and private fields cannot be retrieved. To have access to unpublished posts you'll need to set up authentication.\n\ninstall the miniOrange RestAPI Authentication, https://www.miniorange.com/wordpress-rest-api-authentication. Select Basic Authentication and choose the `username:password` type. Add the appropriate configuration variables below to your StepZen config.yaml file. \n```bash\n  - configuration:\n      name: wordpress_config\n      username: {{ username }}\n      password: {{ password }}\n```\n\n**Important:** Redeploy your `stepzen start` endpoint to update the environment variables.\n\n### Step 7. Deploy on Vercel\n\nYou can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).\n\n#### Deploy Your Local Project\n\nTo deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/new?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=next-example).\n\n**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file.\n\n#### Deploy from Our Template\n\nAlternatively, you can deploy using our template by clicking on the Deploy button below.\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress\u0026project-name=cms-wordpress\u0026repository-name=cms-wordpress\u0026env=STEPZEN_API_URL\u0026envDescription=Required%20to%20connect%20the%20app%20with%20WordPress\u0026envLink=https://vercel.link/cms-wordpress-env)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstepzen-dev%2Fstepzen-wordpress-nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstepzen-dev%2Fstepzen-wordpress-nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstepzen-dev%2Fstepzen-wordpress-nextjs/lists"}