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:

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:

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.

1. Open your front-page.php file and remove the unwanted <hr> tags. 
2. Add if statement for count which is the post count less than or equal to 5.
   
   <?php if ($count <= 5) : ?>
   
3. close the if statement before the endwhile.
4. Save the file. Now view the site. You will see only 5 posts in the post area.
5. For Post Thumbnail, Go to Post Edit and add thumbnail. For thumbnail size, Please view the previous tutorial.

Here is the modified code:

   <!-- START THE FEATURETTES -->


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

      <!-- /END THE FEATURETTES -->


Video Tutorial:

 

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   

<!-- START THE FEATURETTES -->
 <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">

        

      <!-- /END THE FEATURETTES -->

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.

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.

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:

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 :