Convert HTML to Wordpress Theme - Part 2

Key Takeaways

hey guys welcome to part two of convert an HTML template to a WordPress theme um where we left off was we're um adding our Dynamic functionality to the index.php file so so far our title the image and the text are all Dynamic and coming from WordPress however the this meta info right here is still static so we're going to go ahead and change that so if we go to index.php you can see um right here this paragraph We have posted by and then we just have the text someone so we want to get the author's name in there and that's pretty easy we just want to replace someone with PHP the author posts link so what that'll do is it'll show the the author's name with it'll also have a link to his page okay so the date on July 18th we want to change that um so we'll take that say PHP the time and we want to format that how that looks so I'm going to say fjs y I think that's right okay so let's just check the the name and the date all right so you can see it change to Brad and the correct date if I click on Brad well it's not going to show us anything because we don't have our page PHP done um so let's see we want to add this comments thing here so we'll replace this PHP um actually we're going to have we're going to this is going to be a link let me just okay so we want this link to go to the comments or to the post so in here we're going to say PHP um comments link okay and then for the actual text let's replace this now what we do here is we can say PHP comment number and this is going to take a few parameters let me just put this on its own line um let's see okay so the first parameter will be what we want it to say if there's no comments um so let's just say zero comments and the next is what we wanted to say if there's only one comment so we'll say one comment and then the final parameter we want to say um responses let's see if that works all right so looks like there is one comment so that's all set now this full article I guess that's going to be the read more link so let's go okay where it says full article we have a link going to it um so we're going to put in here um PHP the peral link okay uh and I also want to link the we'll put that in the image link so right here in this put the same thing and also the title I want to put it in the title as well so replace that all right so this looks fully Dynamic I think I got rid of all the static stuff so I'm going to save that all right so if I hover over this you can see in the bottom it's going to uh P post one right down here okay the title same thing we don't have single PHP setup so it's not going to do nothing yet uh but that looks like that looks complete for as far as the main content area uh let's make sure that if we put a read more block it'll cut the text off where we want so after the first paragraph I'm going to click this read more icon update and reload okay so it's only showing us that's good all right so that that's complete um let's see so I guess next we'll do the single.php which is going to be basically the same thing so I'm actually going to copy everything put it in single.php and after the nwh I want to add some the comment area so we'll say uh PHP comment template save now if I click on the Hello World post we now have our single post totally Dynamic we got our comment box and we have our one comment and you could further style this maybe put a nice background or something but we're not going to get into that all right so that's single what else do we have our page okay so now let's do our page.php file and this is basically going to be very similar uh we don't want we don't want a link in the title because it's going to be just a page uh we don't want this metadata so I'm going to get rid of all this rid of that um yeah so we just want the title The Post uh yeah I think that's it so let's see what that does all right cool so it's just a standard page all right now what I want want to do is add some um or add a menu link we need a home link we're just stuck on Sample page now uh by default there is no home link on the menus so if we go to a wait a minute actually we don't have menu functionality we need to add some things to our functions.php file we don't have access to Widgets or menus so let's go to functions.php and let's just comment this we'll say that's thumbnail so basically we can copy this and inside of here we just want to put menus save that if I reload this we now have menus available all right so we don't have a menu yet by default it's just going to take any page we create and put it on the menu um but let's create one call it main menu all right so let's see you can choose to automatically add new top level pages to this menu um but let's do it manually so we'll add the sample page we have and then we need a home a home link so under links uh I'm just going to put I'm just going to put the actual link to the homepage all right save that we should now have a home link all right so let's go ahead and add another post and we'll put a read more link right there let's actually add a category okay and let's add that other one to that category as well what okay so let's reload the homepage oh we didn't put our image in wait a minute all right something's not right oh how did that get up there actually I want it right here okay and now we just want to upload that the other image all right update and reload and now we have our post post our other post all right so that's that's done uh the next thing I want to do is create the sidebar we want a a sidebar widget and what we want to do is register our widget in the functions.php file and I'm actually going to paste in some content here just because it's going to it'll take too long to type but it's really easy to understand so we use the function called register sidebar which we pass in an array in the array we have the name of the of the um sidebar which are just called right-and sidebar the ID the description before title and after title so what we're saying is every widget in the right sidebar will have an H3 tag with the class of sidebar title and we have before widget and after widget which is is added before the entire widget and after it okay so we'll give it a class of widget and then we have a dynamic ID and a dynamic class so we can single them out if we need to all right so we'll save that and now we want to go into sidebar.php and let's see all right we're going to need to go to back to the static template and take a look at that so here's the sidebar let's grab this actually we don't need this all we need is the div because these are going to be dynamic widgets okay so inside here we'll say PHP Dynamic sidebar and we want the name of the wh we want to say right sidebar all right so that should do it okay let's see if we have any widgets oh we didn't save functions or did we all right so now we have a widgets menu link menu link and we have our right hand sidebar available over here so let's put some things over here can put categories you can really put whatever you want um let's see we'll put a search bar recent posts okay let's check that out all right so there's our sidebar actually you know what this isn't styled correctly we might need to change some things around let's see I want to go into the sidebar and I want to go into this sidebar and see what's okay so there's H2S here so let's go back into functions.php get rid of the this H3 here and we'll call H2S instead that should style the titles all right there we go and I mean you could create a custom widget and copy this exactly um but we really don't need to do that and we have the functionality uh let's go ahead and add a page add a new page and we'll want to add that to the menu as well so about us add to menu all right so we're pretty much done um we added all the dynamic functionality there's more you could do you could um add in some conditionals so that if the sidebar if there's no active widgets you'd make the the content stretch all the way over you can do stuff like that um create more pages maybe portfolio galleries things like that but uh I don't want to get too advanced this is really for the beginner to midlevel developer so I hope you learned a lot and please subscribe if you can thanks