Write a WordPress blog with…Blazor!
Tags: wordpress, blazor, dotnet, csharp
Published: 2020-11-30 02:31:25

Yeah, I'm not getting crazy. It is 100% possible to replace your **WordPress **theme with a **Blazor Webassembly** application.

How? Well, it's not that hard actually. It's been a while now since WordPress has started exposing a quite nice [REST API](https://developer.wordpress.org/rest-api/). The first draft was added with [version 4.4](https://wordpress.org/support/wordpress-version/version-4-4/#for-developers), but it's with [version 4.7](https://wordpress.org/support/wordpress-version/version-4-7/#rest-api-content-endpoints) that it gained full momentum.

The API itself is definitely easy to use. The base endpoint looks something like "*[yoursite.com/wp-json/wp/v2](http://yoursite.com/wp-json/wp/v2)*".

#### From that you can start managing *[posts](https://wordpress.org/news/wp-json/wp/v2/posts/)*, *[users](https://wordpress.org/news/wp-json/wp/v2/users/), [comments](https://wordpress.org/news/wp-json/wp/v2/users/)*...well you got the idea.

This opens the door to a wide range of scenarios, for example, we could use WordPress as a [headless CMS](https://en.wikipedia.org/wiki/Headless_content_management_system) and write multiple frontends based on our needs. Mobile apps, SPAs, PWAs and so on.

Just to showcase how easy it is, let's see how we can quickly write a frontend blogging app using **Blazor**.

Now, [CORS ](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing)should be enabled by default. If it isn't, a quick search on google should give you [the answer](https://www.google.com/search?q=wordpress+rest+api+enable+cors). For the sake of the exercise, let's suppose it is, so we can safely use **Blazor **in **[Webassembly ](https://docs.microsoft.com/en-us/aspnet/core/blazor/hosting-models?view=aspnetcore-5.0&WT.mc_id=DOP-MVP-5003878#blazor-webassembly)**mode.

Once we've created our project, the next step is to add a reference to the [WordPressPCL ](https://github.com/wp-net/WordPressPCL)Nuget library. It's a handy project, that will spare us the time to write the API client ourselves.

Once it's installed, we can register the client on the Composition Root in the [Program.cs](https://github.com/mizrael/BlazorWPBlog/blob/develop/src/BlazorWPBlog.UI/Program.cs) file:

```
var wpApiEndpoint = builder.Configuration["WP_Endpoint"];
var client = new WordPressClient(wpApiEndpoint);
builder.Services.AddSingleton(client);
```

Now, we're basically done! Every time we want to, for example, read posts or anything, all we have to do is inject the [WordPressClient ](https://github.com/wp-net/WordPressPCL/blob/master/WordPressPCL/WordPressClient.cs)instance and use it:

```
var postsQuery = new PostsQueryBuilder()
    {
        Page = 1,
        PerPage = 10,
        Order = Order.DESC,
        OrderBy = PostsOrderBy.Date
    };
var posts = await WPClient.Posts.Query(postsQuery);
```

I have created a [small repo](https://github.com/mizrael/BlazorWPBlog) on GitHub as usual with some handy examples. I also added a [GitHub Action](https://github.com/mizrael/BlazorWPBlog/blob/develop/.github/workflows/gh-pages.yml) pipeline that will deploy the code to [GitHub Pages](https://mizrael.github.io/BlazorWPBlog/), so you can see how it would look like.

For detailed instructions on how to host a Blazor Webassembly application on GitHub Pages, you can take a look at [my previous post](https://www.davideguida.com/how-to-deploy-blazor-webassembly-on-github-pages-using-github-actions/?swcfpc=1).

See ya!