Headless WordPress in Webstudio  ## Metadata - Author: [[Brendan O'Connell]] - Full Title: Headless WordPress in Webstudio - Category: #articles - Document Note: --- tags: [#headless, #wordpress, #CMS] Author: Brenon Source: YouTube Video Reference: [YouTube](https://www.youtube.com/watch?v=LyfQTv4cKQs) date created: 2024-10-30 15:30 --- # Title: Headless WordPress in Webstudio ## Table of Contents: 1. [📝 Summary](#-summary) 2. [📖 Main Content](#-main-content) 3. [🗒️ Notes](#-notes) 4. [📖 References](#-references) 5. [🗣️ Paraphrase](#-paraphrase) 6. [📰 Newsletter](#-newsletter) 7. [✅ Action Items](#-action-items) 8. [🧪 Hypotheses](#-hypotheses) 9. [📊 Methodology](#-methodology) 10. [❓ Questions](#-questions) 11. [🔮 Future Research](#-future-research) 12. [💡 Implications](#-implications) 13. [🧠 Learning Styles Assessment](#-learning-styles-assessment) 14. [📊 Accessibility Assessment](#-accessibility-assessment) 15. [🌍 DEIB (Diversity, Equity, Inclusion, and Belonging) Assessment](#-deib-diversity-equity-inclusion-and-belonging-assessment) 16. [✅ Logical validity](#-logical-validity) 17. [🔍 DARVO Analysis Prompt](#-darvo-analysis-prompt) 18. [🔍 SEO Evaluation](#-seo-evaluation) 19. [🎯 Conclusion](#-conclusion) ## 📝 Summary: This video guide by Brenon explains the process of setting up a headless CMS using WordPress, Webstudio, and REST API. The walkthrough focuses on retrieving content from WordPress and displaying it on the frontend via Webstudio, highlighting key features such as post retrieval, dynamic page creation, and nested data collections. ## 📖 Main Content: Using Webstudio as a presentation layer, Brenon demonstrates how to pull data from WordPress using REST API and dynamically display it in a grid format on Webstudio's frontend. The tutorial covers: - Setting up Webstudio as a headless CMS. - Integrating WordPress with Webstudio via REST API. - Implementing data collections for posts and categories. - Creating dynamic content pages based on URLs. - Additional styling and content organization tips. ### 🗒️ Notes #### **Overview of Headless CMS Approach**: - **Decoupling Backend and Frontend**: - The headless CMS approach uses WordPress solely as the backend, handling content storage and management. - Webstudio, a separate frontend platform, handles how content is displayed to users, enabling high flexibility in UI design without the need for WordPress themes. - This setup minimizes dependency on WordPress’s rendering capabilities, offering greater control over frontend presentation. - **Advantages of Headless CMS**: - **Performance Optimization**: Since WordPress is confined to backend management, frontend display and interaction speeds up as it’s served by Webstudio. - **Enhanced Security**: Separating the backend WordPress and frontend Webstudio reduces exposure to vulnerabilities since the data isn’t directly served by WordPress. - **Scalability**: The separation allows more scalable implementations, as different frontends can be swapped or upgraded without disrupting the backend. #### **REST API Integration and Usage**: - **REST API Basics**: - REST (Representational State Transfer) APIs provide a way for different software components to communicate over the internet. - In this context, WordPress’s REST API fetches post, page, and category data stored in WordPress, enabling Webstudio to display content dynamically. - **Practical REST API Application in Webstudio**: - **Endpoint Setup**: REST API endpoints (e.g., `wp-json/wp/v2/posts`) are used to pull content. This video demonstrates connecting to specific endpoints to retrieve post data in JSON format. - **Resource Creation in Webstudio**: - The setup includes defining new data variables within Webstudio for each content source. - Data variables serve as dynamic “containers” that can be filled with content from REST API calls, allowing easy updates and retrievals. #### **Data Collections and Structuring Content**: - **Data Collections**: - Collections are dynamic groups of data items, such as posts or categories, enabling Webstudio to organize WordPress content in a structured grid or list format. - Each collection item in Webstudio can correspond to an individual post, allowing for templated displays across multiple content pieces. - **Nesting Collections**: - Webstudio allows nesting collections, meaning one data collection (e.g., posts) can contain smaller sub-collections (e.g., categories) within it. - This nested structure enhances content organization, especially for category-based displays or tags attached to each post, adding flexibility and richness to the layout. #### **Dynamic Content Pages**: - **Dynamic Page Setup**: - Individual pages are created for each post, allowing users to access detailed information on a separate page by clicking a post. - Webstudio’s dynamic path feature allows URLs to be generated based on WordPress data (e.g., post slugs), making each page unique and directly linked to its corresponding WordPress content. - **URL Configuration**: - Webstudio’s dynamic page URLs pull data from WordPress slugs, creating human-readable and SEO-friendly URLs. - This setup supports a smooth user experience, with each post automatically routed to a unique page as Webstudio dynamically creates paths based on WordPress metadata. #### **Styling, Layouts, and Visual Customization**: - **Basic Grid and Flexbox Usage**: - The tutorial leverages CSS grid and flexbox layouts, with Webstudio allowing easy manipulation of content alignment, grid columns, and row styling. - CSS adjustments for post containers (e.g., 250px width) keep layouts visually consistent across different devices, enhancing the user interface. - **Responsive Design Adjustments**: - While not the focus of this tutorial, Webstudio’s frontend flexibility allows for media queries and other responsive design adjustments, enabling developers to optimize layouts for desktop and mobile viewing. #### **Dynamic Data Binding**: - **Data Binding for Real-Time Updates**: - Dynamic data binding is achieved by linking Webstudio elements directly to WordPress data fields (e.g., titles, images, excerpts). - The process involves selecting a data source in Webstudio and mapping specific fields (e.g., `title.rendered`) to frontend components, ensuring content auto-updates whenever WordPress data changes. - **Expression Editor for Fine-Tuned Control**: - Webstudio’s expression editor allows for custom data expressions, like appending multiple values (e.g., concatenating slugs), providing developers with granular control over how data is presented. - Custom expressions allow for adding conditional display rules or creating complex data relationships. #### **Post Categories and Nested Collections**: - **Category Display on Posts**: - Each post in Webstudio can display its corresponding categories by utilizing nested data collections. - Categories are retrieved from WordPress’s REST API, organized, and displayed below each post as links or tags, making navigation and content discovery easier. - **Dynamic Category Selection**: - Through Webstudio’s collection options, the category data is dynamically filtered, ensuring that each post only displays relevant categories without additional configuration. #### **Individual Post Page and Linking**: - **Single Post View Setup**: - Each post link on the main page opens a single post view, generated dynamically via Webstudio’s REST API integration. - Unique post pages eliminate the need for a traditional blog template in WordPress, instead allowing Webstudio to manage post-specific displays. - **Deep Linking for SEO and UX**: - Each post page in Webstudio has a unique, keyword-rich URL that aids search engine optimization (SEO) while enhancing user navigation. #### **Content Embedding and Layout Consistency**: - **Embedding Excerpts and Full Content**: - Webstudio uses a “content embed” component, allowing the full content from WordPress to render on single post pages. - This feature ensures styling consistency across pages, with embedded excerpts and full content maintaining a cohesive look and feel throughout the site. #### **Challenges and Considerations in Headless CMS Implementation**: - **Image Handling and Variability**: - Webstudio requ - Document Tags: [[headless]] [[WordPress]] - Summary: 🚀 Welcome to this Webstudio + WordPress Tutorial! In this hands-on demo, we'll explore: 🔌 Connecting Webstudio to The WP Minute blog via REST API 🎯 Building dynamic collections that adapt to your content 🔄 Creating seamless dynamic single-post pages 🎓 Understanding headless CMS architecture ⚡ Mastering dynamic URLs and routing Learn about Webstudio Headless CMS: https://webstudio.is/cms Join this channel to get access to perks: https://www.youtube.com/channel/UCwuZcJEi6HwIrcyUQ4U_aoQ/join ----------------------------------- 🌟 Brendan O’Connell 🌟 🎨 WordPress | Design | Development | Automation | Tech 🖥️ Want to connect or work together? 🌐 Website: https://brendan-oconnell.com 🐦 Twitter: https://twitter.com/brendanocwp 🔗 LinkedIn: https://www.linkedin.com/in/brendan-o-connell1/ ☕ Buy Me a Coffee (or Tacos): buymeacoffee.com/brendanoconnell ---------------- Aff Links: Get Bricksforge: https://bricksforge.io?aff=d768d61b Get ACSS: https://automaticcss.com/ref/138/ Get Frames: https://getframes.io/ref/11/ - URL: https://www.youtube.com/watch?v=LyfQTv4cKQs hi welcome back brenon here in this video I'm going to be taking a look at web studio and specifically the CMS functionality to build a head use WordPress as a headless CMS and we're going to render that data in web Studio you can see here I've got some posts rendered these are all from the rest API and on the front end I can click to view any of these and it takes me to that specific uh post right so for this tutorial we're going to be looking at the rest API headless WordPress um and we're going to be bringing uh the posts in from the wp minute I'm not affiliated with them or anything although I was on the podcast a few months back uh but just shout out to them they do some great stuff for WordPress news and just general WordPress uh tutorials and things like that so um definitely check them out uh so what we're going to be doing is pulling that data in with the rest API and rendering it in a collection in web studio so first of all what is web Studio web studio is a advanced open source website builder you can self-host this you can export it as HTML CSS and JavaScript and host that wherever you'd like um for this tutorial I believe we're going to be needing the pro version because the pro version has CMS and that lets you use any headless CMS so if you're more familiar with WordPress Builders uh importantly web Studio does not have a CMS built in you can't create blog posts and create categories and Link everything together but instead you use an external CMS like WordPress or you could use any of the other uh tools supported um you know I've set it up with air table I've set it up with notion um I think I did use high graph wants to and then you can use other ones that are not on this list basically anything that supports an API um will allow you to connect into web studio and render your stuff on the front end so it's the idea of headless CMS where you have a Content layer where your content is managed and new content is created and then a presentation layer uh that you take that data and render it on your front end of choice so again in this one we're going to be checking out web Studio the same Concepts that apply to uh rendering you know react apps and spelt and View apps and things like that so so that is what you need the pricing then is $20 a month um and I think they're runting a special right now that's $10 a month so you can try that out again you need that to to connect to the CMS version you can try out the just the Builder for free and you can host a domain there and you know it's pretty generous but you can't do these more advanced functionalities um and so let's just jump into it shall we I'm GNA hit the dashboard and I've got a bunch of projects here I'm just going to make a new project we'll call this um WordPress demo and I like to start with my Dynamic data first before I really do anything on the canvas so we could do that so on the body level here I'm going to go to settings and then I'm I have data variables and you can see I have various system settings but I'm going to create a new um data variable we'll call this WP minute posts and for the type we're going to choose a resource and that allows us to put in a rest API or a graphql um URL endpoint and then we can choose the method to what we want to do to to get posts or post things or whatever so what we're going to do is come back to the wp minute I'll copy that URL and after that we'll just connect to the normal rest API so wp-json uh if I can spell SL WP slv2 slost and that'll that'll hit the posts endpoint um to see all our data so once that's done I can it says Jason now because it's returned to Value so I can inspect that and just like that we have our data we can see the post ID we can see the modified dates we get all those uh endpoint uh pieces from the rest API right so we can see the status and there's our rendered title right there's our rendered content and if I scroll down you can see there a big long list because it's got all the different posts so here's another post right here from Fe freelancing to product success right scroll down more and you can see it's getting all that all that wonderful data from WordPress so here's the the next post right so it's getting probably the first 10 posts we could append this um to to get more than that so we could do [Music] um what is I don't even remember what the endpoint is let me just check my thing here so it's per page and I I was just testing it here in Postman and so we can append that there and that'll get the next uh 30 page right so it's going to be a longer list even um and so now now we have our data connected here let's try and render that on the front end so uh what we can do just's one thing to keep in mind it took me a while to find this but if you go to Marketplace and then C IQ libraries Das sections uh that will give you some wireframes we're just going to use these to speed this up so I'm just going to pick like this one all right and and we'll do just very little styling I don't I'm not going to spend time doing styling in this tutorial really um I'm going to I guess put like a class on here I spelled container wrong awesome let's delete that uh container and we'll turn this into uh I don't know like 12200 width and the other thing we can do is we can do grid I guess they don't have grid built in yet so you have to type it in display grid and then grid template uh columns we could do repeat um 1R comma three I got the wrong one three one onef um all right repeat 3 1fr okay well I don't know if that's working it is okay so that's working now what we need to do is actually delete this data so if you're familiar with bricks you know that there's uh the query Loop right um and so there's other builders obviously that have that it's the same concept where we're going to iterate over a collection of data right so I can just add this in there and within our collection I can just delete the placeholder text in there and I should be able to just drag my column into it okay so that's perfect now it's um iterating over the three things in there right I can delete that oop let's not delete that uh we can delete this box in between and so there we have our collection and now we just need to basically take from our body level where we have the the data variables here right we can see this this data is coming in now we just need to that connect that to the collection here and so on my data for the collection I can delete all this and I can say I want my post and then we use JavaScript notation to just do Dot and then we select the data and if I hit dot again you can see there's all my there's all my posts there's my 30 posts right it starts at zero goes to 29 and we actually don't want to go to the individual ones we want to just stay on the data level and so I can just select that I can click here or wherever just confirm that and then it's going to pull in all that data that's it's looking a little weird for now but we'll fix that uh but we can go in here and right we see our data uh in fact if I open the expression editor we'll see all that data come in right so now we can bind it to um to our collection all right and so let's see we our grid is not working properly here so it looks like it's still flexing so let me just go to the wrapper container here and uh I can switch to the local Styles you can see that red and I'm just going to reset this value yeah perfect so then we just have our grid okay um and so wonderful so that's that's what we need we were iterating over the data now we just need to bind our data from this collection and bind it to the individual item so just like in bricks you would select like the The Heading and you would go into your content and instead of using a static value right we would select our Dynamic data and I can delete what's in here and there we can see we have a new uh Json um object here where we can select that and then I'll again I'll use the dot to select the data that I want within it all right so I can select Dot and there's all the individual items on that post right and so if you know what you're looking for you can start typing right but you can also just keep scrolling down to uh get the thing you want right it's in alphabetical order which is nice and there's title and you can see it's it doesn't have a value like type equal post it has a Json value attached to it so that means there's uh child data below that so we can select that and we don't see anything yet right so we can hit the period And there's our rendered uh title so I can select that and uh that should all be all we need if you hit the period nothing else comes up after that that's the last item in that uh Json object so just like that I can then click off and there we go I have my title right so let's do the same thing with the other data so I can go to my image and I can go to my source so instead of the placeholder we'll select a dynamic value all right so I can select the collection item and we can scroll down to see kind of what we have in here images and actually really any WordPress site can have their data structured slightly differently so um you just want to make sure that you're picking the right thing sometimes it's called featured media um but that just returns an ID string um but the wp minute was nice enough to to put stuff into adjacent object here for my featured image so and I can see SRC for source so I'll select that and then again we're going to press the the dot notation to find the object that we want within that right so dot and then I can see some values here those are probably like height and width and but we want the URL right so I can select that cool and just like that we have the particular um post matched with our title the the image matched with our title so we could um put a little bit of styling so I'll just throw div in here uh again this is not a style tutorial so I'm just going to do this real quick and it's not the best way to do it but um I don't know we could do like 250 pixels Max and then overflow hidden all right so now they're all at least the same size all right so we're looking good we have a a grid of 30 posts right we have all the different oh there's me um we could now uh put in like the the excerp right um I'm just going to save you the time so if you try to do it on this regular text element it might bring in some of the HTML formatting and you don't really want that so uh we're going to pick a different item we're going to pick a Content embed and I'll delete this regular text one here and then within this again I can go to my settings and I can say uh let's pull in the data that we want right so I can pull in my collection data I can pull in um excerpt and that will pull in my excerpt and you can see it's got a it's got some errors you can see some broken code there um that means I didn't select all the content I wanted I want the rendered content so let's select that and like that that seems to be working so we have all of now we have our Dynamic um image Dynamic title and dynamic excerp right so we're looking good um let's talk about what we're going to do to make this even more Dynamic now what if I want to click on this and read the whole article okay so you can do that very easily and in web Studio you just come up to your pages and we're going to make a new page here and we're not going to make a whole page for each blog post right we're going to use do this dynamically so I'll call this um posts I guess and for our Dynamic path we're going to create a dynamic value here and do slash and then colon and type in something like Slug and that will create a system variable that we can use to pass in stuff so let's create that page and it's a blank page so let's just go quickly add a wireframe and uh let's see what you got um something with blog maybe Blog blog blog here's some blog posts um let's select this one all right so let's also put below this another box and let's put a box within that we'll put uh container oops we want a class called container right uh although that has my grid on it let's just make um let's let's just do it at the ID level it's fine um something like 800 pixels wide and we'll do auto margins to center it all right so this is where we're going to render our content um and so I'm going to do the same thing I did before I put a Content embed let's drag that in there and we can delete that text um and so now what we need to do is basically pass this data um from the slug value into this right okay so let's see what we need to do is I'm going to go back to our post here uh sorry our homepage and I'm going to grab the um rest API URL here that I used and we can reuse this actually for the single page um and so I will go to the Post page and we'll add a new uh variable we'll call this uh WP minute single post right and we'll pass in a resource value again and instead of the per page um we're going to pass in a slug value um and so I can do see I think it's like slug equals that's going to bring them all in and then what I need to do is pass in that slug value we created in the previous uh step so I can open up my expression editor right uh or just like here and then um so this is a static value and then what we want to do is pass in the dynamic slug value right so we can say our system variable and we can say uh we want to choose our from our pams right we can do another period And there's our slug value okay so if we click off that it's going to give us an error unexpected token all right so what did I do here um on the other one I passed in oh I need to concatenate it silly silly me all right so on this we need to um concatenate our system variable so we're just adding it to that slug value right there so system prams slug and like that it says now slug is undefined okay so we can test that by um putting something in here in the slug so I'll just go back here to my posts on the my demo site I'll grab that and I'll paste that in there and that looks like it's working and I'm going to grab another one as well so we can test more than one um paste that in there as well okay so now I if I inspect this I can see it's passing in my slug so from freelancing to product success with Laura Elizabeth and if I go up to uh I guess I have to grab it again how to use ACF blocks if I paste that in there and hit enter right then if I go back to my data I can see there it's passing in my um the correct slug now right so it is connected now we just need to bind all this to our single post okay and it'll be passed in dynamically so on our heading let's just get rid of this static content again right hopefully it's starting to kind of come together and we can pass in our our rest API call and then we want to pass in the data and we want to pass in the the value of that and then we have all of the individual post here so uh we can search for title and again we want to get not just the title but we want to get the rendered title so there it is uh let's just delete this we don't have that and again we can do the same thing with the rest of our sources here we can pick our single post data we'll pick data and then we'll um again I think you can oh you can use the arrow keys to go down there's our featured image and there's our um featured image URL so there is the featured image so it is working and then we can do the same thing down here again with our content embed we'll get rid of everything that's in here and we'll select our data and then our uh content and then our rendered content okay so there it is working wonderful so now what I'm able to do is um if I want to preview another URL or whatever I can go back here and we'll select the other post all right so that is working it's now pulling in that post's um title that post featured image and the content of that post and you can switch switch uh between these right so how do we connect that to the list of posts we'll go back to our homepage here and let's turn this little link here into uh well let's instead of view map let's just do read post and then for our properties for the Post we will select um again this little Dynamic data selector right here for the URL select that and we can select our uh collection data right and then we can find our um slug Slug and so that will again dynamically pass that data in and so now if I come here um I can select let's see automatic vers WP engine read post doesn't seem to oh doesn't seem to be working I know what I've done wrong though because that is working it's just what I needed to do is also pass in um my Dynamic value here for slash uh post slash and then concatenate that together with the collection item and now I should be able to hit read post and that'll take me to the Post right so that's you got to make sure that you pass in your Dynamic values and that's just basically from what I named the page posts like this could be anything else um but if changes you want to make sure you update that okay so that is what I forgot to do there uh but yeah that is basically working if I go to my homepage and view this I can read private Equity right private Equity go back we can there's no talk we can uh read that post right so my styling is a little wonky here right but uh you get the idea um so that is basically how you use the like a WordPress as a headless system in another Builder uh with sort of very little code so all right so one one other last thing I want to show you is if we go back to our homepage here um one thing we can do is also add collections within collections you can iterate and have U nested queries so what I'm going to do is um let's just add another box and let's uh let's bring that up here and let's add our categories in here so let's just add link and then um let's add a collection add a collection here and oops this is the wrong one get rid of that text there let's drag that link in there and let's get our categories in here so what we can do is also go to this collection so you can see it's nested within this and I can uh just delete all this stuff in here and we could again grab our collection item and let's grab the categories categories you can see I don't want to get the individual categories I want to just delete that period and get all the categories for each post right so you can see that some of them have different numbers right because not every post is in every category and let's just connect the uh text up here I won't do all the linking and stuff like that we'll just do the uh let's see collection item this one no it's like this one and then the no collection item text expects a text string so let's look at our data here let's instead of our categories let's get the category um category category info all right so that's going to return a Jason object let's get that and then uh that's going to get that so um then we can go back to our link everything's a little broken right now we'll select that other collection item and we'll get the category name all right so there we have uh the actual categories for each post right so here this the second post here freelancing marketing Etc so you have those um categories as well so you can uh Nest collections within collections so that's um that's that um I know that was a little long but uh hopefully that was interesting if you're interested in more of this kind of content let me know now remember you can also do all this with air table or dirus or strappy or payload or any other CMS really um that again that uses API that has rest API or graphql support you can create Dynamic sites pretty easily and so I didn't make any pages on I I made two pages I made a homepage with my posts and I made an individual post page so I haven't created any other additional pages in here but I have this data now rendered on my site and I mean the possibilities are really endless and and then you can also think about combining um CMS together right that you could have your Post in something like WordPress or ghost where you have a Content editor uh that's you know content workflow where people are approving and Publishing posts um but let's say you want to bring in some some data from your air table or you want to bring in some Google sheet data or you want to bring in something from notion you can combine that together to create really Dynamic sites so that is basically uh what I wanted to show you in this uh hopefully it made sense and let me know what you think in the comments uh does this stuff interest you are you needing some kind of solution where you have cont you have clients where they have a bunch of data in like their air table and you want to make sure it's synced up to the to the front end um this is really gives you all those possibilities so that is what I wanted to show you and let me know what you think down in the comments, Headless WordPress in Webstudio, Brendan O'Connell, 01jbg1ta6ky43nb7rkj8mmyxqm.