Video Guide: How To Build A Programmatic Site With WordPress

00:00 – 00:24
Speaker 1: This is an example of a programmatic SEO site. It has 83 posts and all these posts are created in less than 60 seconds. The site is built using the dataset from the Google Sheet you can see on the screen. This dataset contains the raw data for different models of Oppo mobile phones. Each row contains information about a particular model of Oppo phone.

00:24 – 01:16
Speaker 1: For example, the model name, its price, where to buy it from, YouTube video review, and so forth. This Google Sheet contains 83 rows for 83 different models of OPPO mobiles and this is how this data is dynamically generated and visually presented to your WordPress site for different models. I will show you how to dynamically display headings, dynamic content, dynamic images, dynamic affiliate URLs, dynamic videos, and most importantly how to display dynamic inline content. But here is the thing, not only is this data visually presentable on this demo site, but this site is blazing fast as well. It loads in under a second and scores 99 out of 100 on Google PageSpeed tools.

01:16 – 02:02
Speaker 1: It also scores a 92 out of 100 for SEO so you know that your site is SEO optimized from the start for better search engine rankings. In this guide, not only will I show you step-by-step how to build it but also you can download this dataset for free to practice and build your own programmatic SEO site. I will show you the tools, themes, and plugins used to build this site. The link to both the demo site and free data is available in the description. I have also included the resources and links from where you can get real unique data for free from government and open source sites to build your programmatic SEO site.

02:02 – 02:37
Speaker 1: But before we get started, just to let you know that because technology changes at a tremendous pace and whilst it is not yet possible to edit the videos once uploaded to YouTube, I will keep the blog post updated so that you can stay in the loop with the best practices for years to come. So let’s dive right in. In this section, I will show you the data we will be using to build our site. I have already made this data set available to be downloaded for free. Please go ahead and download the PSCO dataset folder.

02:37 – 03:06
Speaker 1: The download link is available in the description. Once you have downloaded the folder, you will notice that the folder contains 3 things. A CSV file called opo dataset, product images in a folder named images, and the icon used on the demo site in a folder named icons. Let’s talk about the opo dataset.csv file first. If you open this file in the Google Sheet, you will notice that it has 21 columns and 85 rows.

03:06 – 03:37
Speaker 1: Once we are finished building this site, you will see that the 85 rows will become 85 individual WordPress posts. And those posts will contain the data you can see here in 21 columns. Please note that the data is unique for each row. Now that you have access to the data you need to build a programmatic SEO site, the next step is to show you the tools, themes, and plugins we will use to build this site. Have a blank installation of WordPress.

03:38 – 04:03
Speaker 1: This is what the WordPress dashboard looks like. But before we get started, the first thing is first. If you are adding the PSU element to your existing site, I would highly recommend taking a backup of your site first in order to avoid any disaster. This is in case your hosting company doesn’t provide backups. The hosting we will be using today is called WP-Buzz.

04:04 – 04:29
Speaker 1: This is so that we can achieve under a second load time. The theme we will be using today is called GeneratePress. GeneratePress when combined with WP-Buzz hosting achieves crazy fast load times. I have already activated the team and this is what our front end looks like. The plugins we will be using today are as follows.

04:30 – 05:08
Speaker 1: Advanced custom fields, Anti-spam B, Code snippets, Custom post type UI, Generate blocks, GP premium, WP all import, ACF add-on, and WP all import pro. All plugins are free except GP Premium and WP All Import Pro. WP All Import Pro This is so that you can import the data from Google Sheets into your WordPress. The list of all plugins used is available in the description. As I am using GP premium I will go ahead and install a theme from generate press library.

05:08 – 05:31
Speaker 1: We will do this by going to the appearance generate press site library. This is so that I can save time on creating the header and the footer etc for the demo site. I have scrolled down the multiple options and I think I like this slide-out theme. I will go ahead and install it. In a few seconds, your site will be ready.

05:32 – 05:57
Speaker 1: Let’s check out what our site looks like at the front end. This is what a demo site looks like at the front end. Now that we have an initial layout ready, the next step is to create custom post types for your site. In order to create custom post types we will use a plugin called PTUI. Please click on cpt ui add forward slash edit post types.

05:57 – 06:32
Speaker 1: In the post type slot we will use mobiles plural label will be mobiles, singular label will be mobile. Now we will scroll down to the bottom of this page to where it says supports. In this section please uncheck the editor and leave everything as it is. Now click on add post types. Now that the post type is added in the next step we will create the taxonomies.

