How to Convert Bootstrap Footer to Dynamic WordPress Footer

How to Convert Bootstrap Footer to Dynamic WordPress Footer

by

How to Convert Bootstrap Footer to Dynamic WordPress Footer

In this Blog Post , i will show you  the steps of converting Bootstrap Footer  to dynamic WordPress Footer

This post is for  WordPress  Theme Developer ,  Web Developer , Webmaster etc.

Step 1 

Prior to this you need to make sure the below is being done

(1)  local server with WordPress installed on your Computer

if not done check out here

(2) WordPress Theme Development Environment

if not done check out here

(3) Convert Bootstrap Header  to Dynamic WordPress Header

if not check out here

The Footer looks as below

footer
footer

Step 2

Download a free COO / MIT license Bootstrap Footer example  Sample Code here

 

Step 3

Navigate to

root:\………\wordpress\wp-content\themes\Your Starter Theme Folder \footer.php

Look for the footer.php File

Original footer.php code as below

 

<?php /** * The template for displaying the footer * * Contains the closing of the #content div and all content after. * * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials * * @package minimalsmple */ ?>

	</div>



<!-- #content -->

	


<footer id="colophon" class="site-footer">
		


<div class="site-info">
			<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'minimalsmple' ) ); ?>">
				<?php /* translators: %s: CMS name, i.e. WordPress. */ printf( esc_html__( 'Proudly powered by %s', 'minimalsmple' ), 'WordPress' ); ?>
			</a>
			<span class="sep"> | </span>
				<?php
				/* translators: 1: Theme name, 2: Theme author. */
				printf( esc_html__( 'Theme: %1$s by %2$s.', 'minimalsmple' ), 'minimalsmple', '<a href="http://underscores.me/">Underscores.me</a>' );
				?>
		</div>



<!-- .site-info -->
	</footer>



<!-- #colophon -->
</div>



<!-- #page -->

<?php wp_footer(); ?>

</body>
</html>

HTML




<footer>
    


<div class="footer-top">
 
       


<div class="container">
         


<div class="col-lg-2 col-xs-12 text-center">
             <a href="#"><i class="fa fa-facebook fa-2x"></i>Facebook</a>
         </div>



          


<div class="col-lg-2 col-xs-12 text-center">
             <a href="#"><i class="fa fa-twitter fa-2x"></i>Twitter</a>
         </div>



          


<div class="col-lg-2 col-xs-12 text-center">
             <a href="#"><i class="fa fa-flickr fa-2x"></i>Flickr</a>
         </div>



          


<div class="col-lg-2 col-xs-12 text-center">
             <a href="#"><i class="fa fa-tumblr fa-2x"></i>Tumblr</a>
         </div>



          


<div class="col-lg-2 col-xs-12 text-center">
             <a href="#"><i class="fa fa-github fa-2x"></i>Github</a>
         </div>



          


<div class="col-lg-2 col-xs-12 text-center">
             <a href="#"><i class="fa fa-google-plus fa-2x"></i>Google</a>
         </div>



       </div>



 
    </div>



  
	



<div class="row">
			

<?php bloginfo('name'); ?> &copy; <?php echo date('Y'); ?> <?php the_author_link(); ?>

		</div>



<!-- end col -->
</footer>

CSS



footer {
	background: #3e4249;
	color: white;
	padding: 20px 0 10px;
	font-size: 12px;
}

footer p {
	margin: 0;
}

footer a:link, footer a:visited {
	color: white;
}

footer a:hover {
	color: #dd5638;
}

footer li.signup-link a {
	color: #dd5638;
}

footer li.signup-link a:hover {
	font-weight: bold;
}

.footer-top{
	padding-bottom:50px;
}

.footer-top .fa{
    font-size:18px;
    color: #FFF;
    padding-right:10px;
}

.footer-top a{
    color:#FFF;
    text-decoration:none;
}

.footer-top .col-lg-2:hover .fa , .footer-top .col-lg-2:hover a{
    color:#7dabdb;
}

Step 4

Now you have identify all the files you need to use for Conversion , lets get started .

Delete everything from <footer id="colophon" class="site-footer"> to </footer>

and

Paste the HTML Code between  <!– #content –> & <!– #colophon –>

 

<?php /** * The template for displaying the footer * * Contains the closing of the #content div and all content after. * * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials * * @package minimalSmple */ ?>

	</div>


<!-- #content -->

	

<footer>
	

<div class="container">
		

<div class="col">
			

<a href="/"><img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/logo.png" alt=""></a>

			

<div class="footer-top">
 
		   

<div class="container">
				 

<div class="col-lg-2 col-xs-12 text-center">
					 <a href="#"><i class="fa fa-facebook fa-2x"></i>Facebook</a>
				 </div>


				  

<div class="col-lg-2 col-xs-12 text-center">
					 <a href="#"><i class="fa fa-twitter fa-2x"></i>Twitter</a>
				 </div>


				  

<div class="col-lg-2 col-xs-12 text-center">
					 <a href="#"><i class="fa fa-flickr fa-2x"></i>Flickr</a>
				 </div>


				  

<div class="col-lg-2 col-xs-12 text-center">
					 <a href="#"><i class="fa fa-tumblr fa-2x"></i>Tumblr</a>
				 </div>


				  

<div class="col-lg-2 col-xs-12 text-center">
					 <a href="#"><i class="fa fa-github fa-2x"></i>Github</a>
				 </div>


				  

<div class="col-lg-2 col-xs-12 text-center">
					 <a href="#"><i class="fa fa-google-plus fa-2x"></i>Google</a>
				 </div>


		   </div>


 
        </div>


  
			
			
			
		
		
	</div>


<!-- container -->
	
	

<div class="row">
			

<?php bloginfo('name'); ?> &copy; <?php echo date('Y'); ?> <?php the_author_link(); ?>

		</div>


<!-- end col -->
</footer>



</div>


<!-- #page -->

<?php wp_footer(); ?>

Step 5

Copy the CSS Style code ,

go to your theme root folder , look for the style.css file and paste the code inside

root:\………\wordpress\wp-content\themes\Your Starter Theme Folder \style.css

Something to take note:
(1) Make sure you have enqued font-awesome into your theme” function.php” file
or else the ” Facebook, Twitter , Instagram , etc ” icon might not be displayed

Step 6

Congratulation , you have just successfully converted a Static Bootstrap Footer into Dynamic WordPress Footer

 

Leave a Comment

nine + 5 =