This is a Step 12 of Tutorial How to Convert Bootstrap 4 Templates to Wordpress Themes . In this step we will convert the Footer Section of our Static Bootstrap template to Dynamic Wordpress Footer.

 

This is how the footer section of our static bootstrap site looks like, let's go ahead and convert it into dynamic wordpress footer.

Open your footer.php file located at the root directory of wordpress theme, and paste the following content directly above wp_footer() php function.

<!-- Footer -->
<footer class="footer text-center">
    <div class="container">
        <div class="row">
            <div class="col-md-4 mb-5 mb-lg-0">
                <h4 class="text-uppercase mb-4">Location</h4>
                <p class="lead mb-0">Some Where in India
                    <br>FDFFSC SDFS</p>
            </div>
            <div class="col-md-4 mb-5 mb-lg-0">
                <h4 class="text-uppercase mb-4">Around the Web</h4>
                <ul class="list-inline mb-0">
                    <li class="list-inline-item">
                        <a class="btn btn-outline-light btn-social text-center rounded-circle" href="#">
                            <i class="fa fa-fw fa-facebook"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a class="btn btn-outline-light btn-social text-center rounded-circle" href="#">
                            <i class="fa fa-fw fa-google-plus"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a class="btn btn-outline-light btn-social text-center rounded-circle" href="#">
                            <i class="fa fa-fw fa-twitter"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a class="btn btn-outline-light btn-social text-center rounded-circle" href="#">
                            <i class="fa fa-fw fa-linkedin"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a class="btn btn-outline-light btn-social text-center rounded-circle" href="#">
                            <i class="fa fa-fw fa-dribbble"></i>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-md-4">
                <h4 class="text-uppercase mb-4">About</h4>
                <p class="lead mb-0">This is a sample page created to demonstrate Converting Bootstrap Theme to Wordpress
                    (<a href="https://5balloons.info">5balloons</a>)</p>
            </div>
        </div>
    </div>
</footer>

<div class="copyright py-4 text-center text-white">
    <div class="container">
        <small>Copyright &copy;<?php echo bloginfo('name') ?> <?php echo date('Y') ?></small>
    </div>
</div>

<!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
<div class="scroll-to-top d-lg-none position-fixed ">
    <a class="js-scroll-trigger d-block text-center text-white rounded" href="#page-top">
        <i class="fa fa-chevron-up"></i>
    </a>
</div>

You can use Advanced custom fields to create a new Field Group for the social media links, The field group will appear directly on your edit home page screen. So that your client can change the links directly from wordpress dashboard.

We have changed the Copyright site information to fetch dynamic data using bloginfo('name') and year will be generated by php date function.

 

That's It. You have successfully completed the tutorial to convert Bootstrap Template into a Wordpress Theme. You can now pick any bootstrap theme available in the theme market and apply this same skill to convert it in a beautiful wordpress theme.

Cheeers. !!

Comments