06:33 – 07:07
Speaker 1: This is so that we can target multiple keywords in our category and archive pages. Don’t worry if it is not making any sense to you at the moment. Once the site is built it will make complete sense to you. Just to let you know that we are future-proofing the site in case we need to add other brands and target their keywords. Let’s go to CPT UI, and add a date taxonomies, and the taxonomies slug, we will call these brands as we will be targeting multiple brands of mobiles.

07:07 – 07:43
Speaker 1: At the moment we are only targeting the OPPO brand but what if we want to target Apple, Samsung, and and lot of other brands in order to get more traffic to our site. Taxonomy’s log will be brands, plural label will be brands and the singular label will be brand. And the important thing here is to make sure that the attached to post type is mobiles. Please check mobiles and then click on add taxonomy. Now if you look at the left sidebar of the WordPress you will see that there is something called mobiles.

07:44 – 08:10
Speaker 1: This is the custom post type. This was not here before. However, because we have not created any posts, everything is blank in here. Next step is to create custom fields based on this dataset we downloaded earlier. In this section, we will create 21 custom fields based on the 21 columns headings here in this Google sheet.

08:10 – 08:54
Speaker 1: This is so that we can pull this data from this Google sheet and dynamically display it to our WordPress. We will do this by using the ACF custom fields plugin we installed earlier. If you look at the WordPress dashboard sidebar you will see an option called custom fields. Please go ahead and click on custom fields then field groups we will call our field group mobiles if you scroll down to the settings section location rules rules Show this field group if the post type is equal to post. Please change the post to mobile.

08:55 – 09:29
Speaker 1: Save changes. If you remember earlier, I said we will create 21 custom fields based on the 21 columns here in this Google Sheet. All the fields will be text fields except Buy Now URL, YouTube URL and the image field. I will show you how to create 2 text fields to display dynamic data. A Buy Now URL field so that you can use your dynamic affiliate links on your programmatic site.

09:29 – 09:55
Speaker 1: A YouTube URL field so that you can display dynamic YouTube videos and the image field to display images. Please go ahead and click on it. The first field we will create is a text field. This is based on the first heading here which says brand name. The field we will create we will call it brand and the field name will be brand and we will simply click add field.

09:56 – 10:28
Speaker 1: The second field we will create is product name or back field type will be text field and field label will be product name the field name will be product underscore name and we will click on add field. Now that we have created 2 text fields the third field will be the third field we will create is the buy now URL. The field type in this case would be URL. We will call the field label buy button. Field label will be buy underscore button and click on add field.

10:28 – 10:54
Speaker 1: The second field we will create will be for dynamically displaying the YouTube videos. In this case the field will be co-embed. The field type is oembed. Field label will be YouTube and the field name will be YouTube as well. We will leave the embed size as it is because we can sort this out whilst we are designing our content template Click on add field.

10:54 – 11:12
Speaker 1: Third field I want to show you is the image field. In the field type We will select content and then image. A field label will be image. The field name will be image as well. The important thing here to note is that the return format will be image URL.

11:12 – 12:05
Speaker 1: Please check image URL. So now we have created a brand name field which is a text field, a product name field which is also a text field, a buy now URL field which is a URL field, a YouTube URL which is an oEmbed field and an image URL field which is also an image field but it has return format as image URL. Please go ahead and create rest of the text fields based on how we created the first 2 text fields. All the fields will be based on the headings here. For example the name of the fields will be score, release date, manufacturer, model name, launch date, colors, phone range, screen size, battery capacity etc.

12:05 – 12:28
Speaker 1: Etc. Please go ahead and create rest of the text fields. I will stop this video and create these text fields and come back to you. Ok once you are finished you would have 21 fields based on the 21 columns in the Google Sheet. The next step in this build is to import this data from the Google Sheet to our WordPress installation in a structured way.

12:28 – 13:06
Speaker 1: We will do this by using the wp-all-import plugin. But before we do that, if you remember, I have requested you to download the images folder. That images folder in the data set contain all these images. Please go ahead and upload these images you have already downloaded from the demo folder to your hosting server using the FTP client. The path to the upload is public underscore HTML forward slash WP content forward slash uploads forward slash wpallimport forward slash files.

13:06 – 13:41
Speaker 1: I have already gone ahead and uploaded these images to the files folder as you can see here. Now that we have already uploaded the images to our hosting server, the next step is to import this data from this Google sheet straight to our wordpress. In order to do that we will be using the wp all import plugin. But before we do that please go to your Google sheet and export this Google sheet as a csv file. I have already downloaded the file to my local machine.

13:42 – 14:12
Speaker 1: Let’s go to all import. Click on new import. This is what the wp all import looks like please go ahead and click on upload file this is the file I have already downloaded to our local machine let’s click on open okay the file has already been uploaded to the WP all import plugin. The next step is to change the create new from posts to mobiles. Please select mobiles.

