Hi in the last article we had seen how to dynamic logo and widget. Now in this article we will start slider section and other step by step

So, First we have to install Smart Slider Plugin for sliding section.

Once Install and Active Go to the Plugin Dashboard

Now Start with a Template

Import ready Slider as per your requirement. Once import successfully we will get Shortcode like below

Now copy the shortcode and replace with your static slider code like below.

## sliedr code ##

<section class="section background-dark">
        <div class="line">
          <div class="carousel-fade-transition owl-carousel carousel-main carousel-nav-white carousel-wide-arrows">
            <div class="item">
              <div class="s-12 center">
                <img src="img/01-boxed.jpg" alt="">
                <div class="carousel-content">
                  <div class="padding-2x">
                    <div class="s-12 m-12 l-8">
                      <p class="text-white text-s-size-20 text-m-size-40 text-l-size-60 margin-bottom-40 text-thin text-line-height-1">Prospera is the New Amazing HTML5 Template</p>
                      <p class="text-white text-size-16 margin-bottom-40">1 autem vel eum iriure dolor in hendrerit in vulputate velit<br> esse molestie consequat, vel illum dolore eu feugiat nulla facilisis</p>  
                    </div>                  
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="s-12 center">
                <img src="img/02-boxed.jpg" alt="">
                <div class="carousel-content">
                  <div class="padding-2x">
                    <div class="s-12 m-12 l-8">
                      <p class="text-white text-s-size-20 text-m-size-40 text-l-size-60 margin-bottom-40 text-thin text-line-height-1">With Fully Responsive Components</p>
                      <p class="text-white text-size-16 margin-bottom-30">2 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis</p>    
                    </div>                  
                  </div>
                </div>
              </div>
            </div>
          </div>  
        </div>
      </section>

<section class="section background-dark">
        <div class="line">
        <?php echo do_shortcode('[smartslider3 slider="3"]');?>
        </div>
 </section>

Now Your Website Slider is ready Congratulations..

Now we will start coding for dynamic post. So we have to write some post.

Go to the Posts section and Add the new post

       <?php 
                 $blog_args = array(
                   'post_type'=>'post',
                   'posts_per_page'=>4
                 );
                 $blog_posts = new WP_Query($blog_args);
                 while($blog_posts->have_posts()){
                $blog_posts->the_post();                 
         ?>

Paste the mention code in blog section from the fast div where started

 <div class="s-12 m-12 l-6">
                  <div class="image-border-radius margin-m-bottom">
                    <div class="margin">
                      <div class="s-12 m-12 l-4 margin-m-bottom">
                        <a class="image-hover-zoom" href="/"><img src="img/blog-05.jpg" alt=""></a>
                      </div>
                      <div class="s-12 m-12 l-8 margin-m-bottom">
                        <h3><a class="text-dark text-primary-hover" href="/">Lorem Ipsum Dolor sit Amet</a></h3>
                        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
                        <a class="text-more-info text-primary-hover" href="/">Read more</a>
                      </div>
                    </div>  
                  </div>
                </div>

Replace with this code like below

<div class="margin"> 
                <?php 
                 $blog_args = array(
                   'post_type'=>'post',
                   'posts_per_page'=>4
                 );
                 $blog_posts = new WP_Query($blog_args);
                 while($blog_posts->have_posts()){
                $blog_posts->the_post();                 
                ?>
                <div class="s-12 m-12 l-6">
                  <div class="image-border-radius margin-m-bottom">
                    <div class="margin">
                      <div class="s-12 m-12 l-4 margin-m-bottom">
                        <a class="image-hover-zoom" href="<?php the_permalink() ?>"><img src="<?php the_post_thumbnail()?></a>
                      </div>
                      <div class="s-12 m-12 l-8 margin-m-bottom">
                        <h3><a class="text-dark text-primary-hover" href="<?php the_permalink() ?>"><?php the_title() ?></a></h3>
                        <p><?php the_excerpt() ?></p>
                        <a class="text-more-info text-primary-hover" href="<?php the_permalink() ?>">Read more</a>
                      </div>
                    </div>  
                  </div>
                </div>
                <?php }?>
</div>

Dynamic Thumbnail  
<?php the_post_thumbnail()?>

Dynamic Title
<?php the_title() ?>

Dynamic Post link
<?php the_permalink() ?>

Now you can see your blog post is completely dynamic.

Thanks for reading ….. Next Part will be published