WordPress.org
Get WordPress

Make WordPress Core

Changeset 21404


Ignore:
Timestamp:
08/02/2012 07:12:11 PM (13 years ago)
Author:
lancewillett
Message:

Twenty Twelve: CSS and markup improvements for better child theme support, part 3. See #21379.

  • Add classes like .site and .site-content in addition to the set of IDs already present, making things much better for child themes to have more than one generic element like nav inside the content container.
  • Bump JS version after selector change.
  • Move image-attachment to post_class() output

More exhaustive notes in the ticket on each id and class change.

Location:
trunk/wp-content/themes/twentytwelve
Files:
17 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-content/themes/twentytwelve/404.php

    r21261 r21404  
    1010get_header(); ?>
    1111
    12     <div id="primary">
     12    <div id="primary" class="site-content">
    1313        <div id="content" role="main">
    1414
    … …  
    2525
    2626        </div><!-- #content -->
    27     </div><!-- #primary -->
     27    </div><!-- #primary .site-content -->
    2828
    2929<?php get_footer(); ?>

  • trunk/wp-content/themes/twentytwelve/archive.php

    r21331 r21404  
    1515get_header(); ?>
    1616
    17     <section id="primary">
     17    <section id="primary" class="site-content">
    1818        <div id="content" role="main">
    1919
    … …  
    7272
    7373        </div><!-- #content -->
    74     </section><!-- #primary -->
     74    </section><!-- #primary .site-content -->
    7575
    7676<?php get_sidebar(); ?>

  • trunk/wp-content/themes/twentytwelve/author.php

    r21261 r21404  
    1010get_header(); ?>
    1111
    12     <section id="primary">
     12    <section id="primary" class="site-content">
    1313        <div id="content" role="main">
    1414
    … …  
    6565
    6666        </div><!-- #content -->
    67     </section><!-- #primary -->
     67    </section><!-- #primary .site-content -->
    6868
    6969<?php get_sidebar(); ?>

  • trunk/wp-content/themes/twentytwelve/comments.php

    r21261 r21404  
    2222            return;
    2323?>
    24     <div id="comments">
     24<div id="comments" class="comments-area">
    2525
    2626    <?php // You can start editing here -- including this comment! ?>
    2727
    2828    <?php if ( have_comments() ) : ?>
    29         <h2 id="comments-title">
     29        <h2 class="comments-title">
    3030            <?php
    3131                printf( _n( 'One thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', get_comments_number(), 'twentytwelve' ),
    … …  
    3939
    4040        <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
    41         <nav id="comment-nav-below" role="navigation">
     41        <nav id="comment-nav-below" class="navigation" role="navigation">
    4242            <h1 class="assistive-text section-heading"><?php _e( 'Comment navigation', 'twentytwelve' ); ?></h1>
    4343            <div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentytwelve' ) ); ?></div>
    … …  
    5454    <?php comment_form(); ?>
    5555
    56 </div><!-- #comments -->
     56</div><!-- #comments .comments-area -->

  • trunk/wp-content/themes/twentytwelve/footer.php

    r21261 r21404  
    1010 */
    1111?>
    12     </div><!-- #main -->
     12    </div><!-- #main .wrapper -->
    1313    <footer id="colophon" role="contentinfo">
    1414        <div class="site-info">
    … …  
    1717        </div><!-- .site-info -->
    1818    </footer><!-- #colophon -->
    19 </div><!-- #page -->
     19</div><!-- #page .site -->
    2020
    2121<?php wp_footer(); ?>

  • trunk/wp-content/themes/twentytwelve/full-width-page.php

    r21261 r21404  
    1010get_header(); ?>
    1111
    12     <div id="primary">
     12    <div id="primary" class="site-content">
    1313        <div id="content" role="main">
    1414
    … …  
    1919
    2020        </div><!-- #content -->
    21     </div><!-- #primary -->
     21    </div><!-- #primary .site-content -->
    2222
    2323<?php get_footer(); ?>

  • trunk/wp-content/themes/twentytwelve/functions.php

    r21398 r21404  
    105105     * styles for small screen sizes.
    106106     */
    107     wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/theme.js', array( 'jquery' ), '20130320', true );
     107    wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/theme.js', array( 'jquery' ), '20120802', true );
    108108
    109109    /**
    … …  
    215215
    216216    if ( $wp_query->max_num_pages > 1 ) : ?>
    217         <nav id="<?php echo $nav_id; ?>" role="navigation">
     217        <nav id="<?php echo $nav_id; ?>" class="navigation" role="navigation">
    218218            <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
    219219            <div class="nav-previous alignleft"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentytwelve' ) ); ?></div>

  • trunk/wp-content/themes/twentytwelve/header.php

    r21276 r21404  
    2424
    2525<body <?php body_class(); ?>>
    26 <div id="page" class="hfeed">
     26<div id="page" class="hfeed site">
    2727    <header id="masthead" class="site-header" role="banner">
    2828        <hgroup>
    … …  
    3131        </hgroup>
    3232
    33         <nav class="site-navigation main-navigation" role="navigation">
     33        <nav class="main-navigation" role="navigation">
    3434            <h3 class="assistive-text"><?php _e( 'Show navigation', 'twentytwelve' ); ?></h3>
    3535            <div class="skip-link assistive-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a></div>
    … …  
    4343    </header><!-- #masthead -->
    4444
    45     <div id="main">
     45    <div id="main" class="wrapper">

  • trunk/wp-content/themes/twentytwelve/homepage.php

    r21398 r21404  
    1010get_header(); ?>
    1111
    12     <div id="primary">
     12    <div id="primary" class="site-content">
    1313        <div id="content" role="main">
    1414
    … …  
    2525
    2626        </div><!-- #content -->
    27     </div><!-- #primary -->
     27    </div><!-- #primary .site-content -->
    2828
    2929<?php get_sidebar( 'home' ); ?>

  • trunk/wp-content/themes/twentytwelve/image.php

    r21261 r21404  
    1010get_header(); ?>
    1111
    12     <div id="primary" class="image-attachment">
     12    <div id="primary" class="site-content">
    1313        <div id="content" role="main">
    1414
    1515        <?php while ( have_posts() ) : the_post(); ?>
    1616
    17                 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
     17                <article id="post-<?php the_ID(); ?>" <?php post_class( 'image-attachment' ); ?>>
    1818                    <header class="entry-header">
    1919                        <h1 class="entry-title"><?php the_title(); ?></h1>
    … …  
    3636                        </footer><!-- .entry-meta -->
    3737
    38                         <nav id="image-navigation" role="navigation">
     38                        <nav id="image-navigation" class="navigation" role="navigation">
    3939                            <span class="previous-image"><?php previous_image_link( false, __( '&larr; Previous', 'twentytwelve' ) ); ?></span>
    4040                            <span class="next-image"><?php next_image_link( false, __( 'Next &rarr;', 'twentytwelve' ) ); ?></span>
    … …  
    9898
    9999        </div><!-- #content -->
    100     </div><!-- #primary -->
     100    </div><!-- #primary .site-content -->
    101101
    102102<?php get_footer(); ?>

  • trunk/wp-content/themes/twentytwelve/index.php

    r21261 r21404  
    1616get_header(); ?>
    1717
    18     <div id="primary">
     18    <div id="primary" class="site-content">
    1919        <div id="content" role="main">
    2020        <?php if ( have_posts() ) : ?>
    … …  
    6060
    6161        </div><!-- #content -->
    62     </div><!-- #primary -->
     62    </div><!-- #primary .site-content -->
    6363
    6464<?php get_sidebar(); ?>

  • trunk/wp-content/themes/twentytwelve/js/theme.js

    r21261 r21404  
    1111
    1212    $.fn.smallMenu = function() {
    13         masthead.find( '.site-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
    14         masthead.find( '.site-navigation h3' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );
     13        masthead.find( '.main-navigation' ).removeClass( 'main-navigation' ).addClass( 'main-small-navigation' );
     14        masthead.find( '.main-navigation h3' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );
    1515
    1616        $( '.menu-toggle' ).off( 'click' ).click( function() {
    … …  
    3333                $.fn.smallMenu();
    3434            } else {
    35                 masthead.find( '.site-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' );
    36                 masthead.find( '.site-navigation h3' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' );
     35                masthead.find( '.main-navigation' ).removeClass( 'main-small-navigation' ).addClass( 'main-navigation' );
     36                masthead.find( '.main-navigation h3' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' );
    3737                masthead.find( '.menu' ).removeAttr( 'style' );
    3838            }

  • trunk/wp-content/themes/twentytwelve/page.php

    r21261 r21404  
    1515get_header(); ?>
    1616
    17     <div id="primary">
     17    <div id="primary" class="site-content">
    1818        <div id="content" role="main">
    1919
    … …  
    2424
    2525        </div><!-- #content -->
    26     </div><!-- #primary -->
     26    </div><!-- #primary .site-content -->
    2727
    2828<?php get_sidebar(); ?>

  • trunk/wp-content/themes/twentytwelve/rtl.css

    r21402 r21404  
    2525    float: left;
    2626}
    27 #content .gallery-columns-4 .gallery-item {
     27.site-content .gallery-columns-4 .gallery-item {
    2828    padding-left: 2%;
    2929    padding-right: 0;
    3030}
    31 #content .gallery-columns-5 .gallery-item {
     31.site-content .gallery-columns-5 .gallery-item {
    3232    padding-left: 2%;
    3333    padding-right: 0;
    … …  
    118118-------------------------------------------------------------- */
    119119
    120 #comments article header img {
     120.comments-area article header img {
    121121    float: right;
    122122}
    123 #comments article header cite,
    124 #comments article header time {
     123.comments-area article header cite,
     124.comments-area article header time {
    125125    margin-right: 85px;
    126126    margin-right: 6.071428571rem;
    127127    margin-left: auto;
    128128}
    129 #comments article header h4 {
     129.comments-area article header h4 {
    130130    left: 0;
    131131    right: auto;
    132132}
    133 #comments li.bypostauthor cite span {
     133.comments-area li.bypostauthor cite span {
    134134    margin-right: 5px;
    135135    margin-right: 0.357142857rem;
    … …  
    152152-------------------------------------------------------------- */
    153153
    154 .page-template-homepage-php #secondary aside.widget_text img {
     154.page-template-homepage-php .widget-area .widget_text img {
    155155    float: right;
    156156    margin: 8px 0 8px 24px;
    … …  
    161161-------------------------------------------------------------- */
    162162
    163 .widget ul ul {
     163.widget-area .widget ul ul {
    164164    margin-right: 12px;
    165165    margin-right: 0.857142857rem;
    … …  
    188188/* Minimum width of 600 pixels. */
    189189@media screen and (min-width: 600px) {
    190     .page-template-homepage-php #secondary aside.widget_text img {
     190    .page-template-homepage-php .widget-area .widget_text img {
    191191        float: right;
    192192        margin: 8px 0 8px 24px;

  • trunk/wp-content/themes/twentytwelve/search.php

    r21261 r21404  
    1010get_header(); ?>
    1111
    12     <section id="primary">
     12    <section id="primary" class="site-content">
    1313        <div id="content" role="main">
    1414
    … …  
    4444
    4545        </div><!-- #content -->
    46     </section><!-- #primary -->
     46    </section><!-- #primary .site-content -->
    4747
    4848<?php get_sidebar(); ?>

  • trunk/wp-content/themes/twentytwelve/single.php

    r21261 r21404  
    1010get_header(); ?>
    1111
    12     <div id="primary">
     12    <div id="primary" class="site-content">
    1313        <div id="content" role="main">
    1414
    … …  
    1717                <?php get_template_part( 'content', get_post_format() ); ?>
    1818
    19                 <nav id="nav-single">
     19                <nav class="nav-single">
    2020                    <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
    2121                    <span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">&larr;</span>', 'twentytwelve' ) . ' %title' ); ?></span>
    2222                    <span class="nav-next"><?php next_post_link( '%link', '%title ' . __( '<span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?></span>
    23                 </nav><!-- #nav-single -->
     23                </nav><!-- .nav-single -->
    2424
    2525                <?php
    … …  
    3232
    3333        </div><!-- #content -->
    34     </div><!-- #primary -->
     34    </div><!-- #primary .site-content -->
    3535
    3636<?php get_sidebar(); ?>

  • trunk/wp-content/themes/twentytwelve/style.css

    r21402 r21404  
    330330    height: auto;
    331331}
    332 #content .gallery-columns-4 .gallery-item {
     332.site-content .gallery-columns-4 .gallery-item {
    333333    width: 23%;
    334334    padding-right: 2%;
    335335}
    336 #content .gallery-columns-5 .gallery-item {
     336.site-content .gallery-columns-5 .gallery-item {
    337337    width: 18%;
    338338    padding-right: 2%;
    … …  
    340340
    341341/* Navigation */
    342 #content nav {
     342.site-content nav {
    343343    clear: both;
    344344    line-height: 2;
    … …  
    366366    width: 50%;
    367367}
    368 #nav-single + #comments,
     368.nav-single + .comments-area,
    369369#comment-nav-above {
    370370    margin: 48px 0;
    … …  
    419419
    420420/* Page structure */
    421 #page {
     421.wrapper {
     422    overflow: hidden;
     423}
     424.site {
    422425    padding: 0 24px;
    423426    padding: 0 1.714285714rem;
    424427    background-color: #fff;
    425428}
    426 #main {
    427     overflow: hidden;
    428 }
    429 #primary {
     429.site-content {
    430430    margin: 24px 0 0;
    431431    margin: 1.714285714rem 0 0;
    432432}
    433 #secondary {
     433.widget-area {
    434434    margin: 24px 0 0;
    435435    margin: 1.714285714rem 0 0;
    … …  
    593593
    594594/* Sidebar */
    595 #secondary aside {
     595.widget-area .widget {
    596596    margin-bottom: 48px;
    597597    margin-bottom: 3.428571429rem;
    598598}
    599 #secondary aside h3 {
     599.widget-area .widget h3 {
    600600    margin-bottom: 24px;
    601601    margin-bottom: 1.714285714rem;
    602602}
    603 #secondary aside p,
    604 #secondary aside li {
     603.widget-area .widget p,
     604.widget-area .widget li {
    605605    font-size: 13px;
    606606    font-size: 0.928571429rem;
    607607    line-height: 1.846153846;
    608608}
    609 #secondary aside a {
     609.widget-area .widget a {
    610610    color: #777;
    611611}
    612 #secondary aside a:hover {
     612.widget-area .widget a:hover {
    613613    color: #21759b;
    614614}
    … …  
    885885    padding: 6px 10px 6px 0;
    886886}
    887 #content article {
     887.site-content article {
    888888    padding-bottom: 24px;
    889889    padding-bottom: 1.714285714rem;
    … …  
    913913-------------------------------------------------------------- */
    914914
    915 .archive #content .archive-header,
     915.archive .site-content .archive-header,
    916916.search .page-header {
    917917    margin-bottom: 48px;
    … …  
    10451045-------------------------------------------------------------- */
    10461046
    1047 #comments-title {
     1047.comments-title {
    10481048    margin-bottom: 48px;
    10491049    margin-bottom: 3.428571429rem;
    … …  
    10531053    font-weight: normal;
    10541054}
    1055 #comments article {
     1055.comments-area article {
    10561056    margin: 24px 0;
    10571057    margin: 1.714285714rem 0;
    10581058    overflow: hidden;
    10591059}
    1060 #comments article header {
     1060.comments-area article header {
    10611061    margin: 0 0 48px;
    10621062    margin: 0 0 3.428571429rem;
    … …  
    10641064    position: relative;
    10651065}
    1066 #comments article header img {
     1066.comments-area article header img {
    10671067    float: left;
    10681068    padding: 0;
    10691069    line-height: 0;
    10701070}
    1071 #comments article header cite,
    1072 #comments article header time {
     1071.comments-area article header cite,
     1072.comments-area article header time {
    10731073    display: block;
    10741074    margin-left: 85px;
    10751075    margin-left: 6.071428571rem;
    10761076}
    1077 #comments article header cite {
     1077.comments-area article header cite {
    10781078    font-style: normal;
    10791079    font-size: 15px;
    … …  
    10811081    line-height: 1.6;
    10821082}
    1083 #comments article header time {
     1083.comments-area article header time {
    10841084    line-height: 1.714285714;
    10851085    text-decoration: none;
    … …  
    10881088    color: #5e5e5e;
    10891089}
    1090 #comments article header a {
     1090.comments-area article header a {
    10911091    text-decoration: none;
    10921092    color: #5e5e5e;
    10931093}
    1094 #comments article header a:hover {
     1094.comments-area article header a:hover {
    10951095    color: #21759b;
    10961096}
    1097 #comments article header cite a {
     1097.comments-area article header cite a {
    10981098    color: #444;
    10991099}
    1100 #comments article header cite a:hover {
     1100.comments-area article header cite a:hover {
    11011101    text-decoration: underline;
    11021102}
    1103 #comments article header h4 {
     1103.comments-area article header h4 {
    11041104    position: absolute;
    11051105    top: 0;
    … …  
    11211121    border: 1px solid #007cbd;
    11221122}
    1123 #comments article p {
     1123.comments-area article p {
    11241124    margin: 24px 0;
    11251125    margin: 1.714285714rem 0;
    11261126    line-height: 1.714285714;
    11271127}
    1128 #comments li.bypostauthor cite span {
     1128.comments-area li.bypostauthor cite span {
    11291129    margin-left: 5px;
    11301130    margin-left: 0.357142857rem;
    … …  
    12201220-------------------------------------------------------------- */
    12211221
    1222 .page-template-homepage-php #content article {
     1222.page-template-homepage-php .site-content article {
    12231223    border: 0;
    12241224    margin-bottom: 0;
    12251225}
    1226 .page-template-homepage-php #secondary {
     1226.page-template-homepage-php .widget-area {
    12271227    clear: both;
    12281228    float: none;
    … …  
    12321232    border-top: 1px solid #ededed;
    12331233}
    1234 .page-template-homepage-php #secondary aside li {
     1234.page-template-homepage-php .widget-area .widget li {
    12351235    margin: 8px 0 0;
    12361236    margin: 0.571428571rem 0 0;
    … …  
    12421242    list-style-position: inside;
    12431243}
    1244 .page-template-homepage-php #secondary aside li a {
     1244.page-template-homepage-php .widget-area .widget li a {
    12451245    color: #777;
    12461246}
    1247 .page-template-homepage-php #secondary aside li a:hover {
     1247.page-template-homepage-php .widget-area .widget li a:hover {
    12481248    color: #21759b;
    12491249}
    1250 .page-template-homepage-php #secondary aside.widget_text img {
     1250.page-template-homepage-php .widget-area .widget_text img {
    12511251    float: left;
    12521252    margin: 8px 24px 8px 0;
    … …  
    12581258-------------------------------------------------------------- */
    12591259
    1260 .widget ul ul {
     1260.widget-area .widget ul ul {
    12611261    margin-left: 12px;
    12621262    margin-left: 0.857142857rem;
    … …  
    13131313        width: 80%;
    13141314    }
    1315     #page {
     1315    .site {
    13161316        margin: 0 auto;
    13171317        max-width: 960px;
    … …  
    13191319        overflow: hidden;
    13201320    }
    1321     #primary {
     1321    .site-content {
    13221322        float: left;
    13231323        width: 65.104166667%;
    13241324    }
    1325     body.page-template-full-width-page-php #primary,
    1326     body.page-template-homepage-php #primary,
    1327     body.single-attachment #primary,
    1328     body.full-width #primary {
     1325    body.page-template-full-width-page-php .site-content,
     1326    body.page-template-homepage-php .site-content,
     1327    body.single-attachment .site-content,
     1328    body.full-width .site-content {
    13291329        width: 100%;
    13301330    }
    1331     #secondary {
     1331    .widget-area {
    13321332        float: right;
    13331333        width: 26.041666667%;
    … …  
    13531353        width: 79.666666667%;
    13541354    }
    1355     .page-template-homepage-php #content,
     1355    .page-template-homepage-php .site-content,
    13561356    .page-template-homepage-php article {
    13571357        overflow: hidden;
    … …  
    13651365        width: 47.916666667%;
    13661366    }
    1367     .page-template-homepage-php #secondary aside {
     1367    .page-template-homepage-php .widget-area .widget {
    13681368        float: left;
    13691369        width: 51.875%;
    … …  
    13711371        margin-bottom: 1.714285714rem;
    13721372    }
    1373     .page-template-homepage-php #secondary aside:nth-child(even) {
     1373    .page-template-homepage-php .widget-area .widget:nth-child(even) {
    13741374        float: right;
    13751375        width: 39.0625%;
    … …  
    13841384        background-color: #e6e6e6;
    13851385    }
    1386     body #page {
     1386    body .site {
    13871387        padding: 0 40px;
    13881388        padding: 0 2.857142857rem;
    … …  
    13961396        background-color: #fff;
    13971397    }
    1398     body.custom-background-empty #page,
    1399     body.custom-background-white #page {
     1398    body.custom-background-empty .site,
     1399    body.custom-background-white .site {
    14001400        padding: 0;
    14011401        margin-top: 0;
    … …  
    14251425        box-shadow: none;
    14261426    }
    1427     #page {
     1427    .site {
    14281428        clear: both !important;
    14291429        display: block !important;
    … …  
    14491449        display: none;
    14501450    }
    1451     nav.site-navigation {
     1451    nav.main-navigation {
    14521452        display: none;
    14531453    }
    1454     #main {
     1454    .wrapper {
    14551455        border-top: none;
    14561456        box-shadow: none;
    14571457    }
    1458     #primary {
     1458    .site-content {
    14591459        float: left;
    14601460        margin: 0;
    14611461        width: 100%;
    14621462    }
    1463     #content {
     1463    .site-content {
    14641464        margin: 0;
    14651465        width: auto;
    14661466    }
    1467     .singular #content {
     1467    .singular .site-content {
    14681468        margin: 0;
    14691469        width: 100%;
    … …  
    14751475        display: none;
    14761476    }
    1477     #content nav {
     1477    .site-content nav {
    14781478        display: none;
    14791479    }
    … …  
    14811481    .singular .entry-content,
    14821482    .singular footer.entry-meta,
    1483     .singular #comments-title {
     1483    .singular .comments-title {
    14841484        margin: 0;
    14851485        width: 100%;
    … …  
    15091509        display: none;
    15101510    }
    1511     #secondary {
     1511    .widget-area {
    15121512        display: none;
    15131513    }
    … …  
    15281528        width: 39px;
    15291529    }
    1530     #comments article header cite,
    1531     #comments article header time {
     1530    .comments-area article header cite,
     1531    .comments-area article header time {
    15321532        margin-left: 50px;
    15331533        margin-left: 3.57142857rem;
Note: See TracChangeset for help on using the changeset viewer.