14:12 – 14:37
Speaker 1: Click on continue to step 2. Right the WP all import plugin has already read your csv file and now it says 83 rows will be imported. It already knows that you have 83 posts in there. Click on continue to step 3. Ok, if you look here, on the left hand side, we had wpallimport drag and drop editor.

14:37 – 15:13
Speaker 1: On the right hand side here we have the data which is there in this Google data sheet. What we need to do now is we need to create the title of our post now because we are using dynamic titles for example on this site we will be talking the product name price in the UK in that case we will double click on the product name. Click on the title text box. You have already got the product name here. Then we will write price in the UK.

15:13 – 16:00
Speaker 1: So when the WP All Import will create the post, it will substitute the product name with all the product names which are available in this csv file we have uploaded to wp all import we will leave this as it is the next section is images click on images Well the plugin does give you a few options but we will be using use images currently uploaded in wp-content forward slash uploads forward slash wp all import forward slash files. This is because we have already uploaded the images to our server. Double click on image URL and click on this check box here. We will leave the image options as it is. Yes, leave this checked.

16:00 – 16:38
Speaker 1: Leave this checked and then go to SEO and advanced options we do want to set the titles the title of the image we want this to be the product name so I will go ahead and double click on product name here and then click here. We also want to set the alt text. This is for the SEO purposes and alt text will also be product name. So again I will double click on product name and then click here. We also would like to change the image file names and we would like to do change them to the product name.

16:38 – 17:07
Speaker 1: So I’ll click on double click and then click on the text box. Now this has been done. Now it is time to import the rest of the fields from this Google Sheet we have uploaded here to WP all import. Now please note, please do not choose the custom fields option instead choose the advanced custom fields add-on option. Once you click on that you will see that you already have your custom post type in here.

17:07 – 17:38
Speaker 1: Please go ahead and check it. Once you check it you will see that all the fields you created using the custom field advanced custom fields plugin are already displayed here. All we need to do is to drag and drop the field names from the right hand side from the Google sheet into here. This is so that WP All Import plugin can generate the dynamic data. I will double click on Brand Name and click it on the brand.

17:38 – 18:21
Speaker 1: Product Name, Buy Now URL, YouTube Image URL, Image URL. I will also check the search through the media library for existing images before importing new images and I will also check use images currently uploaded in wp-content forward slash uploads forward slash wp all import forward slash files the next option is price I will double click on price and paste here. Core, release date, manufacturer. Now I will do this for all the rest of the fields. I have gone ahead and dragged all the fields from this Google Sheet straight on to the advanced custom fields add-on section.

18:22 – 18:51
Speaker 1: As you can see in here that all the fields are present here. The next step is to click on taxonomies and click on brands. If you remember earlier we did create the taxonomy section in the CPT UI plugin. This is so that if we are targeting other mobile brands in the future for example this Google Sheet is only targeting the Oppo brand. What if we have data for all the other brands as well?

18:51 – 19:28
Speaker 1: What if we have data for the Apple phones, for the Samsung, for the Nokia and all the other brands? We can target those as well and if we target those we do not need to create different categories for different brands. Instead we can just mention the categories in any of the columns here and then drag and drop the column name on to the taxonomy section. WP all import will automatically create those categories and those tags for you. We will leave everything as it is and click on continue to step 4.

19:28 – 20:00
Speaker 1: Ok now the WP all import wants you to select a unique identifier, I will simply click on auto detect because I do not know how to do this. I have clicked on auto detect and it has generated a unique identifier for us. We will leave all the other options as it is and click on continue. Once you click on continue it is telling you your file is all set up. Now let’s click on confirm and with run import.

20:08 – 20:31
Speaker 1: Wow Check this out in less than 30 seconds our import is complete. All 83 records from opo dataset was successfully processed. WP all import created 83 new records. That is awesome isn’t it? We have managed to create 83 posts in less than 30 seconds.

20:31 – 21:02
Speaker 1: How awesome is that? But where are those posts? Well those posts are here in mobiles if you go to the wordpress sidebar and click on mobiles all mobiles you will see that there are 83 posts which are available here. We have to make sure that the WP All Import did manage to import all the data from the Google Sheet in to this WordPress post. So let’s click on edit to see whether that has been done.

21:03 – 21:48
Speaker 1: Right, as you can see the brand name is here, product name is here, buy now button is here and we also have an image button in here, the featured images here. So, it looks like WP all import managed to import all the data from the Google sheet on to the WordPress. So this is how we managed to create 83 posts in less than 60 seconds but guess what we just created 83 posts You can create 8300 or in fact 83000 posts as well. Or if you have bandwidth you may be able to create 83 million posts. How do these posts look like in the front end?

