Using the WordPress API
- December 26, 2023
- Posted by: MainInstructor
- Category: BASIC Go JavaScript PHP
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703627676_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: Using the WordPress API
What’s up my name is Jay and in this video I want to teach you how you can use the WordPress REST API okay so this is gonna be the very basic how you can get started but it’s very helpful so now I’m here in the REST API handbook and
You can see I’m in the reference part which they give us all the end points which are very helpful too right now my goal for this video is to get all the posts and get that data and do what everyone whatever I want with that data right so here you can see
The endpoint but then you’re asking okay so how can I get that fine so I’m gonna go here and you can see this URL right here so right now at the end you can see the endpoint right what they’re telling us here this is the endpoint and now
We’re getting all the posts from my website okay as you can I mean localhost but maybe you’re using a domain so I’m gonna go to my pages here my WordPress dashboard I just can see I only have testing the API page that I created and if I preview
This page it’s just a normal page is have like a title and some lorem ipsum text nothing special just a regular page okay I’m gonna click edit the page you’re gonna go there alright so normal and my goal is to create like a template here that I can just select and if I
Select that template is gonna show my posts which are getting all that data using the API cool so I’m gonna go to my code let’s open my text editor and you can see all my files here this is d20 which one is it 2016 theme alright so
I’m gonna create a page so I’m gonna just create a new file here I’m gonna save it and make sure you are in your theme file so let me take a look here it’s 2016 are right here this is my theme so I’m gonna call it whatever I want honestly um
Let’s say awesome page dot PHP right save that alright so I’m here he’s all blank so right now I’m gonna save it as a template as a page WordPress page template so I’m just gonna copy something here and paste it and this is how to actually create a page template
So you see so here you can see cool page all right you can say whatever you want let’s see let’s change it to awesome page I’m gonna save it I’m gonna go back to WordPress let’s reload this page all right and now if you go to template you
Can see I have my awesome page so I’m gonna go there and let’s preview that page let’s see how it looks there’s nothing here just blank because there we don’t have code here so the first thing I’m gonna do I’m gonna add my WordPress header so I’m gonna do get
And you don’t have to get the header if you if you don’t want to honestly get header and I’m gonna close my PHP right there I’m gonna save this alright let’s reload this page alright and now you can see we have something and this is
Because we have a header so we have a logo the name and your slogan so this is a good start and now I want to add all my posts in here but I’m gonna do it using the WordPress API so let’s go back to this page and by the way this is a
Page template so you can add the footer you can add whatever you want in here with some PHP code for now I’m gonna use JavaScript because it’s what I like and then at the end of the video I’m going to show you how you can do the same
Thing with PHP okay so let’s go after you close the PHP right here I’m gonna open and close a script tag alright just like that and now in here you can add whatever JavaScript you want so right now we need to get that URL the one with
The post so let’s do cons we’re gonna create a variable let’s call it URL equals two and we need to get that let’s go back here and we need to get this URL let’s copy and paste it right there all right so we need that and now we’re
Gonna need some empty diff that we can put all the content so let’s call it let’s put it up here after a PHP and let’s call it live the class of latest posts or something like that this can be whatever you want doesn’t have to be that all right so I have an
Empty div and then inside this div I’m gonna put all that data so we’re gonna see it later how it looks alright so let’s get this div now so let’s call it post container or it can be whatever you want let’s get that document dot URI selector And now we need to get that thing let’s just copy and paste it from here there you go alright now that we have that we can start our awesome code so I’m gonna use fetch to get all that data and what we need we need the URL which is this right here
URL oh my gosh what’s going on there you go and then after that you after you get that URL we’re gonna do then we’re gonna get a response by the way if you don’t understand how I’m doing the fetch and all this I have a video tutorial on the
Description of this video if you want to learn about fetch and how you can get api’s and stuff so you get a response and then I’m gonna run a function return that’s with that response but it needs to be JSON file okay and now we’re gonna
Do another add n so after it returned the response on the JSON response then what we do alright so we do We’re gonna get all that data and we’re gonna return something so let’s let’s taste let’s just just console.log something console.log that data Alright let’s save that let’s see let’s see what we have right now let’s go back to this page it’s right here let’s open the console this reload this page alright we have an error what is happening here a typo of course there’s a type which is always a typo
Let’s save it again response all right it looks good now reload all right so here we go we have an array which is like a list and it seems like we have three posts so let’s go and let’s see if we really have three let’s go yep and we
Have three lazy loading images partial J as we’re proceeding Bert all right so let’s close this let’s see if that’s true let’s go to the first one and there you go title lazy loading images we have dates we have so we have a lot of data that we can get right so
This is working let’s go back so we don’t want a console log we want to actually get that data and put it inside latest posts right here in this diff so let’s go back let’s open and close brackets and what I’m gonna do because data is like an array I’m gonna do data
Dot map and now I’m gonna add a parameter that will be used to modify each single item inside the array I’m gonna call it post and then another arrow function opening closing brackets again and now we’re gonna create a template using the backticks so let’s go ahead and create a variable
First so const let’s name it i don’t know inner content is gonna be like the content inside this latest post is equal to backticks i’m gonna create a template alright so let’s put a space here looks better like this way this is gonna be an li i want a
List of things there’s gonna be the title h2 and then is gonna be like a link i wanna i want to I want to link All right just like this and then close the Li just close that list element alright looks good so the title how we can get this title so let’s go back and you can see that it says let me see where is it it’s a title
And then if you open that it says render it and then you can get the title so let’s go back and let’s do dollar sign brackets and here we can do post which is right here is gonna be post dot title dot render it alright and then we need
To do kind of the same thing with the link actually here I want to be read more when you click there and here dollar sign same thing dollar sign opening closing brackets is gonna be post dot and where is the link let’s go back or is it here always link all right
Now that was easy link let’s go back in here and let’s do we have here this variable post container place to post container dot inner HTML so whatever HTML is inside we’re gonna do plus equal inner content so remember inner content is this all this right here all this is inner
Content and post container is this empty div okay if you’re confused about this I know this is for me was confusing at the when I was starting but I’m gonna post a link so you can read a little bit more about how it is how this works so I’m
Gonna save that and let’s see what happens right let’s reload the page and look at this so we have let’s see right here let’s inspect our element so we have latest posts and that we have Li we have the h2 we have the link perfect so he’s already
Working there’s something that I want to do I want to add the some text here which we can get let’s go back here the excerpt so we can get the excerpt and you can see it’s a little bit of um it’s like a HTML so we have a paragraph and
All that stuff so let’s let’s do that so after the h2 let’s go ahead and say actually do not add don’t add a paragraph because it’s already there so let’s just do dollar sign post so excerpt and then render it so let’s save that and let’s reload the page and there
You go now we have the title a little bit of text and then they’ll link to that specific post all right so this is in JavaScript so now I’m just gonna comment this out and I’m gonna copy and paste a PHP code so I’m just gonna copy
And I’m gonna put it down here and you can see that is actually pretty simple in PHP and we’re kind of doing the same thing that we did in JavaScript you create a variable kind of the same thing we did in JavaScript and then you get
That data in JSON and then you echo out all that HTML I’m getting it from the post so I’m gonna save this and let’s reload the page disease we’ve works yeah so it’s the same thing I’m gonna uncomment this JavaScript and see what happens I’m gonna save that
Let’s reload the page so you can see that it’s working and it looks exactly the same we’re just calling the post here in JavaScript and calling in getting that post here in PA P and they all works and remember you can do this on a different domain
Different website you can get your posts and put it on a different website you can get you can get the images you can get a lot of things from this API but so I hope this helps a little bit all the code that I created here is available
Somewhere the link is in the description of this video so I hope you learned something that’s it subscribe if you want to keep learning and click on the Bell icon to receive notifications every time I upload a new video thank you so much for watching half a beautiful day 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
Sup J !!
Very helpful!
Im not a developer and I was able to understand everything you did. Great video!!
very very awesome thank you
Hi. Thanks for your tutorial. I want to request if you can make a tutorial on how to use the WORDPRESS REST API to fetch PAGES (HOME PAGE, ABOUT US, CONTACT US PAGE) instead of POSTS
Thank you
Thank for the video
How to get featured image??
And how I can save those post into wodpress data base?
Can we get the styling as well from the WordPress API?
Do you know how to extend and access advanced custom fields (specifically repeaters and sub fields) endpoints? I'm having a lot of trouble figuring this out.
This is super helpful. Thank you so much.
Thank U
Just i want to know if i can use this (JWT authentication and WordPress Rest API) With Laravel to share login with both of theme. if i can, May i ask for a docs or video explain
Thanks
thank you so much
awesome
Hello sir, i want some help of yours. I have jdoodle API and i want to add in wordpress. Can you help me to integrate jdoodle compiler in my website via APi??
Hey J, Just wondering can we use any open-source API link in the "url" section and follow the same procedure or is it limited to WP APIs. If not I would request you to please make a video to include an open-source API (example: weather) in WordPress.
thanks man, really helpful
Thank you, You are an answer to my cry. God bless you
hai sir.. this is very helpful code to me.. and i want to know what was the final outcome .. if i click the readmore button ,then what happent..if it redirect to the original website
Nice video but this only addresses read (GET) operation, can you do something similar for when I want to add a new post from front end using WordPress API?
Most of this has nothing to do with WordPress 🙁
Please, what means "something == $0", when we see a code on chrome inspector?
Really good. Great tutorial and it worked ! There was some wheel spinning right at the end with the concatenate dot in php – I missed out a space, but otherwise, great, I like your teaching style. Subbed.
Thank you. And by the way, you could use Emmet in VSCode. It's installed by default and by using it, you can write less! Thanks again.
Always look forward to your tutorial. Thank you….
Awesome man!!! This is VERY helpful. One question: related to performance, which one is better to use to get the data: JavaScript or PHP? Maybe JavaScript so I also can Use with Vue.js or React… More flexible…??!?? Please do more tutorials about it. Thank you.