Category Archives: Themes

00) Contents

This is a comparison of four default WordPress themes, twentyeleven, twentytwelve, twentythirteen, twentyfourteen – how they are different, and how they are surprisingly alike; followed by some talk about child themes.

CONTENTS (scroll down in the Themes category, or skip to the post)

01) Installed Files 

02) Theme 2011 

03) Theme 2012 

04) Theme 2013 

05) Theme 2014 

06) Responsive Media 

07) Four Home Pages 

08) Theme Files for Home Pages 

09) CSS Selectors 

10) Post Styles 

11) Child Themes 

12) Options

13) Responsive Results 

14) More Information 

Themes (continued)

01) Installed Files

Latest installation of WordPress (Version 4.1.1) has a file structure not much different from previous versions. This is what you will see after unpacking the zip file.

411files

Three themes are included, with twentyfifteen being activated as default. I later added another theme, twentyfifteen-child, for experimentation, and then twentyeleven and twentytwelve for comparison purposes.

Two plugins are included.  Akismet does an excellent job of diverting spam, and hello.php is a simple demo plugin.

Several blank index.php files are used to prevent some servers from displaying the directory contents.

02) Theme 2011

window
Theme 2011

Title and subtitle in upper right.

There are links to all the pages in the menu bar. Home page defaults to the stack of the posts, most recent at top. Here, in our virgin installation, there is only the one.

Notice that there are two search boxes.

The number of comments shows in an iconic balloon, and in the string “Posted in Uncategorized | 1 Reply” below the post.

Navigation side-panel is to the right.

The string “Proudly powered by WordPress” is centered in the footer.

All of the text font is sans serif.

The header image rotates through a group of eight JPGs located at the end of this path:  twentyeleven > images > headers


Log-in as Administrator, and you will see a bar with icon and text hot-links appear at the top. There is also an edit button to the lower right of each post.

window1
Theme 2011 edit

The header image will shrink gradually as you narrow the page. At  a certain width, the layout changes. Navigation goes from the side to below the posts.

window2
Theme 2011 (medium)

Shrink the page width more and the admin bar shows only icons. Shrink more and the W icon disappears and next the font size decreases.

window3
Theme 2011 (small)

 

03) Theme 2012

Activating the next theme, twentytwelve, shows some javascript in action. The menu bar of pages is replaced by a button that will show the available pages when you click it. Compare this feature to that of twentyeleven which would wrap the string of page links to the next line if it didn’t fit the narrow width.

A header image is not part of the default layout, but can be added easily.

Did you notice that the title and subtitle are aligned center? (Although the footer , not visible here, is always aligned left.)

Also, the text string below the post is different, with the Edit link appended to it.

window1
Theme 2012 (narrow)

Widen the page and the W link reappears in the admin bar, the page menu bar expands out of its button, and the navigation goes to the side. Notice the footer beginning to show.

window2
Theme 2012 (medium)

Full width is 1000px, beyond which the margins expand to fill the window.

window3
Theme 2012 (wide)

 

04) Theme 2013

Theme twentythirteen uses a display area up to 1600px before it adds margins to the page.

The header displays in the default layout. Three images are included: circle, star, and diamond. (Curiously, each of these PNGs is 3200 pixels wide, but does not take much file space.)

The menu bar shows the pages, but not the home page which is accessed by clicking on the title.

Search is an icon aligned right on the menu bar, and the second search is in navigation which is always below the posts, above the footer.

Post title text is a serified font.

window4
Theme 2013 (wide)

Narrow the window, and navigation goes from 4 columns to 3.

window3
Theme 2013 (medium 1)

Two columns for navigation.

window2
Theme 2013 (medium 2)

One column for navigation, and the list of pages in the menu bar can be seen by clicking the  drop-down button.

window
Theme 2013 (narrow)

 

05) Theme 2014

Again, as with twentytwelve, theme twentyfourteen does not show a header image as part of the default layout.

The drop-down menu is an icon to the right of the search icon, on the right of the title bar. No subtitle is shown at this width.

No post content is shown; only the post title and date line.

