In part 1 we saw how to convert a static HTML site into a WordPress site. Although the site is converted, it is not very dynamic. All the images and content is embedded inside the front-page.php and to edit it, you need to edit code, which in a way defeats the purpose entirely.
In this section, we will address that issue. We will create a dynamic carousel on front page, create dynamic fields for icon, site name, site meta fields and create option to add pages.
Before we start modifying our pages. let me introduce you to Custom Fields and Option Tree, a WordPress plugin which will help us in making a lot of content dynamic on the pages.
- Custom Fields: You can enable this by clicking on the 3 dots on the right
of any page, clicking on options and enabling the Custom Fields under Advanced Panels - Option Tree: Install this plugin under Add Plugins menu or downloading it from plugin page.
Open Option Tree configuration page and add a “Setting” with id “meta_description” and Type as text. Navigate to Appearance > Theme Options and set the value of the same with whatever value you want to show as the meta description field of your page.
Modify header.php
Add the below code at the top of the file, even before <html> tag.
Modify the site title and meta description to:
Modify the nav logo to:
Also, modify other places of code wherever you want to show Site title and description. Now when you change the values under site identity under Appearance > Customize, the values reflect on the page dynamically.
Let’s make the carousel on front page to be dynamic so that we can modify pictures and titles
Open Option Tree and add a setting named header_carousel and set the type to List item. After saving set the values of the same under Appearance > Theme Options. When you click the + icon, it gives you the option to set different values, like Title Image Link and Description. For my use, I didn’t need to fill the link because I didn’t have any but I filled the others and uploaded an image.
Now modify the front-page.php with following.
At top of page, inside PHP declaration:
Inside the carousel section:
Now, you can add or delete images under Option Tree and they will show up in a beautiful Bootstrap carousel.
Adding pages to your site
By now you would have realized that if you add a page and add the link in menus, the page shows up but the content doesn’t. Well, as we have custom template, we need to make modifications to the page.php file so that whatever pages we add, it shows up properly. SO, go ahead and open page.php and add the following code:
The top <section> is just a header image I have set for my site, you can ignore it if you want.
This step is similar to how we modified the pages, but in this case, there is a small code change:
This concludes our tutorial on how to convert a static HTML site into a WordPress site or template. Thank you for reading.
We will try to add a gallery of pages which when clicked show up a page with posts which have category similar to pages
Let’s have a scenario, where you want to show items on offer in front page, but the items are part of a collection. For example, on sale/offer are “Sweatshirts”, “Shirts” and “Outerwear” which are basically collections but have many items under them. Something like picture shown below:
To achieve this, we will first of all install a plugin named Add Category to Pages. This is a very simple plugin which just adds categories to pages, which is not available as of now. So, first we will create a page Named “Sweatshirts” and have it’s slug as “sweatshirts”. We will add a featured image to this page. We will repeat the same process for “Shirts” and “Outwear”.
Now let’s open front-page.php and add the following code:
Inside the top PHP section, just after get_header(); :
In the page, wherever you want to show the section:
The above styling with custom classes is for my example above. Please change accordingly. Now, you can create posts with category as “sweatshirts” etc. and on click of this item, the corresponding page will load with the posts set as category. In page.php, you can add some code like below for this to show up. The code below is a query which will fetch a list of posts, which you can iterate through.