How To Use WordPress as a Backend to JS Apps (Headless WordPress)
- December 26, 2023
- Posted by: MainInstructor
- Category: Go JavaScript PHP
Video Title: How To Use WordPress as a Backend to JS Apps (Headless WordPress)
Hey guys welcome to this video series in this series I will be showing you how to create a headless WordPress website and essentially what that means is the website backend data and content is all going to be created through WordPress back-end but the front-end is going to
Be completely separate as far as the design and that theme goes so this will really unrestricted form using any wordpress templates or any complicated PHP code or anything like that so if it gives us a good opportunity to create JavaScript applications while still having your client able to change
All the content on their website using WordPress so let’s get started in this first video I’m going to be creating the actual WordPress back-end so very first step is going to be to download the latest version of WordPress saying I got a wordpress.org /downloads click down the WordPress and save it wherever you
Like open up the file alright and so here you go we have our freshly downloaded WordPress file we’re go ahead and rename this too so now what we need to do is when you set up a server to run our WordPress website so I’m gonna be
Using map you can use whatever you like this is just the easiest for me to set this up you can just Google map and download it real quick and so what I’m gonna do is I’m going to set the document route to run in our new log select ok start the servers
Okay and if it doesn’t automatically load the map starting page that’s fine it will take you to it’ll take you to localhost 8080 or you can I believe you could change the port yeah you can change the port if you want it on something else but by default it’s a 288
And so if you go here this will be the default WordPress setup so before we do this we actually have to create the table or the database in our server so if you go back to your localhost 8080 date and we go to slash PHP my admin’
We’re going to add a new database then we’re call this is great okay and now we have created our database we don’t need to create any tables or this will do that so now if we go back to we can set up our WordPress site so we’ll go
Through the setup and the database name is going to be a long username the default one for man p3 as well as the password and submit run the install well this stuff really doesn’t matter too much or on the localhost very weak passwords [Applause] in here and actually you’re gonna even
Though it’s localhost when you move this site over to your production you you don’t want your search engines indexing with this site because this is only gonna be used for the admin so this is actually gonna be on a subdomain or a separate domain altogether then where
Your actual site is gonna be hosted it’s very important to note that you are back-end your WordPress back in it’s a completely different web site than your actual front and website so you don’t want this to be index on search engines trying to install it again okay
And so by default the latest version of WordPress has the headless API already installed so if we go to our – Jason this will show us all of the data of our website of our WordPress site and this is essentially the data we’re going to use for single page applications with
JavaScript but there’s a few steps we need to do in order to make this a little bit better so the first thing is gonna we’re going to create we want to be able to create custom post types so you see how we have posts right here now theoretically we could create our entire
Site using different posts and using different categories and sorting through all of that but there’s a much easier way to do this so we’re gonna go ahead and install the plugin I’m just gonna go to add new now we’re gonna search for custom post type install it
All right so let me show you an example why you would want to use this let’s say you want to add let’s say this is a website where a portfolio website where you’re showing off all of your projects that you’ve done so you would want to create a whole section just for your
Project so when I say let’s type slug is projects plural simulator project now there’s a couple you can mess with all these if you want it really doesn’t matter too much this is just what you see in the back end here so if you are designing this for a client you may want
To look through here and make sure it’s all set but really there’s two things you want to make sure you want to make sure showing REST API is set to true and then you want to set the base lug to be if you just search for rest that’ll be
The first thing that shows up all right so we’re gonna scroll all the way to the bottom and hit add post type okay so now let’s go ahead and add a project so we’ll say and we’ll set I don’t really have a featured image so we’ll leave
That blank right now and we’ll go ahead and to publish okay so now if we go to the endpoint and we go to slash WP / v2 slash and then this is gonna be the slug name that we just set in the settings when we created that custom post type
So if we say slash projects this is the data of all of our posts that our projects and just to make this a little readable I’ll go to on minify com1 minify and we kind of see how this looks so basically it gives you the idea
Of the post the date the link the actual wordpress link you probably will never use this because you don’t want them to actually go to the WordPress site it gives you the title right here title render to give you the content this is a you know what you actually put in the
Body part right here this is where the content shows up and you can put you can put all kinds of case you know in there so you can put you know formatted you can add plugins to format this better and add bootstrap in there and all kinds
Of things and that’ll show up in here which is nice and it gives you the feature media this is just the ID of the let me just put a featured image here let me find one real quick okay so I’m just gonna put in the logo set featured
Image update it and then go back to JSON / heavy p2v2 projects copy that again minify it let’s see if we can find that media okay so you can see the feature media case fought and that’s just the ID of the media file and I’ll show you in a
Second how to actually get the source code have that made it you can see it’s right here but we don’t actually have access to the small large or any of the actual other details such as the alt tag of the picture or anything like that so I’ll show you in a second
How to render that a little bit better but for now the next step would be to create custom fields so let’s say on your projects you want to add something like the stack that you use to create the website or you want to put the date
That you created the website or the date that you are creating the website so to do that we need to add another plugin and this is gonna be called advanced custom fields so we’re gonna add a new one and it’s not this one it’s not the
Font awesome field it’s this one the one that has over a million installs didn’t activate it and so we’re gonna add a custom field create a new one and these custom fields are going to be specifically for the project so we’ll just select projects and before we
Actually add them let’s set the rule to only show this custom field if the post type is projects ok and we’re gonna add a field I want to call this step and this is just gonna be there’s gonna be a text field but you can add all kinds of
Different fields in here and so like you know if you want to add an email or a number a specific number you can do that or even do like select or choice options – these are really convenient so if you want to say you know is it a is it
Mobile friendly and you have a true or false button that way you can easily see if it’s mobile friendly by that true or false by you but for now when you start text and you can put in field instructions to give and this is essentially giving instructions right next to the field
Telling them what this is so we’ll just say and this is not mandatory at all but if you are creating this for a client then you would probably want to put this in required you can set it to you acquired or not in this case we’re not going to make it required
I’m not what we can decide later if it’s filled in then show it if not then don’t ok leave all of that add another field and this field is going to be the and then we’re gonna actually set this to be the jQuery date picker okay and then
We’re gonna go to the top and go to publish so now if we go to our projects and we go into this one we will see the stack and the date created so we’ll go ahead and say I will set the date let’s just say I did it today which is a lie
But I will go and update that and now if you check back to that JSON data WP / b2 project um I can verify this if you like but I’m telling you right now those custom fields are not gonna be seen nowhere in here is any of the data we
Just added and that’s kind of a problem luckily there’s a great solution which is another plugin I know this is very plug-in heavy solution but since all the plugins are strictly for the backend it’s not going to affect the front-end performance so it really doesn’t matter how many plugins you put on here
It’s just a matter of cleanness and messiness as long as you keep everything organized shall we find I’m just we’re gonna have another plug-in called a CFD recipe yeah and this will basically weird which one is it it’s this one this will just make those fields accessible
And I rape yet so now that we installed it we activated it if we refresh it the JSON you’ll see there’s more data in there and if we unmanned fly it you’ll see right here we have this field called ACF which is the advanced custom fields within that object we have the stack
Laura on the date created which is the date right here okay and so let’s see the last thing I want to show you guys is how to create or how to get your images your featured images to show up a little bit better and to get them a
Little easier so we’re going to have another plugin and this one’s falling better recipe featured images oops and it is the first one and activate it so now I believe refresh this once again we get a whole lot more data so please minify this well see we have this new
Object called better featured image and what this does is it gives you all of the details including the width the height the file the sizes and this is what I use a lot is the sizes because a lot of times you don’t want to load the
Full image if you have clients that are uploading you know 3000 pixel images you don’t want that rendering you don’t want a hundred of those rendering on your website I’ll slow it down tremendously so WordPress has a great condenser in which it automatically recreates the sizes and so usually what I’ll do is
I’ll say if the you know medium or if the large file exists which in this case it doesn’t because the file isn’t big enough for it to have a large scene has a medium large if it’s big enough it’ll have a large so I’ll say if it does have
A large then load the source URL from the large if it doesn’t have a large then just use the the source URL overall which will just be the normal full size rendered okay all right so that’s pretty much everything you need to know in order to set up your headless WordPress
Back-end to send all of your data up to wherever it is you might want to get so check out the next video which I’ll be releasing soon which will show how to take this data and create a website out of it all right I’ll see you guys in the
Next video by the way if you guys want to learn more about all the different endpoints you can use to call data and your headless WordPress application just head over to developers on wordpress.org slash rest – API and this is the basically everything you need to know about the
Backend and connecting to it and grabbing different things so for example you can pull all of your media files by using the endpoint does it tell you here yeah so it says use this endpoint so you know so for example let’s go ahead and do it here so we’ll copy that
And this is just a get request so we can just enter it right into our browser and it should work and this will get this is all the media that we’ve uploaded and so you can then filter out which media media you want based on let’s see you go
Based on the source URL based on what file what forty-foot maybe you want to get all the media files that were uploaded in the month of September you could just look for the not oh nine 2017 slash onine and once you get the data you can add in all these extra
Parameters so if you want the want to search all the media files that were uploaded by the author let’s see do I have author in here author so right now the person who uploaded these is the ID of the authors one so if we were to say
Author people one it’s gonna show the same thing because there’s only one author in here but that’s how you would do that and then one one a caveat is that by default WordPress will only load ten and that’s per page so if you want to load more than ten media items and
One call you have to use this per page parameter so if we say question per page equals and 100 is actually the maximum amount you can do it kind of sucks but it it’s understandable because you really don’t want to be loading more than 100 images on your site at once and
So this is going to show the same thing because obviously there aren’t 100 images in here but if you do need to load more than 100 images which I have done in the past you actually need to load multiple requests so the first request is going to be just
Like this and then the second request is you’re gonna add another parameter so I’m going to say and page equals two and page two would give you the next 100 queries now obviously there aren’t that many query or entries here but if we say
Per page we just say one all right now I have two well if you have more than 100 and you say per page 108 equals two is gonna load the next hundred images okay so I encourage you to go through this I wouldn’t say go through every single
Part of this documentation but when you need it when you need to load certain things look in here it’s very good documentation and I can’t recommend it more all right I’ll see you guys in the next video bye bye
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
a jQuery option can be good not just react or vue
Thanks! I'm building apps in Vue these days and some customers still wish to use WordPress. This is a great option.
Great tutorial. Thank you
Hey! Looks like the plugin "Better REST API Featured Images" is not available anymore. Could you please suggest an alternative?
Thanks for the tutorial btw. 🙂
gah, mechanical keyboards – I now there's comments here already but they should never be used for recording YouTube videos – it's harsh but it's awful noise when someone is trying to learn from your videos 🙁 Good work though on the content 👍🏽
Can, I charge my clients for Building websites on WordPress?
Hi, thanks for your videos and for your work)
wp-json provides access only to 10 last posts. Can you tell, how to add to it all another posts?
Nice video but i think no need to put in video how to install WP. Also Please buy less noisy keyboard 🙂
Hey loved learning from you. Can you please give a tutorial about node is or react is? Or a thing else for that matter.
ooooh boy , you are good ! another subscriber !
i get the 2 seprate websites, so does that mean owning/ paying for 2 domains.?.. so in the real world where woudl you have 1 wordpress site and many other sites using the the same blog content? Even in journalism you have many authors feeding to 1 wordpress and then 1 website. // is it for devs who want to keep the main website off wordpress completlely? thx
Thank you for this great video.
the keyboard sound is aweful
You definitely should install this chrome extension – https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa
what a waste of time this video only shows how to install a bunch of useless plugins that could be avoided by simply editing a child-theme
will be vue.js in front connecting?
There is a Chrome extension that beautifies your JSON automatically so you don't have to keep copy-pasting. https://chrome.google.com/webstore/detail/json-viewer/aimiinbnnkboelefkjlenlgimcabobli
Can you make a tutorial for how to use wordpress with react with react router? Like linking to a post to read the full article and perhaps a home page? Thanks man, this particular tutorial taught me so much! Really appreciate your explanations and the effort you put in to this little BIG guide!
your typing sounds louder then your voice.. hurts ears a lot.. specially in headphones..
Do you know anything about Django cms? I