WordPress Put up Codecs Tutorial

by birtanpublished on July 3, 2020

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


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


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

indexphp 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


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

Related Videos

Be the first to comment “WordPress Put up Codecs Tutorial”

Your email address will not be published.

There are no comments yet.