diff --git a/README.md b/README.md new file mode 100644 index 0000000..df430a7 --- /dev/null +++ b/README.md @@ -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; +} +``` \ No newline at end of file diff --git a/blog.html b/blog.html index 56e364d..dad8219 100644 --- a/blog.html +++ b/blog.html @@ -7,9 +7,13 @@

Blog

+ +
+ + \ No newline at end of file diff --git a/blog.js b/blog.js index c1e686e..f96b6b5 100644 --- a/blog.js +++ b/blog.js @@ -1,11 +1,39 @@ /** * 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` - * - * @type {String} */ 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. * Uses: https://developer.wordpress.org/rest-api/reference/posts/#list-posts @@ -33,7 +61,7 @@ let nextPage = 1; */ const perPage = 10; -const viewMoreButton = document.querySelector('#view-more'); +const viewMoreButton = document.querySelector(viewMoreButtonSelector); async function getPosts() { // 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); // 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 @@ -70,19 +98,27 @@ async function getPosts() postElement.setAttribute('data-post-id', post.id); postElement.classList.add('post'); - // Purely for styling, can ignore this part - postElement.classList.add('bg-rose-900'); - postElement.classList.add('p-4'); - postElement.classList.add('my-4'); + /** + * Adding classes to the post's parent div. + * Primarily for styling purposes. + */ + for (const postElementClass of postElementClasses) + { + postElement.classList.add(postElementClass); + } // Create post's title as a h2 const postTitle = document.createElement('h2'); postTitle.textContent = post.title.rendered; - // Purely for styling, can ignore this part - postTitle.classList.add('text-xl'); - postTitle.classList.add('font-bold'); - postTitle.classList.add('mb-2'); + /** + * Adding classes to the post's title. + * Primarily for styling purposes. + */ + 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`). const postContent = document.createElement('div'); @@ -117,7 +153,7 @@ async function getPosts() const viewMoreClasses = viewMoreButton.classList; 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 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. */ else { - viewMoreClasses.add('hidden'); + viewMoreClasses.add(hideClass); } // 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 viewMoreButton.addEventListener('click', getPosts); +// Run the `getPosts` function once when the page loads getPosts(); \ No newline at end of file