21:48 – 22:05
Speaker 1: Because we don’t know yet. So why not click on view, open link on new tab and oh my god there is nothing here. So we do have posts in WordPress but this section is all empty. Well, why is that? Where is all the data?

22:05 – 22:38
Speaker 1: Why is the data not displaying on the front end? That is because we have not yet created a content template for this data. In the next section, I will show you how to design a content template so that you can show all the data you have imported from the Google Sheets onto your WordPress. We want our programmatic site to be fully SEO-optimized. This means that our site is not just blazing fast but it should also have an impressive UI as well.

22:38 – 23:03
Speaker 1: A good UI results in a pleasant experience for your users. This results in better dwell time and higher rankings. Remember the more time your users spend on your website, the more money you make. Now, enough of the TED talk and back to walking the talk. I have designed a wireframe here in Figma for what I believe our content layout should be.

23:03 – 23:38
Speaker 1: What you will notice later on is that we will create this layout once and it will apply to all the posts by itself. Please note that all the containers I will be building on our demo site for example number 1, number 2, number 3 etc will be available in the blog post. So if you miss something do not worry, simply go to the blog post and get the styling information from there. The link to the blog post will be available in the description. So let’s get started.

23:39 – 24:21
Speaker 1: Back to the WordPress dashboard. Head down to Appearance and straight to Elements. In here, Elements, Add new element the element type will be blocked click on create the title we will call this mobile content template on the right-hand side in here. The element type will be content template and it will apply to all posts. We will come to the left-hand side, display rules, and location, and choose this as mobiles.

24:21 – 25:00
Speaker 1: We will leave this as all mobiles and simply click on save draft so that we don’t lose these settings looking at this layout in here well it does say 18 18 containers but we will be building 19 because there will be a parent container as well. The first container we will build, we will use generate blocks which is a free plugin to build the content layout. So I’ll simply click on add block container and it will give you an option. Please choose this blue container option. This container belongs to generate blocks.

25:00 – 25:24
Speaker 1: Ok on the right-hand side we have the styling options. The container will be full-width. The inner container will be contained width and I will simply change the inner container width to 800 because I believe this will look nice. Scroll down to spacing. The top will be 60 pixel, right 24, bottom 60 pixel, 24 as well.

25:24 – 25:59
Speaker 1: So please note that we are using the pixels here, pixel units, not something else. Right, now that we have, I’ll call this apparent container. This is just so that I know what we are building so this is the first container if you click on this menu in here you can see that you can view the containers you are building on this left hand side right So I’ll close this at the moment. I will simply click on add block and inside the container, we will build another container. Ok now that we have 2 containers.

25:59 – 26:28
Speaker 1: For the second container the border size will be 2. Now after that, we will click at the bottom and add another block. Please note that all these containers are basically blocks. So I forgot to tell you but this is important all these containers we are building are called blocks. So all these containers here 1 2 3 4 5 these are all blocks we call these blocks containers because they contain the text and the other elements in the in the website.

26:28 – 26:52
Speaker 1: So I’ll simply go ahead and click on add block. I will add another container. Okay this container we will have top padding as 30 so that it has some space from the top bottom. If you look on the right side the bottom size I’ll make it 2. Right now we have 2 containers, 3 in total.

26:52 – 27:22
Speaker 1: So we have this parent container and then we have another container and then we have another container below it. Now inside the third container this 1 I will build a grid. If you click on the plus sign and go to the search bar and write grid, you will observe that there’s an option in here called grid. Please choose this option and then select the 3 containers. I will leave the styling on the right-hand side as it is.

27:22 – 28:34
Speaker 1: Below these containers if you click on here I’ll leave this as full view so that you understand what we are building. You can see that there is there’s a parent container inside that container there’s another container then another container and then we have grid that contain 3 containers so underneath this container we will build another container I’ll click on the plus sign and then container. Okay for this container on the right-hand side I will have a padding of 20 pixel on the top and 20 at the bottom. Please see here padding 20 at the top 20 at the bottom the border size we will use 2 at the bottom 2 pixel will be the border size we will leave that this as it is now inside this container we will have a grid I’ll simply click on add block and click on grid and choose 2 columns grid For this grid we will use the horizontal gap as 20 pixel vertical gap as 20 pixel as well. Whilst we are doing this I’m not sure whether you were able to see is a gap between these 2 containers so there will be a horizontal gap and a vertical gap as well on the mobile.

