Close #646 - Replace ID's with classes

CHANGELOG.md

@@ -1,4 +1,5 @@
 ### HEAD
+* Replace ID's with classes
 * Add support for dynamic sidebar templates
 * Fix PHP notice on search with no results
 * Update to jQuery 1.9.0

assets/css/app.css

@@ -10,7 +10,7 @@ body { }
    Header
    ========================================================================== */
 
-#banner { }
+.banner { }
 
 /* Fixed Topbar Navigation */
 body.top-navbar { padding-top: 60px; }
@@ -22,7 +22,7 @@ body.admin-bar .navbar-fixed-top { top: 28px; }
    Content
    ========================================================================== */
 
-#content { }
+.content { }
 
 
 
@@ -30,7 +30,7 @@ body.admin-bar .navbar-fixed-top { top: 28px; }
    Primary Content
    ========================================================================== */
 
-#main { }
+.main { }
 
 
 
@@ -38,7 +38,7 @@ body.admin-bar .navbar-fixed-top { top: 28px; }
    Sidebar
    ========================================================================== */
 
-#sidebar { }
+.sidebar { }
 
 
 
@@ -48,7 +48,7 @@ body.admin-bar .navbar-fixed-top { top: 28px; }
 
 .hentry header { }
 .hentry time { }
-.hentry p.byline { }
+.hentry .byline { }
 .hentry .entry-content { }
 .hentry footer { }
 
@@ -58,7 +58,7 @@ body.admin-bar .navbar-fixed-top { top: 28px; }
    Footer
    ========================================================================== */
 
-#content-info { }
+.content-info { }
 
 
 

base.php

@@ -12,18 +12,18 @@
     }
   ?>
 
-  <div id="wrap" class="container" role="document">
+  <div class="wrap container" role="document">
-    <div id="content" class="row">
+    <div class="content row">
-      <div id="main" class="<?php echo roots_main_class(); ?>" role="main">
+      <div class="main <?php echo roots_main_class(); ?>" role="main">
         <?php include roots_template_path(); ?>
-      </div>
+      </div><!-- /.main -->
       <?php if (roots_display_sidebar()) : ?>
-      <aside id="sidebar" class="<?php echo roots_sidebar_class(); ?>" role="complementary">
+      <aside class="sidebar <?php echo roots_sidebar_class(); ?>" role="complementary">
         <?php include roots_sidebar_path(); ?>
-      </aside>
+      </aside><!-- /.sidebar -->
       <?php endif; ?>
-    </div><!-- /#content -->
+    </div><!-- /.content -->
-  </div><!-- /#wrap -->
+  </div><!-- /.wrap -->
 
   <?php get_template_part('templates/footer'); ?>
 

doc/lib.md

