Gatsby Wordpress full course 2021 | Gatsby for beginners | Wordpress as a headless CMS

[@klipspringer]

you are the best instructor ever i've seen in my education life!!!!!!

[@Weibenfalk]

Wow thanks!

[@munnotubbel675]

What an amazing well-made course!!! Since I finished it, Gatsby v3 feels super easy and even more powerful. thank you so much for putting all your time and effort into this, it was absolutely worth it. 💕💕

[@Weibenfalk]

Thanks ... glad to read that it helped!

[@SkyrimBeast]

2 minutes into this video and I've subbed already. It's not often that I get this excited about anything. Many thanks Weibenfalk :-)

[@coffeemakir1977]

Very mad i spent 2 weeks reading docs, learned alot and explains the uri problem i was having. This is a fantastic start for anyone just starting react/gatsby.

[@InverserPro]

This is just a brilliant course. Even in many ways better than paid courses. I am very grateful to you. Good luck! Separate, some moments ... For example, I don't understand why you duplicate all capital letters in filenames. And some files that contain code can simply be copied or copied to save our time (observation time) and your presence.

[@ParisianDreamz]

Amazing! I was pretty intimidated with using WordPress as a CMS and graphql for my next project. Your explanations were concise but still informative.

[@academyonnet]

Thank you very much for a complete course and for all the efforts to show to the viewers how to start a project from scratch and then finish it deploying on the Internet. I like your way of doing things using different methods and repeating a few things so that one can easily learn new techniques as well as revise the old techniques. You are a wonderful teacher. Please continue making new complete projects.

[@Weibenfalk]

Thanks! Appreciate the support.

[@robeeeeen]

If I would found this tutorial a few days ago, I could have answer my Developer Challenge fully to grab the job contract. So detailed so real world oriented coding, 💕💕 💕💕

[@Weibenfalk]

Thanks! Go grab the next job!!!

[@Ahmed-ef3bg]

Love the thumbnails great attention to detail. Subbed and bells on.

[@augustyng]

2:52:00, add limit:1 prop, the query can just return the latest post instead of all the posts allWpPost(sort: { fields: date, order: DESC }, limit: 1)

[@Weibenfalk]

Great Thanks! Not sure that existed when I created the course

[@najmantube]

That works!

[@sergeynazarenko2316]

Incredible course, thank you very much

[@manigopal89]

@Weibenfalk I found few things missing will be happy if you add this as also new video, 1. Banner Slider using ACF is not shown as of now only hero image is shown. 2. Breadcrumbs doesn't have current page tile eg: if the page title is About the Breadcrumb only shows Home / and also the same way for blog Home / Blog / - misses Archive title the same way post inner page doesn't have page title with parent category 3. SEO titles are not showing both for Pages & Posts, only come Home | {Site Name} is shown at all pages & posts. SEO - All-in-one SEO & Yoast most widely used. For both it will be good 4. Contact Forms like Contact Form7 integration would be good. Hope you will add them as separate video. Great ! Thanks for this Awesome ❤❤❤ video.

[@manigopal89]

@Weibenfalk waiting for these features to be added.

[@solid3451]

How much has changed since this is published? I'd like to give it a go, should I?

[@terrymarr5265]

the only thing I wish you would have gone over more carefully is how to get the db from local up into wordpress. You say in the video "just use this file from local by flywheel".....exactly how to do that?

[@DevThought]

Great course! Please make next one with WP and Nextjs. Fetch all pages and blog posts.

[@alex-murphy]

This is gold. Thank you 🙏

[@Nasir_Haidari]

Tack Thomas! Percis det jag behövde just nu!

[@Weibenfalk]

Underbart att höra! Hoppas du lär dig mycket från kursen

Thank you for this course!!. For the record an issue I had: creating a folder "blog" for the dinamic post pages a trailing slash was added automatically so I was getting a double slash between blog and the post uri. So I created them at the page folder and linked them without "blog" at the archive template. Any oyher solution to maintain the blog at the post pages?

[@Weibenfalk]

Thanks. I haven’t been using gatsby for a long time so don’t know :/

[@martinlauritsen5150]

Hi thank you for an good tutorial, you know why i get this error in gatsby cloud "Specified dimensions for images must be positive numbers (> 0). Problem dimensions you have are width: -402"

[@dangelojesusarrivillaganol5721]

gatsby is now for dinamyc sites, we will be greatfully if you can teach us how we can implement the news capabilities for dinamyc sites

[@aussiegod7996]

I have a website built with Gatsby that is live. But I want to add a cms and use a Wordpress theme for some pages. Is this possible? Cheers

[@Weibenfalk]

