• Friday , 20 September 2019

WordPress Theme With Bootstrap [4] – Main Post Loop

Code Canyon
https://i.ytimg.com/vi/DJrGP9X2_bQ/hqdefault.jpg



In this video we will add the WordPress post loop. It will fetch blog posts from the system and output them to our theme

Project Files – https://github.com/bradtraversy/wpbootstrap_theme

10 PROJECT WORDPRESS THEME COURSE: https://www.eduonix.com/affiliates/id/16-10405

SUPPORT THIS CHANNEL WITH A CUP OF COFFEE PER MONTH:
http://www.patreon.com/traversymedia

ONE TIME DONATIONS:
http://www.paypal.me/traversymedia

Original source

3d Ocean

Related Posts

26 Comments

  1. Enes
    September 5, 2019 at 15:22

    GOOGLE TRANSLATE : FOR THE FIRST TIME IN MY LIFE I LOGIN TO YOUR YOUTUBE ACCOUNT AND WRITE ONE "THANK YOU" … GOOD WHO WAS MY FRIEND.

  2. Brandon Wildhaber
    September 5, 2019 at 15:22

    Really good Tutorial!

  3. john jim
    September 5, 2019 at 15:22

    Does anyone have 2018 updates?

  4. john jim
    September 5, 2019 at 15:22

    My image is huge, any way to downsize it?

  5. crazy idea
    September 5, 2019 at 15:22

    you have thumbnail feature on bootstrap..

  6. Souad Sahli
    September 5, 2019 at 15:22

    Thanks, you are the best

  7. Marina Kovalyova
    September 5, 2019 at 15:22

    I was very disappointed that this course is out of date. The materials is not correct so this course has a lot of bugs that hard to solve for begginer.Of course I understand that main trend today is using reactive frameworks, but unfortunately I have to learn wordpress.
    So, i just wanted to know about your main course for building wordpress theme: does it still sutable for modern wordpress theme development?

  8. GeorgeMeehanDev
    September 5, 2019 at 15:22

    I noticed when I insert the code for the thumbnail the sidebar section keeps dropping to the bottom even though I am not even adding an image to the post. Also, when I do add an image to the post it will not fit into the dimensions for the blog thumbnail. Here is my code:
    {code}
    <main role="main" class="container">
    <div class="row">
    <div class="col-md-8 blog-main">
    <?php if(have_posts()) : ?>
    <?php while(have_posts()) : the_post(); ?>
    <div class="blog-post">
    <div class="post_thumbnail">
    <?php if(has_post_thumbnail()) : ?>
    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
    </div>
    <?php endif; ?>
    <h2 class="blog-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <p class="blog-post-meta"><?php the_date(); ?> by <a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>"><?php the_author(); ?></a></p>

    <?php the_excerpt(); ?>
    </div><!– /.blog-post –>
    <?php endwhile; ?>
    <?php else : ?>
    <p><?php __('No Posts Found') ?></p>
    <?php endif; ?>
    </div><!– /.blog-main –>
    {/code}

    And here is the CSS for the thumbnail:
    {code}
    .post_thumbnail img{
    width: 100% !important;
    height: auto !important;
    margin-bottom: 20px !important;
    }
    {/code}

    I've tried the CSS with and without the !important. Also, I am using Bootstrap 4.1 and I cannot change a lot of the Bootstrap CSS. Any help would be appreciated.

  9. Ahmet Özdemir
    September 5, 2019 at 15:22

    First of all, great work Brad! However, I think you should also include "add_image_size()" function for post thumbnails also. Because WordPress can regenerate post thumbnail size according to chosen image size mode. For example, if you use this code:
    <img src="<?php the_post_thumbnail_url('thumbnail'); ?>" alt="" class="card-img-top">

    WordPress automatically generate a thumbnail image size for the post. The image size can be determined from admin panel. This is actually a good thing to load website faster and to not load unnecessary image size. I hope you understand what I mean with this. You can also check this link:
    http://buckleupstudios.com/auto-resize-wordpress-featured-image-and-crop-if-necessary/
    I guess this guy is explaining it properly.

  10. Pallavi Gondane
    September 5, 2019 at 15:22

    my wp_bootstrap_navwalker is not working as i mean the dropdown is not coming could you just help me out in that

  11. Eden Meeks
    September 5, 2019 at 15:22

    Unable to create directory wp-content/uploads/2017/11. Is its parent directory writable by the server? — Has anybody gotten this error when trying to upload a pic?

  12. داریوش زمانی
    September 5, 2019 at 15:22

    hi,great,first Thank you for this training and other , but many way in review (team review ) wrong,for example add title tag in in header.php,
    talk about it, if is posible

  13. Andromeda
    September 5, 2019 at 15:22

    What if the post has many images?

  14. Hesller Huller
    September 5, 2019 at 15:22

    my images do not resize. I am using dreamweaver CC 2017. in the live view of dreamweaver, the images resized, however when I open it on google chrome, it doesn't. What is happening? -.-

  15. Wayne Ramshaw
    September 5, 2019 at 15:22

    Featured image is not showing on my pages only posts, any ideas guys?

  16. Martin Streiff
    September 5, 2019 at 15:22

    Thanks for tut. Menu works only "on click" not on hover.

  17. Eltac Emiraslanov
    September 5, 2019 at 15:22

    PLEASE HELP!

    ubuntu localhost error: Unable to create directory wp-content/uploads/. Is its parent directory writable by the server?

  18. TriathlonLars
    September 5, 2019 at 15:22

    This is where I hit my first problem. The style.css file seem to only style the header and nothing more. I can't change anything else and therefore not the img size of the thumbnails.

  19. WhyNotEveryThing
    September 5, 2019 at 15:22

    Where can I learn all the wordpress specific php tags and functions. How long will it take to get comfortable with it?

  20. Yonis Haidari
    September 5, 2019 at 15:22

    GREAT VIDEO!
    Fix if Blog's not showing up:
    Issue: You have your front page set to a static page.
    Fix: You have a Static web page as your home page, change it to None or — SELECT — under =Themes==Customize Front page to — Select — to remove the static page or 'Your Latest Posts'.

  21. chocopops
    September 5, 2019 at 15:22

    Please help, I did everything identically to what you did and my posts don't display at all. Doesn't say that threre are none either. I don't know what is going on 🙁

  22. Wasim Ahmed
    September 5, 2019 at 15:22

    If i just wanna show Latest post on home page and the rest of the post on Posts page .. can it be possible .. ???

  23. Abdul Maajied Abrahams
    September 5, 2019 at 15:22

    If anybody is wondering why their thumbnail post feature is not working try: add_theme_support( 'post-thumbnails', array( 'post', 'custom-type' ) );

  24. Philthy Phil
    September 5, 2019 at 15:22

    Really dig your tutorials man… I like the fast pace and skill level. Thank You for putting these up!

  25. harry gambhir
    September 5, 2019 at 15:22

    I added add_theme_support('post-thumbnails'); and the post have an option of the featured post but when I try to upload an image it simply fails. Gives me an error. I tried going into the media section and tried uploading photos there but that too failed. Any idea how to resolve this?

  26. Darren Bachan
    September 5, 2019 at 15:22

    I'm using your code for the main loop, but I can't seem to pull the posts.

Leave A Comment

You must be logged in to post a comment.