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




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

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

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