> For the complete documentation index, see [llms.txt](https://mazingxr.gitbook.io/mazing-world/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mazingxr.gitbook.io/mazing-world/integration-shops/wordpress.md).

# Wordpress

### Overview

To prepare for the WordPress script integration you first have to install a Header / Footer Code Snippet Plugin, afterwards, you can enter your Mazing Script Integration Code into this script. Please be sure to first follow the [Button Integration](/mazing-world/integration-types/button-integration.md) guide, so you have a glimpse how our feature can work for you.

### Step 1: Install Header/Footer Plugin to WP

At first, you have to install a plugin, that lets you input custom Header and Footer code. The header code is used to integrate the mazing tag itself, so that mazing commands are available globally in your shop, the footer command is to place the 3D/AR buttons on your product pages. \
\
In this demo case we have choosen to install [WPCode](https://wordpress.org/plugins/insert-headers-and-footers/), but feel free to select whichever Custom Code Plugin you prefer. 

<figure><img src="/files/tSRWkBVmjHYIRBBGyIYl" alt=""><figcaption><p>WP Code Installation page</p></figcaption></figure>

### Step 2: Navigate to the settings after plugin activation

<figure><img src="/files/NFm5urMM0WcKWaPxj1Ar" alt=""><figcaption><p>Side Menu in wp-admin</p></figcaption></figure>

### Step 3: Insert Mazing Code into the header

Add the header code from [Button Integration](/mazing-world/integration-types/button-integration.md) into the plugin and press save. \
\
**IMPORTANT: don't forget the \<script> \</script> Tags**

<figure><img src="/files/IFTsPKG9LLRub6ZEItUb" alt=""><figcaption><p>Header Code</p></figcaption></figure>

### Step 4: Adapt your mazing code snippet&#x20;

If the header code is now enabled you can open the developer console in your WP page with F12. In the console, you can pretest your implementation by calling the globally exposed mazing() method now. And test the custom implementation you created from  [Button Integration](/mazing-world/integration-types/button-integration.md).

<figure><img src="/files/yroOvXBTijeEpqnZWkqt" alt=""><figcaption><p>Test your script and the placement of the 3D/AR buttons</p></figcaption></figure>

### Step 5: Integrate your final snippet into the footer

After you are happy with your custom development, integrate the script into your footer with the WPCode plugin, like you did with the header and press "Save". \
\
**IMPORTANT: don't forget the \<script> \</script> Tags**

<figure><img src="/files/lhKur9GUb3Fi44Admwlo" alt=""><figcaption><p>Footer Code Implementation</p></figcaption></figure>

### Step 6: Enjoy your freshly created shop integration.