Intro to Headless WordPress with SvelteKit

Поділитися
Вставка
  • Опубліковано 14 гру 2024

КОМЕНТАРІ • 20

  • @tedspens
    @tedspens 2 роки тому +4

    I can't give this tutorial enough thumbs up! My next step is JWT authentication. Wish me luck! :D

  • @dominiquepijnenburg8157
    @dominiquepijnenburg8157 3 роки тому +3

    Nice and short tutorial!

  • @kellenmace3948
    @kellenmace3948 3 роки тому +5

    What questions do you have about getting started with headless WordPress + SvelteKit? Let us know! 👇

    • @MrAbrman
      @MrAbrman 3 роки тому +1

      Is it possible to build a svelte project to run on a apache server? Lets say a wordpress theme for this use-case?

    • @comunik1611
      @comunik1611 2 роки тому +2

      Hi, there! Thank you so much for such great tutorial! I need to know if can i use ACF (custom fields), custom post types and fetch these with svelte and graphql? I would also like to know how to order the results by alphabetical order or a custom field (year) instead of having my blog ordered by post published date? I work with wordpress for a longtime (i know how to what the questions I asked with php) but I'm getting in love with Svelte and Sveltkit. Ii would be nice to make my next website combining WP and Svelte. Once again, thank you for great content!

    • @kellenmace3948
      @kellenmace3948 2 роки тому +3

      ​@@comunik1611 Yes, you can use the WPGraphQL for Advanced Custom Fields plugin to expose your ACF data via the GraphQL schema. You can order posts alphabetically by title like this: posts(where: { orderby: { field: TITLE, order: ASC }}) { ... }. To order them by date, use DATE instead of TITLE. I would not recommend ordering posts by the value of an ACF field, since that approach doesn't scale; it'll get slower the more posts there are. Instead, I would use of the built-in ordering methods (like TITLE and DATE mentioned above), or register a custom taxonomy and query your posts based on taxonomy terms. thanks for watching!

  • @rafaelfu624
    @rafaelfu624 2 роки тому +2

    Awesome!

  • @tgodkev
    @tgodkev 2 роки тому

    Great video ! thanks I appreciate it.

  • @supbra1
    @supbra1 2 роки тому

    Nice! What about caching the API call?

  • @jwr6796
    @jwr6796 Рік тому

    I love Svelte, so i'm very happy to see this tutorial! I have less experience with SvelteKit, only using it with adapter-static to make a front-end only SPA. It's safe to assume that this implementation would require Node running on the back end, correct? Any path forward without that requirement?

  • @zhanezar
    @zhanezar 7 місяців тому

    bro you have a great voice

  • @paterfamilias01
    @paterfamilias01 2 роки тому +1

    Awesome

  • @NoahNobody
    @NoahNobody 3 роки тому +3

    Great tutorial, but I have the urge to try this in AlpineJS.

    • @kellenmace3948
      @kellenmace3948 3 роки тому +3

      Sounds like a cool project! If you haven't already, be sure to check out the content that Alex Standiford has been putting out on using AlpineJS with WordPress to create "nearly headless" WordPress sites! 😄

    • @NoahNobody
      @NoahNobody 3 роки тому +3

      @@kellenmace3948 Oh cool, thanks so much, Kellen.

  • @rafaelfu624
    @rafaelfu624 2 роки тому

    Something has changed:
    In the [slug].svelte file, I get this error:
    `page` in `load` functions has been replaced by `url` and `params`
    Please help

    • @rafaelfu624
      @rafaelfu624 2 роки тому +2

      I found a work-around:
      export async function load({ url, fetch }) {
      const slug = url.pathname.replace('/blog/', '')
      ...
      body: JSON.stringify({
      query,
      variables: {
      slug: slug
      }
      })

    • @dio634
      @dio634 2 роки тому +1

      There was a breaking change in sveletekit so for your load function you need to change page to params and then for your variables it will be slug: params.slug instead of slug: page.params.slug

    • @WPEngineBuilders
      @WPEngineBuilders  2 роки тому +1

      Thanks for hoping in to explore the issue. Thanks for watching!