Hi in the previous article I was describe WordPress file structure and how to link your css and js file. Now we are going to start with functions.php file

functions.php

function bornfeel_theme_setup(){
    add_theme_support('custom-logo');
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
    add_image_size( 'home-featured', 680, 400, array('center','center'));
    add_image_size( 'single-img', 600, 550, array('center','center'));
    add_theme_support('automatic-feed-links');

    register_nav_menus( array(
        'primary' => __('Primary Menu', 'bornfeel'),
        'menu-left' => __( 'Left Menu', 'bornfeel' ),
        'menu-right' => __( 'Right Menu', 'bornfeel' ),
        'menu-mobile' => __( 'Mobile Menu', 'bornfeel' ),
    ) );

};

add_action('after_setup_theme', 'bornfeel_theme_setup' );

For Dynamic menu we have to write this code in to the functions.php

bornfeel_theme_setup is a function name with theme name.it is best practice that you should always use your theme name for avoiding conflict to other function.

register_nav_menus is a WordPress default function to register the Navbar. For more information you can go through the WordPress Official Website.

add_theme_support for using Custom logo similarly add_image_size and his class home-featured and size

Now we need to create a function for style enqueue like below

functions.php

function bornfeel_scripts(){
    wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action('wp_enqueue_scripts','bornfeel_scripts');

Now we have to write code for menu

  <?php
           wp_nav_menu( array(
            'theme_location'    => 'primary',
          ));
    ?>

navbar

      <ul class="right chevron">
              <li><a href="index.html">Home</a></li>
              <li><a href="products.html">Products</a></li>
               <li><a>Services</a>
                <ul>
                  <li><a>Service 1</a>
                    <ul>
                      <li><a>Service 1 A</a></li>
                      <li><a>Service 1 B</a></li>
                    </ul>
                  </li>
                  <li><a>Service 2</a></li>
                </ul>
              </li>
              <li><a href="about.html">About</a></li>
              <li><a href="gallery.html">Gallery</a></li>
              <li><a href="contact.html">Contact</a></li>
            </ul>

Replace ul to div WordPress Automatically assign as a ul . Your Code looks like below

<div class="right chevron">
            <?php
            wp_nav_menu( array(
              'theme_location'    => 'primary',
             ));
            ?>
 </div>

Now we will Code for custom logo like below. Replace your static path with this code

<?php the_custom_logo() ?>

<a href="index.html" class="logo"><img src="img/logo-free.png" alt=""></a>

<a href="index.html" class="logo"><?php the_custom_logo() ?></a>

Now we will create dynamic footer, you can see under the Appearance we have no widget, So we fast create a widget

Paste the below code in functions.php

functions.php

function bornfeel_footerwidgets1_init() {
	register_sidebar( array(
		'name'          => __( 'Footer Widget Area 1', 'bornfeel' ),
		'id'            => 'sidebar-3',
		'description'   => __( 'Add widgets here to appear in your Footer 1.', 'bornfeel' ),
		'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget'  => '</li>',
        'before_title'  => '<h2 class="widgettitle">',
        'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'bornfeel_footerwidgets1_init' );

function bornfeel_footerwidgets2_init() {
	register_sidebar( array(
		'name'          => __( 'Footer Widget Area 2', 'bornfeel' ),
		'id'            => 'sidebar-4',
		'description'   => __( 'Add widgets here to appear in your Footer 2.', 'bornfeel' ),
		'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget'  => '</li>',
        'before_title'  => '<h2 class="widgettitle">',
        'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'bornfeel_footerwidgets2_init' );

function bornfeel_footerwidgets3_init() {
	register_sidebar( array(
		'name'          => __( 'Footer Widget Area 3', 'bornfeel' ),
		'id'            => 'sidebar-5',
		'description'   => __( 'Add widgets here to appear in your Footer 3.', 'bornfeel' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h4 class="widget-title">',
		'after_title'   => '</h4>',
	) );
}
add_action( 'widgets_init', 'bornfeel_footerwidgets3_init' );

function bornfeel_footerwidgets4_init() {
	register_sidebar( array(
		'name'          => __( 'Footer Widget Area 4', 'bornfeel' ),
		'id'            => 'sidebar-6',
		'description'   => __( 'Add widgets here to appear in your Footer 4.', 'bornfeel' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h4 class="widget-title">',
		'after_title'   => '</h4>',
	) );
}
add_action( 'widgets_init', 'bornfeel_footerwidgets4_init' );

Once Successfully done this code you can see the widget under the Appearance folder

Now we will install Classic Widgets Plugin

Once Install and Active the plugin your widget will look like below

Select Custom HTML with Footer Widget and paste your code

Footer.php

  <!-- FOOTER -->
  <footer>
      <!-- Social -->
      <div class="background-primary padding text-center">
      <?php dynamic_sidebar( 'sidebar-3' ) ?>                                                                        
      </div>
      
      <!-- Main Footer -->
      <section class="section background-dark">
        <div class="line">
          <div class="margin">
            <!-- Collumn 1 -->
            <div class="s-12 m-12 l-4 margin-m-bottom-2x">
              <h4 class="text-uppercase text-strong">Our Philosophy</h4>
              <p class="text-size-20"><em>"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt."</em><p>
              <?php dynamic_sidebar('sidebar-5') ?>       
              <!-- <div class="line">
                <h4 class="text-uppercase text-strong margin-top-30">About Our Company</h4>
                <div class="margin">
                  <div class="s-12 m-12 l-4 margin-m-bottom">
                    <a class="image-hover-zoom" href="/"><img src="img/blog-04.jpg" alt=""></a>
                  </div>
                  <div class="s-12 m-12 l-8 margin-m-bottom">
                    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
                    <a class="text-more-info text-primary-hover" href="/">Read more</a>
                  </div>
                </div>
              </div> -->
            </div>
            
            <!-- Collumn 2 -->
            <div class="s-12 m-12 l-4 margin-m-bottom-2x">
            <?php dynamic_sidebar('sidebar-4') ?>  
            </div>
            
            <!-- Collumn 3 -->
            <div class="s-12 m-12 l-4">
              <h4 class="text-uppercase text-strong">Leave a Message</h4>
              <form class="customform text-white">
                <div class="line">
                  <div class="margin">
                    <div class="s-12 m-12 l-6">
                      <input name="email" class="required email border-radius" placeholder="Your e-mail" title="Your e-mail" type="text" />
                    </div>
                    <div class="s-12 m-12 l-6">
                      <input name="name" class="name border-radius" placeholder="Your name" title="Your name" type="text" />
                    </div>
                  </div>
                </div>
                <div class="s-12">
                  <textarea name="message" class="required message border-radius" placeholder="Your message" rows="3"></textarea>
                </div>
                <div class="s-12"><button class="submit-form button background-primary border-radius text-white" type="submit">Submit Button</button></div> 
              </form>
            </div>
          </div>
        </div>
      </section>
      <hr class="break margin-top-bottom-0" style="border-color: rgba(0, 38, 51, 0.80);">
      
      <!-- Bottom Footer -->
      <section class="padding background-dark">
        <div class="line">
        <?php dynamic_sidebar('sidebar-6') ?> 
          <!-- <div class="s-12 l-6">
            <p class="text-size-12">Copyright 2019, Vision Design - graphic zoo</p>
            <p class="text-size-12">All images have been purchased from Bigstock. Do not use the images in your website.</p>
          </div>
          <div class="s-12 l-6">
            <a class="right text-size-12" href="http://www.myresponsee.com" title="Responsee - lightweight responsive framework">Design and coding<br> by Responsee Team</a>
          </div> -->
        </div>
      </section>
    </footer> 
    <script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/assets/js/responsee.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/assets/owl-carousel/owl.carousel.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/assets/js/template-scripts.js"></script> 
    <?php wp_footer(); ?>  
   </body>
</html>

<?php dynamic_sidebar(‘sidebar-5’) ?> Replace with your original content.

Now Your website looks like below

Our footer section is ready and its fully dynamic except Form. In the next article we will se how to dynamic our form.

Thanks for reading….. Next part will be published ASAP