Wordpress home page with differentiated structure

Asked

Viewed 180 times

1

I’m converting a template into HTML made with Bootstrap that will only be used in Home page for the format of Wordpress and would like to include the slideshow.

Because of studies, I come here to ask you for help so that you can apply the elements of Wordpress in a way that only has effect on Home page:

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(); ?>
  • They’re different structures, it takes a lot of work to do that. And it won’t get as good a result as doing a project using bootstrap, using sublime text to edit pages and hosting on Hostinger. If you have extra time you may be installing Yeoman and doing projects with 'master page', when you change on the home page changes in all others, in short. If you want to learn how to install and use Yeoman + bootstrap + slider + ... you might be doing this Course of Angularjs

  • The template was made using bootstrap, I think you did not understand my doubt. For example, the homepage uses some extra html elements and I believe that it is not so much work because I see many doing it. In the case is an HTML slideshow that I think about leaving it static for now, I will include it only on the home page, I have the html and css of the same ready.

  • If you post the structure of html elements it is easier to understand. So it becomes subjective.

  • I restructured my question for better understanding. includes the template html and explained better what I wish, thank you very much!

  • @user21746 Please keep the code in the question and use the markup to arrange it in the question. Read this to understand how to ask a good question (and make it readable): http://answall.com/help/mcve

  • Edited again and now, legibly. Sorry.

  • this question is not a duplicate for the following reason: The other I ask support in converting the slideshow to wordpress, making it pull the featured images of posts, in this I am asking you to help me put the slideshow html on the homepage without having to install plugins.

  • @user21746 The reason they are considering duplicate is not because they both ask the same thing or not, the reason is that both questions ask for things that are not well connected to programming, but rather to a problem of their own, which is not a REAL PROBLEM, but yes a problem of lack of knowledge of this specific technology (this is the duplicate), forgive me I am not speaking for evil. My opinion (don’t get upset please): Both issues are not real problem and sound like do for me (don’t take this the wrong way). What you need is to have some knowledge in HTML, CSS, Javascript.

  • Another thing, actually I think this is not the duplicate, actually the other is the duplicate. But still both are not real problem.

  • This question is referred to at the goal: http://meta.pt.stackoverflow.com/q/4371/129 Answer is welcome :)

Show 5 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.