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

Paginated Post Test

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Donec sed odio dui.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus.

Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.

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>

Remove admin bar

/* remove admin bar for all users except admin */
add_action(‘after_setup_theme’, ‘remove_admin_bar’);
function remove_admin_bar() {
if (!current_user_can(‘administrator’) && !is_admin()) {
show_admin_bar(false);
}
}

Logout redirect

/* logout redirect */
function logout_redirect($logouturl, $redir)
{
$location = $_SERVER[‘HTTP_REFERER’];
return $logouturl . ‘&amp;redirect_to=’.$location;
/*return $logouturl . ‘&amp;redirect_to=’.get_permalink();*/
}
add_filter(‘logout_url’, ‘logout_redirect’, 10, 2);

Login redirect

/* login redirect */
if ( (isset($_GET[‘action’]) && $_GET[‘action’] != ‘logout’) || (isset($_POST[‘login_location’]) && !empty($_POST[‘login_location’])) ) {
add_filter(‘login_redirect’, ‘my_login_redirect’, 10, 3);
function my_login_redirect() {
$location = $_SERVER[‘HTTP_REFERER’];
wp_safe_redirect($location);
exit();
}
}

Add ‘All’ link to category widget

// Add “All Categories” to categories widget
function add_all_categories_to_widget($cat_args) {
$cat_args[‘show_option_all’] = ‘All’;
return $cat_args;
}
add_filter(‘widget_categories_args’, ‘add_all_categories_to_widget’);