Tech Tutorial and News: bootstrap menu

Previous Tutorial Link: http://1wmedia.blogspot.in/2016/03/how-to-create-bootstrap-wordpress-theme_24.html

In this tutorial we will see how to create default template for WordPress page.

1. Just create a new file named page.php on your theme folder.

2. Now add the following code and save it.

<?php get_header(); ?>

    
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      

      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="first-slide" src="<?php bloginfo('template_directory'); ?>/images/avoid when blogging.jpg" alt="First slide">

        </div>


      </div>

    </div>

    
    

    <div class="container marketing">

      
      <div class="row">

      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <div class="container text-center">
<h1> <?php the_title(); ?> </h1>
</div>

        <p class="content">
                            <?php the_content(); ?>
                        </p>



              <?php endwhile; else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

      </div>

      <hr class="featurette-divider">

     <?php get_footer(); ?>

<?php get_header(); ?>


    <!-- Carousel
    ================================================== -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
     
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="first-slide" src="<?php bloginfo('template_directory'); ?>/images/avoid when blogging.jpg" alt="First slide">
          
        </div>
        
       
      </div>
      
    </div><!-- /.carousel -->


    <!-- Marketing messaging and featurettes
    ================================================== -->
    <!-- Wrap the rest of the page in another container to center all the content. -->

    <div class="container marketing">

      <!-- Three columns of text below the carousel -->
      <div class="row">
      
      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <div class="container text-center">
<h1> <?php the_title();  ?>  </h1>
</div>
      
        <p class="content">
       <?php the_content(); ?>
      </p>
      
    

              <?php endwhile; else : ?>
 <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
           
      </div><!-- /.row -->


  






      <hr class="featurette-divider"> 


     <?php get_footer(); ?>

3. Now open the extra_js.js file inside the js folder.

4. Modify the below code with the existing one( remove the old one). It's for linking parent menu item when clicking. If you didn't understand, just refer the video.

jQuery(function($) {
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();

}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();

});

$('.navbar .dropdown > a').click(function(){
location.href = this.href;
});

});

5. That's All. Now your pages are available with new default template. You can edit pages. Just with Page Edit.

Video Tutorial :

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

Now we will move to our topic.

Put the below code instead of the body tag like this. (header.php)
Code:
<body <?php body_class(); ?>>
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)
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' );
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).
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 );
          ?>
Now go Appearance -> menus -> create new menu -> save -> check the Main Menu (refer video)
Now your dynamic menu will be added instead of the static menu.

Tech Tutorial and News

Friday, 1 April 2016

Creating page.php (default Template) and (Parent Menu - adding link - bootstrap-correction) -Step 8

Tuesday, 15 March 2016

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