diff --git a/docs/develop/grill-chat/Wordpress.md b/docs/develop/grill-chat/Wordpress.md index 7f8b7cda..aa002833 100644 --- a/docs/develop/grill-chat/Wordpress.md +++ b/docs/develop/grill-chat/Wordpress.md @@ -1,49 +1,49 @@ --- id: wordpress title: Grill Wordpress Integration -description: Learn how to integrate Grill with Wordpress websites to make them engaging for your users in a few minutes. +description: Learn how to integrate Grill with Wordpress websites in just a few minutes, making them more engaging for your users. keywords: [Wordpress, Grill integration with Wordpress, Web3 Social, Blockchain, Subsocial] displayed_sidebar: developSidebar --- -This section covers the step by step process to integrate **Grill** with any **wordpress site** in a few minutes. +This section covers the step by step process to integrate **Grill** with any **Wordpress site** in a few minutes. -## Step 1: Create New Site -Create a new site at `https://wordpress.com` by clicking **"Add New Site"** button: +## Step 1: Create A New Site +Create a new site at `https://wordpress.com` by clicking the **"Add New Site"** button: ![Wordpress New Site](/img/wordpress/1.png) -## Step 2: Setup Site +## Step 2: Setup Up The Site Add the following details for your website: ![Wordpress Setup](/img/wordpress/2.png) -## Step 3: Skip to Dashboard +## Step 3: Skip To The Dashboard Head towards the site dashboard: ![Skip to Dashboard](/img/wordpress/3.png) -## Step 4: Choose Plugins from Sidebar -Choose the plugins section from sidebar and hit **"Add New"** button: +## Step 4: Choose Plugins From The Sidebar +Choose the plugins section from the sidebar and hit the **"Add New"** button: ![Sidebar Plugin](/img/wordpress/4.png) ![Install New](/img/wordpress/5.png) -## Step 5: Search in the Plugins +## Step 5: Search Search for **"Headers and Footers"** in the plugin section: ![Search Plugins](/img/wordpress/6.png) -## Step 6: Install the following plugin +## Step 6: Install The following Plugin Install & activate the plugin for adding our scripts: -![Intall new plygin](/img/wordpress/7.png) +![Intall new plugin](/img/wordpress/7.png) ![Activate](/img/wordpress/8.png) -## Step 7: Setup the **Headers and Footer** code plugin +## Step 7: Setup The **Headers and Footer** Code Plugin Head towards the installed plugins section, and find it in active section. ![Installed Plygin](/img/wordpress/9.png) @@ -52,12 +52,12 @@ Head towards the installed plugins section, and find it in active section. ![Setup Plugins](/img/wordpress/11.png) -## Step 8: Add Grill Setup Script -Install Grill Setup script in the plugins, and follow the steps: +## Step 8: Add The Grill Setup Script +Install the Grill Setup script in the plugin, and follow the steps: ![Add new Script](/img/wordpress/12.png) -Update the Script Name as **Grill Setup**: +Update the Script Name to **Grill Setup**: ![Update the title](/img/wordpress/13.png) Paste the following code, in the **Source Code** section: @@ -72,16 +72,16 @@ Paste the following code, in the **Source Code** section: ![Add the grill setup code](/img/wordpress/14.png) -And hit **Save** button: +And hit the **Save** button: ![grill setup save](/img/wordpress/15.png) -## Step 9: Add Grill Config Script -Install Grill Config script in the plugins, and follow the steps: +## Step 9: Add The Grill Config Script +Install the Grill Config script in the plugin, and follow the steps: ![Add new Script](/img/wordpress/16.png) -Update the Script Name as **Grill Config**: +Update the Script Name to **Grill Config**: ![Update the title](/img/wordpress/17.png) Paste the following code, in the **Source Code** section: @@ -109,16 +109,16 @@ Paste the following code, in the **Source Code** section: ![Add the grill setup code](/img/wordpress/18.png) -And hit **Save** button: +And hit the **Save** button: ![grill setup save](/img/wordpress/19.png) ## Step 10: Adding CSS for Styling Now, as the last step we need to add the CSS code to style the button and position it correctly: -![Installed Plygin](/img/wordpress/20.png) +![Installed Plugin](/img/wordpress/20.png) -Choose **Addtional CSS** button: +Choose the **Addtional CSS** button: ![Active Plugins](/img/wordpress/21.png) @@ -176,18 +176,18 @@ Paste the following CSS code: ``` -Hit **Save Changes** button: +Hit the **Save Changes** button: ![Setup Plugins](/img/wordpress/22.png) -## Step 11: Integration Complete, Try Live Now! -We have finished the Setup Successfully. +## Step 11: Integration Complete, Try it Live! +We have finished the setup successfully. -![Installed Plygin](/img/wordpress/23.png) +![Installed Plugin](/img/wordpress/23.png) You can try out the website here: https://newsnft2.wpcomstaging.com/ -![Setup Plugins](/img/wordpress/24.png) +![Live Site](/img/wordpress/24.png) -![Setup Plugins](/img/wordpress/25.png) +![Grill in Action](/img/wordpress/25.png)