Time was running out. We had to build a fully functional project, but there was one challenge; too many features and not enough time. We needed a simple and efficient way to add a blog to our main website without spending weeks on development.
After some brainstorming, we found the perfect solution. Instead of building a blog from scratch, we decided to use WordPress. Our SEO and marketing team was already familiar with it, so they could easily manage content without needing technical help. We set up the blog on blog.domain.com and focused on integrating it with our main website (domain.com).
But how do we make sure new blog posts automatically appear on the main site? The answer: WordPress REST API. By using API calls, we could fetch blog posts from WordPress and display them on our main website without any manual work.
In this blog post, we’ll walk through:
- How to publish a blog post in WordPress
- How our blog is integrated with the main website using the API
- How everything works behind the scenes
Let’s get started!
Step 1: Creating a Blog Post in WordPress
To publish a blog post, follow these steps:
1. Login to WordPress
Go to blog.domain.com/wp-admin and enter your username and password.
2. Navigate to Posts
On the left menu, click Posts → Add New.
3. Add a New Blog Post
It will open the default block editor. This is where you write your blog.
4. Choose a Category
On the right side, you will see the Categories section. Select one or more categories that fit your post.
5. Write Your Blog
Now, write your blog post. Keep it clear and simple. Add headings, images, and links if needed.
6. Make the URL SEO-Friendly
Before publishing, check the URL slug (the link of the post). Edit it to make it short and clear.
7. Publish the Blog Post
Click the Publish button. Now, your blog post is live on blog.domain.com.
8. Check if It’s Visible on the Main Website
Go to domain.com/blogs and see if your new post appears.
9. Clear Cache (If Needed)
If the post doesn’t appear, clear the cache:
- Go to LiteSpeed Cache in WordPress
- Click Purge All Cache
This refreshes the page and makes the new post visible on the main site.
Step 2: How the Blog is Integrated with the Main Website
Now, let’s understand how the blog posts from blog.domain.com appear on domain.com/blogs.
1. Using API to Fetch Blog Posts
Our main website (domain.com) does not store blog posts. Instead, it fetches them from WordPress using an API. An API (Application Programming Interface) is like a bridge that connects two systems.
Whenever someone visits domain.com/blogs, our website sends a request to the WordPress API. The API responds with a list of blog posts. Our main website then displays these posts in a beautiful format.
2. How Often Does It Update?
The website updates the blog section automatically. But sometimes, if a new post is missing, clearing the cache helps.
3. Why Did We Do This?
- Faster Development: Using WordPress saved us time.
- Easy for Marketing Team: They can write and manage blogs without help from developers.
- Smooth Integration: API makes sure the main website always shows the latest blogs.
How the Blog is Integrated with the Main Website Using API
Our blog is built on WordPress and is hosted at blog.domain.com. Our main website fetches blog posts using the WordPress REST API. This API allows us to get blog posts, search for specific topics, filter by category, and more.
Instead of storing blog posts on our main website, we use API calls to get the latest posts from WordPress. This ensures that whenever a new post is published, it automatically appears on the main website.
Now, let’s explore how we use different API requests to get blog data.
Fetching All Blog Posts
To get a list of all blog posts, we use this API endpoint:
GET https://blog.domain.com/wp-json/wp/v2/posts
Fetching a Single Blog Post
To get details of a specific post, we need its post ID:
GET https://blog.domain.com/wp-json/wp/v2/posts/{post_id}
For example, if a blog post has an ID of 100, we call:
GET https://blog.domain.com/wp-json/wp/v2/posts/100
Fetching a Blog Post Using Slug
Each blog post has a slug (a part of the URL that identifies the post). Instead of using an ID, we can fetch a post using its slug:
GET https://blog.domain.com/wp-json/wp/v2/posts?_embed&slug={slug}
For example, if the post URL is blog.domain.com/how-to-code, the slug is how-to-code. So, we call:
GET https://blog.domain.com/wp-json/wp/v2/posts?_embed&slug=how-to-code
This makes it easier to get a blog post without knowing its ID.
Fetching Blog Posts with Pagination
If we have many blog posts, we don’t want to load them all at once. Instead, we can fetch them page by page.
GET https://blog.domain.com/wp-json/wp/v2/posts?per_page=10&page=1
-
per_page=10→ Get 10 posts per request -
page=1→ Get the first page of posts
To get the second page:
GET https://blog.domain.com/wp-json/wp/v2/posts?per_page=10&page=2
Searching for Blog Posts
We can search for blog posts by keyword. For example, to search for "technology", we use:
GET https://blog.domain.com/wp-json/wp/v2/posts?search=technology
This will return posts that contain the word "technology" in the title or content.
Filtering by Categories
Each blog category has an ID. We can filter posts by category ID.
GET https://blog.domain.com/wp-json/wp/v2/posts?categories=5
This will return only blog posts that belong to category ID 5.
To find category IDs, we call:
GET https://blog.domain.com/wp-json/wp/v2/categories
This will return a list of categories with their IDs.
Sorting and Ordering Posts
We can sort blog posts by date, title, relevance, and more.
GET https://blog.domain.com/wp-json/wp/v2/posts?order=desc&orderby=date
-
order=desc→ Sort posts in descending order (latest posts first) -
order=asc→ Sort posts in ascending order (oldest posts first) -
orderby=date→ Sort by publish date -
orderby=title→ Sort by title
Fetching Featured Images and Categories
Sometimes, we need more than just the title and content. We also want the featured image and categories.
To get this extra data, we use _embed:
GET https://blog.domain.com/wp-json/wp/v2/posts?_embed
Now, we can show the featured image and category names on the main website.
Full Example Request
Here’s an example API request that:
- Gets 5 posts per page
- Searches for "WordPress"
- Filters posts by category ID 5
- Sorts by date
- Includes featured images and categories
GET https://blog.domain.com/wp-json/wp/v2/posts?per_page=5&page=1&search=wordpress&categories=5&orderby=date&_embed
How the Main Website Uses This API
Our main website makes API calls to fetch blog posts and display them. We use JavaScript to do this.
Integration Code Example (JavaScript)
fetch("https://blog.domain.com/wp-json/wp/v2/posts?_embed&per_page=5")
.then(response => response.json())
.then(posts => {
posts.forEach(post => {
console.log("Title:", post.title.rendered);
console.log("URL:", post.link);
});
})
.catch(error => console.error("Error:", error));
Conclusion
We used WordPress to build our blog quickly. We connected it to our main website using an API. Now, whenever we publish a blog on blog.domain.com, it appears on domain.com/blogs automatically.
This setup is simple and effective. It saves time and makes it easy to manage blog posts.
If you ever face issues with missing posts, just clear the cache, and everything should work fine!
Top comments (0)