All · Bootstrap · Google Analytics · Sage · Uncategorised · Wordpress

Setting up a development environment for Sage Starter WordPress theme.

Setting up a development environment for Sage Starter WordPress theme.

I have been using the roots classing theme and have recently started to use the new Sage version. Here I will explain how I setup my development environment to use node.js with gulp and bower dependencies. I have set this up on both OSX and Windows, hopefully the below will cover both.

I will assume you have already setup a xampp / mampp local server with an installation of wordpress

Some basic commands in dos/terminal will be needed:

Terminal command guide

Basic DOS commands

Required:

PC;

Python 2.7

Microsoft Visual Studio C++ 2013 Express version

OSX;

Python 2.7 (already on OSX)

XCode and Command Line Tools

You will also require Node.js and git

On Windows using Node.js Command Prompt or on OSX using terminal;

Clone the git repo to a folder in your wordpress theme folder

git clone https://github.com/roots/sage.git theme

open wp-config.php and add

define('WP_ENV', 'development');

cd to theme folder and install gulp and bower

npm install -g gulp bower

install node dependencies

npm install

install bower dependencies

bower install

running gulp will compile and optimize the file for the first time

gulp

See the Sage docs for further reading

Bootstrapp Carousel

 <section id="slider">
      
        <?php
          query_posts( array( 'post_type' => 'slides', 'posts_per_page' => -1 ) ); ?>
          <?php if ( have_posts() ) : $count=1 ; ?> 
              <div id="carousel-generic" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
              <?php while ( have_posts() ) : the_post(); ?>
                <li data-target="#carousel-generic" data-slide-to="<?php echo $count; ?>" class="<?php if($count=="1"){ echo 'active' ; } ?>"></li>
            <?php $count++; endwhile; ?>

              </ol>
             <?php endif; ?>
              <!-- Wrapper for slides -->
              <?php if ( have_posts() ) : $slideCount=1 ; ?> 
              <div class="carousel-inner" role="listbox">
              <?php while ( have_posts() ) : the_post();  ?>
                <div class="item <?php if($slideCount=="1"){ echo 'active' ; } ?>">
                      <h3><?php the_title(); ?></h3>
                </div>
              <?php $slideCount++; endwhile; ?>
              </div>
               <?php endif; ?>
              <!-- Controls -->
              <a class="left carousel-control" href="#carousel-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
              </a>
              <a class="right carousel-control" href="#carousel-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>

         
        <?php wp_reset_query(); ?>

    </section>

Paginated Posts

<?php
        $defaults = array(
          'before'           => '<p>' . __( 'Pages:' ),
          'after'            => '</p>',
          'link_before'      => '',
          'link_after'       => '',
          'next_or_number'   => 'number',
          'separator'        => ' ',
          'nextpagelink'     => __( 'Next page' ),
          'previouspagelink' => __( 'Previous page' ),
          'pagelink'         => '%',
          'echo'             => 1
        );
              wp_link_pages( $defaults );
      ?>
<!--pagebreak-->

HTML5 scripts for IE8/Roots

<script src=”//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js”></script>
<script src=”//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js”></script>

Bootstrap carousel fade effect

/* slide fade effect */
 .carousel .carousel-inner .item {
   opacity: 0;
   -webkit-transition-property: opacity;
   -moz-transition-property: opacity;
   -o-transition-property: opacity;
   transition-property: opacity;
 }
 .carousel .carousel-inner .active {
   opacity: 1;
 }
 .carousel .carousel-inner .active.left,
 .carousel .carousel-inner .active.right {
   left: 0;
   opacity: 0;
   z-index: 1;
 }
 .carousel .carousel-inner .next.left,
 .carousel .carousel-inner .prev.right {
   opacity: 1;
 }
 .carousel .carousel-control {
   z-index: 2;
 }
 html,
 body,
 .carousel,
 .carousel-inner,
 .carousel-inner .item {
   height: 100%;
 }