WordPress Post Formats Tutorial

WordPress Post Formats Tutorial

SUBTITLE'S INFO:

Language: English

Type: Robot

Number of phrases: 378

Number of words: 2780

Number of symbols: 11748

DOWNLOAD SUBTITLES:

DOWNLOAD AUDIO AND VIDEO:

SUBTITLES:

Subtitles generated by robot
00:00
in this wordpress tutorial we will learn about a feature named post formats I think the best way to understand what a post format is is to begin by looking at the problem that post formats were designed to solve so throughout this series we've been building a basic theme and all of our posts look nearly identical to one another they all use the exact same colors and layout and typography and spacing now if we lived
00:31
in a world where the only content we would ever post is a standard news article or blog post that's a-ok but that's not the world we live in we will typically want to post simply a status update or in other words a quick blurb of text that doesn't need a title or perhaps we want to link to an external website and we want that link or post to be styled differently than our self authored content or maybe we want to add an image or a photo gallery and we want it to use a black background
01:01
so the photos really pop so the general idea that I'm getting at here is that if we're posting different types of content our theme should have different types of presentation to match that type of content so this is exactly where post formats come into play now the team of developers that create the core WordPress software have put together a standardized list of nine post formats now because I don't want this tutorial to become two hours long we are only going to focus on the first three a side
01:34
gallery and link very quickly I want to point out that even though the core WordPress software has the capability of assigning a post format to a post the responsibility lies on each individual theme to actively enable post format support which is why depending on the themes you've used in the past you may have never even been aware that post formats exist so in the remainder of this tutorial we will be writing the code in our theme files to enable post
02:06
format support and then handcraft different styles or presentations for an aside a link and a photo gallery let's get started so our first step is to enable post format support and to do that we're going to jump into the functions.php file of our theme folder now in an earlier lesson we set up a function named learning WordPress setup and this is where we did things such as registering navigation menus and adding support for thumbnails
02:38
or featured images so this is the same function where we will add support for post formats so I'll add a comment to stay organized add post format support I'm going to use a function named add theme support you can see that we use this same function earlier in the series to add thumbnail support so we can use this same function multiple times passing at different arguments to add different features so in this case we
03:08
want to add support for post formats comma and then we can specify which of the nine post formats we want to support so we only wanted to support a side gallery and link so let's create an array and then within that array we will say a side gallery and link and then I'll be sure to include a semicolon at the end of this line of code now before I save the changes to this file so
03:40
before I save this new code I want to pull up a quick before and after so in our dashboard if we begin to create a new post you'll notice that there is no module in the right-hand side for post format but as soon as we save this new code control save if we come back to this add new post screen we can see a new module named format and we can choose between standard aside gallery and link so let's attempt to create an aside this is an aside it does not need
04:12
a title you can think of this post as a status update like you would see on a social network app lorem ipsum just to take up more space so if we publish this and refresh our website we see a rather boring looking pose but this is where the fun begins now that we've designated this as an aside or we've differentiated it from a standard post we can write code and styles in our theme files that are only applied to asides so in the index dot
04:43
PHP file of our theme folder within the loop we can see that this line of code get template part with an argument of content is responsible for the meat and potatoes of our posts now if we pass this function a second argument it can become much more powerful and flexible so I'm going to add a comma and then get post format so now instead of this line always attempting to pull in content dot PHP of our theme folder this function
05:15
will dynamically include the name of the post format so now in this case this line of code when it runs through the loop and meets this new aside post will attempt to pull in a file in our theme folder named content - a side dot PHP so now it's as simple as creating that new file in our theme folder new file content - aside oh hello so if I save
05:45
and refresh all that we see is oh hello instead of the standard output for a post so now we can simply edit this content - a side PHP to include the dynamic content that we want to include so let's use the article element I will give it a class of post and post aside so that we have a unique class to target in our CSS and then I simply want to output the content so PHP use the the
06:17
content function so this should be rather bare-bones but now we can very easily adjust its appearance so we have this unique class of post aside so in our style sheet let's search for our article styles so let's create a new comment to stay organized aside styles we can say article the class of post aside let's give it a larger font size let's give it a yellow
06:49
background give it a bit of padding let's give it down des des so board a radius 5 pixel let's give it a faint shadow box shadow 3 pixels horizontal and vertically with a 3 pixel blur and we will use a very light grey so if we save and refresh we see that our side post is styled very differently from a standard post now let's imagine that above this text we want to include in a
07:21
small font the user name the @ symbol and then the date so in our content a side file I will create a new line of code P for paragraph I will give it a class of mini maida so we can style it the first bit of text that we want to output is the user's name who posted the update or the aside so I'll drop into PHP I will use the the author function we then wanted to include the @ symbol
07:54
and the date so I will drop back into PHP use the the time function and we can specify exactly how we want to format the date quotes uppercase F for the month lowercase J for the day of the month and then uppercase Y for the four-digit year so if we save and refresh here is the exact text that we wanted to output now let's add CSS so that this metadata is very small so
08:26
we'll target the mini metaclass font size 68% we want to remove this bottom margin so that there is not a large gap here so margin zero let's also use a lighter color much better so we've given the aside post format enough attention for now let's transition to the link post format let's imagine that we wanted to share a
08:59
really neat link with all of the visitors of our website so for example here is a guide on css3 transforms by the brilliant David to Sandro and let's imagine that I want to share this URL with all of my visitors I will copy this URL head over to the wordpress dashboard create a new post in the title field I will describe what I'm sharing anyone who wants to learn about CSS 3d
09:33
transforms needs to check out this guide by David - Sandro I can simply paste the URL into the content area of the post choose the link format publish now if we visit our web site this is clearly not the pinnacle when it comes to formatting a quick link this is using the standard post presentation so let's create our own link presentation by creating a new
10:05
file in our theme folder named content - link so we will begin with the article element I will use a class of post and post link so we have something unique to tack on to with our CSS within this element I simply want to create a link now the text that we want users to click on is simply the title so PHP the title
10:36
and the actual URL itself is the content field and because I don't want WordPress to use any formatting for the content instead of simply saying the content I'm going to do something a bit different I will echo the output of get the content so this way we will literally just get the URL that we pasted in and WordPress will not try to format the text by adding paragraph code for us or anything like that so if we save in refresh
11:08
we see a very streamlined presentation for the link it's simply the text and if we click it it takes us to the link now let's add a bit of styling so that this link stands out so let's use a nearly identical style that we used for the aside only instead of yellow for the background let's use blue so for article post aside I'll add a comma and include post link so we will inherit all of these styles from the aside element its add a comment to stay organized link
11:40
post format styles let's style the link itself within the post link article so that it is a block level element so it itself has the padding instead of its container element and since we're doing that let's remove the padding from the outer article element and also override the yellow background color with a nice blue value
12:14
much better and I just realized that I forgot to capitalize the s into Sandra okay so behind the scenes I just corrected that my apologies to David and all of the dis and rose in the world all right so our link post format is now complete let's change gears and focus on the gallery post format so let's take a quick look at the out of the box standard default WordPress photo gallery so I'm creating a brand new post I will give it a title of animal photographs
12:47
use the add Media button in the left hand column there is a create gallery link you now have the chance to click on any and all images that you want to include in a new gallery so I will choose this this this and this look for the create new gallery button in the bottom right you can even give each image a caption squirrel bird on fence cat head jumping bird these are amazing
13:19
captions I know so I will link to the media I want four columns so that all images sit on one row and then I will click insert gallery so I will click publish let's go visit our website so by default WordPress will output styles for us that floats the images so they all sit on one line and adds a faint border and includes the caption but if we designate this post as a gallery and update we can
13:52
not take control of this presentation by creating content - gallery PHP so let's imagine that we want this gallery area to use a black or dark grey background so the photos really pop let's imagine that we do not want to include any of this meta data text and let's imagine that we want the title text to be white and centered horizontally so let's make all of those things happen so in our text editor I will create a new file named content - gallery begin with the
14:26
article element give it a class of post and also post gallery so we want to include a heading level 2 or any element that you want to use with the name of the post so PHP the title and then we also want to output the content PHP the content now let's write accompanying CSS for this post gallery so in our style sheet create a new section to stay
14:57
organized post format gallery Styles articles that have a class of post gallery should have a dark background color not quite black but a very dark grey the text color should be white let's give it 20 pixels of padding and we wanted to Center the title text so I will say article post gallery target any of the heading level 2 elements and make
15:29
sure that they use text-align:center now I personally do not care for the borders that WordPress adds by default to the images so we can overrule that by selecting the post gallery articles dig in for any image elements use the border property and say none now because WordPress assigns that border style inline in the HTML code it can be difficult to overrule so I'm going to
16:02
use the important tag now quick note please do not use this unless you absolutely need to this is one of the few scenarios where it actually makes sense to use the important tag but generally littering your style sheet with the important tag is not a best practice so we have completed the presentation for our gallery post type now before we close out this lesson the final topic that we need to address is making sure that our post formats retain
16:33
these unique styles throughout the website so for example we know that in index.php which is responsible for outputting the code on our home page we used the get post format code so that WordPress will automatically use the appropriate content - aside or content - gallery but index dot PHP isn't the only lens to view our website through so for example what if someone searched for photographs clearly the results will
17:05
return the animal photographs gallery but we have not told our search view to use the custom presentations that we created now all we need to do to solve this is head over to the search PHP file in our theme folder and adjust the line of code that outputs the content so just like we did towards the very beginning of this lesson we can add a second argument get post format save refresh the search results and we are in
17:36
business so that takes care of the search view what if someone uses the archive view so for example what if they view the monthly archive for 2014 September clearly our post format presentations are not being used to fix this we can hop over to our theme folder load the archived PHP file here's the line of code that's outputting the content and again just provided a second argument get post format and finally we would
18:09
also need to adjust our single or permalink view by editing the single dot PHP file now I think you can extrapolate what we just did for search and archive and give yourself a bit of homework by adjusting your single view or you can always download the source files for this demo theme which are updated at the end of every lesson that will bring this lesson to a close thank you for watching I hope you feel like you learned something and stay tuned for more wordpress and web development tutorials thanks bye

DOWNLOAD SUBTITLES: