Permalink
Browse files

Add theme wrapper, re-organize template files

- Implement scribu’s Theme Wrapper (see base.php)

- Move templates, comments.php, and searchform.php to templates/ folder

- Rename loop- files to content-

- Remove all hooks except roots_head and roots_footer

- Use templates/page-header.php for page titles

- Use head.php for everything in <head>
  • Loading branch information...
1 parent b54328c commit db41099f5b4be8166390408aa4f285b131e17ec0 @retlehs retlehs committed Aug 18, 2012
View
@@ -1,24 +1,15 @@
-<?php get_header(); ?>
- <?php roots_content_before(); ?>
- <div id="content" class="<?php echo CONTAINER_CLASSES; ?>">
- <?php roots_main_before(); ?>
- <div id="main" class="<?php echo FULLWIDTH_CLASSES; ?>" role="main">
- <div class="page-header">
- <h1><?php _e('File Not Found', 'roots'); ?></h1>
- </div>
- <div class="alert alert-block fade in">
- <a class="close" data-dismiss="alert">&times;</a>
- <p><?php _e('The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.', 'roots'); ?></p>
- </div>
- <p><?php _e('Please try the following:', 'roots'); ?></p>
- <ul>
- <li><?php _e('Check your spelling', 'roots'); ?></li>
- <li><?php printf(__('Return to the <a href="%s">home page</a>', 'roots'), home_url()); ?></li>
- <li><?php _e('Click the <a href="javascript:history.back()">Back</a> button', 'roots'); ?></li>
- </ul>
- <?php get_search_form(); ?>
- </div><!-- /#main -->
- <?php roots_main_after(); ?>
- </div><!-- /#content -->
- <?php roots_content_after(); ?>
-<?php get_footer(); ?>
+<?php get_template_part('templates/page', 'header'); ?>
+
+<div class="alert alert-block fade in">
+ <a class="close" data-dismiss="alert">&times;</a>
+ <p><?php _e('The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.', 'roots'); ?></p>
+</div>
+
+<p><?php _e('Please try the following:', 'roots'); ?></p>
+<ul>
+ <li><?php _e('Check your spelling', 'roots'); ?></li>
+ <li><?php printf(__('Return to the <a href="%s">home page</a>', 'roots'), home_url()); ?></li>
+ <li><?php _e('Click the <a href="javascript:history.back()">Back</a> button', 'roots'); ?></li>
+</ul>
+
+<?php get_search_form(); ?>
View
@@ -1,3 +1,11 @@
+### HEAD
+* Implement scribu's [Theme Wrapper](http://scribu.net/wordpress/theme-wrappers.html) (see `base.php`)
+* Move templates, `comments.php`, and `searchform.php` to `templates/` folder
+* Rename `loop-` files to `content-`
+* Remove all hooks except `roots_head` and `roots_footer`
+* Use `templates/page-header.php` for page titles
+* Use `head.php` for everything in `<head>`
+
### 5.2.0: August 18th, 2012
* Update to jQuery 1.8.0 and Modernizr 2.6.1
* Fix duplicate active class in `wp_nav_menu` items
View
@@ -1,44 +0,0 @@
-<?php get_header(); ?>
- <?php roots_content_before(); ?>
- <div id="content" class="<?php echo CONTAINER_CLASSES; ?>">
- <?php roots_main_before(); ?>
- <div id="main" class="<?php echo MAIN_CLASSES; ?>" role="main">
- <div class="page-header">
- <h1>
- <?php
- $term = get_term_by('slug', get_query_var('term'), get_query_var('taxonomy'));
- if ($term) {
- echo $term->name;
- } elseif (is_post_type_archive()) {
- echo get_queried_object()->labels->name;
- } elseif (is_day()) {
- printf(__('Daily Archives: %s', 'roots'), get_the_date());
- } elseif (is_month()) {
- printf(__('Monthly Archives: %s', 'roots'), get_the_date('F Y'));
- } elseif (is_year()) {
- printf(__('Yearly Archives: %s', 'roots'), get_the_date('Y'));
- } elseif (is_author()) {
- global $post;
- $author_id = $post->post_author;
- printf(__('Author Archives: %s', 'roots'), get_the_author_meta('display_name', $author_id));
- } else {
- single_cat_title();
- }
- ?>
- </h1>
- </div>
- <?php roots_loop_before(); ?>
- <?php get_template_part('loop', 'category'); ?>
- <?php roots_loop_after(); ?>
- </div><!-- /#main -->
- <?php roots_main_after(); ?>
- <?php roots_sidebar_before(); ?>
- <aside id="sidebar" class="<?php echo SIDEBAR_CLASSES; ?>" role="complementary">
- <?php roots_sidebar_inside_before(); ?>
- <?php get_sidebar(); ?>
- <?php roots_sidebar_inside_after(); ?>
- </aside><!-- /#sidebar -->
- <?php roots_sidebar_after(); ?>
- </div><!-- /#content -->
- <?php roots_content_after(); ?>
-<?php get_footer(); ?>
View
@@ -0,0 +1,31 @@
+<?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" role="document">
+ <div id="content" class="row">
+ <div id="main" class="<?php roots_main_class(); ?>" role="main">
+ <?php include roots_template_path(); ?>
+ </div>
+ <?php if (roots_sidebar()) { ?>
+ <aside id="sidebar" class="<?php roots_sidebar_class(); ?>" role="complementary">
+ <?php get_template_part('templates/sidebar'); ?>
+ </aside>
+ <?php } ?>
+ </div><!-- /#content -->
+ </div><!-- /#wrap -->
+
+ <?php get_template_part('templates/footer'); ?>
+
+</body>
+</html>
View
@@ -1,4 +1,4 @@
-/* =============================================================================
+/* ==========================================================================
Base
========================================================================== */
@@ -18,31 +18,31 @@ body.admin-bar .navbar-fixed-top { top: 28px; }
-/* =============================================================================
+/* ==========================================================================
Content
========================================================================== */
#content { }
-/* =============================================================================
+/* ==========================================================================
Primary Content
========================================================================== */
#main { }
-/* =============================================================================
+/* ==========================================================================
Sidebar
========================================================================== */
#sidebar { }
-/* =============================================================================
+/* ==========================================================================
Posts
========================================================================== */
@@ -54,15 +54,15 @@ body.admin-bar .navbar-fixed-top { top: 28px; }
-/* =============================================================================
+/* ==========================================================================
Footer
========================================================================== */
#content-info { }
-/* =============================================================================
+/* ==========================================================================
WordPress Generated Classes
See: http://codex.wordpress.org/CSS#WordPress_Generated_Classes
========================================================================== */
@@ -74,7 +74,7 @@ figure.alignnone { margin-left: 0; margin-right: 0; }
-/* =============================================================================
+/* ==========================================================================
Media Queries
========================================================================== */
View
@@ -1,134 +0,0 @@
-/*
- * HTML5 Boilerplate
- *
- * What follows is the result of much research on cross-browser styling.
- * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
- * Kroc Camen, and the H5BP dev community and team.
- *
- * Detailed information about this CSS: h5bp.com/css
- *
- * ==|== normalize ==========================================================
- */
-
-article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
-audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
-audio:not([controls]) { display: none; }
-[hidden] { display: none; }
-
-html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
-html, button, input, select, textarea { font-family: sans-serif; color: #222; }
-body { margin: 0; font-size: 1em; line-height: 1.4; }
-
-::-moz-selection { background: #b3d4fc; text-shadow: none; }
-::selection { background: #b3d4fc; text-shadow: none; }
-
-a { color: #00e; }
-a:visited { color: #551a8b; }
-a:hover { color: #06e; }
-a:focus { outline: thin dotted; }
-a:hover, a:active { outline: 0; }
-
-abbr[title] { border-bottom: 1px dotted; }
-b, strong { font-weight: bold; }
-blockquote { margin: 1em 40px; }
-dfn { font-style: italic; }
-hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
-ins { background: #ff9; color: #000; text-decoration: none; }
-mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
-pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
-pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
-q { quotes: none; }
-q:before, q:after { content: ""; content: none; }
-small { font-size: 85%; }
-sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
-sup { top: -0.5em; }
-sub { bottom: -0.25em; }
-ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
-dd { margin: 0 0 0 40px; }
-nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
-img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
-svg:not(:root) { overflow: hidden; }
-figure { margin: 0; }
-
-form { margin: 0; }
-fieldset { border: 0; margin: 0; padding: 0; }
-label { cursor: pointer; }
-legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
-button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
-button, input { line-height: normal; }
-button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
-button[disabled], input[disabled] { cursor: default; }
-input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
-input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
-input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
-button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
-textarea { overflow: auto; vertical-align: top; resize: vertical; }
-input:valid, textarea:valid { }
-input:invalid, textarea:invalid { background-color: #f0dddd; }
-
-table { border-collapse: collapse; border-spacing: 0; }
-td { vertical-align: top; }
-
-.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
-
-
-/* ==|== primary styles =====================================================
- Author:
- ========================================================================== */
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/* ==|== media queries ======================================================
- EXAMPLE Media Query for Responsive Design.
- This example overrides the primary ('mobile first') styles
- Modify as content requires.
- ========================================================================== */
-
-@media only screen and (min-width: 35em) {
- /* Style adjustments for viewports that meet the condition */
-}
-
-
-
-/* ==|== non-semantic helper classes ======================================== */
-
-.ir { border: 0; font: 0/0 a; text-shadow: none; color: transparent; background-color: transparent; }
-.hidden { display: none !important; visibility: hidden; }
-.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
-.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
-.invisible { visibility: hidden; }
-.clearfix:before, .clearfix:after { content: ""; display: table; }
-.clearfix:after { clear: both; }
-.clearfix { *zoom: 1; }
-
-
-
-/* ==|== print styles ======================================================= */
-
-@media print {
- * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; }
- a, a:visited { text-decoration: underline; }
- a[href]:after { content: " (" attr(href) ")"; }
- abbr[title]:after { content: " (" attr(title) ")"; }
- .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
- pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
- thead { display: table-header-group; }
- tr, img { page-break-inside: avoid; }
- img { max-width: 100% !important; }
- @page { margin: 0.5cm; }
- p, h2, h3 { orphans: 3; widows: 3; }
- h2, h3 { page-break-after: avoid; }
-}
View
@@ -1,16 +0,0 @@
-
- </div><!-- /#wrap -->
-
- <?php roots_footer_before(); ?>
- <footer id="content-info" class="<?php echo WRAP_CLASSES; ?>" role="contentinfo">
- <?php roots_footer_inside(); ?>
- <?php dynamic_sidebar('sidebar-footer'); ?>
- <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
- </footer>
- <?php roots_footer_after(); ?>
-
- <?php wp_footer(); ?>
- <?php roots_footer(); ?>
-
-</body>
-</html>
View
@@ -1,20 +0,0 @@
-<?php get_header(); ?>
- <?php roots_content_before(); ?>
- <div id="content" class="<?php echo CONTAINER_CLASSES; ?>">
- <?php roots_main_before(); ?>
- <div id="main" class="<?php echo MAIN_CLASSES; ?>" role="main">
- <?php roots_loop_before(); ?>
- <?php get_template_part('loop', 'page'); ?>
- <?php roots_loop_after(); ?>
- </div><!-- /#main -->
- <?php roots_main_after(); ?>
- <?php roots_sidebar_before(); ?>
- <aside id="sidebar" class="<?php echo SIDEBAR_CLASSES; ?>" role="complementary">
- <?php roots_sidebar_inside_before(); ?>
- <?php get_sidebar(); ?>
- <?php roots_sidebar_inside_after(); ?>
- </aside><!-- /#sidebar -->
- <?php roots_sidebar_after(); ?>
- </div><!-- /#content -->
- <?php roots_content_after(); ?>
-<?php get_footer(); ?>
Oops, something went wrong. Retry.

11 comments on commit db41099

@lucasRolff

looks nice - a lot less code!

But I'm wondering, if you've put the sidebar stuff in the base.php file, and we want to change the front-page.php file, to not have any sidebar, but still being able to do it on the other pages, are we still able to do this? And how?

@retlehs
Member

yes, based off the current code you'll just open up config.php and add is_front_page() to the first if statement in roots_sidebar()

you can also override base.php with base-{template}.php

@Foxaii
Member
Foxaii commented on db41099 Aug 19, 2012

Why the sudden hatred of theme hooks? Is there no longer any impetus on making Roots the perfect parent theme? Hooks are a key part of that.

Granted the lovely addition of scribu's theme wrapper makes it easy enough to reintroduce my own hooks or those of the Theme Hook Alliance, but is this the only logic behind such a major change?

The rest of the changes look fantastic. Thanks for all the hard work.

@retlehs
Member

well, i've always hated theme hooks (and child themes) so it's nothing sudden. they've been brought up a few times recently by users not understanding what the purpose of them is. what's really lost by taking out all the hooks? i didn't think removing the hooks was that big of a change, but i don't really use them that much. when i do use them it's something that could have been done just as easy by editing a template file (and now, not in so many places).

do we really need all those hooks all over the place?

@Foxaii
Member
Foxaii commented on db41099 Aug 19, 2012

My interest with WordPress started with Thematic, a theme heavily reliant upon child themes and hooks, hence my bias.

I can completely understand why the questions on hooks would frustrate you, but I disagree with removing a feature just because some people don't understand it. I actually think many would start using hooks if they realised how useful they can be.

When used properly hooks and child themes allow you to transparently upgrade to the latest version of the parent theme, great for new features, bug fixes or security. They also help you change from one theme to another simply by editing the hook prefix, especially useful when transitioning a client's site to a new Roots based responsive design. You can also easily reposition elements on the page simply by changing the hook suffix. Maintaining hooks also means that if you have several custom post templates and need to add something new to all of them you can do it with one new function, instead of changing all the custom templates.

Granted most of this can be done by editing the wrapper's base.php but it's not as straightforward, as flexible or as well documented as using hooks.

@retlehs
Member

hooks weren't removed just because some people don't understand it. also, thematic is a perfect example of a theme i'd want roots to be nothing like.. the amount of hooks in that theme is insane and it's very difficult to work with.

also, there's no way that you can upgrade your parent roots theme without running into issues all the time, which is why we've never recommended the use of child themes. we don't keep backwards compatibility functionality, we're always re-arranging the hell out of things and completely removing/adding different features.

when the documentation is re-done (#264 - which i'd like to knock out soon) we can provide examples on how to extend base.php

roots is a starting theme at heart. i understand some people use it as a framework and use child themes (and we do our best to make that work smoothly), but that's really not how it's meant to be used.

@Foxaii
Member
Foxaii commented on db41099 Aug 19, 2012

I agree that Thematic went overkill with hooks, but you only need to look at premium themes like Genesis to see that they do have a place within WordPress frameworks. It won't stop me using Roots, I'll just adopt and incorporate the hooks from the Theme Hook Alliance.

I also respect your decision to be a starter theme instead of a framework, as I wouldn't like to deal with the additional hassle either. Such is the quality and simplicity of the code, it's not a big leap to use Roots as a framework.

@lucasRolff
@Incubalab

For my part a few weeks ago I am developing child themes to keep updated my theme father and with this new update be quite desconsertado not serve because older versions and already done. Anyway this update seems unbelievable to me and then giving me a while to realize that to achieve the realization of new issues has no problem children, the creation of new base-{template}.php, add my own hook and let your imagination. Congratulations and sorry for my English.
PD: the simplicity and the small number of files I'm thinking of leaving child themes.

@gibrankhan

I'm trying to get my head around this new theme wrapping stuff. If I wanted a certain page to have a different sidebar or different header or footer etc, then the base.php file is useless for that page. How do I override the base.php for an individual page? I tried using base-page-{slug}.php and base-{slug}.php but they both do not work. Thanks.

@retlehs
Member
retlehs commented on db41099 Sep 4, 2012

if you can't figure it out after reviewing http://scribu.net/wordpress/theme-wrappers.html then please post a question on the google group

Please sign in to comment.