Tech Tutorial and News: 2016

Thursday 22 December 2016

SEO Tricks and Tips

SEO (Search Engine Optimization) - We know what is SEO, but how to make our website SEO friendly? Here are some tips.

Keywords - Most of us thinking like this - If we give more keywords inside the <head> tag (meta keywords), then our site will display on top of the search engine results. But most of the search engine's are not working like this. Google stopped this meta keywords technique on 2009. For more information, Please click here .

You may ask - where can I give my keywords?

Please note that your content is powerful than other SEO techniques. But you can focus your keywords here.

Inside your title tag.
Meta description.
h1,h2,h3,h4,h5,h6 tags.
Wonderful Content

1. Inside your title tag:
    Length of your title should be less than 60 characters. Title should be related to your content.

2. Meta description:
    Most search engines prefer an meta descriptions between 80 and 150 characters. Description should be related to your content of the page.

3. h1,h2,h3,h4,h5,h6 tags :
   When creating title heading and sub headings of your page, use the H tags. This is one of the powerful keyword tags.

4. Wonderful Content :
   Contents are playing main role in SEO. So concentrate on your contents. Fresh and useful contents always visible first - on search engine results.

Tips:

+ Create OG ( Open Graph) for your webpages and insert them.
+ Create Twitter card and other social media links and embed them into your webpage.
+ Create Google map and link your website into the map.
+ Always use tags and meta description for your pages.
+ Title of your post and page will do SEO. So please create titles using title suggestion tools.

SEO Analyzing websites or tools

SEO Analyze:

http://www.seocentro.com/tools/seo/seo-analyzer.html
http://seositecheckup.com/

Keyword Analyze:

http://keywordtool.io/

Thursday 15 September 2016

WordPress Tutorial - How to add text settings - Option Tree

In this lesson, We will see how to add simple text setting for your custom theme using Option Tree plugin.

If you didn't view my previous tutorial -> Please click here.

1. It is very similar to my previous tutorial.
2. Instead h2 title, we will add the following code.

<h2><?php echo ot_get_option( 'featured_heading_1', 'Heading Title 1' ); ?></h2>

3. So please go to Dashboard -> Option Tree -> click -> add setting
4. Give label name and id name
5. Type -> You can choose any one of the following -> Text Area, Text, Text Area Simple
6. Add the following code where you need to display your text.

<?php echo ot_get_option( 'ID', 'Default TEXT' ); ?>

7. Instead of ID, You should give your own ID name created at steps 3,4
8. Default TEXT will display if you didn't give any text at Theme Options

Video Tutorial:

Thursday 8 September 2016

WordPress Tutorial - How to add image settings - Option Tree

In this lesson, We will see how to add simple setting for your theme using Option Tree plugin.

If you didn't view my previous tutorial (How to install Option tree plugin) -> Please click here.

1. Go to Dashboard.
2. Click Option Tree -> Settings -> Click add setting button -> Type your settings.
3. Label -> Featured Image 1 (You can add whatever the name you want).
4. ID -> fi1 (You can add whatever the name you want).
5. Type -> Upload.
6. Go down and click save.
7. Now open Appearance -> Theme Options -> Your settings for Featured Image 1 will display here.
8. Now open your front-page.php file. (I have set my front-page is home page, if your index.php is your home page, please open it).

9. Find the three columns round image option. I mean the following code from your front-page.php.

<img class="img-circle" src=" data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw== " alt="Generic placeholder image" width="140" height="140">

Or where ever you want to add image setting.

Add the following code inside the src=""

<?php echo ot_get_option( $option_id, $default ); ?>

Here "$option_id" will display your changed image. So add your id here. For example "fi1". Refer 4th point.

"$default" is your default image (value). If you didn't add any image at your theme options page this default image will display here. So give your default image link here.

After implementing this setting image tag will display something like this.

<img class="img-circle" src="
          <?php echo ot_get_option( 'fi1', 'data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==' ); ?>
          " alt="Generic placeholder image" width="140" height="140">

10. Now go to your Appearance -> Theme Options -> Featured Image 1 -> Click + sign and upload image or add image from your media library -> Click Send Option Tree button -> Click save option.

11. Your custom image will display at front end.

Please view the Video Tutorial:

Saturday 30 July 2016

WordPress Tutorial - How to install Option Tree plugin fo your theme?

In this tutorial, We will see how to install Option Tree plugin for our theme.

If you are creating custom theme, Option Tree Plugin is very useful to create Theme Options. Here we are going to install plugin for theme mode. This is not normal install like other plugin installation.

We will do this from themes folder. Here are the steps,

1. Click the following url and download the plugin.

https://wordpress.org/plugins/option-tree/

2. Now extract the downloaded plugin. Now you will get a folder named "option-tree"

3. Copy the folder and paste it into your theme folder,

The location will be like this

/wp-content/themes/theme-name/option-tree/

4. Now copy the following code and paste it into the functions.php file (inside the php tag) and save the file.

/**
 * Required: set 'ot_theme_mode' filter to true.
 */
add_filter( 'ot_theme_mode', '__return_true' );

/**
 * Required: include OptionTree.
 */
require( trailingslashit( get_template_directory() ) . 'option-tree/ot-loader.php' );

5. Now refresh your WordPress Dashboard. You will see theme options button under the Appearance tab.

6. Also you will see Option Tree panel to create custom option.

7. That's all. You are installed Option Tree, and ready to create Theme options for your theme.

Here is the video tutorial:

Thursday 30 June 2016

WordPress Tutorial - Listing Blog Posts in Different Style with blog count

Previous Video: https://youtu.be/x3HVk2PuUSA
Previous Text: http://1wmedia.blogspot.in/2016/06/listing-blog-posts-in-different-style.html

In this tutorial, We will correct the previous bugs in the code and displaying limited post lists, I mean 5 or 7 latest posts. Please view the previous tutorial before reading this tutorial.

Open your front-page.php file and remove the unwanted <hr> tags.
Add if statement for count which is the post count less than or equal to 5.

<?php if ($count <= 5) : ?>
close the if statement before the endwhile.
Save the file. Now view the site. You will see only 5 posts in the post area.
For Post Thumbnail, Go to Post Edit and add thumbnail. For thumbnail size, Please view the previous tutorial.

Here is the modified code:

   

<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count <= 7) : ?>
<?php if ($count % 2 == 0) : ?>

      <div class="row featurette">
        <div class="col-md-7">
          <h2 class="featurette-heading"><?php the_title(); ?></span></h2>
          <p class="lead"><?php the_content(); ?></p>
        </div>
        <div class="col-md-5">
           <?php the_post_thumbnail('', array('class' => 'featurette-image img-responsive center-block')); ?>
        </div>
      </div>

      <?php else : ?>

      <hr class="featurette-divider">

      <div class="row featurette">
        <div class="col-md-7 col-md-push-5">
          <h2 class="featurette-heading"><?php the_title(); ?></span></h2>
          <p class="lead"><?php the_content(); ?></p>
        </div>
        <div class="col-md-5 col-md-pull-7">

           <?php the_post_thumbnail('', array('class' => 'featurette-image img-responsive center-block')); ?>

        </div>
      </div>


      <hr class="featurette-divider">
      <?php endif; ?>
      <?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>

      

Video Tutorial:

Tuesday 28 June 2016

WordPress Tutorial - Listing Blog Posts in Different Style

In this tutorial, We will see how to add blog posts in different design, Here, We will do this from front-page.php. Now this is our Home page.

1. Change the Settings to “Your latest posts” from Dashboard -> Settings -> Readings -> Front Page Displays

2. Now add the following codes to your functions.php file to add the Featured thumbnail option and thumbnail size setting.

add_theme_support( 'post-thumbnails' );

set_post_thumbnail_size( 500, 500, true );

3. Now open your front-page.php file. Now we will convert the “FEATURETTES” section into blog posts. Here notice that posts are listed in alternate style.

4. So we need to give two styles. First post one style, second post another style, then it continues..

5. ADD or replace the Following code into front-page.php “FEATURETTES” Section

<hr class="featurette-divider">

<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count % 2 == 0) : ?>

      <div class="row featurette">
        <div class="col-md-7">
          <h2 class="featurette-heading"><?php the_title(); ?></span></h2>
          <p class="lead"><?php the_content(); ?></p>
        </div>
        <div class="col-md-5">


          <?php the_post_thumbnail('', array('class' => 'featurette-image img-responsive center-block')); ?>
        </div>
      </div>

      <?php else : ?>

      <hr class="featurette-divider">

      <div class="row featurette">
        <div class="col-md-7 col-md-push-5">
          <h2 class="featurette-heading"><?php the_title(); ?></span></h2>
          <p class="lead"><?php the_content(); ?></p>
        </div>
        <div class="col-md-5 col-md-pull-7">
           <?php the_post_thumbnail('', array('class' => 'featurette-image img-responsive center-block')); ?>
        </div>
      </div>
      <?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>

      <hr class="featurette-divider">

6. Click save and view the site.

7. It will show different styles of the blog post listing

The code has some error, In the next lesson, I will give corrected code.

Wednesday 22 June 2016

How to increase web traffic to your website or blog - Effective ways

There are lots of ways are available to increase web traffic. But here, I'm only focusing on the effective ways which is tested by me.

Two kinds of Traffics:

1. Active Web Traffic.

Meaning - The admin or you (Who maintaining the blog or site) involved directly to increase the web traffic. For example, writing blog posts with effective and useful content by yourself. Making traffic by posting your url into Social networks.

2. Passive Web Traffic.

Meaning - Someone will help you to increase your web traffic.It may be your SEO agency or software, A friend sharing your posts on social media.

How to increase Active Web Traffic?

The best way to increase active web traffic is " The admin or you (Who maintaining the blog or site)" should be active. The admin should do the following:

Posting regularly on blogs or websites. Because new posting is very effective way to increase the traffic.
Topics should be more interesting and should be new.
Create viral topics and write about them.
Create social media accounts, don't forget to post your post urls.
If you are maintaining your site, then focus on your keywords.
Create interlinks (Give urls links to words that also pointing other topic of your site.)
Always try to answer the comments.
Focus on new topics.
Find the topics which one create more traffic, then write about them. For example, Business, Entertainment, Music...
Don't forget to give tags, or keywords for your post.
Before writing do some research on Google. Search some keywords related to your post which is based on SEO and use them on your post.
Write some review posts related your blog. It will definitely increase the traffic.
Use some wonderful pictures to your post.
Participate on guest blogging and publish your blog url
Collect email from the visitors and send the new post links to them via email
Concentrate on Loading time of your website.

How to increase Passive Web Traffic?

Comparing with Active traffic method, Passive Web Traffic is effective and have lots of ideas. Do the following for Passive Web Traffic.

Google Adwords (Advertise your website on Adwords). This increases display on search results.
Facebook Ads. (Advertise your website on Facebook). This increases your target customers or visitor more specific on age, country..etc.
Hire an SEO agency or Freelancer, modify or develop your site as per new SEO standards.
Content is more important for long term SEO. So hire some professional writers, bloggers, learn from them or get new articles from them post it on your blog. " http://www.ehow.com/ " is an example site which is not their own writings. They are hiring professional writers and get articles from them for their site.
Tell your friends to share your posts on their social media.
Introduce Popular people on your site, and tell the popular guy to like your post and share it to their website, social media.
Create Youtube Channel, put your videos with your website url on videos and description of the video.
Take interview with popular people (influencing people on society or your field) and publish it on your site/blog. It will increase search results on google when people search for the popular guy.
Put some interesting polling campaign or survey through your site and publish to social media.
Use some Email marketing software's that automatically send your new post links.
Create your community or Fan club who likes your posts.
Advertise on TV (This is depending upon you. It needs lots of money. Try a local channel first, then move to big channels).
Go to big conferences and meetings with your friends, and advertise your site through banner or posters.
Give newspaper ad, It is also more effective.
Always keep a statistic software on your site and keep watch it, who are visiting your site, I mean the country of the visitor, age, which topic they are willing to read..etc
Add share buttons to your blog posts, So visitors can easily share your posts to their social pages.
Add members or followers to your blog / site for FREE of cost.
Advertise your website on popular websites like news magazine site.
Create a Forum on your site.
Submit your url on all search engines like Google, Yahoo, Baidu..etc

Tuesday 14 June 2016

WordPress Tutorial - Create WordPress sites with Page Builder - Part3

Please view the Previous Video: https://youtu.be/CZ-W3_3QHpg

WordPress Sites Using Page Builder : Building pages with contents using page builder free plugin. (This is also an option who don't want to use premium page builder plugins like Visual Composer)

In this Tutorial:

1. How to create icons and Site Origin Plugin feature boxes.
2. How to adjust rows in page builder.

Monday 13 June 2016

WordPress Tutorial - Create WordPress sites with Page Builder - Part2

Previous Tutorial: https://youtu.be/IibhZfqG2xo

WordPress Sites Using Page Builder : Building pages with contents using page builder free plugin. (This is also an option who don't want to use premium page builder plugins like Visual Composer)

1. Create Images with feature content
2. Post Image Carousel

Thursday 9 June 2016

WordPress Tutorial - Create WordPress sites with Page Builder - Part1

In this lesson, we will see how to create WordPress pages with free page builder plugins

Plugins link:

1. https://wordpress.org/plugins/siteorigin-panels/
2. https://wordpress.org/plugins/so-widgets-bundle/

After installing this two plugins, watch the following video.

Tuesday 7 June 2016

WordPress Tutorial - Bootstrap shortcode buttons, features

Tuesday 17 May 2016

Creating Bootstrap shortcode pages

Previous Tutorial: http://1wmedia.blogspot.in/2016/05/creating-single-post-template-singlephp.html

In this tutorial : How to create custom bootstrap shortcode pages by using a plugin.

Plugin link to download and install: https://wordpress.org/plugins/bootstrap-shortcodes/

All other instructions are available in the following video:

Tuesday 10 May 2016

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

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

      <hr class="featurette-divider">

     <?php get_footer(); ?>

Video :

Friday 6 May 2016

Customizing or styling blog page on WordPress

Previous Tutorial : http://1wmedia.blogspot.in/2016/05/creating-default-blog-page-homephp-and.html

In this lesson, we will learn how to style default Blog page in WordPress. Please view my previous tutorials for creating blog page.

1. First go to you theme folder, open home.php file.
2. Here you can modify your blog page.
3. In our tutorial, Just remove the codes (fully) and add the following code. or you can refer the video for particular edits.

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

         <h1 align="center"><?php wp_title(''); ?></h1>

      <?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_excerpt(); ?></p>
                            <p><a href="<?php the_permalink(); ?>">Read More...</a> <hr /></p>




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

</div>

      </div>

      <hr class="featurette-divider">

     <?php get_footer(); ?>

4. Save the home.php with new code or edited codes.

5. In this tutorial we have added/modified the following:

For Page or BLOG title:

<h1 align="center"><?php wp_title(''); ?></h1>

Giving link to the single post (But single post not work now. But link will work. We will add single.php file later for single post view):

<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </h1>

Display Author Name:

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

Change the_content(); function into the_excerpt(); and added Read more text by following code:

<p><?php the_excerpt(); ?></p>
                            <p><a href="<?php the_permalink(); ?>">Read More...</a> <hr /></p>

One closing div changed (refer video).

Video Tutorial of this post:

Wednesday 4 May 2016

Creating default blog page (home.php) and front-page.php

Previous tutorial : http://1wmedia.blogspot.in/2016/04/creating-custom-sidebar-multiple.html

In this tutorial, We will see how to create default blog page which is home.php and front-page.php for custom front page.

1. If you are following my previous tutorials, you may be created themes folder and all other files. If not, please view the previous tutorials.

2. In the theme folder, duplicate the page.php and save as home.php . This home.php file is your default blog page. Don't misspell this. Then it won't work.

3. Now it will take your default home page into blog page. If home.php not available, your front page will be your index.php.

4. So we need to create another file for front-page. So duplicate index.php and save as front-page.php.

5. This will automatically take your front page.

6. If you change some settings in Settings -> Reading , in Dashboard , then your front page will not work.

7. So create two new pages from Pages and add it to menus.

8. Now go to Settings -> Reading again . Choose your front page and blog page. and save it.

9. Refer the following link for WordPress Hierarchy -> https://wphierarchy.com/

Refer this video :

Tuesday 26 April 2016

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:

Monday 25 April 2016

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:

Tuesday 12 April 2016

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

    
    <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">

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

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

Friday 1 April 2016

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

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

Friday 25 March 2016

25 Benefits / Features of WordPress

WordPress is one of the best CMS (Content Management System) framework in the world. 25% of websites are now powered by WordPress. Now we will see the benefits / features of WordPress.

1. WordPress is very simple and user friendly.
2. Most of the server companies allowing WordPress single click installation.
3. Thousands of themes and plugins are available in the market for WordPress.
4. It has big community support.
5. WordPress (framework) is 100% open source. But not all themes, plugins and working charges.
6. You can develop your site easily in the server or live. You need not to develop separately on local server.
7. Backup is easy process(Importing and exporting pages and posts).
8. It supports multiple languages.
9. Multisite is very easy to configure. Need not use many WordPress installation for every site. Single WordPress installation is enough for many sites. Example: wordpress.com
10. You can handle images, videos, attachments easily.
11. Configuring content or formatting text is easy.
12. You can control your site at anywhere.
13. Password protection for posts.
14. Sticky posts.
15. You can save drafts, need not to publish after finishing the post. You can publish whenever you want.
16. Drag and Drop administration for menus.
17. Widget based control for sidebars.
18. SEO is very easy in WordPress.
19. You can create own templates if you need.
20. You can create unlimited pages and posts.
21. Many themes are mobile friendly and responsive. You need not to create separate mobile site for your website.
22. WordPress saves your time. Developing a site is very easy comparing with other frameworks.
23. WordPress gives you updates for new version.
24. You need not a programmer, after the site development. You can maintain by yourself at anywhere and anytime.
25. You can get all updated codes and explanations from codex.

Thursday 24 March 2016

How to create a Bootstrap WordPress Theme dynamic submenu - Step 7

In this tutorial, we will learn how to add sub menu. Previous tutorial -> http://1wmedia.blogspot.in/2016/03/how-to-create-bootstrap-wordpress-theme_15.html

1. First click the following link and get all the code you want -> https://gist.github.com/setola/3765640

2. Add the functions.php code from Extended Walker and add it to your functions.php file and save it.

3. open your header.php.

4. Add depth value and call wp nav walker inside the $args array. (please refer the video)

'depth' => 0,
'walker' => new BootstrapNavMenuWalker()

and hit save.

5. Now open the style.css and add the following code and save the file.

/* dropdown */
.dropdown-menu {
    margin: 0px auto;
}
.dropdown-menu .dropdown-menu {
    left: 100%;
    top: 0px;
}
/* shows the dropdown on hover*/
.navbar ul.nav li:hover > ul.dropdown-menu {
    display: block;
}
/* before and after */
.navbar .nav > li > .dropdown-menu::before, .navbar .nav > li > .dropdown-menu::after {
    display: none;
}

6. Now get the Javascript code (open-on-mouseover.js ) from this link -> https://gist.github.com/setola/3765640

7. Create a Javascript file with name(for example extra_js.js) , Put the code and save it inside the js folder in the themes folder.

8. Now call or enqueue the Js file with following code at functions.php .It should ne inside the function newsite_js() (Please refer the video)

wp_enqueue_script( 'extra_js', get_template_directory_uri() . '/js/extra_js.js', array('jquery'), 'booostrap.min.js', '' );

9. Now move to appearance -> menus on the Dashboard -> Add submenus -> Now all submenus will work properly.

10. That's all.

Video Tutorial:

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.

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.

Monday 14 March 2016

How to create a Bootstrap WordPress Theme - Step 5

How to use ATM safely?

We are using ATM's for taking money and online transaction. You should follow some instructions to avoid robbery and attacking.

Do not change your ATM to take money. Always use the same ATM. Change the ATM only necessary or important reason. If you use the same ATM, you can easily find the changes inside and outside the ATM.
Use the ATM's at bank. It avoids unwanted criminal attacks. Avoid street ATM's if it seems unsafe.
Do not use the ATM's without security guard and suspicious looking.
Watch inside the ATM, if it has or if you found any extra or unwanted camera's, card or cash trapping devices, do not put your card inside the ATM machine. Just get away from there.
Do not ask help to anyone to take money or Do not allow unauthorized people to take money.
If you lost your card, inform immediately to your bank and lock the card. You can do this from your bank website.
If your card locked at ATM machine, inform your bank before leaving the ATM machine.
Do not believe the rumors like " If you enter your pin number reverse, then it will summon police" Click read more about this
Do not share your PIN number to anyone. And do not store your PIN number at mobile phone.
If someone attaching you in the ATM, understand the situation carefully and try to fool the attacker. Do not do any unwanted action. If you lose your money, you can earn it. But if you lose your life, you could not get it back.

Saturday 12 March 2016

How to save / protect my bank account from hackers?

If you are using net-banking or some other online transactions with your bank account, you should be very careful about hackers. Here are some tips to avoid hackers and their attacking activities.

Protection from your devices:

It should start from your Personal computer, Laptop, Mobile Phones, Tablets and other hand devices.
Keep your devices clean with Anti Virus software.
Keep the devices with strong password. Do not share the passwords anyone.
Your Operating System (OS) should be updated always.
Do not install unwanted and unauthorized Software's and Apps into your mobile/computer or devices. Some of them may be Spywares, So they (hacker) can easily take your details from your devices.
Use authorized bio metric applications to devices like finger print controlling, voice controlling etc.
Always turn on Firewall into your system.
Keep the browser and bank Application software's updated
Do not open or operate your banking software's at public places and public network (Free Wifi).
Change your device passwords often, at-least every two weeks.
Keep your devices away from children.
If you are going to sell or exchanging your devices like mobile, laptop, You should delete / format your confidential details on the devices.
Always delete your cookies / histories on your browser.

Protect your Email:

Do not share your email passwords to anyone.
Enable some features like two step verification. When Sign in, you will receive a pin number to your mobile. You need both password and pin number to login. For more.
Do not respond SPAM mails.
Be aware of lottery frauds. Never respond them. They will send something like this, "You won $10000000/-. Please give your details to credit the amount into your account. We need the following details...etc."
Always give your email address to the authorized person, company, websites. Because someone will take your email and use it for unwanted jobs (They will sell your email id for business promoting or marketing companies).
Be aware of your email settings like, Filtered and Blocked addresses, Forwarding and POP/IMAP. Because If someone hacked your password or email, first they will try to change your settings of email and block your important receiving mails and forward it to their email id.
If you receiving any mails from bank with new offers, please contact your bank directly. Someone will send mail like this and try to get your details. If you click the link, sometimes it will go to fake site, exactly looking like your bank site . So be alert and check your bank url is correct.

Protection from bank:

Check / Watch your bank account transactions often.
Do not give your credit / debit card details to anyone.
When online purchasing, be sure the website should be an authorized website like Amazon.
Do not enter your credit card details on all websites.
Do not store your ATM pin, CARD details, Password's on your mobile phones.
If any new offer comes from bank, go to your bank, confirm it directly or confirm by phone.
If your bank says to use this browser / app / software, then use the particular browser / app / software.
Touch with your bank. Do not believe rumors, unwanted news, phone calls.
If someone call you and say "I am the Manager from your bank, I need to confirm your details, so please give your PIN number, password etc" . Do not respond this person. Banks or Managers will never call and ask like this.
Keep safe your digital signatures.
Please avoid online transactions on public browsing centers or others devices ( may be your friend device)