28:34 – 29:12
Speaker 1: For this container, we will come down to where it says spacing and the border size on the right we will use it as 2 pixel. If we move to the container on the right-hand side this container we would need to add a grid inside this container. On the left-hand side we have an image container on the right-hand side let’s call it container 8 we have another container inside that container we will have a grid with 2 columns another grid with 2 columns then another container another container, another container and another container. This is for the styling purposes. So let’s go ahead and do it.

29:12 – 29:26
Speaker 1: After this grid, you will have another grid, 2 columns. After this grid, you will have another container. 1. If we select this container inside after, we will have another container. So let’s see how many containers we need.

29:26 – 29:47
Speaker 1: 1234. We have already got 2. So insert after another container and then insert after another container. Right so our template is taking shape. Now that this section is complete we will go ahead and create a buy now button container and then a youtube container and then the text container in here.

29:47 – 30:19
Speaker 1: At block container, we will keep padding as 30 or top, right, bottom and left for this container. For the border size, we’ll keep the bottom border as 2. Right now, we have created the button container. It’s time to create this YouTube video container. You will click at the bottom add block container and on the right-hand side for this video container we will have padding as 30 pixel top right bottom and left and on the bottom we will have a border and we will have a border size of 2 pixel.

30:19 – 30:36
Speaker 1: What comes after a YouTube video container we have text container. Click on the plus sign, click on container and again padding we want is 30 pixel top right bottom and left. The border size at the bottom will be 2px as well. So this is all what we need for now. We have created a layout.

30:37 – 30:59
Speaker 1: Let’s go ahead and start. I would like to take you back to the WordPress dashboard. If you go to the WordPress dashboard, click here on custom fields. So these are the custom fields we created earlier. Mobiles, simply click on it and you can see all the fields in here.

30:59 – 31:19
Speaker 1: Leave this open because you would need it. Let’s go back to creating our mobile content template. I’ll simply go ahead and save it in case if we lose the internet connection it still stays there. In the second container if you look in here we have the product name. Simply go to add block.

31:19 – 31:36
Speaker 1: Please write headline in here and please choose the headline block. It says H2 in here. Let’s convert this to H1. We want to dynamically display the product name for each product in this content template. How are we gonna do it?

31:36 – 31:49
Speaker 1: Here we have product name. I’ll simply go ahead and copy it from here. Go back to add new element. Line simply go on the right-hand side. You will see here something called dynamic data.

31:49 – 32:24
Speaker 1: Click on enable dynamic data. The data source will be current post. The content source will be post meta right and the post meta field will be the product name. Okay I’ve copied the product name from there and pasted it here so it says product name okay the second 1 will be the price. Okay now what we will do here is save draft and publish and I want to show you what is happening.

32:24 – 32:44
Speaker 1: If you go to mobiles and click on all mobiles You have all the posts in here. Now if you click on view, we’ll see that here, this was empty before. Now you have the product name here. So your template is getting ready. Your product name is already here.

32:45 – 33:01
Speaker 1: I will simply go ahead and keep on creating the template and once we are finished, you will see that this will be fully populated for each of the posts. Well, let’s come down to this container. This will be our price container. On Add Sign, please choose Headline. We will leave this as H2.

33:02 – 33:15
Speaker 1: First, we will go to Dynamic Data. Enable Dynamic Data. Data source will be current post. The content source will be post meta. And the post meta field will be price.

33:15 – 33:46
Speaker 1: So we’ll simply go to our ACF fields, look at the price section in here, copy it from here and simply add it in here. Price. Now what we also want to do is to make it pleasing we would like to use an icon as well. Previously when you downloaded this data set it contained the icons folder. Now I have already downloaded this onto my local machine and I will look for the price icon in here.

33:47 – 34:05
Speaker 1: Right click, open with text edit. Right I have opened it. I want to select all of it. Copy and then straight and then we will go to icon section and icon svg html. I will simply paste it here.

34:06 – 36:07
Speaker 1: Now this looks a little small so what I’ll do is I will change the size of the icon to 1.5 maybe for now. Now we are dynamically displaying the price in here In the next container we want to display the brand name again headline leave this to h2 the right-hand side dynamic data able dynamic data data source current post content source post meta and the field will be brand so let’s okay the brand is here simply copy and paste also we need an icon brand.svg open with text edit rectal copy icon paste and then change the size I am not boring you to death. I will click on update. The important section in here is now it is the turn to do the image section which is container number 7 simply click on add block ok I’ll click on add block and in the search bar I will write image please select this blue icon in here please do not select any other image icon because we want to enable dynamic data on the image as well so if you come to the right-hand side on the right side bar enable dynamic data the data source will be current post the image source will be featured image and what we will do is we will size this as well Click on settings and we want the width to be 300 and the height to be 300 pixel as well.

