> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rendless.com/llms.txt
> Use this file to discover all available pages before exploring further.

# WordPress Integration

> Render dynamic og images in WordPress

We will guide you through the process of integrating Rendless with WordPress.
It is a simple process that requires some lines of code.

You will learn how to generate dynamic og images in WordPress using Rendless.

# Step 1: Create a template and prepare it

First, you need to create a template on the Rendless dashboard.
You can create a template by clicking on the "Create template" button on the [Templates page](https://rendless.com/templates).

Create a template with the desired design and content. Add variables to the template that you want to replace with dynamic data with the `{{variable}}` syntax.

Learn more about [dynamic images with variables](/essentials/variables).

<Frame caption="Template example, dynamic variables are marked with {{}}">
  <img src="https://mintcdn.com/rendless/lG8IHR4qDhGHRd9R/images/wordpress-tuto-1.png?fit=max&auto=format&n=lG8IHR4qDhGHRd9R&q=85&s=4df72d79c4a62a14e08962dabba0b5bd" alt="Before image" className="rounded-xl" width="2559" height="1313" data-path="images/wordpress-tuto-1.png" />
</Frame>

In the example above, the template has a title and an image. The title is marked with `{{title}}` and the image URL is marked with `{{image}}`. By default the template will render the title and the image URL that you have uploaded.

# Step 2: Get the image generation URL

You can now get the image generation by clicking on the use template button on the template editor page or in the template liste page.

<Frame caption="Example of the image generation URL">
  <img src="https://mintcdn.com/rendless/lG8IHR4qDhGHRd9R/images/wordpress-tuto-2.png?fit=max&auto=format&n=lG8IHR4qDhGHRd9R&q=85&s=0aad684f8827b4b796ce4fa3b1d8929a" alt="Before image" className="rounded-xl" width="2559" height="1304" data-path="images/wordpress-tuto-2.png" />
</Frame>

The image generation URL is the URL that you will use in WordPress to generate the image with the dynamic data.
It's just a simple URL like this:

```
https://rendless.com/api/simple-url/TEMPLATE_ID
```

You will need to replace `TEMPLATE_ID` with the ID of your template and provide the values for the variables in the query parameters.

```
https://rendless.com/api/simple-url/TEMPLATE_ID?title=Hello&image=https://example.com/image.jpg
```

# Step 3: Integrate the image generation URL in WordPress

Now you have to add the image image generation URL in your pages meta tags like this:

It will dynamically get the post title and the post thumbnail URL and generate the image with the dynamic data.
Don't forget to encode the values with `urlencode()` php function.

```php theme={null}
<meta property='og:image' content="https://rendless.com/api/simple-url/TEMPLATE_ID?title=<?php echo urlencode(get_the_title()); ?>&image=<?php echo get_the_post_thumbnail_url(); ?>" /> 
```

You can do this by adding the following code in your theme's `header.php` file or use plugin to add the meta tags to your WordPress site.

We recommend using a plugin like [Head, Footer and Post Injections](https://wordpress.org/plugins/header-footer/) to add the meta tags to your WordPress site.
(If you are using this plugin, don't forget to enable PHP in the advanced tab)

Just add the php code in the head tag of your WordPress site.

<Frame caption="Add the image generation URL in the head tag of your WordPress site">
  <img src="https://mintcdn.com/rendless/lG8IHR4qDhGHRd9R/images/wordpress-tuto-3.png?fit=max&auto=format&n=lG8IHR4qDhGHRd9R&q=85&s=294f1f5c5d2a71ce9800a4d13da2cae9" alt="Before image" className="rounded-xl" width="1343" height="970" data-path="images/wordpress-tuto-3.png" />
</Frame>

You can now see the dynamic og image in your WordPress site in the head tag. Now when you share your post on social media, it will display the dynamic og image with the post title and thumbnail.

<Frame caption="Add the image generation URL in the head tag of your WordPress site">
  <img src="https://mintcdn.com/rendless/lG8IHR4qDhGHRd9R/images/wordpress-tuto-4.png?fit=max&auto=format&n=lG8IHR4qDhGHRd9R&q=85&s=f177650bb5ff7807cfa95fecd0b8bbbc" alt="Head meta" className="rounded-xl" width="2239" height="1275" data-path="images/wordpress-tuto-4.png" />
</Frame>

The image generated:

<img src="https://mintcdn.com/rendless/lG8IHR4qDhGHRd9R/images/wordpress-tuto-5.png?fit=max&auto=format&n=lG8IHR4qDhGHRd9R&q=85&s=ba1e9e4e90e4c610cb1c02da8cc95bf8" alt="The image generated" className="rounded-xl" width="1200" height="630" data-path="images/wordpress-tuto-5.png" />
