News indicator – for a more vibrant website experience
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.
To run JavaScript code on your website you need to insert a <script> tag. In our case we want out JavaScript code to be executed on each site of our website. Add it to the head of your website.
Check which possibilities your theme offers or get familiar with the WordPress editor tool which is accessible within you admin area.
Next, we need to write our JavaScript code which will get posts by a specific category. You going to need the ID of this category.
To get any ID in WordPress (Page, Post, Category etc.) simply find a link to it and hover over it. In most browsers you will see a full link preview on the bottom left corner. In this preview you can find an ID.
Past the following JavaScript code into your <script> tag. Replace the YOUR_DOMAIN and CATEGORY_ID with your domain and category id.
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');
}
});Within the second then() we implement our logic. We want to check if the latest post was posted within the latest 7 days. In that case we would like to display a nice little dot next to our menu entry „news“.
To do so we need to check two dates against each other. The first one is the one of our latest post. To get the time string we call latestPost.date. Note, we have saved the latest post in a variable called latestPost.
The second date we need is the actual date but 7 days in the past. We get that with teh following lines:
const currentDate = new Date();
const pastDateTimestamp = currentDate.setDate(currentDate.getDate() - 7);Time to perform the actual check. With an if() {} clause we can do something if a condition is true. In our case we want to add a css class called „show-indicator“ to our related menu entry „news“. Check the next lines:
if(postTimestamp >= pastDateTimestamp) {
const menuEntry = document.querySelector('.menu-item-news');
menuEntry.classList.add('show-indicator');
}If the date of our latest post postTimestamp is greater or equal to the past date pastDateTimestamp then add the css class show-indicator to the menu entry.
Note: We need to work with timestamps to be able to do simple comparison operations like „>“, „<„, „=“ etc.
Congratulations! At this point the most heavy part is done. Now, we just have to to the design part. In theory you can go crazy here and display any kind of indicator you can imagine. To keep things clean and easy. We are going to display a nice little dot next to the menu entry.
You need to add the following style rules (css) to the <head> of your website as well as we did with the JavaScript code.
.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
}
