SlideShare uma empresa Scribd logo
1 de 41
POST FORMATS
   By Megan Goodson
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.
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:
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.
LIST OF POST FORMATS

 Image      Standard
 Link
             Video
 Aside
             Audio
 Chat
             Status
 Gallery

 Quote
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.)
POST FORMATS: ASIDE
 An aside is usually a short entry and is published without a title.
POST FORMATS: AUDIO

 An audio format is meant for a single audio clip or a song.
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).
POST FORMATS: GALLERY

 This format is for a collection of images using a gallery format.
POST FORMATS: LINK

 A post that holds a single link.
POST FORMATS: QUOTE

 These posts are great just for putting an inspirational quote down.
POST FORMATS: STANDARD

 This is the standard WordPress post type.
POST FORMATS: STATUS

 This post type sort of resembles a Facebook status post.
POST FORMATS: VIDEO

 This post type is meant for posting a video clip.
STYLING YOUR POST
     FORMATS
What, you thought they came styled? That’s way too easy!
YO U A R E U S I N G T H E M BU T T H E Y L O O K
                  HORRIBLE…

  Ick – this isn‟t that appealing.
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.
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.
ORIGINAL CODE
W H A T W E WA N T T O W O R RY A B O U T
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
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.
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”
FINAL CODE
ASIDE TEMPLATE STYLED
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.
C O N T E N T- L I N K . P H P C O D E
LINK FORMAT STYLED
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.
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.
VIDEO TEMPLATE CODE
VIDEO FORMAT STYLED
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.
MISSING A COMMENT LINK?


 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.
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.
R E A R R A N G I N G M E TA 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.
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.
NEW CODE



Above is the new code and it makes the layout look a bit better for
what I was going for.
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.
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!

Mais conteúdo relacionado

Semelhante a Post Type Formats

BlogPaws 2010 West - Blogging Tools - Wordpress - Sana Ahmed
BlogPaws 2010 West - Blogging Tools - Wordpress - Sana AhmedBlogPaws 2010 West - Blogging Tools - Wordpress - Sana Ahmed
BlogPaws 2010 West - Blogging Tools - Wordpress - Sana AhmedBlogPaws
 
Streamlining Your Template Structures When Building Themes
Streamlining Your Template Structures When Building ThemesStreamlining Your Template Structures When Building Themes
Streamlining Your Template Structures When Building ThemesCameron Jones
 
Wordpress Questions & Answers
Wordpress Questions & AnswersWordpress Questions & Answers
Wordpress Questions & AnswersNicole Dion
 
Easy Blogging With Emacs
Easy Blogging With EmacsEasy Blogging With Emacs
Easy Blogging With EmacsDashamir Hoxha
 
Customizing Your WordPress Theme Using Firebug and Basic CSS
Customizing Your WordPress Theme Using Firebug and Basic CSSCustomizing Your WordPress Theme Using Firebug and Basic CSS
Customizing Your WordPress Theme Using Firebug and Basic CSSLaura Hartwig
 
Introduction to Custom WordPress Themeing
Introduction to Custom WordPress ThemeingIntroduction to Custom WordPress Themeing
Introduction to Custom WordPress ThemeingJamie Schmid
 
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...LinnAlexandra
 
[DCTPE2011] Drupal 7 的Fields/Views 運用
[DCTPE2011] Drupal 7 的Fields/Views 運用[DCTPE2011] Drupal 7 的Fields/Views 運用
[DCTPE2011] Drupal 7 的Fields/Views 運用Drupal Taiwan
 
Slavin-Dodson Piece, With Code.
Slavin-Dodson Piece, With Code.Slavin-Dodson Piece, With Code.
Slavin-Dodson Piece, With Code.ALATechSource
 
WordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute WorkshopWordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute WorkshopBrendan Sera-Shriar
 
Easy Blogging With Emacs
Easy Blogging With EmacsEasy Blogging With Emacs
Easy Blogging With EmacsDashamir Hoxha
 
WP 201 Custom Post Types - Custom Fields - WordCamp Columbus 2015
WP 201   Custom Post Types - Custom Fields - WordCamp Columbus 2015WP 201   Custom Post Types - Custom Fields - WordCamp Columbus 2015
WP 201 Custom Post Types - Custom Fields - WordCamp Columbus 2015Joe Querin
 

Semelhante a Post Type Formats (20)

Project2 Design Specs
Project2 Design SpecsProject2 Design Specs
Project2 Design Specs
 
The WordPress Author
The WordPress AuthorThe WordPress Author
The WordPress Author
 
Wordpress(css,php,js,ajax)
Wordpress(css,php,js,ajax)Wordpress(css,php,js,ajax)
Wordpress(css,php,js,ajax)
 
Using class suffixes
Using class suffixesUsing class suffixes
Using class suffixes
 
