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

How to create a Bootstrap WordPress Theme? - step 4

If you didn't read the third step, then click here. Ok. Now we will move to the third step.

1. In this step, first create the Js files for the theme from the demo.

• bootstrap.min.js  -> Source -> view-source:http://getbootstrap.com/dist/js/bootstrap.min.js
• holder.min.js  ->Source -> view-source:http://getbootstrap.com/assets/js/vendor/holder.min.js
• ie10-viewport-bug-workaround.js -> Source -> view-source:http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js
• ie-emulation-modes-warning.js -> Source -> view-source:http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js

Save the file at js folder which is available at your themes folder. or create the new one and save them with source code

2. Remaining Js files - Direct linking url -> you need not to save this -> we will do this at functions.php

3. Add the following code into functions.php file, Just before the " ?> " .I mean before the PHP closing tag.

function newsite_js() {

    global $wp_scripts;

    wp_register_script( 'html5_shiv', 'https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js', '', '', false );
    wp_register_script( 'respond_js', 'https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js', '', '', false );

    $wp_scripts->add_data( 'html5_shiv', 'conditional', 'lt IE 9' );
    $wp_scripts->add_data( 'respond_js', 'conditional', 'lt IE 9' );
   
    wp_enqueue_script( 'IE_emeulationmode_js', get_template_directory_uri() . '/js/ie-emulation-modes-warning.js', array('jquery'), '', false );
   
    wp_enqueue_script( 'Google_ajax_js', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', '', '', true );
   
    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true );
   
   
    wp_enqueue_script( 'holder_js', get_template_directory_uri() . '/js/holder.min.js', array('jquery'), '', true );
    wp_enqueue_script( 'IE10_js', get_template_directory_uri() . '/js/ie10-viewport-bug-workaround.js', array('jquery'), '', true );

}
add_action( 'wp_enqueue_scripts', 'newsite_js' );

4. Now save the functions.php file

5. Download the Bootstrap from the following link.

http://getbootstrap.com/getting-started/#download

6. Extract the Bootstrap file, find "fonts" folder. Copy the "fonts" folder and paste into the theme folder.

7. Now our scripts are activated.

8. You can verify - By your slider moving and menu working.

Video Tutorial:

How to create a Bootstrap WordPress Theme? - step 3

If you didn't read the second step, then click here. Ok. Now we will move to the third step.

1. Create two new folders at your themes folder namely css,js.

2. In css folder, create css files namely bootstrap.min.css and ie10-viewport-bug-workaround.css.

3. Click the following link," view-source:http://getbootstrap.com/dist/css/bootstrap.min.css " copy and paste the code at bootstrap.min.css

4. Click the following link, "view-source:http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css " copy and paste the code at ie10-viewport-bug-workaround.css file.  Save both files.

5. Now click and open js folder. Create js file named ie-emulation-modes-warning.js

6. Click the following link, "view-source:http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js " copy and paste the code into ie-emulation-modes-warning.js, Save the file.

7. Now add the following code at header.php file just before the "</head>" tag

<?php wp_head(); ?> .  Save header.php file.

8. Then open the footer.php file, add the following code just before the "</body>" tag

<?php wp_footer(); ?> . Save footer.php file.

9. Create a new file at your theme folder, named functions.php. then add the following code into the file, Save it.

<?php

function newsite_styles() {

wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'Ie_css', get_template_directory_uri() . '/css/ie10-viewport-bug-workaround.css' );


}
add_action( 'wp_enqueue_scripts', 'newsite_styles' );

?>


10. Open the style.css file and add the following code.

view-source:http://getbootstrap.com/examples/carousel/carousel.css

Do not delete the above comment line on the style.css. Add the code below the comment line. And save it.

11. Now view the site. Some styles are added. But we have added styles and scripts for header only. We will do footer styles and scripts in next lesson.


Video tutorial:

How to secure WordPress websites?

No one like their website is hacked by someone else. Securing a WordPress website is not an easy job. In this article we will see how to secure our WordPress website and what are steps we need to take if our website is hacked.

