Layout in the WordPress Twenty Sixteen theme

I'm going to make some changes to a child theme of the WordPress Twenty Sixteen theme. It's currently one of my favorite starting points when theming in WordPress. It is simple but not plain, the border and strong headlines are modern, and it doesn't look like everyting else right now so it won't go out of style in a couple years.

Making changes or additions to a WordPress theme is often difficult because there is a lot going on with how the elements work together to create the layout. I'll start by taking a couple hours to read through the code and understand all the elements, what they are doing and how they work together so working with the theme is less of a fight.

This post is a bit of an experiment. I'll list out divs you would come across when inspecting a page that uses this theme, and explain how they affect layout. This mimicks the process I went through when figuring out how the theme works.

Layout by element

Note: I'm using a bulleted list to show each element and nested bullets will describe what you need to know about it and list nested elements inside of it. I'm not 100% sold on this presentation since it doesn't let me easily include blocks of code but it's a good first try at documenting the information. It is useful to inspect a Twenty Sixteen page and use this guide in another window as it explains how the elements work together.

tl;dr
Margins are controlled by percentage in this theme. .site-content is the main container. .content-area width changes depending on if there is a sidebar.

• body
• The theme has a border on all sides of the browser window. The border is the body itself on the sides; there are body::before and body::after elements that are position: fixed that make the border at the top and bottom.
  • .site
    • Margins on .site show the body and create the border.
    • .site-inner
      • It has a max-width of 1320px that constrains the layout so it doesn't expand forever.
      • .header
        • Header layout uses flex box.
        • It has padding set in percentage, which changes with screensize and sets its layout dimensions inside .site-inner
        • .site-content
          • This is the main content container (as in the content of pages and posts). All posts and pages are in here.
          • It has side padding set in percentage. This is the main padding for the content inside the border
          • .content-area
            • This is the content area for articles and a sidebar if you have one.
            • Twenty Sixteen has an optional sidebar. If you have no sidebar it has .no-sidebar and a width of 100% (100% of .site-content). If there is a .sidebar, width is 70%
            • .sidebar
              • If a sidebar is enabled, it is width: 25%
            • .site-main & .site-main > article
              • These have bottom margin but no other layout rules that we need to worry about.
              • .entry-header
                • The margins for .entry-header and .entry-content line up to create the article.
                • Side margins here start to constrain content to create the article shape. Margins are in % and change via min-width media queries.
                • If you were going to change the article width, you'd change the margin percentages on .entry-header, .entry-summary, and .entry-content.
              • .entry-summary
                • Same side margin rules as .enry-content and .entry-header (the margins for all 3 of these are declared in the same rule)
              • .post-thumbnail
                • This is the Featured Image. It will show at up to 1200px. It isn't constrained by the .entry-content margins which is what allows it to overhang an article. It's limit is .site-content.
              • .entry-content
                • This is where the real complication is. If you are working with a post or a page, this is where the content will go. .entry-content and the div that follows it, .entry-footer are float: left. In the mobile view, the footer is below the content. In the desktop view they are still both floated left with the footer technically after the content. But the margins are moved around so the footer appears to be before the content.
                • To break this down, for .site-content, If the window is > 61.5625em & article:not(.type-page); float: left; (both this and .entry-footer float left); margin-right: -100%; (this pulls .entry-footer to the left, aligning it with the title)
                  margin-left: 34.99999999%; (this creates the space on the left of the content for the footer)
                  width: 50.00000001%; (50% of .site-content)
                • img.below-entry-meta for images larger than 840px
                  • Images in the post wider than or equal to 840px overhang the column. They will have a .size-full class but this isn't what applies the style.
                  • .below-entry-meta has the css rules margin-left: -40%; max-width: 140%. Again we are using percentage to set layout.
                  • This overhang is only applied > 61em (removing that one style gets rid of the overhang)

After doing this explication of the layout, creating the testimonials shortcode was much easier than other changes I've made. It's epecially handy since this particular theme has things lining up in weird ways so it's hard to tell how they work together. The above notes will also be useful for my next changes.