Getting Started With GatsbyJS, Elementor, and WPGraphQL | Static WordPress Generator

In this tutorial, we go over how one might get data stored in Elementor into WPGraphQL. After that, we consume the Elementor data through Graphql and into our GatsbyJS site.
*Plugins*
- bit.ly/2jYDLP0 (Elementor)
- bit.ly/2luqZID (WPGraphQL)
- bit.ly/2lVBjJH (WPGraphiQL)
*Don't forget to subscribe!*
Sign up for the newsletter to notified about the free 2020 WordPress Development Course: wpcasts.tv
*SOCIAL*
Twitter: / alexanderbyoung
Instagram: / the_alex_young
Facebook: / wpcasts.tv
#Elementor #GraphQL #GatsbyJS

[@tylerabbott957]

Now THIS is a good video. I am a clueless man who just wants to develop a little, and this makes things much easier.

[@Deprecated446]

This is great. thank you! I am currently working on a headless WP + Gatsby setup with GraphQL.

[@migueldf10]

Really helpful to learn Wordpress development with you in general! In particular, I have experience with react and Gatsby, but some agency work needs to be done with Wordpress and this approach seems brilliant!! I think your channel is the best thing I found on youtube. THANK YOU

[@WPCasts]

In so glad you think it’s useful!!

[@daamas3809]

Crazy good job man! loved the video and explanation, concise and really well said, subscribed and liked

[@LilianChisca]

thank you Alex for another great video! I only have 3 channels with the ring bell enabled, and wpcasts is one of them :-) keep up the great work mate! really excited about the tutorials you're going to bring next!

[@WPCasts]

Thanks! I'm honored :)

[@birdbrainsolutions6112]

I think I've seen you on reddit. Thank you for creating the tutorial!

[@bvodola]

That was a very nice tutorial. A Github repo would be awesome. Thanks!

[@justanotheryoutuber739]

this is actually some really, really good stuff! Highly appreciated!

[@WPCasts]

Thanks! Definitely a fun idea.

[@alana-da-da-da]

Thanks for this! Perfect 🙌

[@itayhaephrati]

great video!!! cant believe it's from 2019

[@gogawow]

Great! Thank you for this!

[@pawelkieryk]

Wow! I was not aware that Elementor + React + Headless WordPress will work together :) Cool!

[@vikashdenzil]

🌟

[@mauriciosotoa8130]

Very good content. Thanks. A lot of potential in Gatsby + Elementor¡¡¡¡

[@webtotheflow]

Definitely very interesting

[@TomHermans]

Interesting. Experimenting myself with a similar setup, but mainly focused on Gutenberg. Not considered elementor (yet). Interested on your thoughts whether to use elementor vs gutenberg.

[@riencoert]

nice video, do you know any other themes that can provide the post content as json like this? also, which iconset are you using in vs code? 😇

[@AG21071995]

Nice tutorial. What theme and color scheme are you using in vscode?

[@RuslanGonzalez]

When using his approach to serve from the WP Graphql API what do you recomend for Wordpress site? keep it hidden/shown to public, also what impact with the SEO do you think it is going to be as there will be duplicated content out there with WP Site and Gatsby

[@nitras.design]

Great video but not sure if this would work with divi sites?

[@anhvuuc8693]

I will be back here soon as possible

[@danielf535]

Great tutorial, but I would highly recommend that you either put the code either in a child theme or a PHP snippet plugin, because when you update the theme, the functions.php file will be overwritten, and you will lose the code changes.

[@ilaws6647]

Heyo! Awesome stuff! I can get the images as you have here in the video but I'm having problems getting the other widgets and not sure how to quite do that. I'm looking to get the widgetType: "text-editor" and it's not doing it for me ...

[@jeanpaulanoh4787]

Hi Thank you for your tuto. So, i try to implemente your code within the file function.pp But I get the warring saying "undefined function register_graphql_field"

[@antarrbyrd]

Do you have the source for this? I'm trying to implement this for pages as well but some of the widgetTypes are coming back as undefined

[@shaneblackwoodGodbless]

Please do a video on custom post type and how to display it on page

[@focky1982]

what about maintenance, isn't elementor data structure changing to often ?

[@TheClubPlazma]

Hi Can u please tell me what's the exact model Microphone u are using . Sound is really clear . By the way I love you man

[@errorerror1337]

Fucking awesome. If for no other reason, I'm glad the COVID-19 pandemic is giving me an excuse to go through your vids that I missed. This is fucking outstanding.

[@stevanantic3019]

Hi, where I can find resources(code)?

[@brady5790]

Awesome tutorial!!! Helped a lot! Just curious, do you know how to return the theme builder options? For example, return the header and footer that has been selected for the theme? Thanks again

[@jonny_codes]