What types of WordPress websites / activities - will hacked easily?

1. If you have lots of vulnerabilities available on your site, then your website is 90 to 100% chance to hack
2. Poor password like your pet name, phone numbers, easily guessing passwords (car number, lucky number)
3. If you didn't have HTTPS on your website URL.
4. robots.txt file enabled on your site
5. Uploading your files without scanning by Virus scanner
6. Sharing passwords to others without proper guidance
7. Using same password for long time
8. Installing FREE and unauthorized plugins, themes
9. Forget to changing passwords often.
10. Forget to changing passwords after the development (cpanel, wp-admin)
11. Forget to update security patches on theme, plugin, WordPress.
12. Social Engineering -> Some of them will talk with you at social media or somewhere else, And getting your password from your speech. 
13. Poor Web hosting, and not updating hosting security patches
14. Showing your domain details.(whois.com, you can find domain details, So hide or secure them when registering domain)
15. Bad encryption system at your database password
16. Using WordPress files in the same folder, You can separate them some other sub folder.
17. Giving full access permission to all files
18. WP_DEBUG is enable after the development
19. Allowing spam comments on your post and page.
20. Disabling firewall
21. Accessing your WordPress admin at FREE wifi network, or some poor networking system
22. Giving direct wp-admin link. You can use  or set alternate link instead of wp-admin.
23. Themes and plugins which is developed security not in mind.

How to avoid and secure your WordPress website:

1.  Always place your files at good hosting companies
2.  Keep one copy of your site files on your hardisk
3.  Install this plugin "Wordfence Security". It helps to protect your WordPress site.
   Link: https://wordpress.org/plugins/wordfence/
4. Limit access control - wp-admin
5. Do not use untrusted plugins and themes
6. Use hard or complex passwords. Change it every month or two weeks
7. Be clean your computer with virus scanner. Scan whenever you need.
8. Don't compromise to update WordPress, themes, plugins.
9. If find any bugs, please report it here .
10.  Find your webserver and network vulnerabilities, try to resolve them as soon as possible.
11. Use SFTP to send files.
12. Give proper file permissions. Don't compromise with permissions
13.  Change your default admin URL.
14.  Put your WordPress files on separate folder.
15. Disable file editing with the following code.
    

    define('DISALLOW_FILE_EDIT', true);

16. Use some good firewall plugins like iThemes Security, All in One WP Security, WordFence, Sheild 
17. Do not allow any unauthorized access to your Cpanel, FTP, wp-admin, Database.
18. Do not access your Cpanel/Admin at different computers, public places, browsing center. 
19. Disable debug code at wp-config (set as false)
20.  Monitor your website through security plugins
21. Learn about social engineering, it helps you how they are getting passwords from you.
22. Care  PHP and WordPress version. If there any updates and conflicts, do it properly.
23. Learn something about hackers, intruders, crackers.

How to create a Bootstrap WordPress Theme? - Step 2

Before reading this tutorial, Please view the step -1 or view the video tutorial : https://www.youtube.com/watch?v=RdokBuEG8Y4

Ok. We will move the second step now.

1. Create another two files in theme folder : header.php and footer.php

2. Now view the following source code, copy and paste it into the index.php file  and save index.php: view-source:http://getbootstrap.com/examples/carousel/

3. From   index.php , cut the code from  "<!DOCTYPE html>" to -  before this comment line

<!-- Carousel
    ================================================== -->
 

Paste the code into header.php file and save header.php file.

4. Please add the following code at top of the index.php file to call the header.php file

     <?php get_header(); ?>   and save the index.php.


5. Finally, cut the footer content from index.php file which starts from " <!-- FOOTER -->" to "</html>" . and add or paste the code to footer.php. Save footer.php

6.  Please add the following code at bottom of the index.php file to call the footer.php file

     <?php get_footer(); ?>   and save the index.php.

7. Now view the site. Your contents will added without styling.

View the following video for this text tutorial.