WordPress custom posts archive with REST API and ajax

Style the page #

Go to workflow

Our custom archive page is ready by now as per as the functionalities are concerned. However, we can make it look better with little bit of CSS. I have made some CSS codes for this project which you can use and modify as needed. You may add the code to your style.css. Here it is –

.api-grid {
    display: flex;
    flex-direction: column;
}
.post-categories, 
.posts-wrap {
    margin-top: 30px;
}
.post-categories ul{
    padding: 0;
    margin: 0;
}
.post-categories ul li{
    list-style: none;
    margin-bottom: 10px;
}
.post-categories ul li a{
    display: block;
    padding: 10px 20px;
    background-color: #dddddd;
    color: #333333;
    transition: all ease 0.3s;
}
.post-categories ul li a:hover,
.post-categories ul li a.current
{
    background-color: #333333;
    color: #dddddd;
    text-decoration: none;
}
.load-more{
    margin-top: 30px;
}
.load-more.end-page{
    opacity: 0.3;
    pointer-events: none;
}
.new-post{
    opacity: 0;
}
.new-post.fadein{
    opacity: 1;
    transition: all ease 0.3s;
}

@media (min-width:600px){
    .api-grid {
        flex-direction: row;
    }
    .post-categories{
        width: 30%;
        position: relative;
    }
    .categories-container{
        position: sticky;
        top: 50px;
        padding-right: 40px;
    }
    .posts-wrap{
        width: 70%;
    }
}

.all-posts article{
    background-color: #f8f9fa;
    padding: 15px;
    margin-bottom: 30px;
}

@media (min-width:800px){
    .all-posts article{
        display: flex;
    }
    .all-posts article .post-title-excerpt{
        width: 100%;
        padding: 15px;
    }
}

@media (min-width: 992px){
    .container{
        max-width: 940px;
    }
}

Publish the page #

Go to workflow

This is the time to check the preview of the page and if there no issues, just publish the page. You may open the console to debug the issues. Let me know if there is any concerns on this topic. In the next page, I have discussed about 2 bonus points that we can improve.