Tuesday, 15 March 2016

How to create a Bootstrap WordPress Theme (dynamic menu) - Step 6

Before reading this tutorial, Please read / watch previous tutorial.

Now we will move to our topic.
  1. Put the below code instead of the body tag like this. (header.php)
    Code:
    <body <?php body_class(); ?>>
  2. Now add the following style into the style.css file.
    Code:

    .admin-bar .navbar-static-top{
        margin-top: 35px;
    }

    This is for giving the top margin in the admin bar nav menu (refer video)
  3. Add the following code at functions.php file just before the ?> tag.
    Code:

    //adding menus:

    add_theme_support( 'menus' );

    function register_newtheme_menus() {
        register_nav_menus(
            array(
                'main-menu'    => __( 'Main Menu' )
            )
        );
    }
    add_action( 'init', 'register_newtheme_menus' );
  4. Now remove or add comment the <ul> codes inside the header.php file.

    Starts from <ul class="nav navbar-nav"> to </ul> just before the </div> tag (refer video).
  5. Now add the following code instead of the above one.
    Code:

     <?php
                $args = array(
                  'menu'        => 'main-menu',
                  'menu_class'  => 'nav navbar-nav',
                  'container'   => 'false'
                );
                wp_nav_menu( $args );
              ?>
  6. Now go Appearance -> menus -> create new menu -> save -> check the Main Menu (refer video)
  7. Now your dynamic menu will be added instead of the static menu.

5 comments:

  1. followin along you have a great tutorial man thanks

    ReplyDelete
    Replies
    1. Thanks for your comments. In future, I will try to give better than this.

      Delete
  2. I recently found many useful information in your website especially this blog page. Among the lots of comments on your articles. Thanks for sharing. Ozzun Cheap SEO Services

    ReplyDelete
  3. Merely a smiling visitant here to share the love (:, btw outstanding style. wordpress theme

    ReplyDelete
  4. This website is remarkable information and facts it's really excellent Wordpress webshop laten maken

    ReplyDelete