The bottom line: If you just want this going to work. Simply copy and paste the JavaScript code and the CSS styles to the head of your website. You just have to adjust the selector .menu-item-news in the JavaScript code and the css styles. Do not forget to fill in the placeholders of the URL in the JavaScript code.

fetch('YOUR_DOMAIN/wp-json/wp/v2/posts?categories=CATEGORY_ID')
.then(response => response.json())
.then(data => {
    const latestPost = data[0];
    const postTimestamp = Date.parse(latestPost.date);
    
    const currentDate = new Date();
    const pastDateTimestamp = currentDate.setDate(currentDate.getDate() - 7);

    if(postTimestamp >= pastDateTimestamp) {
        const menuEntry = document.querySelector('.menu-item-news');
        menuEntry.classList.add('show-indicator');
    }
});

• fetch

  This is a native JavaScript function to fetch some sort of response from and URL. Mostly this URL will point to a resource coming from an backend – like WordPress. Here we are requesting our posts filtered by a category id.

  In our case, working with the WordPress API you can see the response by just opening this URL with your browser. If you browser supports JSON or you have plugin installed the response will be formatted to be readable for you.

• 1. then(…)

  The first call of the then method will simply transform the JSON response of the fetch method into a JavaScript object. This enables us to get information by calling object.property.

  To see which properties are available, check the response in your browser. You will see properties like id, date, content and a lot more.

• 2. then(…)

  Here come the hot part. Within the second “then” method we are finally able to work with the data from our WordPress backend.

  The data is a representation of the response. In our case data holds an array / list of the posts of a specific category.

  To get the first entry, which is actually the most recent one, simply access it with data[0].

const currentDate = new Date();
const pastDateTimestamp = currentDate.setDate(currentDate.getDate() - 7);

if(postTimestamp >= pastDateTimestamp) {
  const menuEntry = document.querySelector('.menu-item-news');
  menuEntry.classList.add('show-indicator');
}

.show-indicator:after {
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    background-color: green;
    border-radius: 40px;
    right: 5px;
    top: 20px
}

.menu-item-news {
    position: relative
}

Andere Beiträge