how to make a website with membership capability using WordPress and Nuxt.js (Part 1)

We all know that SSR technology is not as popular as before and now CMSs are not as popular as there were before, So I and many others are thinking of some kind of a replacement for WordPress. Unfortunately, as I’m writing this article, there is no conqueror of headless CMS’s world, sure there are Strapi and Sanity and many more, but not all of them are completely free or have a major community and support or a rich ecosystem to count on, and they all are fighting over market share, and that’s why I decided to continue Using WordPress for my next project, but not in an old fashion way as headless cms!
Unfortunately, this is a painful process with so many plugins and customization. So I’m going to walk you through it so that you can build your next project with headless WordPress faster and easier.
I promise you when you finish this article you could literally build anything with WordPress!

Agenda
1. converting WordPress to a headless cms
2. add custom fields to the built-in user profile
3. making custom fields restful
4. search in profiles
5. adding nuxt.js
6, using Nuxt auth plugins for authentication

1. Converting WordPress to a headless cms

We can achieve this goal mostly by installing some plugins and some manual modification in files
but first, we need to alter WordPress default permalinks and creating a .htaccess file

We cat do both by simply go to settings and permalink
in the Common Settings section select “Post name”

WordPress admin panel

and press the “save change” button

and now if you check out your root project you can see that a file named .htaccess is created.

the root

this file is not one of WordPress’s files, rather than the configuration of the Apache webserver

and now we can modify our project With some plugins which by the way they are all free and open source and you can get them simply by navigating to the path below
Plugins -> add new

then click on the search text box and search for those plugins:

1. JWT Authentication for WP REST API

JWT Authentication for WP REST API

2. Advanced Custom Fields

Advanced Custom Fields

ok, the JWT plugin doesn’t have a whole lot of configuration but if you using shared hosting for your website, most of them have disabled the HTTP Authorization Header by default.
To enable this option you’ll need to edit your .htaccess file adding the following ( make sure to check out the JWT authentication document for more)

RewriteEngine on
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) — [E=HTTP_AUTHORIZATION:%1]

also, JWT always works with a secret key so we are gonna have to add this manually as well. open your config.php file at the root of your project and add this line (remember to replace the key with your own secret key )

define(‘JWT_AUTH_SECRET_KEY’, ‘my-super-secure-key’);

Since your front-and will be in a different domain, make sure to take care of the CORS problem so add the following line to config.php to enable CORS

define(‘JWT_AUTH_CORS_ENABLE’, true);

and we are done with the header part ✅

And now we can test our backend
I’m just gonna use curl for demonstration but feel free to use the rest-API client of your chose like insomnia or postman or hoppscotch.io

the endpoints that we are gonna deal with are

http://[your.domain]/wp-json/jwt-auth/token
For getting a Bearer Token

http://[your.domain]/wp-json/wp/v2/users/me
For dealing with a profile in frontend (both reading and updating)

First, make a request to the first URL

The response will be something like this

For getting the logged in user’s profiles, just make a GET request to the mentioned URL and remember to include token in the header:

likewise, if you wish to change any user attributes you can do that, lets say I’m gonna change my last name to “Doe”

and you should be able to verify this change with your WordPress Admin panel!.

ok that’s great you just change the database with something other than WordPress’s admin panel 🤩

2. add custom fields to the built-in user profile

For now, all we can do is to change the default fields of a user, like first name, last name, nickname and etc. (of course some of them are read-only, you can’t change them )
And for most cases, that is might be enough, but I need more attitude for my type of user in my project!
Like their user’s jobs, current address and etc . and that’s ok! every project is different, what WordPress is offering is bere minimum for user type and that’s why we use the “advanced custom fields” plugin, to add more attributes
What I am going to do is to add some other fields to the User type.
Click on “ Custom Fields” and “add new”
I’m gonna add the “Last Job” property but feel free to add any properties

ok now scroll to the location section
this is very important! this is the location of the property it can be on posts, pages, tags, and…
but in my case, I want to be in the user profile, and only logged in user can edit his or her fields

