0

I am a newbie developer who is still learning, and at the moment I am developing my very own first wordpress custom theme. However, I am struggling to get this working. I Have a "Hero" carousel or a landing page carousel that is currently showing posts from my custom post type. I want to add a different carousel below it which will show 4 items at the time and it is supposed to ONLY show posts from a category called "Vazno".

<div class="container cta-100 ">
        <div class="container">
            <div class="row blog">
                <div class="col-md-12">
                    <div id="blogCarousel" class="carousel slide container-blog" data-bs-ride="carousel">

                        <!-- Carousel items -->
                        <div class="carousel-inner">
                            <?php $slider = get_posts(array('post_type' => 'cars', 'posts_per_page' => 4, 'cat' => 'vazno')); ?>
                            <?php $count = 0; ?>
                            <?php foreach ($slider as $slide) : ?>
                                <?php setup_postdata($slide->ID); ?>
                                <div class="carousel-item <?php echo ($count == 0) ? 'active' : ''; ?>">
                                    <div class="col-md-3">
                                        <div class="item-box-blog">
                                            <div class="item-box-blog-image">
                                                <!--Date-->
                                                <div class="item-box-blog-date bg-blue-ui white"> <span class="mon"><?php echo get_the_date('d M', $slide->ID); ?></span> </div>
                                                <!--Image-->
                                                <figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
                                            </div>
                                            <div class="item-box-blog-body">
                                                <!--Heading-->
                                                <div class="item-box-blog-heading">
                                                    <a href="<?php echo get_permalink($slide->ID); ?>" tabindex="0">
                                                        <h5><?php echo get_the_title($slide->ID); ?></h5>
                                                    </a>
                                                </div>
                                                <!--Data-->
                                                <div class="item-box-blog-data" style="padding: px 15px;">
                                                    <p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
                                                </div>
                                                <!--Text-->
                                                <div class="item-box-blog-text">
                                                    <p><?php echo wp_trim_excerpt(get_the_excerpt($slide->ID)); ?></p>
                                                </div>
                                                <div class="mt"> <a href="<?php echo get_permalink($slide->ID); ?>" tabindex="0" class="btn bg-blue-ui white read">Saznaj vise</a> </div>
                                                <!--Read More Button-->
                                            </div>
                                        </div>
                                    </div>

                                </div>
                                <?php $count++; ?>
                            <?php endforeach; ?>
                        </div>
                        <ol class="carousel-indicators">
                            <li data-bs-target="#blogCarousel" data-bs-slide-to="0" class="active"></li>
                            <li data-bs-target="#blogCarousel" data-bs-slide-to="1"></li>
                            <li data-bs-target="#blogCarousel" data-bs-slide-to="2"></li>
                        </ol>
                    </div>
                  
                </div>
               
            </div>

        </div>

    </div>

This is my custom css for the carousel

.cta-100 {
margin-top: 100px;
padding-left: 8%;
padding-top: 7%;

}

.col-md-3 {
    padding-bottom: 20px;
}

.white {
    color: #fff !important;
}

.mt {
    float: left;
    margin-top: -20px;
    padding-top: 20px;
}

.bg-blue-ui {
    background-color: #708198 !important;
}

figure img {
    width: 300px;
}

#blogCarousel {
    padding-bottom: 100px;
}

.blog .carousel-indicators {
    left: 0;
    top: -50px;
    height: 50%;
}


/* The colour of the indicators */

.blog .carousel-indicators li {
    background: #708198;
    border-radius: 50%;
    width: 8px;
    height: 8px;
}

.blog .carousel-indicators .active {
    background: #0fc9af;
}

.item-carousel-blog-block {
    outline: medium none;
    padding: 15px;
}

.item-box-blog {
    border: 1px solid #dadada;
    text-align: center;
    z-index: 4;
    padding: 20px;
}

.item-box-blog-image {
    position: relative;
}

.item-box-blog-image figure img {
    width: 100%;
    height: auto;
}

.item-box-blog-date {
    position: absolute;
    z-index: 5;
    padding: 4px 20px;
    top: -20px;
    right: 8px;
    background-color: #41cb52;
}

.item-box-blog-date span {
    color: #fff;
    display: block;
    text-align: center;
    line-height: 1.2;
}

.item-box-blog-date span.mon {
    font-size: 18px;
}

.item-box-blog-date span.day {
    font-size: 16px;
}

.item-box-blog-body {
    padding: 10px;
}

.item-heading-blog a h5 {
    margin: 0;
    line-height: 1;
    text-decoration: none;
    transition: color 0.3s;
}

.item-box-blog-heading a {
    text-decoration: none;
}

.item-box-blog-data p {
    font-size: 13px;
}

.item-box-blog-data p i {
    font-size: 12px;
}

.item-box-blog-text {
    max-height: 100px;
    overflow: hidden;
}

.mt-10 {
    float: left;
    margin-top: -10px;
    padding-top: 10px;
}

.btn.bg-blue-ui.white.read {
    cursor: pointer;
    padding: 4px 20px;
    float: left;
    margin-top: 10px;
}

.btn.bg-blue-ui.white.read:hover {
    box-shadow: 0px 5px 15px inset #4d5f77;
}

At the moment, this code just shows all the posts from my custom post type, only 1 at the time.

I want it to show 4 posts at the time, and I want it to slide posts by 1 What is currently being shown on the webpage

1 Answer 1

0

To get only 4 posts, change your get_posts() function to this:

get_posts(array('post_type' => 'cars', 'numberposts' => 4, 'cat' => 'vazno'));

get_posts() uses numberposts instead of posts_per_page like WP_Query does.

1
  • Hey Eric! It didn't change a thing for me. The number of posts is still the same, yet the category element doesn't seem to be doing a thing. I am thinking that I maybe wrapped the whole loop around the wrong elements, but can't seem to solve the problem myself. Feb 5, 2022 at 18:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.