36:07 – 36:58
Speaker 1: We would also like this image to be centered. Alignment icon in here and then align center. Okay now I will go ahead and create all these others other dynamic data options in here using the same method which I used to create the product name price brand phone range and everything I will stop the video here and then fill out all these containers. Okay I believe I’ve created this layout in here. I know it is looking a little bit ugly but we are going to fix it.

36:58 – 37:12
Speaker 1: Let’s go ahead and click on update. Updated it. Let’s have a look at what it looks like. Okay we are back in the dashboard, mobiles, all mobiles. Let’s look at the first mobile, click on view open link in new tab.

37:12 – 38:12
Speaker 1: Okay this is what it’s looking like at the moment. I know the font is looking absolutely horrible we are going to fix that so what I’ll do is I’ll go back to the element the first thing is we want to make it stand out so the first container I’ll come to the colors and the background I want the background to be white but also want the background to have the radius spot radius of 10 all the way through let’s update it now we have a nice white background it stands out What I also want to do is I would like to make the font smaller so that this looks like heading and this looks like the content and not this really bold font in here. I’ll go back to edit the element. I’ll select the headline and change the tag name from h2 to paragraph. However, it is looking really small now.

38:12 – 39:15
Speaker 1: I’ll change this to I’ll come down click on typography and change the font size to 25 or maybe 35 to make it look nice. I’ll do this with all the other headings in here. I’ve done this for all the headlines click on update let’s have a look at what it what it looks like now at the front end right it looks it is looking a lot better however I do believe that we need to reduce the font size from 35 to maybe 25 I’ll go ahead and change the font size from 35 to 25 for all of the dynamic data which is displayed here. Let’s go ahead and click on update. Let’s look at what it looks like at the moment.

39:15 – 40:26
Speaker 1: Wow this is looking nice isn’t it this is looking a lot better so we have a dynamically generated product name in here which is oporano 4z 5g in our title tag it says opo oporano 5g price in UK so it does have the right title tag we are targeting however in our content we have the product name and then we have all this dynamically generated price in here we have the brand name we have the budget we have the screen size we have the score which we have given it, the battery capacity we have all the information someone needs to make in order to make the right decision for this mobile in here at a glance because we do not want to clutter this. Next step is to create a dynamic button so let’s go ahead and do it container we click on add sign type button. Please choose this button. Blue button in here. Please do not choose this.

40:26 – 41:40
Speaker 1: Only this 1 because this is a red press button. We can dynamically generate the URLs using this button block. Line button center, like to change the color we want the background to be yellow because yellow converts great and we would like the text to be black but if someone hovers it will become black well it will change the color so that would look nice size will be 1 pixel in the spacing section border radius will be 6 Here we have also would like to change the text by now. Now we have the button we need to do go down to where it says dynamic data enable dynamic data or we will go back to our field groups and the option we have is buy button in here button copy data source will be current post the content source we will leave as it is the length the link source in source will be post meta and the post meta field will be the buy now button ACF field. Right we will click on update.

41:41 – 42:17
Speaker 1: Okay now if you go to the front end you will if you refresh your page you will see that we have a buy now button here. If you go to the mobile’s custom post UI click on edit. This buy button should actually take us to amazon.co.uk but is it doing it? Imagine that you have this product in here which is mobile and you want to link it to your affiliate URL of Amazon. So let’s click on buy now and see if it takes us to the Amazon and there you go we are in Amazon.

42:17 – 42:48
Speaker 1: As soon as we click the button, you know, you can link this button to any product on Amazon for affiliate or for that purpose you can use any affiliate link on this button. So This is how you generate a dynamic URL for your programmatic SEO site. Next step after the buy now button which is difficult 1 is YouTube video. Because for YouTube video we cannot use generate press blocks. We will use something else.

42:48 – 43:52
Speaker 1: And I will show you what we are going to use we are going to use the acf short codes go to edit element section in the search bar please write short code short code in here write ACF field is equal to a is it will be equal to it says YouTube in here you will go ahead and copy and then paste it here close this as well. 1 thing we want to do here is we want this container to align its content in the center. So let’s go ahead and click on update. See if we have a video displayed here. Ok there you go we have a video which is displayed content awesome is that this is how you dynamically display This is how you dynamically display a YouTube video using an ACF field on your programmatic SEO site.

43:52 – 44:22
Speaker 1: So far we have created all these fields and now we would like to add some description. If your website will have thin content it will not rank on the search engines. The next step is to dynamically insert content into the paragraph block. If you look in here, we have a paragraph here and what we want is to dynamically insert inline content into that paragraph block. So we simply go to, we simply select the container we wanted to use for the paragraph block.