window4
Theme 2014 (narrow)

Widen the window to get the post content.

window3
Theme 2014 (medium 1)

Text in admin bar shows. Page menu text shows.

window2
Theme 2014 (medium 2)

Finally, the submenu, and navigation is on the left side.

window1
Theme 2014 (wide)

Display area at full width is 1260px, aligned left. Margin is added on the right as the window expands.

06) Responsive Media

Screen and Print are the media attributes addressed in these style sheets. There are also aural, braille, handheld, projection, tty, tv, and even 3d-glasses.

Here are the conditionals found near the bottom of each theme’s style.css.

Note: There is a subtle difference between width and device-width.

2011
Theme 2011
2012
Theme 2012
2013
Theme 2013
2014
Theme 2014

The last theme seems to go overboard, considering that the changes in appearance at the various widths, in areas such font size, margins, padding, and borders are so subtle.

08) Theme Files

dir/template
2013
2014
2015
404.php
x
x
x
archive.php
x
x
x
author-bio.php
x
x
author.php
x
x
category.php
x
x
comments.php
x
x
content-aside.php
x
x
content-audio.php
x
x
content-chat.php
x
content-featured-post.php
x
content-gallery.php
x
x
content-image.php
x
x
content-link.php
x
x
x
content-none.php
x
x
x
content-page.php
x
x
content-quote.php
x
x
content-search.php
x
content-status.php
x
content-video.php
x
x
content.php
x
x
x
css
x
x
x
featured-content.php
x
footer.php
x
x
x
functions.php
x
x
x
genericons
x
x
x
header.php
x
x
x
image.php
x
x
x
images
x
x
inc
x
x
x
index.php
x
x
x
js
x
x
x
languages
x
x
x
pagetemplates
x
page.php
x
x
x
readme.txt
x
rtl.css
x
x
x
screenshot.png
x
x
x
search.php
x
x
x
sidebar-content.php
x
sidebar-footer.php
x
sidebar-main.php
x
sidebar.php
x
x
x
single.php
x
x
x
style.css
x
x
x
tag.php
x
x
taxonomy-post_format.php
x
x

09) CSS Selectors

ID selectors are supposed to be unique, i.e., only one appearance per HTML document. These are the ID selectors found within each of the four theme homepages:

id
id= selectors

Many of the class selectors in the four home pages appear several times. In the lists below, the duplicates have been removed for readability:

class
class= selectors

Quiz: Why have the ie6, ie7, and ie8 selectors in the twentyeleven theme changed from ID to CLASS in the next three themes?

10) Post Styles

For the purpose of an example, look at how the four themes display their posts in different ways.

First, the order of the elements are different:

sequence of post elements
sequence of post elements

And, the font styles are different:fourposts* To get the categories to show in 2014, it was necessary to add a new category. When all the posts are UNCATEGORIZED, no category will appear on any of the posts.

 

11) Child Themes

On the left is an example of posts using the twentytwelve theme.

2012-2013post

The two post on the right are the same posts using a child theme. The style is that of twentythirteen, but the sequence of elements still follows twentytwelve’s template.

The above example was created using a child theme which consists of nothing more than a style.css file in a folder named twentytwelve-child. The code looks like this:

stylecode1

It is the simplest code for a child theme (although in this example we changed the path of the style.css file).

Next we’ll look at more complicated code.

 

12) Options

Twentyeleven gives you the option to place the navigation side-bar left or right:

themeoptions

What if you wanted to use the twentytwelve theme, and have the navigation on the left? And just to be different, let’s have it do that only when the screen width is greater than 800px.

One way to do it would be with a style.css file in a child theme having code like this:

stylecode2

To add some additional modification, make a new template file to change the footer. The child theme directory looks like this:

childfiles

homecode
home.php
footercode
footer-thanks.php

That screenshot.png shows up in the Theme Details window:themedetails

 

 

13) Responsive Results

Using our sample child-theme, as the screen/media width goes from greater than 800px to less than, the layout changes:

800-600

Going from greater than 600px to less than, the page menu list turns into a button, and the side-bar goes below.

600-599