WordPress homepage with differentiated structure

1

I am converting a template to HTML made with Bootstrap that will be used only on the Home for the WordPress format and would like to include slideshow .

For the sake of study, I come here to ask you for help so that you can apply the elements of WordPress so that it only has effect on Home :

The code:

<?php

/**
 * @link http://amzweb.com.br/
 * @package Arcanjo
 * @subpackage Template_Arcanjo
 * @since Arcanjo Template 1.0
 */



get_header(); ?>



<!-- SLIDER AREA end -->



<!-- BODY CONTENT starts here -->



<!-- PANEL 1 -->

<div class="container pm-containerPadding-top-80 pm-containerPadding-bottom-40">

<div class="row">
<!-- SLIDER AREA -->
<div class="pm-pulse-container" id="pm-pulse-container">
<div id="pm-pulse-loader">
<img src="js/pulse/img/ajax-loader.gif" alt="slider loading" />
</div>
<div id="pm-slider" class="pm-slider">
<div id="pm-slider-progress-bar"></div>
<ul class="pm-slides-container" id="pm_slides_container">
<!-- FULL WIDTH slides -->
<li data-thumb="img/slider/1a.jpg" class="pmslide_0">
<img src="img/slider/slide1.jpg" alt="img01" />

                        <div class="pm-holder-bg">
                            <div class="pm-holder">
                                <div class="pm-caption">
                                      <h1><span>unleash</span> your inner <span>strength</span></h1>
                                      <span class="pm-caption-decription">
                                        discover your physical potential with energy fitness
                                      </span>
                                      <a href="about-us.html" class="pm-slide-btn">learn more about us</a>
                                </div>
                            </div>
                        </div>

                    </li>

                    <li data-thumb="img/slider/2a.jpg" class="pmslide_1"><img src="img/slider/slide2.jpg" alt="img02" />

                        <div class="pm-holder-bg">
                            <div class="pm-holder">
                                <div class="pm-caption">
                                      <h1><span>increase</span> your muscle <span>power</span></h1>
                                      <span class="pm-caption-decription">
                                        learn the secrects of resistance training
                                      </span>
                                      <a href="#" class="pm-slide-btn">View program</a>
                                </div>
                            </div>
                        </div>         

                    </li>

                    <li data-thumb="img/slider/3a.jpg" class="pmslide_2"><img src="img/slider/slide3.jpg" alt="img02" />

                        <div class="pm-holder-bg">
                            <div class="pm-holder">
                                <div class="pm-caption">
                                      <h1><span>going</span> the <span>distance</span></h1>
                                      <span class="pm-caption-decription">
                                        an effective cardio program can take you there
                                      </span>
                                      <a href="#" class="pm-slide-btn">Discover Cardio secrets</a>
                                </div>
                            </div>
                        </div>

                    </li>

                </ul>

            </div>

            <div class="pm-pulse-arrow"></div>

        </div>

        <!-- SLIDER AREA end -->

  <?php if ( have_posts() ) : ?>

    <?php while ( have_posts() ) : the_post(); ?>

      <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

        <div class="post-header">

        </div><!--end post header-->

        <div class="entry clear">

          <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>

          <?php the_content(); ?>

          <?php wp_link_pages(); ?>

        </div><!--end entry-->

        <div class="post-footer">

        </div><!--end post footer-->

      </div><!--end post-->

    <?php endwhile; /* rewind or continue if all posts have been fetched */ ?>

    <div class="navigation index">

      <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>

      <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>

    </div><!--end navigation-->

  <?php else : ?>

  <?php endif; ?>

</div>

</div>

</div>

</div>

<!-- Column 1 -->

<?php get_footer(); ?>
    
asked by anonymous 17.02.2015 / 03:23

0 answers