post type formats
DESCRIPTION
A powerpoint that explains the new post type format feature in WordPress.TRANSCRIPT
![Page 1: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/1.jpg)
POST FORMATS
By Megan Goodson
![Page 2: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/2.jpg)
WHAT ARE THEY?
Post formats are a theme feature that came out in
WordPress 3.1 that allow a user to format each post
differently based on the type of content.
They are like Tumblr’s post formats on their
blogging interface.
![Page 3: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/3.jpg)
HOW TO FIND THEM
To find them, log into your WP Dashboard and go to
Posts, Add New. If they are supported and enabled in
your theme you will see a little box that looks like this:
![Page 4: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/4.jpg)
USING POST FORMATS
You have to put this code into your theme’s function.php to enable
support for Post Formats.
If you are using WordPress’s theme Twenty Eleven it’s already
there. But if you want to add in the rest of the post formats you have
to edit it.
![Page 5: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/5.jpg)
LIST OF POST FORMATS
Image
Link
Aside
Chat
Gallery
Quote
Standard
Video
Audio
Status
![Page 6: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/6.jpg)
NOTICE
You can NOT make your own post types.
You can only use the ones that come with the theme.
You CAN edit the styles of the post types.
Not all themes can support post types. (Example:
Hybrid does not.)
![Page 7: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/7.jpg)
POST FORMATS: ASIDE
An aside is usually a short entry and is published
without a title.
![Page 8: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/8.jpg)
POST FORMATS: AUDIO
An audio format is meant for a single audio clip or a song.
![Page 9: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/9.jpg)
POST FORMATS: CHAT
A chat format is supposed to be for a few lines of a chat
from an instant message session with a friend or a family
member (or anyone).
![Page 10: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/10.jpg)
POST FORMATS: GALLERY
This format is for a collection of images using a gallery format.
![Page 11: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/11.jpg)
POST FORMATS: LINK
A post that holds a single link.
![Page 12: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/12.jpg)
POST FORMATS: QUOTE
These posts are great just for putting an inspirational quote down.
![Page 13: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/13.jpg)
POST FORMATS: STANDARD
This is the standard WordPress post type.
![Page 14: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/14.jpg)
POST FORMATS: STATUS
This post type sort of resembles a Facebook status post.
![Page 15: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/15.jpg)
POST FORMATS: VIDEO
This post type is meant for posting a video clip.
![Page 16: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/16.jpg)
STYLING YOUR POST FORMATS
What, you thought they came styled? That’s
way too easy!
![Page 17: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/17.jpg)
YOU ARE USING THEM BUT THEY LOOK HORRIBLE…
Ick – this isn’t that appealing.
![Page 18: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/18.jpg)
LET’S STYLE OUR OWN
I played around with the PHP and styles and here is one
I came up with.
Remember: You can only *style* the formats, you can NOT make up your own post formats yet.
![Page 19: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/19.jpg)
HOW DID I DO IT?
It’s basically the same structure every time.
There are a few basic classes you have to edit in
the template file and sometimes rearrange a couple
of divs (and delete elements you don’t want) and
finally maybe a couple of tweaks to the functions.php
file.
I will get into more detail in the next few slides.
![Page 20: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/20.jpg)
ORIGINAL CODE
![Page 21: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/21.jpg)
WHAT WE WANT TO WORRY AB OUT
![Page 22: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/22.jpg)
CHANGING CODE
This line right here gives the entire post it’s class. So I named mine ‘aside_container’
The updated line should look like this, given of course your class will be your name and not mine
![Page 23: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/23.jpg)
CHANGING CODE
After you edit that, the rest of the div’s are simple.
For every “entry-classname” you see just replace it with
the postypename-classname.
Example: entry-content will now be aside-content
NOTE: only change element classes on the elements you
want to change. If you only want to style the header then
just change the entry-header. Otherwise you will have to
remember to style them all.
![Page 24: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/24.jpg)
EXAMPLE
Change to: “aside-title”
Change to: “aside-format” and I went ahead and changed the string after that as well. But you would change this to whatever format you are using (i.e link, gallery, etc)
Change to: “aside-summary”Change to: “aside-content”Change to: “aside-meta”
![Page 25: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/25.jpg)
FINAL CODE
![Page 26: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/26.jpg)
ASIDE TEMPLATE STYLED
![Page 27: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/27.jpg)
STYLING LINK FORMAT
This is going to be the same process as the aside
format.
The only real difference is in the styling.
REMEMBER – Only change the classes you want to
style or need to style.
Compare your content-link.php to content-
aside.php and try to match up everything.
![Page 28: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/28.jpg)
CONTENT-L INK.PHP CODE
![Page 29: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/29.jpg)
LINK FORMAT STYLED
![Page 30: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/30.jpg)
STYLING VIDEO FORMAT
Styling the video format can be either easy or
complicated it just depends what kind of styling you
want.
For example purposes I am going to make it as
simple as possible.
However, online there are many articles on how to
style video formats, so if you want to go further, I
suggest you go online and see what is out there.
![Page 31: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/31.jpg)
NOTICE
Twenty Eleven does NOT have a content-video.php
template.
So we have to make one.
It’s not very hard all you need to do is duplicate
one of the templates. I duplicated the links template.
Then all you do is change everything once again to
video-elementname.
![Page 32: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/32.jpg)
V I D E O T E M P L AT E C O D E
![Page 33: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/33.jpg)
VIDEO FORMAT STYLED
![Page 34: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/34.jpg)
EDITING PHP
So far we’ve been editing just the HTML around the code with
one or two tweaks to the php code but nothing too drastic.
We’re about to dive in to the drastic editing.
Two things to remember:
*****ALWAYS MAKE A BACK UP OF YOUR FILES *****
DO NOT edit this if you don’t want to. This is just
personal taste.
![Page 35: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/35.jpg)
MISSING A COMMENT L INK?
I’m sure you’ve all noticed this one chunk of code
that has been commented out.
I did it on purpose because I didn’t feel like we
needed two comment links.
![Page 36: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/36.jpg)
THE CHUNK OF CODE
Commenting it out, I got rid of the reply bubble and I left
the “leave a reply”.
I didn’t delete it just incase I decided that I wanted it later.
![Page 37: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/37.jpg)
REARRANGING META DATA
To customize this further I also decided that I
wanted to change up the date and the reply link. In
my code I found the PHP the code and played around
with it.
I personally just deleted mine because I knew for
certain that I definitely did not want it back.
![Page 38: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/38.jpg)
ORIGINAL CODE
The arrows above are what we are going to edit. 1. The class “sep” just means separator. It’s what separates the comments link from the
date. So DELETE that line to get rid of the separator. 2. I changed the ‘leave a reply’ to just ‘reply’ you can put anything you want in between
the ‘ ’ for the comment link to say whatever you want. (It could say “to the Batcave”) 3. The last line is the edit post link. I personally thought it was in the way, so I deleted
that line as well.
![Page 39: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/39.jpg)
NEW CODE
Above is the new code and it makes the layout look a bit better for what I was going for.
![Page 40: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/40.jpg)
WHAT ABOUT THE OTHERS?
The other post type formats can be edited the same
way.
There needs to be a template.php file for each
format you want to edit/change.
There is ***NO*** styling on the original format
types. So if you want it to look different you HAVE to
edit it.
![Page 41: Post Type Formats](https://reader038.vdocuments.us/reader038/viewer/2022102804/548a92fab479598b0a8b46bf/html5/thumbnails/41.jpg)
CONCLUSION
Post Formats are fun!
You can NOT create your own at the moment (this
could very well and probably will change with one of
the newest updates)
You CAN only STYLE the formats as we did in the
slides before.
Have fun and make your WordPress more to your
taste!