DEV Community: Shariar Islam

How To Integrated WordPress Blog with a Custom Website

Shariar Islam — Sat, 01 Mar 2025 06:43:23 +0000

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!

Transforming MongoDB Atlas and Fuzzy Search: Step-by-Step Guide

Shariar Islam — Wed, 04 Sep 2024 15:47:01 +0000

When working with search functionalities in your projects, you might often rely on MongoDB’s basic search operators like $text and $search. These tools are effective for simple search tasks but may not always deliver the best results, especially as your needs become more complex.

Challenges with Basic Search Operators

Initially, when you start using MongoDB for searches, it might seem sufficient to use basic operators like $text and $search. These operators allow you to search within your database, but they can be limited.

For example, they may not handle typos well or might not provide the most relevant results. You might find that your search bar works, but it doesn’t give users the best experience.

Setting Up MongoDB Atlas Search

To improve your search capabilities, you can use MongoDB Atlas Search. Setting it up is straightforward. First, go to the MongoDB collection where your data is stored. You’ll find an option called “Atlas Search” in your MongoDB Atlas dashboard.

Here, you can create a search index, which is crucial for advanced search features. You’ll have the option to use either the Visual Editor or the JSON Editor. The Visual Editor is user-friendly and easy to navigate if you prefer a simpler approach. However, if you want more control over your search settings, using the JSON Editor is recommended.

To create a basic search index, you can use a simple JSON configuration:

{
  "mappings": {
    "dynamic": true
  }
}

Once you create the index, it will take a few minutes to become active.

Integrating Atlas Search into Backend Code

After setting up your search index, the next step is to integrate it into your backend code. Imagine you have a MongoDB collection named Products, which contains all your product data.

To make this data searchable, you can run an aggregation on the collection using the $search operator.

Here’s an example of how you might write this in TypeScript:

const atlasSearchQueryIntoDb = async (searchTerm: string): Promise<IProduct[]> => {
  try {
    const searchResult = await Products.aggregate();
    return searchResult;
  } catch (error) {
    throw new API_Error(StatusCodes.INTERNAL_SERVER_ERROR, "Search failed. Please try again later.");
  }
};

In this code, you’ll need to specify the name of the search index you created earlier, which in this case is "searchBar".

Products.aggregate([
  {
    $search: {
      index: "searchBar"
    }
  }
]);

Enhancing Search with Compound Operators

To make your search even more powerful, you can use the compound operator. This operator allows you to combine multiple search conditions to improve accuracy and performance.

For example, you can add autocomplete functionality to your search bar, which helps users find what they’re looking for more quickly.

Here’s how you can add autocomplete to your search:

Products.aggregate([
  {
    $search: {
      index: "searchBar",
      compound: {
        should: [
          {
            autocomplete: {
              query: searchTerm,
              path: "title"
            }
          }
        ]
      }
    }
  }
]);

Implementing Fuzzy Search for Error Tolerance

One of the most useful features of MongoDB Atlas Search is the fuzzy search option. Fuzzy search allows your search functionality to tolerate small mistakes, such as typos.

By setting the maxEdits property, you can control how many errors are allowed in the search term. Typically, a value of 2 is a good balance between flexibility and accuracy.

Here’s how you can implement fuzzy search:

Products.aggregate([
  {
    $search: {
      index: "searchBar",
      compound: {
        should: [
          {
            autocomplete: {
              query: searchTerm,
              path: "title",
              fuzzy: {
                maxEdits: 2
              },
              score: { boost: { value: 20 } }
            }
          }
        ]
      }
    }
  }
]);

Using fuzzy search makes your search bar smarter and more user-friendly, ensuring that users can find what they need even if they make small mistakes in their search queries.

Conclusion: Improving User Experience with Smarter Search

By leveraging MongoDB Atlas Search with features like compound operators, autocomplete, and fuzzy search, you can significantly enhance the search functionality in your projects.

This approach not only improves the performance and accuracy of your searches but also provides a better overall experience for your users.