44:23 – 45:57
Speaker 1: Click on plus sign and in the search bar write a paragraph. Okay I have got a sample text in here we are using the ACF fields shortcode to dynamically display inline content in the paragraph block so I will simply copy it in here this content this text will be available in my blog post should you wish to copy it I’ll simply paste it in here so we pull the data from the ACF fields and dynamically display it in the front end so this is how it will read it will say the product name is a you know as a budget smartphone or a flagship or a specialized or a status phone manufactured by the manufacturer name the phone the phones because we are talking the phone price in UK it would say the phone current price in UK is hovering at around this field. So we’ll simply click on update and see how it turns out in the front end. And this is what our content looks like at the front end. It has the product name, the price because we are talking the price it has the brand name and it tells us where if it’s a budget phone a flagship phone or a high-end phone like iPhone it also tells us it also gives us information of the screen size how we have scored it based on our own expertise, the battery capacity, the RAM it has, what processor it is using, the camera it is using.

45:58 – 46:41
Speaker 1: These are all the things which help people make instant decision. Right, so we have taken all the things which help make people instant decision and then presented them with a buy now button which is an affiliate button. For SEO purposes, we have also inserted a YouTube video in here so that if someone clicks on the YouTube video, they can watch the video and that is how you can increase the dwell time. Imagine that 1 of your page ranks and then someone comes to your page and then watches this full 5 minutes video. This is going to give Google the signal that your website is absolutely awesome and people love it.

46:41 – 47:42
Speaker 1: Underneath that if someone does not want to watch the YouTube video, We have also used the data in the ACF fields to generate the review in here. You can make this as long as you want. You can make this 2000 words in case if you want to make the page content heavy for the SEO purposes. This is how you create a template for your programmatic SEO site using the dynamic data. These are only 21 fields you can use 200 fields on this page you can use 2000 but the method of creating a template out of raw data is same so you can literally have a lot of data in this Google Sheet and using the same strategy and the tools I have taught you in this course, you can create a programmatic website out of it.

47:42 – 48:09
Speaker 1: A site which will have a nice UI and it will be crazy fast and it will have it will be SEO optimized as well. Now that we have created a content template what we will do is we will create a home page and I want to show you how to create a home page which will display all these posts. So simply go to pages, add new. We will call this home page. I will simply go ahead and create a container.

48:11 – 48:29
Speaker 1: Plus sign container. Container on the left side, container fold width, inner container contained width, inner container width 1100 pixels. I am happy with that. So I will simply click on add block. I want to make this H1 block for the SEO purposes.

48:29 – 49:14
Speaker 1: I will call this pro. Ok so it will be programmatic as your demo site that will be the headline I will simply go insert after and insert another headline block this is a small description I wrote earlier I want to change this into a normal text which will be paragraph however what I want to do is I want to change the font size to 25 so that it does not look too bad I also want to give some spacing underneath it because we would like to show all the posts we have created on the home page for SEO purposes. The bottom padding will be 50. After this, because we want to show all the posts what we will do is we will use something called a query loop block. So, insert after.

49:15 – 49:43
Speaker 1: The next block we will use. I’ll click on plus sign and in the search bar I will write query loop. Ok it is giving me some options because this is a demo site I will only be using the existing template in here. On the right hand side we want to select the post type to mobiles and we want to make this 100. I would like to center this image.

49:43 – 50:09
Speaker 1: I would also like to change this title from Oporano 4 Z 5G price in UK to the product name. Dynamic data source content post and the content source will be post meta. I will simply go back to the custom fields, edit and I will copy the product name from here. Paste it here. Now this will have product name.

50:09 – 50:40
Speaker 1: I will align this center. Let’s remove the date for this. We will change this to h4 and the data source will also be post meta and the post meta field will be price because we are targeting the price you see so you want to make sure that everything is aligned and we would also make this center. I will preview to see what it looks like. This is what our homepage looks like.

50:40 – 51:02
Speaker 1: I would like to disable this because this is not looking nice but otherwise I am happy with the content which is displayed here. It is displaying all the posts. In order to disable the page title, I will simply go to the page. At the bottom it says disable elements. I will click on content title and then click on publish in here.

51:02 – 51:28
Speaker 1: Now that the page is published I will simply go to the WordPress dashboard appearance themes customize and here it says home page settings static page and the home page we will change this to home page which we have just created. Let’s go ahead and click on publish. Let’s look at how our site looks like. Ok this is what our site home page looks like. It clearly shows what the site is about.

51:28 – 51:42
Speaker 1: It’s a programmatic SEO demo site and it gives an explanation. This is an example of programmatic SEO site. It has 83 posts. All posts have been created in less than a minute. Want to learn more about how it was built?

