Shortcode Custom Post Type WP Query OWL Ready, Elementor or Bricks Compatible

add this to your functions.php

the shortcode is [get_last_posts] is it anywhere you want, even with builders…

you can change the post type

post per page or add more properties check this source for more parameters: WP_Query | Class | WordPress Developer Resources

 

function get_the_last_posts( ) {
     $qquery = new WP_Query(array(
          'post_type' => 'news',
          'posts_per_page' => 8
     ));
echo '<div class="carousel-wrap">  <div class="owl-carousel">';
     
     while ($qquery->have_posts()){
               $qquery->the_post();
          ?>
       
       
<div class="item">
     
     <div>
          <a href="<?php echo get_the_permalink(); ?>"><?php echo get_the_post_thumbnail( get_the_ID(), 'size-1220x730' ); ?></a>
 	</div>
     <div class="sslider-category">
          <?php 
           foreach ( get_the_terms( get_the_ID(), 'news-category' ) as $tax ) {
    		echo $tax->name;
           }
           ?>
     </div>
     <div class="sslider-title">
          <?php echo get_the_title(); ?> 
     </div>
     <div class="sslider-desc">
          <?php echo get_the_excerpt(); ?>     
     </div>
     <div class="sslider-link"> 
          <a href="<?php echo get_the_permalink(); ?>">JETZT LESEN</a>	
     </div>
     
</div>


          <?php
     }
     
     echo ' </div></div>';
          wp_reset_postdata();
}
add_shortcode( 'get_last_posts', 'get_the_last_posts');

 

 

 

if it is used with elementor this is the CSS need to be added to the parent container

selector{
position:relative;
}
selector .item{
background:white;
}

selector .sslider-category{
font-family: "Inter", Sans-serif;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color:#fd4539;
padding: 20px 20px 0 20px;
}

selector .sslider-title{
color: #122856;
font-family: "Inter", Sans-serif;
font-size: 28px;
font-weight: 900;
line-height: 38px;
letter-spacing: 1px;
padding:20px;
}

selector .sslider-desc{
color: #122856;
font-family: "Inter", Sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 30px;
letter-spacing: 1px;
padding: 0 20px 0 20px;
min-height:185px;
}

selector .sslider-link{
font-family: "Inter", Sans-serif;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color:#fd4539;
padding: 20px ;
text-align:right;
}
selector .sslider-link:hover{
color: #122856;
}

selector .sslider-link::after{
content: "\f061";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}

selector .owl-prev{ 
    position:absolute;
    left:40px;
    top:40%;
}
selector .owl-prev i{
    color:white;
    background: #122856;
    padding:20px;
    border-radius: 100px;
}
selector .owl-prev i:before {
    content: "\f060";
}
selector .owl-next{ 
    position:absolute;
    right:40px;
    top:40%;
    
}
selector .owl-next i{
    color:white;
    background: #122856;
    padding:20px;
    border-radius: 100px;
}
selector .owl-next i:before {
    content: "\f061";
}

 

 

 

here is the owl script to run the slider typical default owl setup really.

<script>
jQuery('.owl-carousel').owlCarousel({
  loop: true,
  stagePadding: 200,
  margin: 40,
  nav: true,
  navText: [
    "<i class='fa fa-caret-left'></i>",
    "<i class='fa fa-caret-right'></i>"
  ],
  autoplay: true,
  autoplayHoverPause: true,
  responsive: {
    0: {
      items: 1,
      stagePadding: 0
    },
    600: {
      items: 2,
      stagePadding: 0
    },
    1100: {
      items: 3,
      stagePadding: 0
    },
    1600: {
      items: 3
    }
  }
})

</script>