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-newsin 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');
}
});-
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
thenmethod will simply transform the JSON response of thefetchmethod into a JavaScript object. This enables us to get information by callingobject.property.To see which properties are available, check the response in your browser. You will see properties like
id,date,contentand 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
datais 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].
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
}