Display WordPress Posts as PDF | React.js

hey what's going on guys my name is victor and in this video i'm going to build a wordpress plugin which is going to display the posts as pdf files so here's the demo i have a wordpress installation it's all by default i'm using i have the storefront installed and there's a storefront child name on my website i'm using a child team just because i'm gonna have to override the single dot php template and here i have two posts on on my home page so if i click on one of them let's say for example hello world um wordpress is going to open like a regular post page with a permalink here user friendly url there's going to be the header there's going to be the footer but whatever the post content is supposed to be there's going to be a like a frame where a pdf file is going to be displayed like this so this generation has been um i've done it using react so my react app calls the wordpress api pulls all this data from the database uh creates a pdf file and then displays it on the page so that's what i'm going to build in this video i'm going to write everything from scratch in case you want to follow along with me there is also going to be a link in the description from where you can grab the source code i'm going to be using a package in this video for my react.js app which is react pdf um you can there's going to be a link to this package as well so they have all these uh instructions on how to install how to use it and uh different examples here so i'm gonna use this package and um yeah that being said let's go ahead and get started so here i have my vs code already created my react.js app here is the here are the files i open vs code in my react.js folder i have the terminal here open so the first thing i want to do is i want to install this package i was talking about so i'm using npm so i'm just going to copy this command from here i'm going to open my vs code and i'll paste it here i'll press enter this is going to install the package and before this package while this package is installing let's go to i'm actually going to clean up my public index.html file so open public index.html so i'm gonna remove all these comments from here right i will save this file close it so this package has been installed now i'm going to type in npm start and this is supposed to start my local server starting development server okay so everything seems to be fine now i will open a new tab i'll type in localhost and 3000 so this is my react.js app also i also wanted to mention that i'm using sam so where is it here this is my sam so i have apache started mysql started you know wordpress is installed my localhost and and and everything so um here so what i want to do now is i want to go to my source folder app.js and from here i'm going to get rid of the logo from here and everything i have in my div class name app so here above the logo i'm going to import react and i will also import the component from react and i want to import the pdf viewer video viewer from the package i just installed so the package just installed is add react react hyphen pdf renderer okay and then i'm gonna create a new um okay we have this app.css okay it's fine now i'm gonna create a new folder in the source folder and this folder is going to be components and here in the components i'm going to create a new component so how to create a new file and this file is going to be um capital letters wp and then lowercase pdf dot js this is going to be a functional component so i'm going to have props and and but i'm going to be using react as well so let's import react from react i want to import a few other uh components because if i'm going back to react pdf package here in the example they have this uh this components that they've been using in in the file so i'm going to do the same thing here i'm going to import them so in this in my example i'm going to use the page text image oops i'm gonna use image font a document and last one stylesheet and i will import all this stuff from at reactpdf renderer like this and then here i'm going to have a const and i will name these constant let's do like the way they have in the in the demo so it's going to be uh quick sorry worse yeah something like that and i'm gonna get props but actually let's just leave it empty for now because we're not calling this um component yet and here let's just say hi and uh below here let's just export it by default export default like this okay we have it i'm gonna save it i will import it here let me just copy the name of it so we'll have import from components slash wp pdf and i will call this component here like this let's just save it just make sure we don't have any errors or anything like that the com compilation is kind of slow i don't know why probably because my uh my computer is kind of slow but uh if i'm going back now here everything is fine so i have this components being called everything is fine now what i want to do is i want to transform this app component this is going to be a class so instead of function i'm going to have class app uh this class is going to extend so this extends the component like this i'm going to have here needs to be a render like like this oops just make it pretty okay render function so if i save it now it's supposed to work without any problems and now in my in this class i'm going to have a state so there's going to be state and the state structure is going to be the following it's going to have we will have a post parent and then he will have post title which is going to be empty by default post image post text and post author oh whoa whoa whoa like this and there's going to be another state which is going to be is loaded is load is going to be false by default this is going to be true whenever only one after we receive the data from wordpress api so when we receive the data from wordpress api we will make this true and that's when we will output or display our pdf file so we don't we don't display a um an empty pdf file in that case we're gonna get errors and stuff like that okay so uh now let's go back to our onto wordpress let's see how our api looks like so here we have you have probably your domain in my case it's localhost and here i have slash wp hyphen json slash wp slash vt which is and then we have posts though actually means tea in romanian so i'm just a little confused okay so here we have the post id so if you don't know what's your uh was the poster you just go to your posts and whenever you want to edit one of the posts you'll see your posts id here it's going to be post equal to your post id so um this is 10 okay let's do 10 where is that look at put 10 here and also slash actually not slash question mark underscore m embed so we have e m b d like this so i press enter and this is gonna show us all the data from the api we're calling the api now i have here an extension in chrome which is uh called json for matter so if i click on it it's gonna ask me to reload the page and i reload the page and this is gonna uh it's gonna arrange everything pretty so i can understand what's going on here so whenever we call this api for each post uh using the post id we get all this information we have the content we have the um author id we have links uh another thing that's uh important here to know is the um author so we have the the author name i'm going to grab that and there's also featured image this this is uh there's a feature image url here here we go so i'm going to grab one of these links um to output them in my pdf file and that's almost it but you have a bunch of stuff here you have a bunch of uh details about the post so you can play around with your uh react.js app if you would like to add more stuff on it so what i'm going to do now is in my react.js app i'm going to use the component did mount component component did mount this is a react.js predefined component and using this component this is like a life cycle um you know component which is calling the api so i'm gonna use fetch and here i'm gonna copy this url from here and i will paste it here and below i'm gonna have dot then and here i'm gonna grab the result so gonna be res arrow and i want to get the result as a json format get json function and then below i'm going to have again dot then like this and then here i'm going to grab the wordpress response in parenthesis so here's gonna be wp response and having this response now i will be able to update the state but pay attention here i want to show you something you have we have a few tags here in the text you know whenever we add the new blog post you know like each of this paragraph uh it's been wrapped by a with ap tag so in this case i want to remove all these p tags and and all other tags that the content may have and um i want to store after that all this data in the state now if i'm looking at my react.js app if i open my inspect this app i have this uh react.js oops react.js um extension which is adding two more tabs um on my toolbar here whenever i want to whenever i'm inspecting the app so if i click on the components i will see my components here the first one is app so here i have i'm gonna have the state i didn't save the file yet with the state but whenever i will save it i will have um this in on that tab i'll see it so let me let's just see how this wordpress response looks like so i'm gonna put a i'm gonna do a console log i just wanna show you how it looks like and also here we need to have a certain okay uh we have this okay so after this one where is that just got lost already i made a boo boo here let's delete this parentheses from here and let's close it here after the first then okay and then we have the second then so we're grabbing the result here and then here we'll have comma and we will grab the error in case in case there's an error so we'll have error and this is going to be an es6 function so if we get an error then in this case we will update the state so we'll have this oops this set state and here we will have is loaded because we have this is loaded is false we will do it we'll make it false just just to make sure it's false and we don't want to update we don't want to display the file yet because if we get an error that means we didn't get any data from the wordpress api and also we can store the error in the state just in case okay don't forget about semicolon we have this this and this okay everything looks good now if i save it everything is fine we don't get any errors and if i'm going back here and click i click on the console we will see here the data we get from wordpress api so if i click here let me make this bigger so if i click here i'm going to see all the data from from here all right so everything works fine i want to store this data i want to store the title in the state title uh the post title post image post text and the post author so this is what i'm gonna do here i'm gonna comment this out and here i'm going to have i'm gonna update the state so it's gonna be this uh set state like this so here the first one is the post title like here we have post title but first i want to follow the same structure of this uh tree i have in the state so i have this state and then here i have the post which is apparent and then here's the post title and the post title comes from wp response dot title dot rendered so if i'm going back just to show you where i grabbed that from so we have the response and then we have the title here the title rendered and this is the post title just copy that just make sure i didn't misspell it here okay all right and then the next one is the post image and you can also check if you want to see how this looks like uh how the structure is but i already have it here so it's wp response dot underscore embedded embedded and then here we have wp featured featured media like this and here we have zero because this is an array and we're grabbing the first key and here is the source url underscore url like this the next one is the post text post text is coming from uh content and actu i said that i wanna okay let's just do it first like this so wp uh response dot content dot rendered like this and then last one is the post author and the post author comes from wordpress response dot underscore embedded this needs to be double d here embedded like this so i'm gonna copy and paste it here like this embedded dot author and the key this is an array so the key is zero and we're grabbing the name from here okay so uh okay we've got this and also after we've done this uh we updated the state now we want to update the is loaded to true we want to make it true so i will save it i'm going to go back to my app i'll just uh refresh just to get everything fresh so if i click on the components i click on my app component i'm going to see the state here is loaded and and post so if i open the post state i have the post author the post image because i have a featured image for my post this is the image and i have the post content but i have this p tag and blah blah blah so i want to filter all this stuff um in order for me to filter that i should go so i'm gonna go right below here and uh let me actually leave a comment i'll say filter post text and here i'm gonna have a const post content and i will assign the data from the content like this and then i'll have dot and i will use the replace function javascript function so i'm just going to copy it from here from my script just to paste it here because there are a lot of characters here so i have replace so this is going to replace all the tags you know that start with open like this and close like this uh b uh b tag p tag div tag uh h tag and all that stuff so i'll replace it with empty character you know with nothing and then i'm going to call again the replace and i'm going to replace this with the apostrophe because the apostrophe code is gonna it's like this so in the pdf file they just output it the app outputs this code and instead of this code i want to output the apostrophe so you may you may see some other code so this is the way you you filter it out so semicolon here and i'm gonna copy this stuff to this variable and i will paste it here so if i save it now i'm going back to my app let me just refresh one more time i have the app and here if i open my post state i have the beat the p tag disappear now this um uh backwards slash and and this is good because this is like uh this is a good tag uh pdf recognizes it so it's fine i will be using that okay so now we have the state uh now what we should do is uh we should output the data in the pdf file on the page so let's go back to our app.js file and we have this we call this component here now in our render function i'm gonna have const and here i'm gonna put all the state i have uh from from my post uh state so i have post title post title and then post uh image and then post text and then post author and i grab all this from this state dot post so i'm doing this just um i'm doing this so after this line i want i don't have to use all the time these state posts this state post whenever i want to try i will never want to call on these states so here i'm going to send some some props to this component i just uh i created here so you know what guys let's just change it here the name of this so i don't really like it um i know in documentation like this but i'm going to change it to wp pdf copy it paste it here where you fold it save it and let's go back here paste it like this and here like this sorry about that okay so now here we will send the prop some some props i'll copy this here like this and i will say that like this which means i'm sending the state and i'm gonna have four three more post post image post text and the post author okay i send that i save it and i'm going back to pdf let's make sure everything works fine we still have this everything is fine we refresh the page everything works now here i'm going to grab the props and i'm going to console log them and i'm gonna have an error for some reason oh that's because console log here you get a booboo still need the boo-boo comes along like this okay let's go back i'm gonna refresh it and nothing was returned from render this usually means the return statement is missing order okay blah blah blah blah blah let me just do here return let me just add an empty wrapper that's usually easier to do so i'm gonna have an empty wrapper here and then i'll put this in curly brackets now we'll save it so if i go back here refresh it and if i click on the console these are the props i'm getting from the from the main class component from app component so i have post author post image and uh the content and the post title so everything works fine till now now here i'm going to display the pdf file so i have this i import all this stuff now the first tag is going to be a document like this in the document i'm gonna have the page so the page is going to be like this um i was actually gonna say it below here let me see let me think a little bit um yeah let's let's add some styling here first so we'll add some class some style we'll have a const first styles and here we'll use the style sheet which we import from here it's also part of this package they have a way on how to kind of assign online styling so we'll have styles and we'll assign the style sheet dot create like this and here we'll have a body kind of kind of like a uh class yeah div class you know almost the same structure and then we have padding top padding top 35 uh you know what guys just for the sake of time just gonna copy them and paste you can you can just uh pause the video and copy them if you are following along with me okay so i have this now we get the comma and actually copy the whole thing okay so what i have here i will do like this i'm going to go through each of them so i have a cons first of all we register a font so we have font dot register this is right below the functional component so we have font dot register you know have parentheses curly brackets we open this up and here we have the family which is this uh oswald name the font name of the source is this url from here all right and then below we have another const which is styles and we have style sheet we assign the style sheet we create a new style sheet here and we have the body which has padding top 35 padding bottom 65 very horizontal 35 we have the title this is all from the documentation by the way so um it's i didn't customize it much we have the font size 24 you know text align center font family the author styling the text styling the image styling which is margin and we have the page number styling because we'll have the page number t okay so if you're done with this just pause it copy it and after you're done we're gonna go up here where we stopped and where we have our page we're going to call this style sheet so we have page and then we have style and inline style so here we use styles dot body this is the the body from here okay and then here in the page component we will have the text and the text this is this is this is the first line which is the title line so we have oops we have text like this and uh let's put let's put this on the line and the text has style too and here we have styles dot title okay and here we grab the the title so we have the prop we have props dot post title and the second line is the author so we have text style here we have author we get the props post author and then the third line is the image so we have image and we close the image like this but this image is going to get a few attributes the first one is the style of course it's an inline style so we have styles dot uh image and then we have the source so the source is going to be props dot post image post image okay this is good now the next one is the post content like the whole text so this is like a pretty fine uh framework you if you'll have more images in your post it probably won't display it properly you can just uh you'll have to change the structure you know filter just to see if it catches any img tags you know you want to add them in the file as well but in this case i'm just grabbing the the featured image of the post and i display it in the pdf file okay so here is this now there's going to be another text component and there's going to be an inline style so i have style there's styles dot text like this and here in this component i'm gonna display the props dot post text post text okay close the text here now we have last one is the page number so we will have another text component there's going to be an inline style for this so we have style curly brackets styles the page number and then we have to use the we will use a render here which is going to count the page number so we have render and curly brackets parentheses and again curly brackets and here we have page number page number comma and then total pages total pages okay and then we have these es6 i like a function and then here we have this uh is the apostrophe but it's the back backwards apostrophe so it's the button if you're using if you're on windows is the button below the escape button the left corner top so here we'll have dollar sign curly brackets and we'll have page number and we'll have slash and dollar sign well make sure all this stuff is under this brackets like this so we have dollar sign total pages like this and then we've got this here so this here is not a curly bracket this is supposed to be a parenthesis sorry about that guys okay so we have parentheses here and the parentheses here we just open it here and close it here like this and then after that we will have a new it's going to be a attribute which is going to be fixed and we just uh close the component and remove this closing text from here fixed okay text here and remove this sign from here okay this seems to be fine now let's go ahead okay we exported it already so if i save it document document is not defined because i misspelled it needs to be documented sorry about that guys you probably already saw it okay document so when we go back here if i refresh the page we're getting some errors here t text tag invalid value for props render um this is fine this is good this is the way it is right now just because we don't have the view we're not wrapping up the pdf file in our app.js component so let's go back here where we have this class name app and right here we will have t called the pdf viewer all right so i'm going to copy this component here and let's wrap this wordpress pdf component with this pdf pdf viewer so there is going to be pdf viewer i will gather it cut it from here and paste it here and i will do like this so if i save it now and i go back here we will see the pdf file here like this now look here if you pay attention there is an error which is saying access to xla um http request at this uh image from origin localhost has been blocked by course policy not access controllable this is because basically wordpress doesn't allow anybody so if i refresh the page okay those errors need to be disappeared so image should receive a either a source or source prop so this is because wordpress doesn't allow um it kind of allows but like the pdf file wants to save this file in like a local file you know because it's a pdf if you save it you can really save it with this url from here so and also wordpress as is complaining about it because it's saying you can't really uh do do this kind of a request to this to the wordpress website without from a different uh server and to fix this error we should open our uh root folder wordpress root folder and there's this htaccess file so we should allow this kind of requests to the wordpress uh to our wordpress website now i'm gonna grab this file from here and that will throw it right in here okay so this is what i have by default from wordpress now right above i'm going to paste this code which is i have a comment add access control allow origin for images so we have if module more uh mode set set in thief dot c um let me just do like this guys so i don't confuse all the way so you can just copy so basically this allows um files that match uh this extension uh to have is course like to allow this access control allow region all right so i'm gonna save it and even though sometimes you save it uh if you go back and if you refresh the page you will still see this error um that's because you need to clear your cache so what i'm gonna do i'll i'll press on on google chrome is ctrl shift now delete and i'll remove the cache from the last 24 hours so i'll just clear the data i will close it so if i refresh it now here i'm going to get as glob call what's this error so i'm going to get an error still skipping because source prop is uh okay but the image is working for now so let's make sure we i didn't there's something wrong with the source so let me go back uh look we can close this because this is good it's good for now so let's go back to our uh component and let's see what we've missed here source props post image okay so um i just paused it i just i forgot this is a this isn't embarrassing so okay this is why we get this error because first time like whenever we load the app our react.js app is calling the api from wordpress but it's calling it's re-rendering the render function so the first time whenever it renders it renders with an empty source that's why it's showing this uh error so this is this in this case we should use this uh is loaded um state so we will put this is loaded state here this pdf viewer so we will display the pdf file only after we received uh the the data and we updated the state so here we'll have curly brackets and we'll have this the state that is loaded so if this is true uh let's wrap this in parenthesis if this is true we output this all right otherwise we will output pdf loading like this all right so i save it now and i go back and i refresh the page we don't get the errors anymore but you see here for for for half of a sec of the second we have that pdf is loading look if i refresh it we had that pdf is loading for for for half of the second okay so we got rid of that error uh now what's next is let's add some styling to this pdf frame to this pdf viewer and in order to in order for us to style that we should go to we have this app css file imported so let's go to app css file and i'm actually going to get rid of everything except the app class and then here i'm going to add some styling and let me just get rid of this thing from here as well so here's what i'm going to add this css with i'm going to give it a width to this app it's going to be the wrapper of the pdf file so there's going to be height overflow hidden display table margin and i'm gonna add a box shadow now below here if we inspect this uh block right now so if i click on inspect actually go to elements let's make this a little bigger i open the root id app and then this is ifram it's an iframe that's displaying the pdf file so i'm going to paste some styling style for this iframe so we have app the iframe from our app class we have padding 0 margin 0 with 100 important make it important height 480 pixels because we have it 480 pixels here and uh we have also the webkit transform this is the scale this is the zoom in zoom out this is how far away you know you can play around with this one uh if you would like to uh webkit transf uh transform region zero and basically this is for um um what's called the browser from the mac uh safari yeah this is for safari and this is for other browsers normal browsers we have border non-overflow hidden overflow y hidden um iframe webkit scroll bar i actually this we can get rid of this one so if i save it and go back here this is what we see all right if i refresh it one more time um this is this is how it looks like this is the way i want it to look like let me see if i remove actually the overflow the overflow shouldn't be working here uh refresh one more time yep so everything works fine okay so we have the pose title which is post we have the uh user uh the author which is admin in our case the future image uh and then this is the content so even though like on the dashboard here we have these paragraphs we have one two three paragraphs even though even we removed the p tag it's still showing us paragraph where's the app one two three paragraphs we have here all right so it's it's working that's because we have those n spaces from the from here like you see like this one and then like this one so this is the space in between the paragraphs which is really good i like the way uh wordpress outputs all these data and um yeah so what's left now is um integrating this app with our um wordpress so we should create a plugin wordpress to um you know to output this all this stuff so here i'm gonna stop this uh my local machining i'm gonna type npm run build this is gonna create me a production you know it's going to compress everything all my react app into compressed javascript files readable for the browser so i can take these files upload them to my server and then integrate them with wordpress so it's going to take a while i'm just going to pause the video okay so it's done now here let me close this i have a new folder here which is build and i have index.html file and all the files here static so basically i'll grab this static folder and i will paste it into my plugin but before i do that let me just create the plugin oops let me close this okay so i'm gonna navigate to my uh oh jesus christ oops sorry about that sound guys okay so let's see where am i here cd okay mntc xmls cdhd docs and here i have wordpress content wp uh content and then here i'm going to plugins and the plugins folder is empty so i'm going to create a new folder here i will name it wp pdf okay and i'll open it and here i'm going to open i'm going gonna open a new bs code in this folder like this and i'm gonna create a new file here so this file is going to be don't even know how to call it let's i mean index.html php so index.php and i'm gonna paste a comment here just for well this is a standard uh comment for wordpress the wordpress in this way wordpress recognizes this file as a new plugin and i have plugin name and description plugin uri author and the version and i want to add a security function here which is not allowing anybody to access this file directly from their browser and what i'm gonna do here basically if i save it now and if i'm going to my wordpress dashboard i'm gonna go to plugins i have this plugin here so i click activate it's going to activate my plugin nothing is going to change yet because i don't have any functionalities yet but um what i want to do here is i want to generate a short code and to paste it on my websites on my post template so let's do display react.js app so here i'm going to add add shortcode shortcode and here i'm going to have the wpost pdf that's the code so we have wp post pdf and here's the function i want to call whenever um you know i will publish this this code so the function is going to be vi code underscore react underscore app okay and then here is the function so the function is called by code like this i'm not gonna have any parameters and here i'm gonna grab just the global variable post global variable once we grab the post id from here and i'm going to have a return and what i'm going to do here i'm going to actually here's where i'm gonna paste my react.js app um dvd root and some of the files that i want to import so let me go back to my file so this is this is uh my app okay let me see just make sure this is the right on the right folder so it's wordpress to pdf okay so this is the one wordpress to pdf i'm going to build okay i will open my index html file here's how it looks like and i'll copy everything from here i will open my browser and i will put here on minify.com unminify.com website i'm going here and i will paste my code here i'll click on unminify this is going to minify all the code and this is just from index.hta uh index.html file this is not the react.js app so i'll copy this the the code from here going back to my index.html from where i copied and i'll paste it here now the stuff i want to grab from here is this the script this javascript from here and i'll get all the way to the no script tag i'm going to copy it i'm going to go back to my index.php file and i will paste here in my return function now i don't have this static folder yet on my server but i i will in a second i will copy it in a second uh if i'm going back to my index.html file there's another file which is the css file this is also the library it's compressed so i'm going to copy it from here i'm going to go back to my index.php file and i'll paste it right below the return function here i'll paste it like this now i'm going to go back to my build folder and i will copy the static folder from here copy i'm going to my wordpress plugin folder so i'm going to htdocs which is the root folder of my server wordpress content plugins wordpress pdf folder and i will paste it in here okay this is where my index php is okay so i want to call these files now in order for me to call them i should use a um a php function so to do php php function i should put the apostrophes just just open close password fees concatenation and here i'm gonna have plugin underscore uh dear underscore url parenthesis and here i'm gonna have underscore underscore file underscore underscore so this is gonna be the path or this is the path to my plugin and then this is the folder from my plugin and then the file and i want to do the same thing for my javascript file so i'm going to copy it i'm just going to go all the way down here and i'll paste it like this so here i have the no script if the javascript is not active activated and my browser is gonna let me know i have this div id root this is where the react.js app is going to be displayed and the shortcode is this one so everything is pretty much working we're going to be back here in a second but let's just save it for now like this there shouldn't be any errors on the website right now if i if i'm going to the home page yeah we don't have any errors or anything like that um okay so the next thing i want to do is let me see here index.php we've got this um okay if i'm going to my plugins now wordpress content i'm going to my themes folder i have this storefront child theme does the theme i was telling you about so if i'm going to my appearance themes this is the theme i'm using i'm using the storefront theme installed and i have a child theme this child theme is going to allow me to override some uh some of the team plays from the storefront theme so whenever there's a new update the theme doesn't the theme doesn't overwrite it so i'm going to let me go back i'm going to storefront this is the main this is the parent theme and i'll copy the single.php file so i'll copy from here go back to my themes and i will paste it in my storefront child okay now let me open this up now i'm gonna grab this file and i will drop it here just to edit a little bit now this file being here i would like to get rid of everything so this is like have post this is getting the post from the database driver directly on the template but here i'm going to output my react.js app so i will delete everything i have here and i will paste this shortcode from here so we'll copy it and here i'm going to let me just go like this bom and here i'm gonna have echo and i will do do underscore short code parenthesis apostrophes and paste the shortcode like this all right and then i will save it so if i'm going back to my post now if i click on this post i'm going to get this error index dot php 18 quality in the final function plugin dear url so there's plugin there okay url needs to be url i just missed paul the ring where is it um oh here here here here there url so let's make sure we fix it everywhere here let's save it go refresh the page so we're getting the the post right we're getting the data from the api everything works fine here now where we have this stuff here you know we need to leave some space but once you have the stuff on your page you can play around so in single dot php you can actually use this shortcode anywhere you want but i you want to do it like the way i built it here you want to use it just in this file so we can put here echo just do like this one were t and we save it we go back so if i refresh it it's gonna leave some space here just for the shadow to be visible okay um this is fine here but this is we have just one problem now we go to the home page and if i open this file this other post it's still going to show me the data from the first from the post with the id 10. so i want to make this id i want to make this app dynamically this is very it's very quick to use fast so let's go back to our single okay we can close this let's go to index.php and where we have our global post here now in our script tag let's add a new variable so we will have here var and the variable is going to be post id like this and we will assign the post id from our global post variable so we will have apostrophes uh concatenation we have post id like this okay now we have this post id here i can copy it and i'm gonna open my uh plugins folder so i'm going to wordpress content plugins wordpress pdf static open this one js folder and there's going to be a main you may have a different hashtag here but this is main.hashtag.chunk oops i shouldn't be i shouldn't open with this one but like if i do open or if i just grab it and paste it here like this now i'll do ctrl f just to search for certain things in this file so i'll put a http this is gonna find me the api url so now here i have this javascript id which is a variable javascript variable and where i have my uh post id i want to delete it and just to concatenate it in javascript so i'll add this plus plus and in between the classes i'll paste the post id so in this way the post id is going to be dynamic now i will save it and i'll go back here so we see okay the post key so if i refresh the page everything works fine we're grabbing the data from the post here if i'm going to the home page and i click on the hello world we will get the data from the hello world post with the image and everything so remember this image is just a featured image if you want to add more images you'll have to play around with the just to filter it and then whenever there's an img tag you know um or pic or you know img tag you want to replace it with that img image component okay that okay guys that's it for this video i hope this um uh was interesting to you if you have any questions leave them in the comments uh if you like the video please give it a thumbs up subscribe for my channel share this video with your friends and uh if you have any wishes where if there's anything that you would like me to make a tutorial about please let me know in the comments as well uh thank you very much for your attention and i will see you in the next video

Channel: Vicode Media

Views: 188

Keywords: wordpress, wordpress to PDF, wordpress with react

Id: EgoYiF7--3g

Length: 55min 44sec (3344 seconds)

Published: Wed Feb 10 2021