Watch the Video!

On YouTube

Should you have any problems or questions - drop me an email

Instructions

Important!
I've noticed that lots of you are fiddeling around with the correct values and get no result.

Therefore I have prefilled all fields with working values. 

I would recommend you start with these values and then replace them with your own.

Use case: You want to use WordPress for storing your content, but entirely want to keep control of the layout without the hassle of creating a WordPress-Plugin or you just want an unhackable static site (think JAMSTACK).

This tool uses the WordPress API and generates a static file with WordPress-Content based on your template.

Just add placeholders (called "injection points") in the places where you want the content of a post to appear.

This tool will automatically inject the respective content.

You can define your own injection points.

They don't necessarily have to look like the ones below, but it is recommended as this way is least arbitrary.

All you need to do is to define the data you want to read from your endpoint and the injection point it is injected to.

Here are some examples:

DataInjection point
title->renderedwill be copied to###title###
content->renderedwill be copied to###content###
datewill be copied to###date###
yoast_headwill be copied to###yoast_head###
author|users|namewill be copied to###author###

Wait, wait ... what's that crazy "author" construction?

Sometimes it may happen that your data is just a unique ID.

This is e.g. the case with the "author" data of endpoint "posts".

In such a case you tell the generator which API endpoint that ID belongs to and what property you want to inject.

You do this by using e.g. "author|users|name". It basically says: "The ID in author belongs to the endpoint 'users' and I want the name of endpoint 'users'".

TODO: wrap!

You can find the sources on Github.

Catch Wordpress API-Data

e.g. http://yourdomain.tld/wordpress/index.php/wp-json/

For testing purposes use one of my Websites: 
https://secret-siunimtao.com/wp-json/

e.g. wp/v2/
OR
yoast/v1/

e.g. posts for all posts 
OR
posts/39 for post with ID 39

For testing purposes use one of my websites: 
posts/61

https://somedomain.tld/mytemplate.html
If you don't have a template at hand, use mine: 
https://wp-static-file-generator.die-wordpress-agentur.de/example/template_example.html

If you want to know which data for which post or page is available use the form below.

Note that the left side (left of "=>") is a regular expression. Don't forget to add "/" before and after your pattern. 

Search for unwanted HTML by using CSS selector and remove or change it

All CSS-classes with "wp-", generated by WordPress are removed by default. Set this if you want to keep them.

By default your files will be saved as "<slug>.html"
If you set this option, the generator keeps the original filename (like "http://localhost/wordpress/2022/08/examplepost/"), creates the respective paths in the root-folder and puts the html-file as "index.html" into that folder.
For details read below.

Tidy HTML

It might be that WordPress creates a bunch of HTML that you don't want, like classes or 'loading="lazy"' with images.

You can define rules to get rid of them.

This is how it works:

Put your rules into "Tidy HTML field". One rule per line.

A rule my look like this: [loading=lazy] | remove, loading
The left part of the pipe-symbol ("|") denotes what to search for. The right side defines an action.

The rule [loading=lazy] | remove, loading tells the generator:
Search for <some CSS-Selector> and then perform the action "remove attribute loading". 
You can search for any HTML-Part by using CSS-Selectors. If you don't know how to use CSS-Selectors, look here.

If you wanted e.g. to search for all p-elements with class="intro" you would use "p.intro". 

There are two actions you can perform.

You can either remove a tag or you can change it.

If I wanted to change the action above to loading="crazy" (it doesn't make sense, I know - it's an example) I would write:

[loading=lazy] | change, loading, crazy

Helper Tool

This tool will help you to find out which data is avalaible on a page or post. 

It will put out the data in the format required by the generator like "title->rendered".

Just type in the full URL of your post or page (like "https://secret-siunimtao.com/wp-json/wp/v2/posts/52" and hit "Show available data".