Ajmal Afif's blog

Balancing between consuming knowledge and creating values.

.htaccess issue with WordPress + Twitter BootStrap (Roots Theme) setup on PagodaBox and Git

Please note this might be a unique isolated issue to my current setup of MAMP. Proceed at your own risk

Create a “New App” with PagodaBox using their default Quickstart.

Files to configure

  1. rename config.php to config-sample.php (then setup db and install WP)
  2. Install Roots Theme
  3. /pagoda/.htaccess
  4. Boxfile
  5. wp-content/themes/roots/lib/scripts.php

Detailed codes for each file

.htaccess

Do not copy and paste this code! Use it as reference:

.htaccess
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# BEGIN WordPress

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase / # Your WP root directory
RewriteRule ^index\.php$ - [L]
RewriteRule ^assets/css/(.*) /[WP_DIRECTORY]/wp-content/themes/[ROOTS_THEME]/assets/css/$1 [QSA,L]
RewriteRule ^assets/js/(.*) /[WP_DIRECTORY]/wp-content/themes/[ROOTS_THEME]/assets/js/$1 [QSA,L]
RewriteRule ^assets/img/(.*) /[WP_DIRECTORY]/wp-content/themes/[ROOTS_THEME]/assets/img/$1 [QSA,L]
RewriteRule ^plugins/(.*) /[WP_DIRECTORY]/wp-content/plugins/$1 [QSA,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /[WP_DIRECTORY]/index.php [L]
</IfModule>

# END WordPress

Boxfile

Boxfile
1
2
3
- "mv pagoda/wp-config.php wp-config.php"
- "mv pagoda/.htaccess .htaccess"
- "rm -R pagoda"

/wp-content/themes/[ROOTS_FOLDER]/lib/scripts.php

scripts.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<?php
/**
 * Scripts and stylesheets
 *
 * Enqueue stylesheets in the following order:
 * 1. /theme/assets/css/bootstrap.css
 * 2. /theme/assets/css/bootstrap-responsive.css
 * 3. /theme/assets/css/app.css
 * 4. /child-theme/style.css (if a child theme is activated)
 *
 * Enqueue scripts in the following order:
 * 1. /theme/assets/js/vendor/modernizr-2.6.2.min.js  (in head.php)
 * 2. jquery-1.8.2.min.js via Google CDN              (in head.php)
 * 3. /theme/assets/js/plugins.js
 * 4. /theme/assets/js/main.js
 */

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

  // Load style.css from child theme
  if (is_child_theme()) {
    wp_enqueue_style('roots_child', get_stylesheet_uri(), false, null);
  }

  // jQuery is loaded in header.php using the same method from HTML5 Boilerplate:
  // Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline
  // It's kept in the header instead of footer to avoid conflicts with plugins.
  if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', '', '', '1.8.3', false);
  }

  if (is_single() && comments_open() && get_option('thread_comments')) {
    wp_enqueue_script('comment-reply');
  }

  wp_register_script('roots_plugins', '/assets/js/plugins.js', false, null, false);
  wp_register_script('roots_main', '/assets/js/main.js', false, null, false);
  wp_enqueue_script('roots_plugins');
  wp_enqueue_script('roots_main');
}

add_action('wp_enqueue_scripts', 'roots_scripts', 100);

Footnotes

On some repos I have problem git doesn’t detect my Roots Theme folder and files (I sometimes install via WordPress, something thru git clone). Here’s what I ran to fix if git doesn’t detect Roots:

console
1
$ git update-index --really-refresh

Comments