 So, how many of you know what endless WordPress is? Like, at least, how the town works. So, it seems like, a very less audience knows about this. So, you think about WordPress, what do you think? You think there is a content and a backend. But what endless WordPress is, is WordPress without frontend. What do you think of this? WordPress looks like this, and there is also a backend with it. But what endless WordPress means is that there is no incredibly tight frontend, but what exists is a backend. Okay, let me clear this. Endless WordPress is now using WordPress, only as a content management system and as a frontend. Endless WordPress does not decide the looks of the frontend and allow us to explore this indeed. Here's how it works. In WordPress, there is a WordPress backend which is connected to the marsicule database, like this. And then there is a frontend which fetches the data from marsicule database, and this is not headless. What is headless is when that WordPress backend bits out, bits on ATR, like this. And then this best ATR can be connected to literally any frontend. But in this talk, I'll be talking about VN frontend. I'll be giving you a demo of VN frontend, and also we'll show you the core and how this goes. So there are a few basic assumptions I'm making here. First is, you know what WordPress is. Second, you know a tiny bit of JavaScript, and yet that's it. So, one thing, like why is this? If you have WordPress and you have a frontend with it, then why would you need headless? So, reason number one, separation of concerns. Like if you have been using React, then you know what this is. But in WordPress, what I mean by this is that you have a frontend team which will work on frontend and another team on backend, and that will be how you'll be separated in the concerns. Creativity with modern frameworks. In DSP, you know it's all about reloading and then it fetters the data. It's all server reloaded, server load loaded. But when you use modern frameworks like Vue and React, you can do, you can be more creative. It's not like you cannot be with WordPress. Just so you know, you can also use Vue and React with WordPress teams as well. But it's actually better to keep on the separate. Reason number three, not everyone knows DSP. Like, I'm currently seeing this in a WordPress conference. I don't know DSP. I knew it, but then I switched to JavaScript. And here I go, and now I forget about the PHP syntax. And I'm extremely happy that Vue and React is creating this shift in the WordPress ecosystem about JavaScript into the WordPress world. So, WordPress isn't alone. There are many other CMSs that you can use and WordPress is primarily not as early as CMS, but it can be used as early as CMS. The CDOT IO, Contentful and Better CMS and there are so many more, but I'll be sharing where WordPress is, is what you should be using. Reason number one, work knows WordPress. Your friend knows WordPress. Your client knows WordPress. You know WordPress. 30%, okay, it's not 30% right now, but it's like round up, 30% of WordPress. Work knows WordPress. Second thing, it's easy to use. I use WordPress, like I made my WordPress blog and I was very old, and the UI is so easy that everyone can do it. Installation is the thing that you might be looking at. Reason number three, well-documented ADR, okay. There is a WordPress 4x, just... So, this is the WordPress 4x and this is the best ADR handbook, so most of what I'm speaking today is from here and when I mean well-documented ADR, I mean this, this is well-documented. You have most of the use cases in here and I'll be sharing to you some basics about it. Reason number four, plug-and-close systems. We all know that it has a very large community and there are many plug-ins, like if you want some book reviews or issues have existed, you cannot create this work, that's using many plug-ins. You don't have to code it or just crash. And then reason number five is WordPress community. What are we? What are all of us? We are a strong community and most of the LSEMSs are still building their community which gives WordPress a pro-con. Reason number six, WordPress is free and open source. You all know this, it's open source, you can have a contribute to it and the community around it is very helpful and it's not due to the WordPress community. So, now let's move on to the technical aspect of this talk. So, the best API is called WPBaseOn. So, what is it? It's an endpoint, just like this. So, I'll be showing you how it works. And the WordPress website. And what I'm showing you is what if you put WPBaseOn endpoint after it. This is what you see. I'm using a Google Chrome plugin which 35cjs on. And this is how it looks like. So, this is not the data that we want. What we want is, I have to show you the Google Chrome window and then come back to slides and then that's the other, it's causing problems here. So, I have to avoid doing that. So, you can do pagination and then you can do custom post-apps. WordPress was made for bloggers but in 2019, it can be used for literally everything. If you don't know how to manage only posts, you can manage recipes, books, issues, and inventory of products maybe and so on. So, each one of them will be your custom post-app and book is your custom post-app sticker is a custom post-app. Recipe is also a custom post-app you name it. You can do everything at WordPress. But what you need to do is that the data of each of these custom post-pipes need to be served to their respective endpoints. Just like you can fetch posts, you should be able to fetch books. And to do this, there are plugins for that. ccp ui.org.m. So, this is a plugin that will help you create custom post-pipes, like not just posts but books and reviews. And then there is ACF. ACF plugin, what it helps you do is you can create fields. Like for reviews, there is a reviewer name. So, you can get such fields using this plugin. WordPress plus React. So, this is, I'll be doing a demo of how it looks like. Just a small question. How many of you have played with APIs and are fetched and done coding before? Okay, that's a really nice of an audience, but. So, again, another assumption I'm making is that you know basics of React. So, yeah, this is how it works. For the index page, what you see is this. When you go to home page, this is built-in React. Just like this, there is a home component and you can see the code here. This is the home page and this is the home page. So, for the post page, what I'm using next day is, which is which does outing by default and it's very helpful to server-side rendering. In this demo, I've now done server-side rendering because it had few problems and I was doing it very quick to just show you. This is the code for the post page. This page, I'm talking about. So, what it does, it is loads from this WordPress front end and back end. This one, what you see is connected directly to this content that you see here. WC Pochee demo, let's just try changing something in the post. This is the post. I'm going to update. And then, we go to this content. This is not a WordPress theme. This is built-in React and that's what the talk is about. So, you should be seeing the new title loaded, this one. So, how it works is like this. This is a post page and to handle states we are using React. We set the loading to true. Use effect is like the lifecycle method in React. And what we are doing is we are fetching the post data. We are fetching post data within the work axios here and so what just happened that you see here is this one. This URL is a WordPress backend. And what we are doing is we are just fetching the post and giving you your per page and parameter that per page has to fetch these many posts. That is there. Okay, let me show you one thing. When you take a look at posts, you see there is an ID, date, there is a slurp as well. And this is about everything about a post. There is a data which is rendered like this, content. It comes in hcml, pxr, and then author. So, what you see this is it's related to each other. So, post with author of one. If you want to find that author, you can do it like this. Slash author slash one. So, if we do that, then we will find the information about that author. This is the author, this is users. Okay, so then we find the name of the user description. So, what we are going to be doing is we won't be making fetches one by one. We will do one fet at once. So, what we are doing is we get the post data and we are mapping each post with this WordPress data. I didn't get that. This is function that I created this time in here. So, what this does is it fetches author, then it also fetches the media query, I mean the media, featured media. The image that you see is that one. You see this one here, okay, featured media. See, that means there is no featured media. I mean, the thumbnail is made to this. But this post has a thumbnail, just like this. You can see the ID of it. And then you can fetch that media by media slash 10. And then we see this. So, how it works is you're fetching media and author and then you're blending this with the data you wanted for. So, if you have fetches with React and JavaScript before, so you get a bit of idea about this. So, we are fetching the post, just like this. If it is loading, it's loading. If it's an error post, have found. And if there is a post, we show the image and that's how it's rendered. So, you can actually see the demo and this, and this, get a URL. So, that's where we add. So, you can have this demo code here. Now, let's get back to the slides. And this is what the start-up get by postline and this is very handy. So, you don't have to create everything from scratch, okay? That was a lot of purpose for extra stuff. This is not the optimal way to do it. What you should be doing is you should be using some start-up scripts to fill out all the data and you can create with these three if you're working with React, React, Gatsby, and next year's. So, that when you see React, I mean, you create React app or you can use Gatsby. With Gatsby, you can have GraphQL fetch your data which is very, very handy. How many of you have all this GraphQL? Okay, so yeah, I got the idea. So, next day is, this is what, there's a server-side rendering of the JavaScript data that you can fetch. Then you can de-plot with Nauder, Asset, or Netlify. You can de-plot contents on Nauder, Asset, or Netlify. And for the back-end, you can use your regular posts as well. Let me tell you this thing, that Nauder, Asset, now supports WordPress. So, you can de-plow your WordPress instances on Nauder, Asset, but then your database instance needs to be bought from somewhere else. And if you know these things, you can use Azure Distribution, AWS, to store them all in one cloud. And that is it for us.