Setting Up A FRESH Headless Wordpress site
Tags: wordpress, headless, webdev
Published: 2023-11-15 16:53:43

## LocalWP 
Get local from https://localwp.com/
Run the install


![Image ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4e47l3ah7b1r2n1ptdv.png)


Once installed, in the top left corner menu you will find the option to spin up a new site.


![Image ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fwws6fhc6gqx70a7mmr.png)



![Image ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rczqw6wwnyk2dieywapy.png)


Create a new site using the gui


![Image ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulax1nv7in4bfc2rv25j.png)


![Image ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xae5gj00fs68tgiab3vq.png)


![Image ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mthbim73votu9k2s87s.png)




![Image ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8n7zbnytx8mz63yhtnwm.png)


You should now have you site up and running at the localhost port.


![Image ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ednwc25yca7ips32rdpp.png)


Now log-in at http://localhost:xxxx/wp-login.php where xxxx is your port number provided from the local app.


![Image ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vw24oml0g4xp623tz60z.png)

Or Select one-click admin and use the wp admin button to log in.

![Image ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4m8dd19fm7ruejq1vs24.png)

GO to plugins section, add a new plug in called **wpgraphql**.

## Wait, why use a plug-in instead of the default RestAPi?
 

Wordpress as a content management platform can expose a Rest API to allow frontend or other services to access and manage its data. But, in doing so we get a response that contains essentially unfiltered data. To access the rest end points on your newly setup wordpress site go to this address but change example.com to your wordpress site url
`http://example.com/?rest_route=/`


![Sample Rest data ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytel8bwq2bczf26o0w0w.png)



It is helpful to get a JSON formatter for humans to use in the browser so to be able to make sense of the output. Unless you are a machine.

![Image ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0yc3ywixc7jypviazn0c.png)


![Parsed Json data form WP REST API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vfvs6imzbcq7yv4zxao.png)



![Post from wordpress Via REST API endpoint http://localhost:XXXXX/?rest_route=/wp/v2/posts Where xxxxx is your port](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4j817ip4kt402jljq7nx.png)




Graphql improves upon this. How? By improving upon how you access the data and what data is returned!
Lest break that down with an example, 

1. if one wanted to get the post data but only cared about the description one would have to work around the extra data attributes like tags, categories ect.

2. In addition, you are being sent data that is not needed but taking up time and space.


![Extra data sent when making request for post page with intention to get description only](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzaotxic8n9vri4a8vsn.png)


 We can access data much easier by specifing what  Well by using a query language and returning only the specified data/attributes. Grahql allows us to delve into the exact data through an easy to use declarative description of what data we want. Thus we can lower web traffic bandwidth. 

Rest works 
![Image ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6eqfml5rn6enqob9r0tv.png)


With WPGraphQL installed you can use the IDE to create your queries.


![WPGraphQL IDE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tor5u0kivr9dc6n7k76l.png)


`query GetPosts {
  posts {
    nodes {
      id
      title
      date
    }
  }
}`

![Output from Get post query looking for id title and date](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffed1d6zcet8u2opp4hx.png)


Now taking the desired post id one can compose a query that allows for only the retrieval of the description for this post from the sever using this code.

`query GetSinglePost {
  post(id: "cG9zdDox") {
    id
  }
}`

In the query body under post we would like describe what we want back as fields. We do not want the id so we remove that from the query fields. To identify the post we pass the id as an argument. 

`query GetSinglePost {
  post(id: "cG9zdDox") {
    description
  }
}`


![Output from query for post content](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yk33qyrgkq4j0vlbt11v.png)

To Remove the annoying extension field add this snippet in your functions.php.

`add_filter( 'graphql_request_results', function( $response ) {
	if ( is_array( $response ) && isset( $response['extensions'] ) ) {
		unset( $response['extensions'] );
	}
	if ( is_object( $response ) && isset( $response->extensions ) ) {
		unset( $response->extensions );
	}
	return $response;
}, 99, 1 );
`

To get to functions.php, go to WPlocal app and find the go to folder buttoon  for your wordpress site.

add this snippet to end of the file and save.


![Getting to file directory](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vtez92y5lt71jlz2yz4.png)


![Root Folder Set Up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1312sd5a8md0rcubbg4.png)


Go through app-> public-> wp-content-> themes-> twentytwentyfour

if you are using a different theme change twentytwentyfour to that theme folder.


![Image ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g60j67xvzr4xo0um6utx.png)

Copy the address. Open command line and cd to that address.
Next run `nvim functions.php`


 Add code to end of file. Save and close the file.




![Paste in code to functions.php](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6aq8erbatc5n1flq1xy1.png)



![Restart Local](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9h5u9gf76adjim3s5sjd.png)


Restart WPLocal and test your query again.


![View of graphql query response](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t38p5tdux9in8g0v6gli.png)

You now have a FRESH headless Wordpress site ready to go!

Feel free to contact me if you have any questions or edits!
murfg25@gmail.com