WordPress Post Formats Tutorial

[ad_1]
Learn what Post Formats are, what they are used for, and how to enable them within a theme. In this lesson we create unique styles for an aside, a link, and a photo gallery. Check out my “Get a Developer Job” course:

Link to download .zip of theme files as shown in this video (note: this is not a “complete” WordPress theme yet and this download is only intended for educational purposes to dissect and review):

To view a complete list of the WordPress lessons in sequential order visit:

Want to share the WordPress website that you’ve been creating on your computer with the world? Learn about the web host I use and how you can get a domain + hosting for $4.95 a month:

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at

Follow LearnWebCode on Twitter for resources and updates:


Posted

in

by

Tags:

Comments

48 responses to “WordPress Post Formats Tutorial”

  1. loganath M Avatar

    Best Tutorials…

  2. RAKESH KUMAR Avatar

    simple, easy to understand tutorial,
    best for beginners like me.
    thankyou very much for posting such a good video.

  3. Niranjan Rai Avatar

    best tutorial myan, thanks

  4. Nyein Aung Avatar

    hey guy! The tutorial is very nice and the best. but I want to say one thing..
    I am learning about wordpress not CSS.. it should be better not taking long minutes for explaining these bitchy CSS codes

  5. Jay Jay Hot Girls Avatar

    damn bra I subscribe love your work

  6. Marcos Di Paolo Avatar

    Small question here, is it my imagination or aside post won't show a featured image thumbnail?

  7. fayekhelmi Avatar

    Hey Brad! first i want to say that your tutorial series for wordpress is hands down the best tutorial series i have ever seen anywhere not just on youtube. thank you for taking the time for making it your information delivery and your eloquent way of talking really makes it easy to digest. i spent months trying to find a decent tutorial and was so frustrated but yours cracked the code!

    I have a question and i really hope you read this and answer me.. it's now 2017 and i see that this series was mostly done in 2014….. would you say that most information in this tutorial is still valid?

    Also i see you have a couple of tutorial series onudemy. please create a modern one for wordpress!

  8. Gerardo Peña Pérez Avatar

    2017 and you are still kicking ass with these tutorials.

  9. Yanira Zelaya Avatar

    Outstanding tutorial, very clear concise and very helpful.
    Couldn't have done without it.
    Thank you Brad.

  10. Pandapferd Avatar

    I always wanted to make my own wordpress template but I never knew how to start. All tutorials I went trough never brought me forward. But your tutorial series really helps me out, you are explaining everything very good, everything is nicely structured.

    Thank you!

  11. Lisa Friedrichsen Avatar

    Outstanding tutorial. I've followed along on all of your WordPress tutorials and this one was particularly rewarding because it addressed the important best practice of DRY. Thank you!!!!

  12. Joseph M Avatar

    This is REALLY GREAT TUTORIAL thanks for this @LearnWebCode

  13. value Keymap Avatar

    Hi, I have looked into running WP without the use of MAMP, but I'm running into errors. My default Localhost is set to port 80 and no matter how I configure my user.conf file to point to localhost:8888 it won't work. Could you please provide (or point us to) a good online resource to setting up WP without MAMP. Thanks.

  14. Andrew Denis Avatar

    You are an amazing teacher, and I agree that your videos are some of the best I have ever seen. Thanks so much for the effort and sharing of your amazing knowledge in such an accessible way.

  15. YepOkay Avatar

    Great videos. Has anyone ever mentioned you sound kind of like Wil Wheaton, by the way?

  16. Kuan Gerry Avatar

    hmm… any idea why wordpress decided to hide the post format in default?

  17. Sandeep Kamboj Avatar

    After long time i found great tutorial on WordPress. Great great tutorial…

  18. Syed Shazab Avatar

    +learnWebCode Sir I am really enjoying your series of lectures on WordPress.
    That's really helping me a lot.
    Good Work, Keep it going!

  19. Ryan Griffin Avatar

    I realized right away that when you said "give yourself some homework" in regard to finishing up the single.php file in the last video on Post Formats, I was going to have to find some way to get the thumbnail and the get_the_excerpt() to not apply to single.php. I figured that would be a couple of if then statements in content.php, buuuuuut I notice in your source file (content.php), you put

    if (get_post_format() == false) {
    get_template_part('content', 'single');
    } else {
    get_template_part('content', get_post_format());
    }

    which I THINK fixes the problem.

    Can you please help me out? Am I correct—is that how you fixed the problem? Or am I missing something?

  20. Onlyme2015 Avatar

    Whats the name of the theme you are using? I really like it.

  21. Geoffrey  Richardson Avatar

    My gallery has the read more sign and only displays if i click on that, could anyone suggest where I possibly could have went wrong. Thank you

  22. Yassin YA Avatar

    Grteat tutorial sir 🙂 I've one problem i created a gallery post as you did, but it is not showing on the home page i can only see the titile. It only shows up when i click on the title

  23. Joaquin Ortega Avatar

    Anyone know tutorial for the other 6 post formats as good as this one? thanks..

  24. Kenny Brand Avatar

    Fantastic Tutorials! The only tiny criticism would be with the lack of gap between finishing your code, and switching to the next page. For those of us with rusty php/css skills who need a moment to digest, I would love it if you took a breath between the end of your typing and moving on to the next page. I can't count how many times I have hit pause a split second too late. 😉

  25. JIAN ZHAO Avatar

    very helpful tutorial, thank you.

  26. DJ Takin' It Back Avatar

    I use WordPress. How do you get to the php files?

  27. Johir uddin Avatar

    Hi, could you help me? Excuse my English, I'm from Brazil and I used the google translator to send you this message.
    I am creating a WordPress theme from scratch on localhost, I'm bad with difficulty in the post. I want my posts are separated, as if each were on a different box and with a space between them, bad they are together one below the other. How do I it does not know what to do bad, since tried padding codes and bad no margin worked.

  28. Jerrick Hakim Avatar

    How did you learn all of this?

  29. Justin Munce Avatar

    I'm having a bit of trouble getting aside.php to work.

    I've even tried using your index and functions code, but still, it just displays the normal single. Does the method here still work in 4.4?

  30. unique video Avatar

    wonderfull bro.. grt tutorial.can u explain about hooks

  31. Hector Archundia Avatar

    Whoa whoa whoa… i've been following the tuts since the first video and this is not the same index.php file! But I can see you have everything the same as the previous lessons! HELPPPPPPPPPPPPFDGDFG! —- EDIT: wait wait… i skipped some videos….

  32. Lucas da Silva Ramos Avatar

    Hi, could you help me? Excuse my English, I'm from Brazil and I used the google translator to send you this message.
    I am creating a WordPress theme from scratch on localhost, I'm bad with difficulty in the post. I want my posts are separated, as if each were on a different box and with a space between them, bad they are together one below the other. How do I it does not know what to do bad, since tried padding codes and bad no margin worked.
    Want them thus: "[post1] [post2]," they are so [post1 post2].

  33. Raqib Zaman Avatar

    1. You have a tutorial on WordPress Image Format?
    2. And even if you edit the php for- is it theme? Don't you have to make this edit every time you update the theme?

  34. Arvin Maryami Avatar

    settings > speed > 1.5

  35. danny1326 Avatar

    First, I just want to say thank you so much for these videos. They have been a tremendous help in learning how to develop for wordpress!
    I just wanted to point out a small error and my fix for it (which may not be the best, but it works):
    Since changing the single.php to link to the content.php with get_template_part(), the thumbnail of the featured image on the single page now displays as the "small-thumbnail" and not the "banner-image".

    To fix this I've changed the article class and post-thumbnail (above the title that we used for the small-thumbnail) to:

    <article class="post <?php if ( has_post_thumbnail() AND !is_single() ) { ?>has-thumbnail <?php } ?>">

    <div class="post-thumbnail">
    <a href="<?php the_permalink(); ?>">
    <?php if ( is_single() ) {
    } else {
    the_post_thumbnail('small-thumbnail');
    }
    ?>
    </a>
    </div>

    and I've changed our if statement at the bottom of content.php to include the is_single() function:

    <?php if ( is_search() OR is_archive() ) { ?>
    <P>
    <?php echo get_the_excerpt(); ?>
    <a href="<?php the_permalink(); ?>">Read more&raquo;</a>
    </p>
    <?php } else { if ($post->post_excerpt) { ?>

    <P>
    <?php echo get_the_excerpt(); ?>
    <a href="<?php the_permalink(); ?>">Read more&raquo;</a>
    </p>

    <?php } else if (is_single() ) {

    the_post_thumbnail('banner-image');
    the_content();

    } else {
    the_content();

    } ?>
    <?php }?>

    Hopefully this helps anyone else who runs into this problem and is also looking for a fix. Again, love your videos and I'm learning so much from them. Keep up the awesome work!

  36. marco tiberi Avatar

    fantastic tutorials, they are simple, to the point and complete. I am impressed by your self confidence in doing and explaining things in the same time. Very useful for me, better than reading any book about the topic.

  37. Bart Heimenberg Avatar

    Understanding more and more about wp. What a great channel! Thanks a lo for your free and clear education.

  38. networking Avatar

    get_template_part('content',get_post_format()); not working for search.php nor with archive.php…its only working when we have links like localhost/wordpress/author/admin , for localhost/wordpress/category/xyz but not for localhost/wordpress/?=flower nor for localhost/wordpress/2014 etc ..I have been following ur tutorials and they are amazingly explained in such a easy way. I have got stucked here and I can't figure that out ..plz help

  39. elad maderer Avatar

    I think that's the most useful and professional, yet not too complicated tutorial I've seen.

    Thank you!

  40. Elia Perez de Miguel Avatar

    Thanks so much for this tutorials!

    I'm stuck in the last "homework" you asked for… =S
    Maybe somebody could help me…

    I went to single.php and substitute the <article></article> with get_template_part('content', get_post_format());

    And after that I went to the content.php file and did this:… Ok…for some reason Youtube doesn't let me paste it… So I'm gonna have to rewrite it here… =S

    Making it simple… I've put this elseif statement, like this:

    <?php if (is_search() OR is_archive()) { ?>
    <p>
    <?php echo get_the_excerpt(); ?>
    <a href=" <?php the_permalink(); ?>"> Continúa leyendo &raquo;</a>
    </p>

    <?php } elseif (is_single()) {
    the_post_thumbnail('banner-image');
    the_content();

    } else {
    if ($post->post_excerpt) { ?>
    <p>
    <?php echo get_the_excerpt(); ?>
    <a href="<?php the_permalink(); ?>"> Continúa leyendo &raquo;</a>
    </p>
    <?php } else {
    the_content();
    }
    } ?>

    But after that I found the problem that the thumbnail above the h2 would apear in the single.php page to, so I did this:
    <?php if (is_home()) { ?>
    <div class="post-thumbnail">
    <a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail('small-thumbnail'); ?></a>
    </div>
    <?php } ?>

    But even though the small thumbnail doesn't apear at single.php anymore, the space it took is still there, so the article itself is not centered normally, it leaves the space for the small thumbnail.

    I've tried adding this at the end:

    <?php } else {
    //
    } ?>

    But it makes no difference. Does somebody have any clue of what is the problem there? Because I have no idea… =S

    Thanks ahead for the answers.

  41. Marquez857 Avatar

    Indeed goot stuff . Most important part – does not waste peple's time . Love when someone knows how to make good tutorials.

  42. Vitezslav Omelka Avatar

    still in quirks mode 🙁 is it bca non-article elements are wrap in article tag , or do i missing something???

Leave a Reply

Your email address will not be published. Required fields are marked *