Convert the Hero Section of the template into Dynamic.

Step 8 of Convert Bootstrap 4 Template to Wordpress Theme

This is the Step 8 of Tutorial How to Convert Bootstrap 4 Templates to WordPress Themes . In this step we will convert the top most Hero section of our static template into dynamic wordpress theme.

This is how the hero section of our Bootstrap static template looks like.

Open your page-home.php file in editor and paste the following code just below the get_header(); function of the script.

 

 

Refresh the home page and you should see the hero section with static text and image missing. Let’s make the content dynamic

Go to your wordpress dashboard

Go to Appearance -> Customize -> Site Identity

  1. Upload a logo file, this will be the profile picture which you want to be displayed in the hero section.
  2. Add a Site Title (This should be your (Freelancers) name)
  3. Add a TagLine (This will be your skill set)

Site Identity WordPress

 

Let’s go back to our page-home.php file and modify our header section to convert static content into dynamic.

# Fetch Logo

On the top of your page-home.php just above the header , paste this code to fetch the wordpress logo, we just uploaded.

Replace the src of img with

# Fetch Site Name and TagLine

Replace the Freelancer Name, <h1> tag content with

Replace the Freelancer Profession / Skill-set, <h2> tag content with

# Final Header Section

Final header section should be

Refresh the page and all the content of Hero section should load fine with dynamic content.

Move on to Step 9 Convert the Portfolio section into dynamic with Custom Post Type UI.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: