Wordpress Theme With Bootstrap [7] - Post Formats

Key Takeaways

hey guys in this video we're going to add some custom post formats to our WordPress theme so this is a page in the documentation and it gives us all the different supported formats that we can use okay so we have a side which is basically just um kind of like a status update type post you'd probably just have a title and maybe the date and a small piece of content Gallery which is a gallery of images a link and image itself a quote status video audio and chat now I'm not going to get into all of these because that would be just way too much um but I'm going to show you how we can use an aside and also a gallery all right maybe something else as we as we go along all right so let's go and open up index PHP and I want to introduce a function called get template part and what we can do is what this does is it helps us not repeat ourselves all right if we look in index PHP we have this while loop and then we have um you know the title the content the author if we go to um single.php same thing the title and so on um archive what else page.php so what we can do is we can use get template part to create different content templates all right so let me just uh give you an example so we're going to create a new file called content.php all right and then let's go back to index and I want everything within the while loop okay so let's grab this down to this okay everything within the while loop we're going to cut it out going to go to content and just paste that in okay save it go back to index and then this is where we're going to use the get template part function so get template part and it's the file was called content PHP so in here we're going to say content save let's go back to our front end reload and you can see it's the exact same so that's good that's what we want it really cut down the code in our index file okay made it a lot easier to read so what we'll do now is we're going to use this in some of the other Pages as well so let's go to single.php all right and we want to go to the while loop once again and um we're going to replace everything again let me me just copy this in our single and we're going to get everything in the while loop and paste this in okay so save it now if we go to a single page you'll notice it's back to being formatted as if it was in the index page so what we'll do is in the content page we need to we need to put some conditional statements in so we know that if it's a single page we don't want the link around the title so let's go right above here and let's say PHP if is single and we want an else all right so let's copy this or cut it rather if it's single we don't want the link so we'll just paste it in and then we'll remove the link if it is if it's not single then we do want the link so let's save that and now the single page doesn't have the link so we'll copy this if is single and then let's go down and figure out what else we need so if it's single we don't want the excerpt we want the content so let's paste that there okay and then let's take the excerpt put that here but if it's single then we want the content okay now if we go back and reload now we have all the content the last thing we we need on the single page is the comments okay so let's just uh we'll take this and if single and we'll say PHP comment template and now we get our comments back okay so it's back to to how we want and the blog post page looks good looks how we want so we cut down that that repeating of ourselves okay and we just have a more Dynamic page and archive we can do the same thing so we'll grab this go in archive and just paste this in the while loop and there's not really any conditionals that we need to do here because it's the same as the index page okay so that's fine so now that we have that out of the way let's move on to our post formats so before we do anything we need to actually enable them so we do that in our functions.php file and we're going to go to our theme setup function here and let's go to the bottom and let's say add theme support we want to add theme support for post formats all right and then the second parameter is going to be an array of the formats that we want so we want a side and we want Gallery all right so we'll save that and now if we go to our post and we say uh add new now you should have this box here with the different formats so let's create the side post all right we'll put that in business and we'll say side poost one and then we'll just get some content paste that in publish so right now if we go back and look our side post is formatted just like our other ones there's no difference okay so to change that what we can do is in our in our theme folder we'll create a new file and we'll save it as content Das aside. PHP okay and then remember where we use that get template part we now want to add a second parameter to that which is going to be a function called get post format all right and we want to put that we want to put that in all of the get template parts so we have one in archive and we have one in single okay so in our side a Content aside PHP let's just write the word test and then go and reload and now you can see that that aside post now is just spitting out test because it's looking at this file so let's go ahead and edit this say div class um we'll still give it the blog post class but I want to give it a also a class of post aside all right and then let's give it div class well and bootstrap the well class gives it a gray background and some padding all right now in here let's say small put in a small tag and let's do PHP the author and we'll put an at sign and then let's do the date okay and then under that we're going to say PHP the content okay so if we go back now and reload there's our a side post okay which you can see is formatted very differently than the other ones all right so that's that now let's do a gallery okay so we're going to go to add new post and let's say photo gallery and let's say add media create gallery and I'm just going to grab these images create new Gallery link to let's say the media file all right so we'll insert gallery and publish all right now in our theme folder let's create a new file called content Das gallery. PHP all right and let's say div class blog post and uh let's do actually you know what we'll just do the content all right we want to make sure we put a special class in here as well save it now if we go back and reload load uh whoops oh we got to choose gallery and there we go so now we have our photo gallery actually let's put the title in we'll do an H2 and we'll say PHP the title okay and if we go to our stylesheet we'll say post gallery and let's give it a background let's see we'll give it a dark background we'll say padding 10 pixels and text align to the Center let's see what that looks like all right let's make the H2 white all right so it just gives you an example of how you can set different uh different formatting and this will just go to the file all right all right so that's post format so we're pretty much there as far as the blog goes uh in the next video I'm going to show you how we can start to create a custom homepage