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)
Four Home Pages
Theme Files for Home Pages
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.
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.
index.php files are used to prevent some servers from displaying the directory contents.
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
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
All of the
text font is sans serif.
header image rotates through a group of eight JPGs located at the end of this path: twentyeleven > images > headers
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.
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.
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.
Theme 2011 (small)
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.
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.
Theme 2012 (medium)
Full width is 1000px, beyond which the margins expand to fill the window.
Theme 2012 (wide)
twentythirteen uses a display area up to 1600px before it adds margins to the page.
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
Theme 2013 (wide)
Narrow the window, and navigation goes from 4 columns to 3.
Theme 2013 (medium 1)
Two columns for navigation.
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.
Theme 2013 (narrow)
Again, as with twentytwelve, theme
twentyfourteen does not show a header image as part of the default layout.
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.
Theme 2014 (narrow)
Widen the window to get the
Theme 2014 (medium 1)
admin bar shows. Page menu text shows.
Theme 2014 (medium 2)
submenu, and navigation is on the left side.
Theme 2014 (wide)
Display area at full width is 1260px, aligned left. Margin is added on the right as the window expands.
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.
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.
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:
Many of the class selectors in the four home pages appear several times. In the lists below, the duplicates have been removed for readability:
Quiz: Why have the ie6, ie7, and ie8 selectors in the
twentyeleven theme changed from ID to CLASS in the next three themes?
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
And, the font styles are different:
* 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.
Twentyeleven gives you the option to place the navigation side-bar left or right:
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:
To add some additional modification, make a new template file to change the footer. The child theme directory looks like this:
That screenshot.png shows up in the Theme Details window:
Using our sample child-theme, as the screen/media width goes from greater than 800px to less than, the layout changes:
Going from greater than 600px to less than, the page menu list turns into a button, and the side-bar goes below.
On the left is an example of posts using the twentytwelve theme.
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:
It is the simplest code for a child theme (although in this example we changed the path of the style.css file).
In the code after the import of the style.css file, you can add your own css:
Selectors of Twentysixteen
CSS Rule Structure
Next we’ll look at more complicated code.