D4mations.com

WordPress Theme With Bootstrap [4] – Main Post Loop

[ad_1]
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

d4mer

,
, , , , , , ,

26 responses to “WordPress Theme With Bootstrap [4] – Main Post Loop”

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

  20. 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'.

  25. 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?

Leave a Reply