Creating single post template (single.php) on WordPress

Previous Tutorial: http://1wmedia.blogspot.in/2016/05/customizing-or-styling-blog-page-on.html


In this tutorial we will see how to create single post template for our theme.


1.    Open your blog page and click the link for viewing a post. It doesn’t work. So now we will create single post style or template.
2.    Duplicate the home.php file and save as single.php.
3.    This single.php is your default single post template.
4.    Remove the excerpt and Readmore  and add content function.
5.    Remove the top title also.
6.    Now your single post is ready.
7.   View my previous tutorial and this video to understand the code changing.

That’s All.

Code for single.php :


<?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><a href="<?php the_permalink(); ?>"><?php the_title();  ?></a>  </h1>
<p><?php the_author(); ?></p>



     
  
                            <p><?php the_content(); ?></p>
                           
                       
                       
   

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

</div>
          
      </div><!-- /.row -->

      <hr class="featurette-divider">


     <?php get_footer(); ?>



Video :

Creating custom Sidebar Widgets - Part1

Previous Tutorial -> http://1wmedia.blogspot.in/2016/04/creating-sidebar-template-by-using.html

In this tutorial we will see how to create sidebar using register_sidebar function.



1. Open your functions.php file from your themes folder.
2. Add the following code to widget support for your theme.

<?php

//adding Widget:

add_theme_support( 'widgets' );

?>


3. Open Dashboard -> Appearance -> Here you can see widgets.

4. Now go to your functions.php and add the following code for creating or registering sidebar


<?php

register_sidebar(array(
        'name' => 'Sidebar Name',   
        'id' => 'sidebar-id',
        'description' => 'This is description of Sidebar Name',
        'before_widget' => '<div class="widget">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));

?>


save the functions.php

5. name -> naming the sidebar,  id -> to call/add the sidebar wherever you want by using this id,  description -> for  giving the description of the sidebar.

6. Now view widgets in dashboard -> You will see one widget with following name, "Sidebar Name"

7. Add some widgets and save it.

8. Now we will call / add this widget in your template or wherever you want.

9. In our case we will add this into page-sidebar template. So open the page-sidebar.php file.

10. Paste the following code below  "<div class="col-md-4" > "


  <p><?php if( dynamic_sidebar('sidebar-id')); ?></p>



11. Here "sidebar-id" is an id, we have created earlier in register_sidebar function (point no 4)

12. Now view the page -> with Sidebar Template selected.

13. You can see the sidebars.

Please refer the following video:

Creating sidebar template by using page.php

If you want to read the previous tutorial, Please click the following link. http://1wmedia.blogspot.in/2016/04/creating-pagephp-default-template-and.html

Ok. Now we will move to topic.

In this tutorial we will learn how to create custom template and sidebar template (We will see how to create widget, sidebars in the next tutorial.)

If you want to create a custom template just do the following steps.

 1. Create a new php file (In our case, save as the file page.php into page-sidebar.php) and add the following code.

?php
/*
Template Name: Your Template Name here
*/

?>

2. There is no space between : and Template Name in the above code

3. In our tutorial, We will use our template name which is "Sidebar Template" instead of "Your Template Name here"

4. Now save it. That's all for creating new or custom template in WordPress.

5. Now add the following code or replace page-sidebar.php code with the following:

<?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">
     
      <div class="col-md-8" >
     
      <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <div class="container">
<h1> <?php the_title();  ?>  </h1>
</div>
     
  
                            <p><?php the_content(); ?></p>
                       
                       
   

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

</div>

 <div class="col-md-4" >

 <p>This is our sidebar space</p>
 </div>

          
      </div><!-- /.row -->

      <hr class="featurette-divider">


     <?php get_footer(); ?>

6. Now save the file in theme folder and move to your Dashboard -> Pages -> Edit a page -> Page attributes -> Template -> here you will see a new template with our template name. Sidebar Template is our template here.

7. That's all

Video tutorial:

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

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(); ?>


    <!-- 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(); ?>

<?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 :

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.
   

How to create a Bootstrap WordPress Theme - Step 5