You can't use WP Themes with Gatsby ... that's two completely different things. You can say that Gatsby IS your WP Theme in a sense =) Gatsby is the Frontend ... In this course I'm only using WP as a headless CMS. Headless means that it's only used for the CMS without the Frontend in this context.

[@TheTonyMan]

Tons of useful information. Thanks!

[@Gohel95]

Thanks again from bottom of my heart💕

[@agility_matters]

First of all, thank you. This is awesome. I used this to make two sites. I recently built another and I have an interesting issue. When grabbing content from pages, the pictures are not running through gatsby image. So they load slow, for speed, like with blogs? whats the best solution?

[@davidpolme]

Im having the same issue. Did you found a solution?

[@andrewwaring7191]

Thank you for this video. The effort you put into every detail is really appreciated. one question. What is the theme you are using on VS? :) Thanks again

[@Weibenfalk]

Hey thanks! Its one monokai 80s

[@brianamatdjais3676]

The wpPage.link doesn't work anymore. The index.js page is conflicted with this attribute. I've tried both wpPage.uri and wpPage.link (yes i've tried with cleaning the cache). Any other tips to work with the Routing API?

[@academyonnet]

18:31 for username and password to the gatsby admin

[@younghong9183]

Hi. Thank u for your tutorial. I was wondering if I could get your opinion on querying for page contents. For example when we query for all Posts or Pages, we generally would go through the query such as ...edges > node > title or content to render on Gatsby frontend. My question is, because querying for "content" gives us All the contents added to the page in a single string of HTML code, how would one approach this issue of separating these out? My apologies if the question is confusing.

[@Weibenfalk]

Hey and thanks. I don’t really understand what you’re trying to do. :) separating the content out. You can query for the title and attached image for example and they are separated but the content is in one “block” so to say. It’s like that in Wordpress itself also

[@younghong9183]