BlogPaws 2010 West - Blogging Tools - Wordpress - Sana Ahmed
BlogPaws 2010 West - Blogging Tools - Wordpress - Sana AhmedBlogPaws 2010 West - Blogging Tools - Wordpress - Sana Ahmed
BlogPaws 2010 West - Blogging Tools - Wordpress - Sana Ahmed
 
Streamlining Your Template Structures When Building Themes
Streamlining Your Template Structures When Building ThemesStreamlining Your Template Structures When Building Themes
Streamlining Your Template Structures When Building Themes
 
Wordpress Questions & Answers
Wordpress Questions & AnswersWordpress Questions & Answers
Wordpress Questions & Answers
 
Easy Blogging With Emacs
Easy Blogging With EmacsEasy Blogging With Emacs
Easy Blogging With Emacs
 
Joomla tempates talk
Joomla tempates talkJoomla tempates talk
Joomla tempates talk
 
Customizing Your WordPress Theme Using Firebug and Basic CSS
Customizing Your WordPress Theme Using Firebug and Basic CSSCustomizing Your WordPress Theme Using Firebug and Basic CSS
Customizing Your WordPress Theme Using Firebug and Basic CSS
 
Introduction to Custom WordPress Themeing
Introduction to Custom WordPress ThemeingIntroduction to Custom WordPress Themeing
Introduction to Custom WordPress Themeing
 
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
 
[DCTPE2011] Drupal 7 的Fields/Views 運用
[DCTPE2011] Drupal 7 的Fields/Views 運用[DCTPE2011] Drupal 7 的Fields/Views 運用
[DCTPE2011] Drupal 7 的Fields/Views 運用
 
SEO For WordPress
SEO For WordPressSEO For WordPress
SEO For WordPress
 
W pthemes
W pthemesW pthemes
W pthemes
 
Slavin-Dodson Piece, With Code.
Slavin-Dodson Piece, With Code.Slavin-Dodson Piece, With Code.
Slavin-Dodson Piece, With Code.
 
WordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute WorkshopWordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute Workshop
 
Easy Blogging With Emacs
Easy Blogging With EmacsEasy Blogging With Emacs
Easy Blogging With Emacs
 
WP 201 Custom Post Types - Custom Fields - WordCamp Columbus 2015
WP 201   Custom Post Types - Custom Fields - WordCamp Columbus 2015WP 201   Custom Post Types - Custom Fields - WordCamp Columbus 2015
WP 201 Custom Post Types - Custom Fields - WordCamp Columbus 2015
 
INTRODUCTIONS OF HTML
INTRODUCTIONS OF HTMLINTRODUCTIONS OF HTML
INTRODUCTIONS OF HTML
 

Post Type Formats

  • 1. POST FORMATS By Megan Goodson
  • 2. 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.
  • 3. 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:
  • 4. 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.
  • 5. LIST OF POST FORMATS  Image  Standard  Link  Video  Aside  Audio  Chat  Status  Gallery  Quote
  • 6. 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.)
  • 7. POST FORMATS: ASIDE  An aside is usually a short entry and is published without a title.
  • 8. POST FORMATS: AUDIO  An audio format is meant for a single audio clip or a song.
  • 9. 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).
  • 10. POST FORMATS: GALLERY  This format is for a collection of images using a gallery format.
  • 11. POST FORMATS: LINK  A post that holds a single link.
  • 12. POST FORMATS: QUOTE  These posts are great just for putting an inspirational quote down.
  • 13. POST FORMATS: STANDARD  This is the standard WordPress post type.
  • 14. POST FORMATS: STATUS  This post type sort of resembles a Facebook status post.
  • 15. POST FORMATS: VIDEO  This post type is meant for posting a video clip.
  • 16. STYLING YOUR POST FORMATS What, you thought they came styled? That’s way too easy!
  • 17. YO U A R E U S I N G T H E M BU T T H E Y L O O K HORRIBLE… Ick – this isn‟t that appealing.
  • 18. 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.
  • 19. 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.
  • 21. W H A T W E WA N T T O W O R RY A B O U T
  • 22. 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
  • 23. 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.
  • 24. 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”
  • 27. 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.
  • 28. C O N T E N T- L I N K . P H P C O D E
  • 30. 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.
  • 31. 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.
  • 34. 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.
  • 35. MISSING A COMMENT LINK?  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.
  • 36. 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.
  • 37. R E A R R A N G I N G M E TA 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.
  • 38. 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.
  • 39. NEW CODE Above is the new code and it makes the layout look a bit better for what I was going for.
  • 40. 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.
  • 41. 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!

Notas do Editor

  1. Post_ClassEntry-TitleEntry-FormatComments_LinkEntry-SummaryEntry-Content
  2. When coming up with names make sure to think of how you want to style it. You want to make this easy on yourself not hard.