---
title: "Combining WordPress with Headless CMS"
description: "Want to see the magic of combining WordPress with Hygraph for ultimate power? WordPress expert Maciek joins Tim on the stream where they explore how to combine forces between WordPress and Hygraph. Ask us any questions in the chat or join the community:"
date: "2024-05-31T18:29:09.000Z"
url: "https://timbenniks.dev/videos/live-hygraph/005-fy_w2yousbo"
youtube_url: "https://www.youtube.com/watch?v=fy_w2youSBo"
playlist: "live-hygraph"
image: "https://i.ytimg.com/vi/fy_w2youSBo/maxresdefault.jpg"
tags: ["composable-architecture", "cms", "cloud-infra", "frontend", "devrel"]
---

# Combining WordPress with Headless CMS

Want to see the magic of combining WordPress with Hygraph for ultimate power? WordPress expert Maciek joins Tim on the stream where they explore how to combine forces between WordPress and Hygraph. Ask us any questions in the chat or join the community:

Watch on YouTube: https://www.youtube.com/watch?v=fy_w2youSBo

## Transcript

[Music] all right we are live doesn't that make it feel like official M what do you think like a countown does yeah everything and the music was really cool so we already getting we're now officially at like a real companies live stream that's what it feels like when we have like these little things and anyways today we're talking WordPress which I haven't used since 2012 which is a lot a lot of time a lot yeah is that correct though did it did exist in 2012 right like it existed way yeah I mean uh I have a I have a t-shir that I got that was released on WordPress 15th anniversary and it was few years ago oh man I must have then used it I probably started using it in like 2008 or something yeah and and and think about that the jum drop are even older oh yeah and it's kind of funny because every developer has once build a CMS and I remember using the look of Wordpress in my own CMS and then you showed me the other day Day Some of Wordpress and it still looks the same it's like no this is mindboggling anyways without if you would wait like half a year you would have the fresh new interface because it's kind of in in in in progress yeah yeah yeah yeah it will be more snazzy flashy snazzy I cannot wait but before we dive in tell us your name how you say it like properly not how I say it and then also what do you do and why are you here okay so so so my name is Magic palmowski uh but for some reason every Starbucks prefer to call me magic but it's sense yeah it's it's it's really great and on the other hand I have this friend of mine called FR and sadly at Starbucks he has a bit s very different yeah H and I work at a company called patch stack as a security Community manager yeah I I always have problems remember all those long titles I always prefer to say yeah I work as a devell at Pat stack or so you basically work as a Dev but then in the world of Wordpress right I would even say in the world of Wordpress security so it's yes slightly focused slightly focused but it's um what can I say it's a very interesting uh very interesting Branch I mean I knew that uh it can be scary from time to time okay uh but it's really exciting it's really exciting learning I mean I consider myself as a let's call it a good enough developer I mean I was a developer for for for for I think for years right yeah of course so like I said quite a good developer yeah you need to know your stuff when you work in security especially WordPress security because I mean really learning from those people how they discover some of those vulner abilities yeah exactly must be great amazing it's really amazing it's like totally different way of thinking because as a developer you always kind of think how to create stuff and yes the the the researcher mindset uh but it's the thing that I was like let's not read it in a bad way but it's kind of their mindset it's kind of how to destroy some stuff how to work around some stuff so they like we go from beginning to the to the end and they go the other way so they first by using see where is a possible access point and from this they go to the beginning and to find is there some weak link H along the way I mean it's truly remarkable to observe those people to learn yeah and yeah I I I really real realize that um yeah I'm only good enough developer I mean there are so amazing people yeah yeah like but correct me if I'm wrong I think because WordPress is one of the most used system on on the planet I think it's also the most hacked one right I mean maybe because there's just so many lying around exactly I mean workers has uh and it kind of depends on the methodology but we are talking about 40 50% of the market oh man insane and on the other hand we are talking about the solution uh that is Con considered as a simple one so if we connect first of all the scale on the other hand the fact that many people who don't know a thing about web development about security are able to create their websites yeah this is a bit of a recipe for quite a few disasters also workers is really amazing and again this is this is a pro and a con at the same time because it's really easy to start not only as a user but also as a developer I mean you just open one file add few lights of code and voila it works exactly on the other hand it's horrible because you just open WordPress B lines from stack Overflow that you don't understand and voila it exists on your website and you're not yeah copy paste man exactly so uh so so yeah um because WordPress did such an amazing job of being that friendly that for for for everyone uh it all this also created this problem uh than that that we are currently fighting I mean uh at patte we uh we we have this big Bounty program where uh researchers can yeah can can can find vulnerabilities and yeah it's it's this whole whole leader board everyone is competing with each other it's it's it's it's really fun but uh I mean yeah it's it's quite funny because on one hand it's kind of like a game right because yeah it's there's a leader board they are kind yeah but buck hunting programs they're always fun like that yeah but on the other hand underneath we have those millions of websites that can be affected by a problem so but still still I I I think that um WordPress I mean let's remember WordPress core as core so just the CM not the themes not the plugins it's very secure we are talking if I remember there were found 13 vulnerabilities uh during the last year and they weren't severe at all there were some minor minor minor issues so so it it wasn't a problem while uh when we look at the rest if I remember it's like eight 18 80% it's it's generated by by plugins so yeah this is actually a good Bridge because we talked to a lot of prospects here at hgraph about they have like this pretty big WordPress thing sitting there and they they can they have two things or they just want to go away from it because it kind of drags them down due to whatever reasons and they want to go to something new maybe it's the plugins whatever security extra work but others are actually like we kind of love it but we want to modernize our front end and our theme is dragging us down so let's go and do other things with hgraph for example and so maybe that's the goal of this stream is to kind of figure out how can WordPress and Ahad CMS in this in this case maybe hgraph work together well because we're not here saying hey WordPress kind of sucks like why would you even say that if like 40% of the internet is running on it it clearly exactly it might have its drawbacks due to its design and whatever but people overcame but lots of folks are also looking at hey what is now a new way to use this system does it have an API does it have graphql can I do any front that I want maybe I don't want themes at all so could you maybe explain just because I'm sure not all viewers um know WordPress as well as you give us the basics of how WordPress is intended to be used and also kind of what are the things to extend it what are the things that are not so good about it of why you might potentially want to like involve another composable architecture thing so long question here we go yeah so first of all WordPress is a PHP MySQL or mariadb based CMS we are currently having also an add-on and I know there are some Works towards also adding SQ light uh it's like a file database basically simple exactly exactly but overall SQL is is the way to go and um WordPress is let's kind of call it very Backward Compatible I mean okay the 6.5 version still run still can run on php70 php7 already pretty old right it is very old I don't remember how much but it's end I mean both 70 and 71 are are already end of life since few years and the this means backwards compatibility is a big thing yes I mean it's I I would even say it's kind of a too big thing because uh it also kind of is it's kind of a problem for for many developers especially those who want to contribute to core uh because they feel okay but there are so many new stuff in PHP 8.2 8.3 can I use them nope no no yeah but we know yeah those things are amazing but sorry no you can do them in your plugin or something because you can mention that it will work from PHP I don't know 8. yeah so when your server has like a certain PHP level you can oh I can install this plugin now like just just makes me think about the like the good old days where I had to host a server to do something with a CMS I'm so happy I work at the hatless CMS now because it's just in the cloud and I don't have to care but some people want that someone is doing it for you just like this oh yeah I know all of our like Engineers we talk about this stuff they do that stuff every day and they're talking about oh crap we have to add a bit more memory to this box and blah blah blah they know I just don't because I'm a user that's true that's true that's why that's that that's why there there is kind of this branch of Wordpress hosting called managed WordPress hosting so man hosting there we go yeah in theory you also should not care but yeah it is as it is sometimes it's more of a bz word yeah but going forward um some time ago already WordPress introduced this uh new editor uh Cod name Gutenberg now it should be officially called the blog editor but Gutenberg is such a cool name that everyone is still calling it Gutenberg this I've heard I've just not seen it so what does that do exactly how is that different from because I remember it was just a form with a post yeah it was it was Tiny MCA tiny MCA if I I remember this yeah Rich TX tiny exact exactly exactly and at some point um the core team decided that uh yeah it's kind of time for a change because everyone was introducing uh kind of this block based content editing and uh can you just show share your screen to show a bit of that oh yeah of course so let me just uh share my scen content blocks sounds a lot like how a lot of CMS do their data mod okay so you should see it and let me just even open first man when I okay so this is new because the previous like this is like Okay so this oh this is basic Rich Text Editor you can move the blocks around like in notion exactly apart from this this is let me add something new so let I can either write something or I can add a new block but this does not look like your website though this is just something they build like this is the Gutenberg look yes and no because let's just H let me update yes and let me uh sorry it will be here uh ah there we go so it's very very similar it is I mean this is this is the cool part that you can can uh add you can have two stylings one for the front end and one for the back end which is quite cool because sometimes you would prefer that your back end styling because of the general flow that is happening here would be a bit different and this is also a great thing when you when we look at this from The Headless uh perspective because I know that many especially when we are using our CMS to power a lot of pages at once so we have one point for data and this Powers a lot of pages so uh the previews wouldn't be that easy to to show and thanks to this you can kind of create this quite Universal style so people will more or less understand what they are creating this is important in in cms's like that's where there's always this the um how do you almost say that sometimes it's super abstract and you need that because you're data modeling but sometimes you really need to see what you're doing and how and that's what this is closer to I think yeah and here you see I can other also yeah and so this as a developer do you put this in or just does the system come with this this uh the things that I showed are the core blocks so this is everything you get out of the box but of course you can uh either install some plugins that will add more more blocks or or you can create your own so okay and there are even um application I plugins that kind of help you with creating uh those blocks for example Advanced custom Fields it kind of helps you uh to to create it with more of a PHP approach because Gutenberg is built with react so oh wow so this is react so this is not like yes this is now now this is this is react and this is kind of a problem from uh when when we look at at uh at the fact that WordPress is still PHP based it was built by developers who are working with PHP EX at some point this I mean in in general this shift is a bit painful for for for for some of the developers me included uh so so so yeah luckily uh some smart people decided to create some plugins that kind of help you and still allow you to build uh to build blocks using PHP and they are kind of converted in some way so you can so how does it work on the front end do you need react on website no no no because everything everything is uh in general there are two types of blocks one are called Static and the second one are called the dynamic and uh let me just check if it was uh it's a code editor okay great so you can see how the blocks look like so this is the HTML and here is the additional data and so this is like metadata stored per block or something yeah exactly and this this will be saved like everything into your uh into your database there are also Dynamic blocks that won't have this part okay they will only have data and they will get the template from p PHP oh of course you as developer make a little PHP file that get gets applied to that metadata and then exactly because you just get variables from this uh personally I'm I prefer the second approach because I see it as more flexible and it uh just helps you to have data and the template totally separately here hello you have HTML stored in your database literally change my eyes because exactly why like to be honest like of course if this works it works there's nothing I can say if it works it works I mean idealist it's really crazy it is but but it's all caused by the thing that I mentioned before the backward compatibility thing exactly it needs to fit in these tables exactly yeah and the moment when Gutenberg uh was launched I think that um not everyone was sure it will entirely work so I think it they they were ready for a scenario that at some point they will say okay it just doesn't work where us happens so it would be then it would be a disaster to have all this weird data that just doesn't show up on the website exactly they just decided to go this way because even because there one of the popular plugins right now it's called the classic editor which kind of turns off Gutenberg just go back to web form please it just works yes yes and um and the thing is that um those blocks will work because they are just HTML saved in the database oh yeah so you just grabbed that HTML put it on the page and it kind of just happen exactly right so if you are an idealist and you've worked in hatless systems you look at this it pains your eyes on the other hand it works incredibly well for Content editors and and for so many people I don't know any people with WordPress that are not successful with their setup or maybe you know it's fine but they wanted something else but it's kind of still fine and so yeah let's make the bridge to what this stream is about and we're 20 minutes in so this is the perfect moment yes what I have all that I kind of want to see let's let's make it the let's say how how can we do this let's say I love my WordPress I have 10 content editors that are trained on this Gutenberg is their life exactly I only want to keep my blog posts in there for example and then I have a whole bunch of other needs that I'm now starting to do with headless systems like maybe my images come from cloud and area my other CMS data or my super complicated modeling for my products or whatever comes from high graph for example how can we now grab this stuff and connect it up to let's say hgraph okay so WordPress out of the box includes rest API okay Cas right it used to be a plugin I think uh yeah exactly because uh many new features uh start as they are called Feature Feature plugins so they are developed and at some point they just get merged in I mean Gutenberg is also a plugin so you can either use the core version all right or or there is a plug-in version which is like this F this is the future release that will be in core version sure so so it's something like this so we have the rest API but we also have gra graphql as a plugin of course because it's WordPress and there are two implementations of graphql in WordPress first we have the wp graphql by WP engine it's on the left and WP engine is a separated company from WordPress right yes WP engine is a is a humongous hosting company that uh that really I think they are the biggest company when it comes to investing into headless okay okay so so yeah they they are really doing a lot of amazing stuff here with maintaining this uh this plugin and on the other hand there is Al G graphql uh it's um it's like a for the cuteness of this design this is my choice already what's funny I remembered that before it became gate graphql it was called a bit differently and it had a red as a logo so it Evol it evolved but but yeah lonardo is doing a really amazing amazing job here uh but it his he's he's working on on this on his home so this is I can imagine this stuff is complicated because let's say I install some plugin for that say my SEO stuff the yast one that adds a bunch of data to all my pages how does that end up in my graphql and this sometimes becomes a problem I can imagine yeah I mean it will kind of depends on on on on many things if the plug-in will use just the The Meta table that uh WordPress has yeah that's not a problem because it will be just visible inside from the uh from the graphql uh API yeah but it's just data sometimes the data is uh transformed somewhere along the way before it h the front end and yeah so some plugins have official graphql Integrations oh that's cool uh for example the advanced custom fields that I mentioned and we will be playing around with it in a in a second and on the other hand um sometimes there are users who just decided okay I need this integration so I will write it on my own for example yo it doesn't have the official graphql integration but uh get another plugin I guess yes you you can have a plugin for a plugin I mean this is this is this this great moment when when when we end up with a plugin for a plugin and for a plugin amazing beautiful why don't you show us like the playground for your project so we can see okay so uh yeah this is the website so let's go back here and of course let's go to the plugins to show that I already installed the graphql and I also have the advanced custom Fields because we will play around with it in a moment and for for for for a moment let's live it as it is so let's go to this graphql IDE and let's open the query composer okay so so what do we want we want to show all all posts right yeah let's go for all post so the most the most simple part let's just get uh let's say the something name or yeah exactly and let's and let's get the the content because this will get this will get interesting oh boy okay so oh I see HTML in output yeah exactly you HTML is output and let's is what it is it's fine let's go back let's use the post by for a moment so let's remove this one because uh I have this we will I remember that it's slug 65 oh yeah the ID 65 sure yeah of course we can use the slug or anything El but uh why because it's it's it's Gutenberg uh because rest of all was was just out of gener and there there was just one ah so this is a Gutenberg page specifically okay so let's have a look at this uh did I oh the quote is in valid oh because it should be sorry sorry it should be post ID if I remember R oh and now without those of course yes now oh because it's an ID yeah there we go okay and now beautiful it's beautiful it's just exploded in our faces exactly so now if you would be this lucky front end developer who who has something like this uh you will be probably uh deciding how not to do this because it's you're dying a slow death when you see this yeah assume you have a fix of course yes and there is a plugin for this there is a plugin for this yes you install a new plugin oh you have plugin I love it uh again WP engine created this thing called WP content block yeah so let's activate it and uh let me just go for a let me just zoom in GitHub uh yeah so Chris is responsible for this and what it does it gives you this editor blocks all right and you can like get every part of each block he basically just wrote a badass parser for HTML and this weird luckily I mean partially yes but luckily there is a moment when everything is saved when this becomes an RI oh really this is the moment yeah and and this is the moment you you have to benefit and also a cool part there is also a similar plugin for rest API so you can also have it separate important okay so let's let's go back to our to our website we have uh let's go back uh here we so we have our uh let's run it again perfect it's still it's still like this but we don't need content anymore because we will have uh it was called the editor block ah he just added an extra property okay cool exactly so if let's say We'll so let's see the name okay and render HTML so now we will see each of this block with it's rendered HTML separate you see okay so already clear you know what you're get it's better but on the other hand you still have something like this in the image so it's still not fun yeah because the the thing that we would really love to have is for example to to know uh the things about this image so let's go a step further and here you can see all those blocks that are defined and we are looking for core image we don't know anchor this we will need um what we will need let's say well the the URL I guess we let's say file height wether okay so let's see much better oh yeah there we go you just need a Bas URL still exactly but we can get it from somewhere in the settings or kind of uh or what else uh we also if if we want to pass some classes or anything also there are inner blocks because yeah there we can have Block in a block uh oh and this part all those if the yeah exactly so as uh and because WordPress stores uh few let me just remove the Met here because WordPress stores very often few sizes of an image and if we would like to kind of use as it is uh we can use something like this and we will all the variations yeah yeah oh source urls this is this is the good one so here here you have everything here you have everything so this becomes bearable we can this is totally you just need to go into this playground a lot and find out all the fields and all the things but once you have one Theory you should be fine exactly because it's it's probably when you'll do it once it will be okay probably you will just your own how does this work let's say you make a custom block does that end up in here too uh yeah it will because it's it will be registered so so it will end up and there will be just dat essentially this plugin just does a database query somehow to figure out what the actual data is before it pass to the front end yeah yeah yeah because at some point every block has to be registered so if it's registered uh yeah here here here it goes and can just dude in the interest of time how about we connect this to hgraph because this is graphy well hgraph is a graphql CMS and there is a concept that is called content Federation and that's like graphql Federation is a thing that has existed for a bit right but never in connection to cms's so what hgraph came up with I guess it's last year a bit longer ago mid 2022 I think is let's actually grab any sort of data that you have elsewhere as an API and connect it to our CMS through content Federation and then hgraph will make you a graphql schema to be able to query that data through high graph because the beauty is what what we want to do with high graph is we don't have a front-end SDK at all right we don't have like something you have to install from npm because it's all graphql and so we would basically just be the in between layer of all this extern internal API that you just you just query High graph with graphql you get all this information and so um M or magic because he is started this project last week without talking to me he did nothing he just went in did it and it actually you got it to work from SC apart from one minor thing but uh but probably if I would do better thing reading the documentation well our dogs oh that's a thank you for that little um wait let me see where is this no no it it's more on on my end that that I forgot to read well developers and docs we all know how this goes yeah exactly yeah but we have lovely Romina hopefully in the chat here I'm not sure she is but um she's written writing a lot of these docs and it helps a lot so how Okay so we're going to make a new project now and let's actually connect whatever you have in HRA in in WordPress to this High graph project then we go into the playground and after that I'll go on my screen and we'll actually code it okay so Brian said were in meeting but they're out now all right so well it's your show you know how can you zoom in a little bit and then show us everything oh yeah of course of course we are here so I just created a new a new project exactly and the thing that we have to do is to connect uh no it was first the scha exct first the schema so we have those this thing called remote sources and and truly this is this is this is really amazing so let's call it WordPress prefix WordPress no this and we'll use graphql now we have to get the base URL that of course I don't remember uh but we have it here so let's let me copy this link where is it where is it where is it it's here uh okay we have this one and I think that's it we don't need anything more right yeah so let's add I'm saying nothing but yes oh wait there's something there something went wrong no the fun part is that I also had a problem with this once interesting but it was gone let me just do another oh this is very interesting this is very interesting and I remember that something really which is funny because I have a project which I connected would it be maybe the oh maybe remove the prefix oh call it WP or something and enable debug perhaps oh it has to start with the capital lever oh uh enable debugging okay let's try very funny very funny maybe the is this one tell us what's [Music] wrong the good news is I have a project in which it will work we're lucky we actually tested this before but and and and and remember that few minutes without the show hey maybe I will just delete that the yeah luckily did not delete that project but okay okay anybody from from the product team is online this happened and now we will just go back to other project that works perfectly okay so I you just click click back on the okay yeah that one is the one that works okay let's let's just show that schema again uh it was in the schema and we we have it here okay so what is different of what you just click on it for a sec let me click on it but so it seems it also has buid yeah they they differ nothing very weird okay so let me remove this one because uh we won't uh we will be recreating go there in a sec and then we can also just so maybe I can start by explaining the ways we can actually query um external systems right so of course what you could do is make a schema in high graph just like a post in WordPress it's a it's a CMS you can add Fields whatever you want and then you can just add a graphql field so you can just connect to that external Source through that content model but the other thing and that makes it a little easier is we have something called Global queries so if you can click on that one yeah there so that's there's the global we have this one so let's remove it for a moment so it didn't exist for Global queries you can actually add um your rest or graphql endpoints if you have made them so let's just add graphql here and just let's call this posts right we're going to Let's query all the posts so you know what let just so I won't be I will be sure that uh yeah we're now 100% sure what we're querying exactly posts okay it's posts graph perfectly we see all the all the data and we will need uh posts I guess post post and we will know this so essentially what um magic is selecting here is literally this is coming out of out of Wordpress yeah like hgraph understands the H the the graphql schema because we did introspection to use a fancy word for today so we just created a global query that now understands hgraph uh well WordPress post so let's go to our API playground like we did in the other one and let's we can find let's remove remove the stuff and you might just how okay and let's say just uh what it's very interesting that it it put some stuff back we can actually remove that high graph post there we go yeah exactly and what we will need because we already have nodes so we don't have to worry about so let's just take uh maybe the title and the slug slug of course slug let's see and let me just check one more thing do we have uh huh interesting thing we we don't have the editor blocks yet oh that's interesting uh probably because okay so this part Works uh probably because it wasn't refreshed in some way we can actually do that you can go back your schema click on remote source and on the right top you have the three dots and you can ref okay I think like we were looking at cash right now I think the worst is happening to us it might be that your WordPress output is just not working because if it cannot refresh this one and it cannot add a new one maybe there's something on the WordPress end that you need to publish or something no it's it should work in theory but you know what let me welcome to live everyone exactly where everything okay let me just clear our caches but I don't think it should be that's likely not a problem but you never know yeah exactly clearing cash is always I well let's try and refetch again okay it really not having fun can you try the playground on your WordPress website yeah of course uh was like yeah R for sure account yeah actually here Ryan is right the hardest problems in death naming and cash INF validation and dns's and dns's DNS yeah sure yeah DNS is another okay log everything works to kind of just work this is strange oh what about the settings of the graphql let's check is there something here enable B queries no not restricted not enabled limiting IDE of course all looks good to me maybe hit save One enable public introspection let me enable this for a moment we we definitely need that yeah yeah this one but okay let's see if this I think that's probably what it that's probably probably this was it probably yeah probably when I uh at some point yeah yeah yes yes I like it is okay Perfection okay so we got this you might want refresh this page to see if it actually finds this content now now let's just to be safe I love how it always take slightly longer than we want it to be yeah of course okay so we do have content we do have content but what what did we look for again if it was editor editor blocks or editor content it doesn't look like it's there dude yeah oh this is this is not let me just just to make sure let me fetch the schema once again okay I don't have to say that plugin somehow that that does something there could not ah so there there's some stuff going on here can you try adding it oh interesting that's like because if I go here how about let let's remove the the global query and set it up again because it it has some issues with updating the the schema it seems true true so let's remove the remote Source right oh um look Brian is saying there's actually a refreshing the introspection as well uh well just let's remove the remote source and we we do it again but but maybe not the whole Source but just the query just the query okay so let's start with this yeah good idea let's redo this one yeah okay so graphql again uh Brian we actually clicked that a few times already and it actually started working okay WP High gra WP High gra perfect uh what do we want that we wanted um post no all the posts right oh posts right right right right it's so similar wait a second noes exactly and then everything essentially and look it's not here oh it's not there even in the introspection that's very interesting oh how you might want to cancel this here and now refresh the introspection and then try to make schema maybe it couldn't do it because it already had a schema connected somehow maybe so let's try again yeah go to the remote source and actually refresh oh uh now okay yeah because and yeah it it has sound it has a lot of sound well this it's still refreshing you see okay now it actually did it I think now it's working okay so again query ref oh no sorry let me Let me refresh it yeah this is one of those onetime things you have to do and after this everything is happy but you never know oh there is there is a cash there's a cash TTL for our CD and Edge always just let's make sure it's shorter exactly just make that 10 seconds whatever uh okay okay okay and again back to post what let me just check post for a second I I know that it's not uh oh just to see if the thing is there there look look it's here so I think too that might be our issue it's here it works success oh must at least be 60 seconds otherwise our servers might not be very happy with you oh no let's try again what what what what now what now validation error fragment entry point where is this this looks exactly correct what did I did wrong you didn't change anything right nice nice still not working no let's go back here this is incredible I was thinking we were already coding something at this point okay notes let's add fragment entry point cannot condition POS CH did something change in the oh but this is strange we might someone from our um let's see if there's let me just okay got it got it I what did you do just I removed the nodes all the everything went in not just the noes everything let's see if we can just query inside notes now that should be okay okay let's remove this doesn't exist anymore oh yeah exactly because how did I name it WP graphql perfectly not we go into notes and yeah we have huh something you see it it's coming back uh okay uh we have notes and we w that um I remember the slug the title and now and of course the editor blocks and now we can choose all the magic and yeah we have all of them so let's say we are just interested in what do we have here we have the let start with the name perhaps and then see we have the name exactly because it will be useful to the rendered HTM for now just to see the HTML okay if it works yeah let's if it works because I see another error oh it's working even though we is it's alive you see the fre form it's nice all right dude how about in the interest of time we have like 14 minutes left okay this query is working and it's all good so what how about well okay we have maybe we can ask the Hors we have like 60 people watching us what do we do we go to my screen we code next project from scratch connecting to this and therefore also WordPress and then showing something or do we go deeper and make the perfect query who is who wants to do what because uh M you also had something where you wanted to maybe query the configuration and stuff right yes so we can go both way it's it's it's up to you oh now I now now I see that Joel is with me I'm really happy put him on the screen what's up dude so um well originally our plan was to show something with code as well um because what I'm wondering is if folks in here do do people know how to use graphql um have you ever had to do it things like that um so what do you think should I just grab a new n and actually connect to this quickly so we can see I because it's a question did you do this before during some other streams connecting graphql with n with no oh we have yes of course this is kind of the thing we do quite often so yeah let's let's dive deeper let's dive deeper okay sure we're good because we do have lots of videos and documentation on how to actually connect to graph and see this all on your page yeah okay let's make the query I'm happy so so so so so so let's let's let's go a bit a bit deeper because okay we have we have this one and that's great because because we have posts but posts are not the only thing we can have in WordPress right so let's go back and what if we would like to have a custom settings page because let's start with this one because it will be it will be quite uh quite cool so uh I already installed the advanced custom Fields uh plugin so we are going to create a new options page and then we going to make it available through graphql so um so Advanced custom Fields is yet another plugin to make different things in WordPress or H yes it's it's it's one of the most um iconic plugins that kind of helps you uh model the content uh use in WordPress and uh I mean it's it's it's getting kind kind of out of hand because I am really not working at wpm engine I'm not you just like them a lot just like Brian here and and as you can see uh almost everything is uh done by WP engine okay so we have uh this very simple and you can see already we have it here High graph side perfect now we are going to add some fields to this so let's say what we want to have a slogan just a feel like this uh so we already have this basically allows you to model any type of thing you want exactly ex database table I guess so let's nice yes uh let's add a new field what what else do we want can I do a logo with an image upload or is that too much to ask of course of course it's I just have I just have to click one and let's call it a logo perfect and do you want to have an image URL yeah probably an image URL that's fine okay that's perfect let's I want okay so that's it and now show this field Group if and we need the option page equals HRA site and that's perfect but at this moment but at this moment it won't show up into in our graph but but let's go into plugins of course there is this amazing there's a theme Here There is this amazing plugin called graphql for ACF and guess who created it of course WP engine oh yeah your favorite company yeah yeah I mean really um their work when it comes to graphql is is so truly amazing uh so let's let's go back into our field groups we have this set setting group and now we see graph Q oh yeah so we want to show it in graphql as let's kind of call it high graph settings uh let's save it here but that's not all because uh wait a second I thought I pressed it okay okay now let's go to once again to into options Pages oh oh yeah okay now it should be okay and let's go edit here Advanced configuration no oh that's why it's uh let's go here to graphql showing graphql so the pages visible okay perect here we go now we have everything and now if we'll go back into the IDE and let's look at the query composer how I called it oh the high graph sign it is that's very awesome and we can already see the settings and you can have the logo I don't know what not cursor we just need uh whoa there's so many yes because uh because image is a post so oh of course everything is a post so you see this this part me media item M and all those things so probably this will be this is for for or your your on so so we have quite a few of them we can select in or the source okay and we wanted the slogan right so let's uh we don't care yeah let's remove this for now yeah and let's run it nice okay no logo is oh because weo we we didn't so let's go yeah let HRA is cool yeah because I I was playing around with this earlier so let's first image any image of a cat you have will do or oh this I yeah I have this angry angry dude generated uh yeah and there must be an AI plugin for WordPress to generate angry dudes uh there there is it's called Berta AI it will generate angry it will I mean really there is a plugin for everything oh and you see is an angry man yelling at his computer it is that is very true and there's still a little oh there's some debug stuff that's pretty cool yeah and we can so let's enable it just so uh you can see what you can uh where is this where is this where is this everything no I'm getting blind what are you looking for oh yes this the bug oh yeah that's be cool to have extra debug information yeah it's always it's always pretty there we go yeah at at high gra we looking into for the future also to like if your query is like crazy like 1500 lines we might tell you hey this is a little over the threshold of you know what is Smart maybe it up and like having this kind of stuff is super nice with that yeah yeah that's that's that's that's for sure so so we have this one and um uh I would say let's run this as another Global query in hgraph now uh this High graph uh I called it high graph site yes Ang yes okay so okay we might need to refresh the introspection because you added completely new thing but I'm not sure if that's needed but I assume okay so let's go back to to schema let's try and just refresh it okay refreshing refreshing [Music] refreshing yes nice okay okay let's make another Global query we can just go to query and then add first oh yeah let's let's add add another graph Q field just call this High graph site maybe High graph side okay okay now we have to find High graph side in here there it is just like this weird weird did that just work it yeah it's maybe like all these fields are cool yeah yeah because we will need all of them exactly okay now we go here and okay let's leave this part because why not yeah we go if you go you can find it yeah there it is yeah let's you have the slogan the logo and we want it was media item URL nice so essentially what this is showing you is that you can query WordPress through hgraph and this is now cached on the CDN Edge so let's say you now build a website that has like a million visitors that is now going to be hitting hgraph rather than WordPress unless of course TTL is like 60 seconds so it might refresh it over time but I'm pretty sure the high graph CDN is a lot more solid than WordPress in the sense of I'm not saying the CDN is better because it's likely the same in WordPress you have to do MySQL queries and do a whole bunch of things and start up your whole PHP stack to even get any data well if you don't have to hit that at all you can do it in high graph and of course um maybe we can keep the the last few minutes to chat about why would you use this like why at all because you had some ideas there right M yeah I mean I mean the first thing and uh I will start with this fault before trying seriously think if you need a headless approach because sure I would say 80% no you don't I mean if you are a developer probably you want to still because you want to play around with new shiny toys then that's totally fine yeah but from the but from from more of this let's look at this Enterprise large company uh point of view this is a really especially like this imagine you have um you have a lot of websites and every website uh brings something into the general data stream yeah so having something like hgraph as this as this hub for all the data it's an amazing place you don't have to kind of even look where is it you know where is it it's exactly imagine you have five WordPress to do different things because people probably do that for I don't know if you have scale you might need different WordPress right I I I can for for for me the best example are are for the newspapers okay when when each team has its separate WordPress everything lands in this Hub and then it is showed on your newspaper front page every section goes from a different WordPress and for that high graph is of course works super well and then also on your front end you're you can do whatever you want because then that newspaper source of five different WordPress maybe plus even some product pin system and maybe some images database from another place or whatever you want on another CMS that can then all go and then you can do whatever you want with that so it can go to your iPhone app and show it in a different way if you if you do all these like things we did to make the the data actual data rather than HTML you can do lots of things with that and the future is a lot brighter and we are not here saying don't use WordPress um but on the other hand I don't know how how can we say this the right way because for me like when we get prospects in on the phone and say hey we kind of don't like our WordPress to me we can show them this and say hey this can coexist really well and your editors likely use WordPress and understand it so why why just keep using it and then your new stuff you build on a new system and then in a year you can decide you know what we'll grab everything from WordPress and put it in high graph and then we teach WordPress but why not keep using it like there's always you get Freedom this is what I like Brian Brian mentioned here in the comments the last one put on yeah let your editor works like uh where where they like and combine everything where your deaths what work and yeah 100% that's one of the most important thoughts that every developer who is who has this tingling feeling to change the CMS for the whole team should think about first because the truth is we as developers we work with the CMS code but we rarely go inside of it and use it every day yeah we don't know how painful it feels sometimes right yeah I mean I'm I was very often surprised as a person who really knows work press really good I mean I attend conferences I was a speaker like everything core contributor everything what you can imagine related to Wordpress and still when I see how people work with it I'm amazed that you can do some things they okay so you can do it in WordPress how do you know I just discovered it but how long are you using I don't know a few months and I'm like I have like many years experience and I don't have a this feature existed so yeah and like this is the one thing a lot of developers always forget is that content editors and marketers and all these folks inside you know using their system they have a very high threshold for pain we never really know how they feel and if the setup is weird or whatever we we don't know and so developers might sometimes just choose something that they like and suddenly your editors are it's horrible for them but they don't really tell you because their threshold for pain is so high and so or they just have noted that those steps how to how to proceed and they see it as normal and when you and when you look at it you see oh God what what have we done why are they doing this exactly and so this is always this battle between developers and content editors and so if you can combine the two and have people work where they like it this is a super flexible solution for the future it's so flexible in fact that you can kind of switch things out easily if you wanted to because what we've also learned over the years that people choose and they kind of stick with something yeah so marketing this like you can now switch out things easily might not be the best one but if you wanted to if you wanted to do a redesign in three years then suddenly you have this freedom of something that's hatless and you're not connected to whatever HTML was spit out of Gutenberg and now suddenly you don't want to figure around your image yeah right then this is a super freeing experience anyways we are at one hour and three minutes so only three minutes out of our time box not bad not bad especially that there were some troubles along the way but this is supposed to be I think this just happens to people who learn in public because I hadn't seen how WordPress works with graphql you showed me on the stream and the fact that this actually worked within this hour plus us yapping about it all the time shows you that it's not that hard to do it's actually and also this all this hgraph thing that you just saw this is free it's a free account you can do all this stuff without paying and you can scale it up quite a lot oh man I naturally went into my ctas how about that you can actually um go to hyra.com and and sign up and for the app for free and if you like all this stuff that you saw us do you can actually come in slack and go to slack. hyra.com and actually ask your questions and show the stuff you've done and probably don't ask us your WordPress questions go to my for those because I don't know anyways um thank you so much what are your final words for our uh viewers today uh I would I would always say especially for people who think that WordPress is this horrible horrible CMS that no one should use again give it a try give it a try it's it's far from being that bad as some are saying about this okay that's good to know it's it's because really we workers have a reputation and it's far from far far from true and this is uh I I always encourage like really give it a try give it a try just uh fres head don't I think that's a good one because for me personally I have this history with it you know where I used to work with like this templating system in PHP and do we show echo or not like all like that all time right where how do you actually PHP something to make it work and that was just painful for my experience but that doesn't mean that now it's good or bad it's probably fine if 40% of the web is working with it it's probably pretty good the thing is and this is quite quite a very interesting topic that that that you mentioned that the templating uh the fact that I choose WordPress many many years ago was because it didn't have a templating engine why it's actually not templating it's just PHP right exactly and because back then there was smarty already and oh I remember smarty we implemented that in our own CMS when I worked at an agency exactly and actually slow as heck remember that it was slow yeah it was it wasn't that that the quickest one uh but but I remember that back then I was one of those people from PHP is a templating language there was this it kind of isn't it it I mean it can but but later on it took me a few years I kind of learned about twig and blade and now I'm a faction of Wordpress for I me WordPress PHP is not a templating and never never know them do it to yourself for some of the people in this stream uh who are watching might know the old days of like net where you had code behinds where you have a code behind some sort of a template and you would always use the code behind and nobody would ever understand and it's just horrible and that's what you see in lots of these plugins with WordPress where everybody has a different style of coding and it becomes Messy as all hack and this is my history with it maybe that's why I'm so bold and I'm I've been pained by this no it's not because of this it's about these net things but look I have those dreadlocks and I'm from exactly and I'm only remember I'm mostly in PHP so maybe maybe J has hit you like this maybe I maybe JavaScript did this to me I'm sure it did anyways and with that bombshell this was it for today thank you so much Ma for joining us and ex giving you or giving us all this magic because if I had just gone in and tried graphql from workers and I saw this HTML I would just just quit like no no way but at least you know there's plugins all the things so thank you for that I'm really I'm really happy to be here and oh and I see I really see that Brian is full of great faults especially this one Brian is our age so he has history like us with this stuff essentially oh God where can people find you online uh I mean in theory you can find me also on LinkedIn but my like the my place to go it's always it's always Twitter it's uh can I put it to me in the private chat I'll put it yeah I will so let me wait a second it will be all let me just grab that and put that on the screen for you while we you can read that out for and yeah and exactly I totally agree with Brian because this is also a cool part about twig the moment when you learn twig you learn that you at the same time learned so many other templatic languages I mean if you if we look at how templating looks in JavaScript yeah it's quite similar it's like must mustach mustach variable mustach mustach isn't that like the mustache JavaScript stuff is basically based on this right uh if I remember python was if I'm not wrong python was first with uh with with their implementation and based on this all the rest exactly yeah but it was I mean really for me it was also very interesting to see how my because my wife is also a developer she's more on the front end side and I remember that she also hated this part with PHP with all those Echoes and everything yeah me too and the moment we introduce twig it turns out that no it's not a problem anymore there you go um I just put your Twitter handle on the screen and as a last one yes we are too Brian yeah it's awesome anyways thank you for watching everyone and we'll see you next week cheers see you bye bye