Wordpress - Custom loop query for displaying custom post type

Question

I'm messing around with my code. My goal is to display 4 custom post type on the homepage in the HTML layout I've created. Here's my code. Actually I can get the href but I can't loop the code not even achieve my scope.

<div class="roundedframe ">
<div class="container-fluid">
         <div class="row"> 
 <div class="col-lg-4 col-sm-6">
                        <a  class="portfolio-box" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                                <div class="portfolio-box-caption">


 <div class="portfolio-box-caption-content">
                                        <div class="project-category text-faded">
                                        Category
                                        </div> 
<div style="background-image: url('<?php the_post_thumbnail_url(); ?>');">
                                          <div class="project-name"> <?php // WP_Query arguments
$args = array(
    'name'               => 'case-studies',
    'nopaging'               => true,
    'posts_per_page'         => '4',
);

// The Query
$query = new WP_Query( $args );
while ( $query->have_posts() ) :  $query->the_post();
?>
                                            Project Name
                                           </div>
                             </div>
                          </div>
                    </a>

                </div>
            </div>
    </div>

</div>

Answer 1

You should put your code in the looping area. What i can see, you missed the endwhile also.

<div class="roundedframe ">
<div class="container-fluid">
         <div class="row"> 

<?php // WP_Query arguments
$args = array(
    'name' => 'case-studies',
    'nopaging' => true,
    'posts_per_page' => '4'
);

    // The Query
    $query = new WP_Query($args);
    while ($query->have_posts()):
        $query->the_post(); ?>
        <div class="col-lg-4 col-sm-6">
          <a  class="portfolio-box" href="<?php
    get_the_permalink();
    ?>" title="<?php
    get_the_title();
    ?>">
          <div class="project-category text-faded">
          Category
          </div> 
          <div style="background-image: url('<?php
    the_post_thumbnail_url();
    ?>');">
            <div class="project-name"> 
              Project Name
            </div>
          </div>
          </a>
        </div>
    <?php
    endwhile;
    ?>
    </div>
  </div>
</div><!--.roundedframe-->

Try this and let me know. It may help you. Before that you should learn about wp_query

https://codex.wordpress.org/Class_Reference/WP_Query

Answer 2

Assuming the post type you want is case-studies you should name the key post_type and not name . You also have to place the column inside the loop and close it afterwards. You also missed a </div> tag.

<?php $query = new WP_Query( [
    'post_type'      => 'case-studies',
    'nopaging'       => true,
    'posts_per_page' => '4',
] ); ?>

<?php if ( $query->have_posts() ) : ?>
    <div class="roundedframe ">
        <div class="container-fluid">
            <div class="row">

                <?php while ( $query->have_posts() ) : $query->the_post(); ?>

                    <div class="col-lg-4 col-sm-6">
                        <a class="portfolio-box" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                            <div class="portfolio-box-caption">
                                <div class="portfolio-box-caption-content">
                                    <div class="project-category text-faded">
                                        Category
                                    </div>
                                    <div style="background-image: url('<?php the_post_thumbnail_url(); ?>');">
                                        <div class="project-name">
                                            <h2><?php the_title(); ?></h2>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                <?php endwhile; ?>

            </div>
        </div>
    </div>
<?php endif; ?>

<?php wp_reset_postdata(); ?>