@@ -13,7 +13,7 @@ This file handles the various WordPress clean up. [About the clean up](cleanup.m
 
 ### config.php
 
-This file is used to enable various theme features, define which pages get the sidebar, set the CSS classes for `#main` and `#sidebar`, set a Google Analytics ID, and set the post excerpt length.
+This file is used to enable various theme features, define which pages get the sidebar, set the CSS classes for `.main` and `.sidebar`, set a Google Analytics ID, and set the post excerpt length.
 
 #### Enable theme features
 
@@ -107,7 +107,7 @@ The theme wrapper is used to serve all of the template files. [About the theme w
 
 This file registers the custom sidebars and custom widgets. There are two initial sidebars:
 
-1. Primary Sidebar (used by `templates/sidebar.php`, included from `base.php` within `#sidebar`)
+1. Primary Sidebar (used by `templates/sidebar.php`, included from `base.php` within `.sidebar`)
 2. Footer (used by `templates/footer.php`)
 
 The included vCard widget can be used to build additional, custom widgets.

lib/widgets.php

@@ -5,7 +5,7 @@ function roots_widgets_init() {
   register_sidebar(array(
     'name'          => __('Primary Sidebar', 'roots'),
     'id'            => 'sidebar-primary',
-    'before_widget' => '<section id="%1$s" class="widget %2$s"><div class="widget-inner">',
+    'before_widget' => '<section class="widget %1$s %2$s"><div class="widget-inner">',
     'after_widget'  => '</div></section>',
     'before_title'  => '<h3>',
     'after_title'   => '</h3>',
@@ -14,7 +14,7 @@ function roots_widgets_init() {
   register_sidebar(array(
     'name'          => __('Footer', 'roots'),
     'id'            => 'sidebar-footer',
-    'before_widget' => '<section id="%1$s" class="widget %2$s"><div class="widget-inner">',
+    'before_widget' => '<section class="widget %1$s %2$s"><div class="widget-inner">',
     'after_widget'  => '</div></section>',
     'before_title'  => '<h3>',
     'after_title'   => '</h3>',

templates/comments.php

@@ -1,7 +1,7 @@
 <?php function roots_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
   <li <?php comment_class(); ?>>
-    <article id="comment-<?php comment_ID(); ?>">
+    <article class="comment-<?php comment_ID(); ?>">
       <header class="comment-author vcard">
         <?php echo get_avatar($comment, $size = '32'); ?>
         <?php printf(__('<cite class="fn">%s</cite>', 'roots'), get_comment_author_link()); ?>
@@ -43,7 +43,7 @@
     </ol>
 
     <?php if (get_comment_pages_count() > 1 && get_option('page_comments')) : // are there comments to navigate through ?>
-      <nav id="comments-nav" class="pager">
+      <nav>
         <ul class="pager">
           <?php if (get_previous_comments_link()) : ?>
             <li class="previous"><?php previous_comments_link(__('&larr; Older comments', 'roots')); ?></li>

templates/content-single.php

@@ -1,5 +1,5 @@
 <?php while (have_posts()) : the_post(); ?>
-  <article <?php post_class() ?> id="post-<?php the_ID(); ?>">
+  <article <?php post_class(); ?>>
     <header>
       <h1 class="entry-title"><?php the_title(); ?></h1>
       <?php get_template_part('templates/entry-meta'); ?>
@@ -8,7 +8,7 @@
       <?php the_content(); ?>
     </div>
     <footer>
-      <?php wp_link_pages(array('before' => '<nav id="page-nav"><p>' . __('Pages:', 'roots'), 'after' => '</p></nav>')); ?>
+      <?php wp_link_pages(array('before' => '<nav class="page-nav"><p>' . __('Pages:', 'roots'), 'after' => '</p></nav>')); ?>
       <?php the_tags('<ul class="entry-tags"><li>','</li><li>','</li></ul>'); ?>
     </footer>
     <?php comments_template('/templates/comments.php'); ?>

templates/content.php

@@ -7,7 +7,7 @@
 <?php endif; ?>
 
 <?php while (have_posts()) : the_post(); ?>
-  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
+  <article <?php post_class(); ?>>
     <header>
       <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
       <?php get_template_part('templates/entry-meta'); ?>
@@ -22,7 +22,7 @@
 <?php endwhile; ?>
 
 <?php if ($wp_query->max_num_pages > 1) : ?>
-  <nav id="post-nav">
+  <nav class="post-nav">
     <ul class="pager">
       <?php if (get_next_posts_link()) : ?>
         <li class="previous"><?php next_posts_link(__('&larr; Older posts', 'roots')); ?></li>

templates/footer.php

@@ -1,6 +1,8 @@
-<footer id="content-info" class="container" role="contentinfo">
+<footer class="content-info" role="contentinfo">
-  <?php dynamic_sidebar('sidebar-footer'); ?>
+  <div class="container">
-  <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
+    <?php dynamic_sidebar('sidebar-footer'); ?>
+    <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
+  </div>
 </footer>
 
 <?php if (GOOGLE_ANALYTICS_ID) : ?>

templates/header-top-navbar.php

@@ -1,4 +1,4 @@
-<header id="banner" class="navbar navbar-fixed-top" role="banner">
+<header class="banner navbar navbar-fixed-top" role="banner">
   <div class="navbar-inner">
     <div class="container">
       <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
@@ -9,7 +9,7 @@
       <a class="brand" href="<?php echo home_url(); ?>/">
         <?php bloginfo('name'); ?>
       </a>
-      <nav id="nav-main" class="nav-collapse" role="navigation">
+      <nav class="nav-main nav-collapse" role="navigation">
         <?php
           if (has_nav_menu('primary_navigation')) :
             wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav'));

templates/header.php

@@ -1,7 +1,7 @@
-<header id="banner" role="banner">
+<header class="banner" role="banner">
   <div class="container">
     <a class="brand" href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>
-    <nav id="nav-main" role="navigation">
+    <nav class="nav-main" role="navigation">
       <?php
         if (has_nav_menu('primary_navigation')) :
           wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav nav-pills'));