if you are finished, click on the published button

now let's make a new user

as you can see now we have a new section for the job and I’m just gonna write Waitress for her job

Now make a request to get Rachel's profile

pay attention to the URL, it no longer ends with /users/me

that’s because I’m currently logged in as an administrator and I have the privilege to change another user.

WordPress generates an ID for every user incrementally so Rachel has an ID of 2 since she was the second user.

the response is something like this:

3. making custom fields restful

as you can see in the last result there is no sign of the Job
Therefore there is one other plugin to install
ACF to REST API:

ACF to REST API

there is one little thing to take of
navigate to Appearance -> theme Editor
from the sidebar in your right select Theme functions (function.php)

scroll down to the bottom of the file and add these lines to be able to show and edit custom fields in rest:
( read document for more https://github.com/airesvsg/acf-to-rest-api)

add_filter( ‘acf/rest_api/field_settings/show_in_rest', ‘__return_true’ );
add_filter( ‘acf/rest_api/field_settings/edit_in_rest’, ‘__return_true’ ); 

After you activate the filters, all your fields should show these options:

flip both of them on

And now go back to your rest-API client and repeat the last request the response should contain ACF fields

…
 “acf”: {
 “last_job”: “Waitress”
 },
…

for Editing the profile we should use a different Endpoint so make a post request to
http://[your.domain]/wp-json/acf/v3/users/2
with this param
{ “fields”: { “last_job”: “ personal shopper” } }

and you should get a response like this

{
 “acf”: {
 “last_job”: “personal shopper”
 }
}

and now you can build your custom profile!!

how users find each other?

by default, WordPress has some default roles for a user with different access levels like administrator, editor, contributes, and subscriber. what we need is none of that! the closest role is the subscriber role but subscribers cannot see other users' profiles, so what we need is a custom role. fortunately, there is a plugin for that.

Members — Membership & User Role Editor Plug

Members — Membership & User Role Editor Plug

after activation, a new menu appears in the right sidebar named “Members” hover over is and from submenu click on roles, now you see all roles you can select is, modify it and even add new roles to it

I'm not gonna add a new role rather than alter the subscriber role
so hover over subscribers click on Edit and you should see all of the permissions individually
Click on the Users tab then check the List User's checkbox

and now we can test this:

login as another (none admin) user, get the token and make a POST request to this URL
http://[your.domain]/wp-json/wp/v2/users

and you should be able to see all user's profiles!!

4. search in profiles

An important part of the job is: how a user can find other users?

fortunately, WordPress provides this functionality if you want to search in main attributes of a user like a user email, first and last name and etc, just add the “search” query parameter at the end of the user's endpoint:

http://[your.domain]/wp-json/wp/v2/users?search=r.green

and you should get the user object info.

but what if you want to have a list of users who have some kind of attribute in common? let say we want all of the personal shoppers?
well in my research I didn't come across a general solution for this, so let me know if you have some elegant solution in mind :)
first of all, we need to register a new rest API route, we can do that by adding an action at the bottom of your function.php file in your theme

functions.php

let me explain wats going on, we need to add a new route so we register a new route as soon as the project starts so we are using rest_api_init hook
register_rest_route the function takes 3 arguments, the first one is the namespace, the second is the route (the naming of them is completely up to you)
The third parameter takes an array contains method, a callback function to determine what happened when a user hit that route and the third element of the array simply protect your route, note that this function (is_user_logged_in) is a WordPress function that I think somehow JWT plugging altered it

the second part is defining the function that we just declared

functions.php

in this function, we defined a new instance of WP_User_Query
it takes an array of opinions, as you can see are targeting users who have a role of Subscriber and their jobs are personal shopping
the number and offset attribute are for pagination. and at the end we are returning the result

of course that is just a simple example and the meta key and the meta value should be dynamic but I leave that for you

now we can test the endpoint we just created

in the next section, we will switch gears to the front end with Nuxt.js , should be fun ;)