Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including gatsby-theme-wordpress-mdx with all npm packages installed. Try it out:

require("gatsby/package.json"); // gatsby is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var gatsbyThemeWordpressMdx = require("gatsby-theme-wordpress-mdx")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gatsby-theme-wordpress-mdx v1.0.5

Gatsby Theme


@artezan/gatsby-theme-wordpress-mdx is released under the MIT license. Current npm package version. Downloads per month on npm. Total downloads on npm. PRs welcome! Follow @CArtezan

This Plugin is a union of two worlds 🌓 the old WordPress and the new MDX. You can use WP, MDX or both



  • Theme UI-based theming
  • react-animated-css
  • MDX source
  • WP source

Only 3 Steps 🤯

1.- Installation ⛏

npm install gatsby-theme-wordpress-mdx

2.- Configuration ⚙

// gatsby-config.js
siteMetadata: {
    title: 'MDX WP',
    description: 'It is a WP with MDX blog ',
    keywords: ['GatsbyJs', 'React', 'theme-ui'],
    siteURL: '', // No trailing slash allowed!
    siteImage: '/preview.png', // Path to your image you placed in the 'static' folder
    twitterUsername: '@CArtezan',
    author: {
      name: 'Cesar Artezan'
  plugins: [
    resolve: 'gatsby-theme-wordpress-mdx',
    // Requiered
    sourceWordpress: {
      sourcePost: true, // if true install gatsby-source-wordpress
      sourcePage: true, // if true install gatsby-source-wordpress
    // Requiered
    sourceMdxPosts: true, // if true create `src/posts`
    logo: `src/images/logo.svg` // This path is relative to the root of the site.

3.- Folder Structure 📁

  • src/index.mdx is required, in this file you can generate the landing page
  • src/page is required, it is without "s" because mdx plugin
  • src/sections is required but it could be empty, this folder is for the sections imported in index.mdx
│   gatsby-config.js
│   └───gatsby-plugin-theme-ui
│   │   │ index.js
│   └───posts
│   │   │ mdx files
│   └───page
│   │   │ mdx files
│   └───sections
│   │   │ mdx files
│   └───images
│   │   │ png jpg svg files
│   │   │ logo.svg
│   │ index.mdx
    │   file021.png
    │   favicon.ico

And that's it, now you can start code in index.mdx your landing page and the others page in src/page 👨‍💻

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free