Here is the helpful code to get you going! Let me know if you need any more assistance in the comments on YouTube or contact me at the bottom today!

📚 WHAT WAS COVERED:

0:00 Intro

1:57 Turn on Dev Mode

2:45 Post Page Settings

10:30 TimeAgo Function

19:02 Get Wix Blog Post Data

23:10 Load Post Data to Elements Function

31:10 Get Categories Function

36:30 Custom Wix Blog Sidebar

36:46 Code Catch & Fix

37:38 Preview Blog Post

---

Code Snippet to follow along with the video:

Page Code

This imports the multiple API's

import wixData from 'wix-data';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';

This loads the page code

const likesWeight = 0.2
const viewsWeight = 0.8
const trendingPostsToShow = 3
const trendingCategoriesToShow = 5

$w.onReady(function () {
 // TODO: write your page related code here...
 //let info = 
    wixLocation.onChange((res) => {
        freshState()
    })
    freshState()
});

Get freshState function and call for the latest post via getPost

function freshState(parameter) {
    $w("#post1").getPost().then(async (res) => {
        if (res) {
            loadInfo(res)
            categories()
            $w("#post1").expand()
            $w("#statebox9").expand()
        } else {
            $w("#noshowStrip").expand()
            $w("#statebox9, #columnStrip1, #post1").collapse()
        }
    })
}

Create a timeAgo function to convert the Date and Time to a custom style of your choice.

function timeAgo(parameter, dateboolean) {
 let timeAgoInfo = '';
 let num
 let now = new Date() //current timeAgoInfo
 let diff = now - parameter // diff between current and provided timeAgoInfo
 var ms_Min = 60 * 1000;
 var ms_Hour = ms_Min * 60;
 var ms_Day = ms_Hour * 24;
 var ms_Mon = ms_Day * 30;
 var ms_Yr = ms_Mon * 365

 if (dateboolean) {
 const monthsShort = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]

 let month = parameter.getMonth() + 1
 let day = parameter.getDate()
 let year = parameter.getFullYear()
 let hour = (parameter.getHours() > 12) ? parameter.getHours() - 12 : (parameter.getHours() === 0) ? '12' : parameter.getHours()
 let minute = (parameter.getMinutes() > 10) ? parameter.getMinutes() : "0" + parameter.getMinutes()
 let ampm = (parameter.getHours() > 12) ? "pm" : "am"
        timeAgoInfo = monthsShort[month] + ". " + day + ", " + year // + " " + hour + ":" + minute + " " + ampm
 //console.log(out)
 return timeAgoInfo
    } else {

 if (diff < ms_Min) {
            timeAgoInfo = 'Just Now'
 //console.log(timeAgoInfo)
 return timeAgoInfo
        } else if (diff < ms_Hour) {
            num = Math.floor(diff / ms_Min)
            timeAgoInfo = (num === 1) ? num + " minute ago" : num + " minutes ago";
 //console.log(timeAgoInfo)
 return timeAgoInfo
        } else if (diff < ms_Day) {
            num = Math.floor(diff / ms_Hour)
            timeAgoInfo = (num === 1) ? num + " hour ago" : num + " hours ago";
 //console.log(timeAgoInfo)
 return timeAgoInfo
        } else if (diff < ms_Mon) {
            num = Math.floor(diff / ms_Day)
            timeAgoInfo = (num === 1) ? num + " day ago" : num + " days ago";
 //console.log(timeAgoInfo)
 return timeAgoInfo
        } else if (diff < ms_Yr) {
            num = Math.floor(diff / ms_Mon)
            timeAgoInfo = (num === 1) ? num + " month ago" : num + " months ago";
 //console.log(timeAgoInfo)
 return timeAgoInfo
        } else if (diff > ms_Yr) {
            num = Math.floor(diff / ms_Yr)
            timeAgoInfo = (num === 1) ? num + " year ago" : num + " years ago";
 ////console.log(timeAgoInfo)
 return timeAgoInfo
        } else {
 let month = parameter.getMonth() + 1
 let day = parameter.getDate()
 let year = parameter.getFullYear()
 let hour = (parameter.getHours() > 12) ? parameter.getHours() - 12 : (parameter.getHours() === 0) ? '12' : parameter.getHours()
 let minute = (parameter.getMinutes() > 10) ? parameter.getMinutes() : "0" + parameter.getMinutes()
 let ampm = (parameter.getHours() > 12) ? "pm" : "am"
            timeAgoInfo = month + "/" + day + "/" + year + " " + hour + ":" + minute + " " + ampm
 //console.log(timeAgoInfo)
 return timeAgoInfo
        }

    }
}

