A proof of concept on how to fetch posts from WordPress using the WordPress API, and append them to your website, using vanilla JavaScript. https://wptest.thomassen.dev/
Go to file
2023-09-30 13:03:32 +00:00
blog.html Tweak class implementation to decouple from Tailwind, add README 2023-09-30 13:01:29 +00:00
blog.js Add variable for scrolling posts into view 2023-09-30 13:03:32 +00:00
index.html Initial implementation 2023-09-30 12:45:32 +00:00
LICENSE Initial implementation 2023-09-30 12:45:32 +00:00
README.md Tweak class implementation to decouple from Tailwind, add README 2023-09-30 13:01:29 +00:00

WordPress-Fetch-Posts

A proof of concept on how to fetch posts from WordPress using the WordPress API, and append them to your website, using vanilla JavaScript.
The HTML markup uses Tailwind CSS just to make it look a bit prettier, but the logic itself is pure JavaScript.

The logic itself can be found in blog.js, which ties into blog.html.
Modifying the first few variables in blog.js should be enough to get you started with your own page.

You can find an example of this running "live" on: wptest.thomassen.dev

View more button

One thing to note is that the "View more" button gets hidden using a CSS class called hidden, which is included in Tailwind CSS.

If you're not using Tailwind CSS, or any other CSS framework that has a hidden class, you can add the following CSS:

.hidden {
  display: none;
}