ajmalafif
1/19/2013 - 9:57 AM

[WP] - Roots Theme common file edits

[WP] - Roots Theme common file edits

roots.md
content_copyfile_download
  • Rendered
  • Source

Roots (6.2.0.1)

Files, CSS & JS

Files

go top

  • Analytics inside config.php
  • base.php

Analytics (config.php)

// Configuration values
define('GOOGLE_ANALYTICS_ID', ''); // UA-XXXXX-Y
define('POST_EXCERPT_LENGTH', 40);

base.php

<?php get_template_part('templates/head'); ?>
    <body <?php body_class(); ?>>
  
    <!--[if lt IE 7]><div class="alert">Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</div><![endif]-->

    <?php
    // Use Bootstrap's navbar if enabled in config.php
    if (current_theme_supports('bootstrap-top-navbar')) {
      get_template_part('templates/header-top-navbar');
    } else {
      get_template_part('templates/header');
    }
     ?>

    <div id="wrap" class="container-fluid" role="document">
    <div id="content" class="row-fluid">
      <div id="main" class="<?php echo roots_main_class(); ?>" role="main">
        <?php include roots_template_path(); ?>
      </div>
      <?php if (roots_display_sidebar()) : ?>
      <aside id="sidebar" class="<?php echo roots_sidebar_class(); ?>" role="complementary">
        <?php get_template_part('templates/sidebar'); ?>
      </aside>
      <?php endif; ?>
    </div><!-- /#content -->
    </div><!-- /#wrap -->

    <?php get_template_part('templates/footer'); ?>

    </body>
    </html>

CSS

go top

  • app.css

JS

go top

  • Transfer JavaScript from head.php to footer.php
  • Load addtional css (for jQuery/JavaScript) inside scripts.php
  • Include additional jQuery/JavaScript tag inside footer.php

head.php to footer.php

<!DOCTYPE html>
    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" <?php language_attributes(); ?>> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" <?php language_attributes(); ?>> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9" <?php language_attributes(); ?>> <![endif]-->
    <!--[if gt IE 8]><!--> <html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->
    <head>
    <meta charset="utf-8">
    <title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- script was here previous -->

      <?php wp_head(); ?>

    <?php if (wp_count_posts()->publish > 0) : ?>
      <link rel="alternate" type="application/rss+xml" title="<?php echo get_bloginfo('name'); ?> Feed" href="<?php echo home_url                (); ?>/feed/">
    <?php endif; ?>
    </head>

include external css inside scripts.php

<?php
...

function roots_scripts() {
  wp_enqueue_style('roots_bootstrap', '/assets/css/bootstrap.css', false, null);
  wp_enqueue_style('roots_bootstrap_responsive', '/assets/css/bootstrap-responsive.css', array('roots_bootstrap'), null);
  wp_enqueue_style('roots_app', '/assets/css/app.css', false, null);
// added external or additional css here
  wp_enqueue_style('roots_flexslider', '/assets/css/flexslider.css', false, null);
...

Include additional jQuery/JavaScript tag inside footer.php

    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/vendor/modernizr-2.6.2.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

// added required Flexslider javascript here (taken directly from their site tutorial): http://www.woothemes.com/flexslider/
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/vendor/jquery.flexslider.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/slider.js"></script>

    <script>window.jQuery || document.write('<script src="<?php echo get_template_directory_uri(); ?>/assets/js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
<?php if (GOOGLE_ANALYTICS_ID) : ?>