Then you will need to load the information from getPost function into the particular fields and to generate the specific date and times via TimeAgo Function.

 async function loadInfo(postRes) {
 let info = await postRes;

 let defaultImage = $w("#columnStrip1").background.src;

    $w("#columnStrip1").background.src = await (info.coverImage) ? info.coverImage : defaultImage;

    $w("#dateOriginal").text = await (info.publishedDate) ? "Published: " + timeAgo(info.publishedDate, true).toString() : "";

    $w("#dateLast").text = await (info.lastPublishedDate) ? "Updated: " + timeAgo(info.lastPublishedDate).toString() : "";

    (info.publishedDate !== info.lastPublishedDate) ? $w("#box21").show(): $w("#box21").hide();

    $w("#views").text = await (info.viewCount) ? info.viewCount.toString() : "1";

    $w("#likes").text = await (info.likeCount) ? info.likeCount.toString() : "0";

    $w("#title").text = await info.title;

 //w("#excerpt").text = await (info.excerpt.length > 150) ? info.excerpt.slice(0, 147) + "..." : info.excerpt;

 if (info.categories) {
 let categoryList = []
 for (var i = 0; i < info.categories.length; i++) {
 let infoCat = await loadPostCategories(info.categories[i])
 await categoryList.push({ "label": infoCat.label, "value": infoCat.value })
        }

 if (categoryList.length > 0) {

            $w("#categories").options = await categoryList
            $w("#categoryBox").show()
            $w("#categories").onClick((event) => {
                wixLocation.to($w("#categories").value.toString())
            })
        } else {
            $w("#categoryBox").hide()
        }

    } else {
        $w("#categoryBox").hide()
        $w("#categories").options = []
    }
}

Run the function categories to get the categories that the current post is in. This will pick up multiple categories to place into specific selection tags. (This can also be achieved using a repeater with a different form of placing the information) This will automatically populate the selection tags element as we see in the video.

async function categories(parameter) {
 await wixData.query("Blog/Categories").find().then((res) => {
 let catList = res.items
 if (catList.length > 0) {
 if (catList.length > 5) {
                $w("#categoryRepeater").data = catList.slice(0, 5)
                $w("#viewcategory").show()
            } else {
                $w("#categoryRepeater").data = catList
                $w("#viewcategory").hide()
            }
        } else {
            $w("#categoryRepeater, #viewcategory, #categoryLabel").collapse()
        }
    })
}

To view the sidebar code and information head on over to this link here: https://ninotutorials.wixsite.com/creativelynino/post/customizing-your-post-sidebar-on-wix-blog-using-corvid-wix-code-tutorial-wix-tutorial-2020

---

🖱️ SUBSCRIBE ►http://bit.ly/2NRVy6o

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

📺 MY PLAYLISTS :

Wix Tutorials for Beginners: http://bit.ly/3aA8mb3

Wix Tutorials 2020: http://bit.ly/2Rpa8V8

Wix Tips: https://bit.ly/2Qudip1

More here: https://bit.ly/3lAeEx4

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

💻 WEBSITE

Check out more of the website. If you have a question, let's chat it up below! More information coming soon so stay tuned!