5 Balloons

This is the Step 10 of Tutorial How to Convert Bootstrap 4 Templates to WordPress Themes . In this step we will convert the About section of our static template into WordPress dynamic.

This is how the about section of the static template looks like, we will convert this into dynamic using an amazing plugin called Advanced Custom Field 

# 1 Install and Activate Advanced Custom Field

Since we want the ability to make the content changes directly from our wordpress dashboard. We will make use of Advanced Custom Field Plugin, with this plugin one can easily change the content directly from the dashboard.

Thus if you are developing your theme for a client, it gives them a ability to update the content easily. They dont have to edit the HTML files to make small changes.

Let’s install  the Advanced Custom Field Plugin.

Go to your WordPress Dashboard -> Plugins -> Add New

Search for Advanced Custom Plugin,

Install and Activate the Plugin

Once the plugin is Activated, you will see a new menu option in wordpress dashboard with name Custom Fields.

# 2 Add New Field Group

There are four dynamic fields which we want user to have control over.

1. About text left. (The text which is floated left in about section)
2. About text right. (The text which is floated right in the about section)
3. Button text. (Text to be displayed on Button)
4. Button link. (Link the button should lead to)

We will create a field group which contains these four Fields.

Let’s begin.

-> Name the field group  “About Section“.

-> Click on Add Field and start adding the fields.

Field Label -> About Text Left

Field Name -> about_text_left (auto generated)

Field Type -> Text area

Field Instruction -> Please enter the text for the about section that will appear on the left

Required -> Yes

Now, keep adding more fields in the field list, as per the image below.

Next, in the Location section, Make a rule that says Page is equal to Home.

With this setting, we will be able to see the custom fields directly in our edit screen of Home Page.

Next, in the Options section, Make the following changes

Style – Standard (WP Metabox)

Hide on Screen – Content Editor, Custom Fields, Comments

 

Go ahead and Publish the Field Group.

 

# 3 Add Data to Custom Fields on Home.

 

When you move to your Home page on WordPress dashboard. You should see an About section with four fields. Also you won’t see the content section on Home Page, since we have checked the option to Hide Content section, custom fields and comments.

Go ahead and Enter the desired data into those fields and Hit Update

# 4 Display the About section Content Dynamically.

We have now saved the content that needs to be displayed in About section of the Home Page in our database, using advanced custom field.

Next we need to fetch that data in our page-home.php, in order to display it in about section.

On the top of your page-home.php page script. Paste the following code to get the contents into php variable.

$about_section_left = get_field('about_text_left');
$about_section_right = get_field('about_text_right');
$about_button_text = get_field('button_text');
$about_button_link = get_field('button_field_link');

Next, just below the portfolio section, Paste the code for about section and echo the required variable at desired places.

    <!-- About Section -->
    <section class="bg-primary text-white mb-0" id="about">
        <div class="container">
            <h2 class="text-center text-uppercase text-white">About</h2>
            <hr class="star-light mb-5">
            <div class="row">
                <div class="col-lg-4 ml-auto">
                    <p class="lead"><?php echo $about_section_left ?></p>
                </div>
                <div class="col-lg-4 mr-auto">
                    <p class="lead"><?php echo $about_section_right ?></p>
                </div>
            </div>
            <div class="text-center mt-4">
                <a class="btn btn-xl btn-outline-light" href="<?php echo $about_button_link ?>">
                    <i class="fa fa-download mr-2">&nbsp;<?php echo $about_button_text ?></i>
                </a>
            </div>
        </div>
    </section>

Refresh the Home page and you should see the dynamic content in the About section.

Great Job , Next in the Step 11 : We will convert Contact section into dynamic using Contact Form 7 Plugin .