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)
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.
Several blank index.php files are used to prevent some servers from displaying the directory contents.
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.
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.
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.
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 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.
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.
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.
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:
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= selectors
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:
home.phpfooter-thanks.php
That screenshot.png shows up in the Theme Details window:
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:
