learning WordPress Post Formats Tutorial > WordPress learning

 

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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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