Creating custom Sidebar Multiple Widgets -Part2

Previous Tutorial -> http://1wmedia.blogspot.in/2016/04/creating-custom-sidebar-widgets-part1.html


In this tutorial, we will see how to create multiple widgets, with register_sidebar function with our custom function.

1. Open your functions.php,  remove the old register_bar function code, Add the following one, Instead of old one. Then save the file.

<?php
function sidebar_widgets( $widget_name, $widget_id, $widget_description){
register_sidebar(array(
        'name' => __($widget_name),   
        'id' => $widget_id,
        'description' => __( $widget_description ),
        'before_widget' => '<div class="widget">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));

}

sidebar_widgets("Page Sidebar", "right-sidebar", "Sidebar Widgets");
sidebar_widgets( "First Sidebar", "first-sidebar", "This is first sidebar");
sidebar_widgets( "Second Sidebar", "second-sidebar", "This is Second sidebar");


?>


2. Here our custom function name is "sidebar_widgets". In this function, we are creating three variables namely,  $widget_name, $widget_id, $widget_description.

3. We will pass these variables  into register_sidebar function. For example,

'name' => __($widget_name),  

Refere point no 1.

Same for other two.  But we didn't create variables for 'before_widget' and others..

4.  After this we have called the function to create widgets with our custom names, ids, descriptions.

For example,

sidebar_widgets("Page Sidebar", "right-sidebar", "Sidebar Widgets");

The above code creates the sidebar with the name  "Page Sidebar"

if you call  the sidebar_widgets function with different name,id and description , then it will create another sidebar.  Here we have created 3 sidebars .  Refer point no 1.

5. Now view widgets in dashboard -> You will see 3 widget sidebar.

7. Add some widgets to all 3 sidebars 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('right-sidebar')); ?></p>
 <p><?php if( dynamic_sidebar('first-sidebar')); ?></p>
 <p><?php if( dynamic_sidebar('second-sidebar')); ?></p>



11. Here "right-sidebar" is an id for "Page Sidebar" , we have created earlier in register_sidebar function (point no 1). remaining are same.

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

13. You can see the sidebars with multiple sidebar.

 14. Here, we are doing one more step to separate the sidebar files.

15. Create sidebar.php in your themes folder and save it.

16. Now go to page-sidebar.php file, cut the following code and paste it into the sidebar.php file.

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

 <p><?php if( dynamic_sidebar('right-sidebar')); ?></p>
 <p><?php if( dynamic_sidebar('first-sidebar')); ?></p>
 <p><?php if( dynamic_sidebar('second-sidebar')); ?></p>
 </div>


17. Now add the following code into the page-sidebar.php file, instead of the above code .

<?php get_sidebar();?>

18. Save both files. That's all. Now you sidebars work from sidebar.php file. If you done anything at sidebar.php file, then it will reflect at your page-sidebar template.

Refer the 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 :