How to use the Blog API
PROJECTS USED
TAGS
SUITABLE FOR
Editor X, Classic editor
ABOUT
Using Wix Blog, but want to change the look and feel? Learn how to customize the design of your blog posts.
Layout
01. Add Wix Blog to the site
02. Create your blog posts
03. Add a new section
04. Add a repeater with a few items
05. Add placeholder content to a repeater item
06. Go to the post page
07. Customize your blog post widget
08. Create a layout for your post page
09. Copy and paste the text elements for the title, date and button from the Blog page
10. Create a "Back to posts" button
11. Add a cover image
Add paragraph text. Click “Edit Text” to customize this theme across your site. You can update and reuse text themes.
Velo
01. Turn on Dev Mode
02. Collapse the blog widget section
03. Add a dataset to the site and connect it to the posts collection
04. Connect repeater elements to the dataset
05. Connect a button to the post page's URL
06. Go to the post page
07. Add element IDs to the widget, image, title and date
08. Paste the "initPost()" function
09. Paste the IDs in the code
10. Call the "initPost()" function in onReady()
$w.onReady(function () {
initPost();
});
function initPost() {
$w('#postPage').getPost()
.then((post) => {
//format date to 00/00/0000
let d = post.publishedDate;
const year = d.getFullYear();
const month = ('0' + (d.getMonth() + 1)).slice(-2); // set to 2 digit
const day = ('0' + d.getDate()).slice(-2); // set to 2 digit
const newDate = `${day}/${month}/${year}`;
//populate elements
$w('#postTitle').text = post.title;
$w('#postDate').text = newDate;
$w('#postImage').src = post.coverImage;
setTimeout(function () {
$w('#postImage').show();
}, 200);
})
.catch((error) => {
return Promise.reject(new Error('failed to getPost - original error - ' + error.message));
});
}
