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

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


    <!-- 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">
     
         <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><!-- /.row -->

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

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 :