WP REST API - Add Posts From Frontend

In this episode we are going to be using #WordPress #REST API to add some new posts to our database with vanilla #JavaScript.
As you will see this is very similar to what we did in this( • Next.js + Strapi - Add... ) Next.js and Strapi series episode. This is because we used #JWT authentication in both cases. So we will firstly authenticate ourselves to the WordPress installation using JWT, and then we will add some data to our posts with the token provided from JWT. This a super easy way to add authentication and allow your users to create content from the frontend of your site.
Code used in this video
bit.ly/2HADltN
You can support my work on Patreon
/ watchlearn
Follow me on Social Media
Github: github.com/iva...
Twitter: / ivan_doric
Instagram: / watchlearntuts
Facebook: / watchlearntutorials

[@LopezPagan]

Awesome, thanks!

[@ambientmusic4354]

Thanks for the video , very interesting !!

[@leonvanrijswijk8409]

Thanks. Very usefull. Would be great if you expand it with a form, exception handling, etc...

[@WatchandLearnTutorials]

Would be, but I just don't have the time for it.

[@alinademi]

@@WatchandLearnTutorials If you had the time... It would be really great, My man. Real world stuff. Like your Next-Strapi series, That was awesome. Maybe you could make a simple app, a form plugin with the ability to create posts and authentication like this video and as Leon put it exception handling as well as validation or any similar small size real world thing with Vanilla JS. ... in WordPress. Vanilla JS is not fading actually, No matter how many frameworks come and go :) And... as always I say please you make a digital product like your paid course ... There are a lot of course creators on Udemy for example that their content are way below yours and they are selling a ton of coursework!! Good luck!

[@WatchandLearnTutorials]

@@alinademi I'm playing with the idea to make this particular case a payed tutorial with all the features. Something like $5 or $10. And yes I would make it be vanilla JS. We shall see.

[@alinademi]

@@WatchandLearnTutorials That would be awesome! My observation if I may: I have seen people set their prices on Udemy for $ 24.99 so that even when there are no sales it is not that expensive to buy. And when Udemy is on sale it will drop to something between $13 to $16. And after 2-3 of these then it is possible to record courses like over 7-8 hours and set the price from $80 to $180! Unlike jam stack, Wordpress content on Udemy is not very high-quality ( with few exceptions that are really good like the one from Brad Schiff- the guy is a natural teacher- and a few more ) so calling it an “advanced form plugin” or ... may help the sales. Good luck!!

[@WatchandLearnTutorials]

@@alinademi Thanks for suggestion, but I'm going to try avoid Udemy. This would be something for the viewers of my channel and that is why I want to set the price lower so that it would be accessible to most people that want to learn. Maybe even make it "pay what you want" type of deal. And then see how it goes.

[@ismailkuru697]

Thank you very much. Can you please also teach us how to do this with a custom endpoint to continue your episodes with custom endpoints?

[@luccafrancis4227]

instablaster

[@pkg2885]

Thank you.

[@ArtSpara1688]

Thanks for the video! Can you show us how to pre-populate a post from Strapi and make update/put method on submit?

[@WatchandLearnTutorials]

Hmmm, this video is not about Strapi. But I actually already have a video about adding data to Strapi from the frontend: kzbin.info/www/bejne/jYSyqKmvg6alhaM

[@theman7050]

At 8:55 when you put that token after bearer, wouldnt it clearly appear on page source as its front end javascript? Or am i wrong?

[@WatchandLearnTutorials]

Well no. Since the token is read from the users internal storage. I'm not sending the actual token.

[@theman7050]

@@WatchandLearnTutorials thank you so much for the clarification, man. Love ur WP videos.

[@WatchandLearnTutorials]

@@theman7050 Thanks, glad you like my videos 😀

[@stevensoneugenio1172]

Please help me how to send data form from next.js to wordpress, with contact form 7, so all user mail will go to CRM Entries, please help me how to do it, thank you.

[@ronialsayegh4127]

Hello man thank for the content, but if I need to post data in body to a custom field like acf, What is the way?

[@ivannedeljkovic5229]

What about custom fields? How to add custom fields? I found the plugin called REST API CUSTOM FIELDS, but that plugin only returns custom fields in the response, I can't PUT/POST/DELETE with those parameters.

[@WatchandLearnTutorials]

Not sure to be honest, haven't played with that. Try Google or Stack Overflow.-

[@pierreboyer9277]

Thanks!! Is the authentification step mandatory if the user is already logged in? How would you let wordpress users post from the front end ? Thanks !

[@WatchandLearnTutorials]