51:42 – 51:58
Speaker 1: I will put a link to my blog post here and also to my YouTube video. So let’s have a look at what our posts look like. OK. This is what the first post look like. It is dynamically created content.

51:58 – 52:31
Speaker 1: It has product name, price, brand, budget, all the information, a buy now button, a YouTube video and description. The second post, same, the post layout is same but the information is different, the product name is different, price is different, Brand is same and then it also has a mid-range brand. Actually what I’ve noticed is that we have in budget we should we should have this as a wallet. I will go ahead and change this. I will show you how I’m gonna do it.

52:32 – 53:41
Speaker 1: Simply go to dashboard, appearance, elements, mobile content template, edit, icons folder, wallet svg, open with text editor, copy, simply go to phone range, clear icon, paste and click on update and refresh product page you can see that the icon has changed to wallet Now imagine that if you are creating 83 posts 1 by 1, if you have to change a single thing you will have to go and change it in 83 posts that is gonna take you a full day. But by using the content template you can literally make changes to your website within that 1 template and it will the changes will appear on all the posts. Let’s see so now let’s check out another blog post and look at that this has changed the icon has changed to wallet in here as well. Right so this is how you make home page for your pragmatic SEO site. Now it is time to speed up this site.

53:41 – 54:10
Speaker 1: I’ll simply go to the hosting panel. This is the hosting panel of pseo.reseller.io. This is what I named this site. I will go to CDN click on edge caching and I will simply deactivate the development mode. Ok Now that I have deactivated the development mode, I will go to web optimization in here and simply turn on this 1 click optimization.

54:10 – 54:47
Speaker 1: What this will do is that it will optimize your HTML, your JavaScript, your CSS and your images in just 1 click. You do have a lot of options to play with if you want to but this 1 click optimization is really safe and it will really speed up your site and I will show you in a bit how fast our pages are loading. Ok so let’s check the speed of this page. It is pseo.reseller.io forward slash mobiles forward slash oppo hyphen a11s hyphen price in the UK. Let’s copy this URL.

54:47 – 54:59
Speaker 1: Let’s go to Google. Check site speed. Page speed insights. Let’s paste it here. And click on analyze.

55:00 – 55:48
Speaker 1: And check this out the desktop score is 99 even though that the page has the data it has image it has a button it also has a video it still scores 99 Okay and it loads in under a second. At the start of the course I told you that the hosting and the theme and the plugins we will be using are SEO optimized. They all work together to create blazing fast websites. Now check this out it loads in under a second on desktop, mobile it scores 88 and it loads in under 3 seconds which is absolutely awesome. It is fast for a mobile as well.

55:48 – 56:40
Speaker 1: Now let’s have a look at what our homepage loads like and check this out. Our homepage scores 92. It loads in under 3 seconds even though that we have about 83 images on the home page it still loads in under 3 seconds on mobile on mobile and what about desktop let’s have a look okay on desktop or on laptop our homepage loads in under a second. Check this out it loads in under a second right accessibility 92 which means that our site is inclusive to people of all abilities. The best practices are 100 out of 100 and our SEO score is 92.

56:40 – 57:36
Speaker 1: Now this can be further improved by it says the document does not have a meta description If you use any plugin to use meta description, this SEO score will go to 100 as well. So this is how you create a lightning-fast programmatic SEO site which loads in under a second by using awesome posting like WBoz and a fast thing like GeneratePress, you can literally create a programmatic SEO site with hundreds or even thousands of posts that load in under a second that are SE optimized. They also look and feel nice as well. So if someone comes and lands on this website they know that this is not just a garbage. There has been some effort into the layout and it is showing all the content which a user needs to make an informed decision.

57:37 – 58:14
Speaker 1: We have created this raw data from this Google Sheet and converted it to something beautiful. Check this out. How nice is that? That is what this data looks like you can literally take any data from any sheet and using the same strategies the same tools I have taught you in this course you can use it to build amazing programmatic SEO sites. For as long as you have the data, you now know what tools you need to build those sites.

58:15 – 59:08
Speaker 1: If you have any questions regarding this programmatic site, if you want to further enhance it, please let me know and I’ll be more than happy to answer in the comments section on the blog. I will also provide you with a lot of resources from where you can get data in order to build your programmatic SEO sites. This data is actually available for free on the government and some of the private websites. I will also link you to the people who can teach you how to make Beautiful sites using generate press I will also link to the people who already Making a lot of money with the programmatic SEO sites The links to all these resources and the people are available in my blog post. Please go ahead and check it out.

59:08 – 59:24
Speaker 1: In the meantime, if you have any questions, please let me know. If you like this course, I would highly recommend subscribing to my channel for more videos like this. Thank you so much and have a nice rest of the day. Bye