Alex/WordPress-Fetch-Posts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tweak class implementation to decouple from Tailwind, add README

Browse Source
This commit is contained in:
Alex Thomassen 2023-09-30 13:01:29 +00:00
parent 051c9f76f5
commit 00357f444c
Signed by: Alex
GPG Key ID: 10BD786B5F6FF5DE
3 changed files with 76 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
README.md Normal file
View File

@ -0,0 +1,21 @@
# 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](https://tailwindcss.com/) 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](https://wptest.thomassen.dev/blog.html)
## 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](https://tailwindcss.com/docs/display#hidden).
If you're not using Tailwind CSS, or any other CSS framework that has a `hidden` class, you can add the following CSS:
```css
.hidden {
display: none;
}
```

4
blog.html
View File

@ -7,9 +7,13 @@
</head> </head>
<body class="bg-slate-800 text-white py-6 px-8"> <body class="bg-slate-800 text-white py-6 px-8">
<h1 class="text-3xl font-bold underline">Blog</h1> <h1 class="text-3xl font-bold underline">Blog</h1>
<!-- Container for the blog posts -->
<div id="blog-posts"></div> <div id="blog-posts"></div>
<!-- The button used to load more blog posts -->
<button id="view-more" class="hidden bg-orange-500 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded">View More</button> <button id="view-more" class="hidden bg-orange-500 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded">View More</button>
</body> </body>
<!-- JavaScript file that contains all the logic -->
<script src="/blog.js"></script> <script src="/blog.js"></script>
</html> </html>

65
blog.js
View File

@ -1,11 +1,39 @@
/** /**
* The base URI for the WordPress API. Don't forget `http(s)://`! * The base URI for the WordPress API. Don't forget `http(s)://`!
* Depending on where your WordPress blog is hosted, this could be something like: `https://example.wordpress.com` * Depending on where your WordPress blog is hosted, this could be something like: `https://example.wordpress.com`
*
* @type {String}
*/ */
const wordPressBaseUri = 'https://wptest.decicus.com'; const wordPressBaseUri = 'https://wptest.decicus.com';
/**
* The selector for the container where we want to put the posts.
* By default it is `#blog-posts` (element with ID "blog-posts"), which you can find in `blog.html`
*/
const postsContainerSelector = '#blog-posts';
/**
* The selector for the "View More" button.
* By default it is `#view-more` (element with ID "view-more"), which you can find in `blog.html`
*/
const viewMoreButtonSelector = '#view-more';
/**
* Classes to add to the post's parent div.
* By default these are Tailwind CSS classes: https://tailwindcss.com/
*/
const postElementClasses = ['bg-rose-900', 'p-4', 'my-4'];
/**
* Classes to add to the post's title.
* By default these are Tailwind CSS classes: https://tailwindcss.com/
*/
const postTitleClasses = ['text-xl', 'font-bold', 'mb-2'];
/**
* Class to add to the "View More" button when there are no more posts to fetch.
* By default this is a Tailwind CSS class called `hidden`: https://tailwindcss.com/docs/display#hidden
*/
const hideClass = 'hidden';
/** /**
* Fetches 10 posts from WordPress API. * Fetches 10 posts from WordPress API.
* Uses: https://developer.wordpress.org/rest-api/reference/posts/#list-posts * Uses: https://developer.wordpress.org/rest-api/reference/posts/#list-posts
@ -33,7 +61,7 @@ let nextPage = 1;
*/ */
const perPage = 10; const perPage = 10;
const viewMoreButton = document.querySelector('#view-more'); const viewMoreButton = document.querySelector(viewMoreButtonSelector);
async function getPosts() async function getPosts()
{ {
// Disable the "View More" button while we're fetching posts, to avoid people spamming the button // Disable the "View More" button while we're fetching posts, to avoid people spamming the button
@ -43,7 +71,7 @@ async function getPosts()
const posts = await fetchPosts(nextPage, perPage); const posts = await fetchPosts(nextPage, perPage);
// Get the container where we want to put the posts. By default this can just be an empty div. // Get the container where we want to put the posts. By default this can just be an empty div.
const postsContainer = document.querySelector('#blog-posts'); const postsContainer = document.querySelector(postsContainerSelector);
/** /**
* Style points only * Style points only
@ -70,19 +98,27 @@ async function getPosts()
postElement.setAttribute('data-post-id', post.id); postElement.setAttribute('data-post-id', post.id);
postElement.classList.add('post'); postElement.classList.add('post');
// Purely for styling, can ignore this part /**
postElement.classList.add('bg-rose-900'); * Adding classes to the post's parent div.
postElement.classList.add('p-4'); * Primarily for styling purposes.
postElement.classList.add('my-4'); */
for (const postElementClass of postElementClasses)
{
postElement.classList.add(postElementClass);
}
// Create post's title as a h2 // Create post's title as a h2
const postTitle = document.createElement('h2'); const postTitle = document.createElement('h2');
postTitle.textContent = post.title.rendered; postTitle.textContent = post.title.rendered;
// Purely for styling, can ignore this part /**
postTitle.classList.add('text-xl'); * Adding classes to the post's title.
postTitle.classList.add('font-bold'); * Primarily for styling purposes.
postTitle.classList.add('mb-2'); */
for (const postTitleClass of postTitleClasses)
{
postTitle.classList.add(postTitleClass);
}
// Create post's content. This is a div because WordPress will give you a lot of HTML tags in the content (e.g. `p`). // Create post's content. This is a div because WordPress will give you a lot of HTML tags in the content (e.g. `p`).
const postContent = document.createElement('div'); const postContent = document.createElement('div');
@ -117,7 +153,7 @@ async function getPosts()
const viewMoreClasses = viewMoreButton.classList; const viewMoreClasses = viewMoreButton.classList;
if (posts.length >= perPage) if (posts.length >= perPage)
{ {
viewMoreClasses.remove('hidden'); viewMoreClasses.remove(hideClass);
// Increase `nextPage` by 1 so that the next time we fetch posts, we get the next page // Increase `nextPage` by 1 so that the next time we fetch posts, we get the next page
nextPage++; nextPage++;
@ -127,7 +163,7 @@ async function getPosts()
* then we know that we have reached the end of the posts and we can hide the "View More" button. * then we know that we have reached the end of the posts and we can hide the "View More" button.
*/ */
else { else {
viewMoreClasses.add('hidden'); viewMoreClasses.add(hideClass);
} }
// Re-enable the "View More" button // Re-enable the "View More" button
@ -137,4 +173,5 @@ async function getPosts()
// Add an event listener to the "View More" button so that we can fetch more posts when it's clicked // Add an event listener to the "View More" button so that we can fetch more posts when it's clicked
viewMoreButton.addEventListener('click', getPosts); viewMoreButton.addEventListener('click', getPosts);
// Run the `getPosts` function once when the page loads
getPosts(); getPosts();