I'd Like to know this as well.

[@brady5790]

@@jonny_codes I was able to get a rough working example of the theme builder integration if your interested

[@thealchemyofremembrancepod8025]

Hello! Thank you so much for this video. I would like to know how you created a page with elementor with other elements? In the example you only use images which works for me but as soon as i add other elements from elementor, gatsby throws an error

[@WPCasts]

Great question. With this method you would selectively support individual widgets in Elementor. So if you want to use their "Button", you would need to implement the button in Gatsby.

[@koko0808008]

can't wait for the next ! congrats again. PS : too much light on your lovely face maybe :)

[@WPCasts]

Yup! Still learning how to do lighting. Someone brought that up today too, I’ll keep at it ;)

[@sk4nd704]

Great video! but i'm wondering if it's possible to run Gatsby with Visual composer, Have u tried it ?

[@denisbruns9577]

Yeah this will work. But the data from Visual Composer will be different, so you need to adapt to it.

[@fatjay9402]

Sorry... but do behonest i have no idea what this video is about and whats the reason for it.... ( i mean to use Gatsby and WPgraphQL ) can you maybe explain in the next video a little bit more about the reasoning and the things you can do with it ?...

[@WPCasts]

I'll put it on my list!

[@TomHermans]

WP for content management, gatsby for super fast site delivery. In a nutshell ;)

[@spicer41282]

I kinda guess what you're after here? But a global overview of *why* you're demo'ng the code on different env would've been clearer. Hopefully, it can help people like me to Not guess and mumble to myself (WTF? is he doing this for?) Great explanation though!

[@matthewglaister]

Weird Q - what about custom themes with Elementor such as oceanwp, will it work

[@denisbruns9577]

Will work, just needs custom dev

[@keviincosmos]

I'm new to the headless thing. So the first data you got from elementor with all the html, why can't you use that? I see that you can use elementor for creating stuff, but you have to redesign/recode all functions and styles if you want to use the benefits of elementor. Am i missing something? :)

[@WPCasts]

We could technically just output what we get from Elementor, however we would be missing out on all the advantages to React/Gatsby. However, you're right doing recreating all the functions/styles/widgets of Elementor IS A LOT OF WORK! haha.

[@keviincosmos]

Will there be a part two? I've played a lot with this, found some awesome things but also big flaws, like in the title widget, elementor is not outputting header_size on h2, but for all others. Is there a newer way to lead do the json today? 😊

[@tomm1677]

Great video in an new area for WP. Do you think this would work for Beaver Builder?

[@WPCasts]

To be honest, I've never used Beaver Builder before. But I'll have to check it out one of these days :) Maybe a video with me figuring it out.

[@zsoltsimon5850]

@@WPCasts Omg, Yes please! Great video btw, very exciting topic, thank you!

[@zsoltsimon5850]

@@WPCasts I played around with it and it works with Beaver Builder as well. register the field to Page instead of Post and wrap the get_post_meta into a serialize() function + _fl_builder_data instead of _elementor_data

[@azizultex]

It should work on any page builder. You just need to do the rendering part yourself based on the data you receive from graphQL

[@ZhuJo99]

Went easier way, just pulling the rendered elementor HTML content. As our website is VERY huge with many custom theme/js/css and custom plugins, it's quite impossible to rewrite every single Elementor widget we use to the Next.js (we went with it instead of Gatsby - more control). Simplified Elementor structure is nothing crazy and I just can move parts of PHP template and implement that into our SASS code in frontend part build on Next.js than to do this kind of crazyness. I see some advantages here and there but personally, I hate CSS modules in next.js (therefor I turned it off in webpack) and use regular import to download just needed code instead

[@shaunmacdougall340]

GitHub Gist for the function.php, so you can copy paste: gist.github.com/shaunmac/01c7a97821f1b599bbd9b47cdab7f176

[@nicolasgoosen5142]

I really don't see the point in doing this - it's so round-about to just get a bit of content on the page?

[@ezswan]

elementor is so bloated. why not oxygen if you are going to use a theme builder?

[@WPCasts]

When used in this headless context, how bloated the plugin doesn't translate to the front-end. So you can use whatever builder that has the data structure you want.

[@ezswan]

@@WPCasts hmmm... thats really interesting.

[@ezswan]

@@WPCasts so it wont be a bunch of divs in a bunch of divs in a bunch of divs?

[@tagfat]

"so what we're going to be doing is I'm going to be creating a page with Elementor taking a look at its data structure and then see how we might be able to get that into WP graph QL once we get that in WP graph qo we will then start parsing it and get it into a Gatsby site " So why don't you say what the point is by doing that? OR what a gatsby site is in this context? Dont use the words "Getting Started" if you don't care about making yourself understood.