@@Weibenfalk lol sorry it is bit confusing to explain. So on Wordpress Pages, as we add text or images in to the gutenberg blocks and query the Pages for "...node{ content }", the content is all in one block like this ("content": " Block content 1 Block content 2

[@academyonnet]

@@younghong9183 Try using parse from package html-react-parser. Firs t import it like this: import parse from 'html-react-parser'; And then do this: {parse(`${data.allWpPost.edges[0].node.excerpt}`)}

[@younghong9183]

@@academyonnet Thank you very much for your help. Looking forward to viewing more of your tutorials.

[@MariuszRojewski-p1k]

“I’m working with this course in 2023, unfortunately I have a problem with receiving data at 3:50:00 (Page-BreadCrumb), querying for wpParent {node {… rest of the code}} returns null, and there is no error in the database. I’m working on Gatsby v5, can someone write me how to fix it so that I can continue working with the course?” Here is my query: query ($id: String!) { wpPage(id: { eq: $id }) { ... } wpChildren { ... } wpParent { node { ... on WpPage { id uri title wpChildren { nodes { ... on WpPage { id title uri } } } } } } } } `;

[@jameshonour7661]

hello, i have the exact same issue. Did you find any solution?

[@dawidtomczyk365]

It was the best tutorial I've ever seen

[@Weibenfalk]

Thanks! Not sure what you mean :)

[@aminedaimallah310]

nice tutorial, but i don't understand why you made 2 queries for the menu, one for the desktop menu and the other one for the mobile menu when you can do only one on the layout and pass the menu data as a prop

[@badneighbour2025]

why is the database used in the docker version? can I modify and put my own database? if so, how?

[@Weibenfalk]

The docker version runs a locale database in the container. You can have any database there as long as you set it up correctly in the docker setup file.

[@MikeSmithgb]

Thank you for a great course, I have one issue when I create a new post it doesn't appear in the blog list, but it does appear on the home page as the latest post but I click on it get a 404 error. I deleted the cache and it worked.

[@Weibenfalk]

Thanks. May be that some things have changed since I recorded the course.

[@MikeMcAllister215]

Just a heads up. I had to rename the Wrapper styled element in Navigation component to NavigationWrapper and import it to Header, others I was getting an import error 'Element type is invalid, expected a string (for built-in components) or a class/function but got ....' Using Node 18 is anyone runs into that. This happens on Step 19

[@MikeMcAllister215]

Looks like FooterWrapper needs to be renamed on the next step. Not liking the wrapper in a wrapper

[@andrebisewski5596]

Do you think that Gatsby + WP its scalable? Is this recommended to use in a big project with a lot of content?

[@Weibenfalk]

Yes I think. But I actually don’t use WP that much anymore. It’s about preferences and there’s a lot of good cms to use out there :)

[@andrebisewski5596]

@@Weibenfalk Great, thanks! Which one do you recommend?

[@najmantube]

Big apologies! Turns out the categories list of links on the individual post pages are working after all. The reason that sometimes one, two or three categories are listed is because that particular post has been tagged with one, two or three categories! Sorry if I caused any confusion (and for implying that your video/wp site/gatsby build contained bugs!

[@ogibinedi]

what the benefits WordPress combined with Gatsby? it's really complex for someone who did not have any experience about programming...

[@Weibenfalk]

The benefit is that you get a super fast and SEO optimized site. Also ... and this is highly opiniated, I think React and GraphQL are much more enjoyable to work with. Gatsby uses those languages. I agree .. if you don't know web dev at all it can be hard to grasp. It's probably not my first choice when learning programming.

[@joepeng4]

great course, as good as those with 1m subscriber, it is the best so far at this topic in youTube right now, if there will be supplement videos on wordpress with gatsby, login authentication with roles, and search would be helpful

[@Weibenfalk]

Thanks. Appreciate all the great words. I put in a lot of effort in this one

[@noahperez9631]

is it possible to add WordPress plugins having Gatsby ?

[@Weibenfalk]

Wordpress plugins are only related to Wordpress. You’ll have to build the same functionality yourself in your gatsby front end

[@noahperez9631]

@@Weibenfalk it seems complicated ... :)

[@cottamcha]

what theme do you use in vsc? and thanks for the video

[@Weibenfalk]

It’s one monokai 80s

[@cottamcha]

@@Weibenfalk ty

[@cottamcha]

@@Weibenfalk how would i connect woocommerce to the ___graphql, so i can pull data from there too ?

[@gauravvala27]

Can i do it without any specific prerequisites.... because if yes...than this could be very helpful in freelancing i think

[@Weibenfalk]

Very hard to answer. It's highly subjective and individual. I think you should now at least some JS and preferable React also.

[@danielraison957]

Why to freelancing something without experiences and prerequisites? You will give a poor service.

[@ThomasLaCroix0]

This is an amazing tutorial. Thanks!

[@Weibenfalk]

Thanks!

[@robeeeeen]

warn src\components\OverlayMenu\OverlayMenu.js : warning Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events , any solution?

[@Weibenfalk]

That’s just a warning, it’s for accessibility you should have a keyboard listener also on the element. I’m not taking accessibility into consideration in this course as it will provide an extra layer of learning. I want to focus on gatsby

[@ab8767]

What a fantastic course, this helped me a lot! However, it would have been cool if you included tags. :-)

[@Weibenfalk]

Thanks!

[@petersenglish]

Tack så mycket! I have learned a lot.

[@waziristantvlive6521]

Hey Man, Thank you so much for the tutuorial. it is amazing i have created many site after watching your tutorial. It will be really helpful if you can convert this Cakeit into multilingual using polylang plugin.

[@manasiroy9510]

Thank You so so much. This is a very much useful video.

[@laupwing284]

Where is the database id 47 defined?

[@Weibenfalk]

It’s defined in the database to the Wordpress site. Nothing to do with gatsby itself. Wordpress only. In WP each post gets an Automatic ID when it’s created

[@bplugins]

Thank you so much.

[@Selcuk_Caliskan]

cakeit.local/graphql this link does not work

[@emmanuelcbe]

Hi very good course and I think you missed "b" on the video thumbnail :) "Gatsy.Js" > "Gatsby.Js"

[@Weibenfalk]

Haha thanks. Didn’t see that typo :)

[@munnotubbel675]

I've been looking for any good input with gatsby v3 and Wordpress since 2 weeks :D hopefully this video will be worth it! feedback incoming, cheers from berlin

[@Weibenfalk]

Hope you like it

[@munnotubbel675]

@@Weibenfalk Best tutorial in a long while for me!

[@chioo9495]

Nice. Nextjs w/ wordpress next

[@msvmanikantasrivishnu7788]

❤

[@4DudeBune]

It's quite funny

[@atticCoder]

Dear Mr Weibenfalk: Thank you very much for your brilliant tutorial. I have one question regarding the "Overlay Menu" component. If I move the "OverlayMenu" component after "Primary" component in the Layout.js, the overlay menu won't show up when click the hamberger. Any reason for that? It must be to do with the CSS in the styled component, but I just cannot figure it out. Even the z-index of OverlayMenu is set to very high. {children} {/*if I put OverlayMenu after Primary, it won't show up*/}

[@Weibenfalk]

Hey, thank you! Appreciate the support. I don't remember everything exactly now from my head but it is most likely the CSS as you say. As the order changes my best guess right now is that it is the z-index in the CSS that needs to change.

[@atticCoder]

@@Weibenfalk Thanks a lot for you reply. I will play the CSS a bit more.