It is mandatory, because you would probably not use with WP theme, and inside WP itself, but usually for mobile development or with frameworks like Next.js, Vue, React etc. And they are decoupled from WP, so WP doesn't know if the user is logged in or not.

[@hillarybaker4390]

all of my values are giving me "false' and "null". how do I get the variable value to show up?

[@WatchandLearnTutorials]

Please provide more information if you want to get help.

[@albertovaldes5118]

Your videos are very good but could you tell me how I can make a post to ACF, I tried it and it did not insert the data that I put in, thanks in advance.

[@WatchandLearnTutorials]

Not exactly sure, but I can see that ACF has options to add data from the frontend. Although not by interacting with the API. www.advancedcustomfields.com/resources/acf_form/ I never tried that so I can't provide you with more info.

[@NewwebmasterRu]

well good video for study but not for production

[@WatchandLearnTutorials]

Yes, as I've said in the video this is just a super basic example on which you can build on.

[@acidfather]

How can we update multiple WP ACF with Rest API?

[@WatchandLearnTutorials]

I think you would have to make custom API end point for that. So on the WP side you can create a API end point, check out this episode for creating custom endpoints: kzbin.info/www/bejne/eWPXqIZvdteXeas First define the end point: register_rest_route( 'wl/v1', 'update-acf', array( 'methods' => 'POST', 'callback' => 'wl_update_acf', ) ); Then you create a callback: function wl_update_acf($req) { $acf_field_value = $req->get_param('acf_field_value'); $id = intval($req->get_param('id')); update_field('YOUR_ACF_FIELD', $acf_field_value, $id); return 'Updated'; } On the Javascript side you send the ID of the post and Value that you want to update. Something like this: const values = { id: id, acf_field_value: 'new value for the field' } and then you send it to your API end point: const updateField = await fetch(`YOUR-WP-URL/wp-json/YOUR-NAME-SPACE/v1/update-acf`, { method: "POST", headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(values) }) const updateFieldResponse = await updateField.json() console.log({rateResponse}) This is the way to update ACF with custom api endpoint. Maybe this can be done without custom endpoint, but I'm not sure. You can Google it.

[@acidfather]

@@WatchandLearnTutorials I have Googled it but nothing came close to what I'm looking for. I will test your code. Hvala u svakom slucaju.

[@WatchandLearnTutorials]

@@acidfather Nema problema :)

[@yenkuo541]

I would like to follow up this question. Did you succeed on this method?

[@abukhalidrifat3994]

How do i add iamges for post?

[@WatchandLearnTutorials]

I can't explain that in a comment. Maybe this Stack Overflow link can give you an idea stackoverflow.com/questions/33103707/wp-rest-api-how-to-upload-featured-image

[@abukhalidrifat3994]

@@WatchandLearnTutorials it would be great if you make a complete video on uploading thumbnail image and images for gallery fir a single post. Thanks

[@WatchandLearnTutorials]

@@abukhalidrifat3994 I will think about it. Thanks for suggestion.

[@TheTatsin]

Any chance that share your experience with drupal

[@WatchandLearnTutorials]

My experience with Drupal is that it sucks.

[@pierre-marcmarin3398]

It this the voice of iPhonedo ?

[@WatchandLearnTutorials]

??

[@jorgeluisborges8166]

work in local host?

[@WatchandLearnTutorials]

Um, what?

[@soullighter]

What about security? I mean, you expose admin login in and also token is static, so you expose that also in Local storage or Cookie. What is a solution to this?

[@WatchandLearnTutorials]

This video is just an overview of how things work. I mentioned this couple of times in the video, and said that you should not use this code in production. In the real world you would of course have login form and not hardcoded login data, you would save token in the cookie etc. This is just a principle, and actually I'm working on videos to make this production ready, but it will be payed video (although it won't cost much) ... subscribe to the channel if you are interested in something like this so you don't miss the announcement.

[@user-tt6nc6mo7k]

@@WatchandLearnTutorials perfect! do you have an estimated timeline as to when we can expect this to be released?

[@WatchandLearnTutorials]

@@user-tt6nc6mo7k Not yet, unfortunately but I'm hoping it should be done in the first quarter of the next year. Also it will be a course about using WordPress and Next.js. But a lot fo things explained there will be aplicable to Vanilla JS also if you want to go that route.

[@pierreboyer9277]

@@WatchandLearnTutorials Have you done it yet? I'm very interested ! :)

[@WatchandLearnTutorials]

@@pierreboyer9277 Unfortunately not as of yet. I've had a lot of personal stuff this year that I had to handle, so I didn't have time for this.