Code the static Footer Section to Dynamic WordPress Footer. Step 12 of Convert Bootstrap 4 Template to WordPress Theme

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.

Amazon India Prime Day Sale 6th and 7th August.
10% Instant discount on HDFC Bank Credit and Debit Cards.
FireStick @ 2399, Laptop @ 30 % Off, Electronic Accessories @ 70% Off.
Check out the Deals now.

 

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="http://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. !!

Wordpress Hosting on SiteGround

Easy website management with Amazing Site Speed and Affordable Prices (Starting 3.99 $ / month)
SiteGround 70% Discount

8 comments On Code the static Footer Section to Dynamic WordPress Footer.

  • Hi Tgugnani

    We appreciate your tutorial. The step by step guide proved to be helpful and time efficient. Thank you so much.

    And Joel, thank you for the link to the footer code.

  • Thank you for your excellent tutorial

  • I now got the code. But i still dont see it on the site
    “https://www.5balloons.info/code-static-footer-section-dynamic-wordpress-footer/”
    I got it from
    “https://www.5balloons.info/code-static-footer-section-dynamic-wordpress-footer/?unapproved=5231&moderation-hash=3677ccf54832b2a288ba0d7368ce2674#comment-5231”

  • Sir, thank you very much for this great tutorial. I just dont understand this task in Step 12 (Code the static Footer Section to Dynamic WordPress Footer).
    You wrote “Open your footer.php file located at the root directory of wordpress theme, and paste the following content directly above wp_footer() php function.” but i dont see a any content below this phrase.

  • Greetings

    Great tutorial. I followed step-by-step and it’s easy to follow and informatic.
    But footer section example code is missing.
    Would be thankful to see that too.

  • Thank you for your tutorials

Leave a reply:

Your email address will not be published.

Site Footer