A Minimal WordPress Site Based on TwentyTen Five

This WordPress theme is used for www.sockcandy.com.

For a recent WordPress blog that I designed, I used a free HTML5-enhanced basic template called TwentyTenFive as a starting point for the theme.

Resources

The TwentyTenFive theme is downloadable here: www.twentytenfive.com

Here is a Smashing Magazine article describing the features of this theme.

Theme HTML changes

I only needed to make a few changes to the basic TwentyTenFive template files to adjust this default theme to the layout for my site. The major changes included removing the masthead (part of header.php), moving the sidebar to the left (in index.php), and customizing the menu systems in the sidebar (in sidebar.php).

Housekeeping

I went through and removed some of the unsavory default aspects of TwentyTen, such as the left and right HTML arrows (← →«»). Ew, gross!

Simple page titles

I changed the page <title> to lowercase, and formatted it so that it wouldn’t have any arrows or divider lines. The title displays like this:

page name. blog name. page number.

or, if you are on the homepage:

blog name. tagline. page number.

If you would like to do something similar, open the header.php file, and edit inside the <title> tag.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*
* Print the tag based on what is being viewed.
*/
global $page, $paged;

// Add the page name.
echo strtolower(wp_title( '', false));
if(wp_title(' ', false)) { echo '. '; }

// Add the blog name.
bloginfo( 'name' );

// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description &amp;&amp; ( is_home() || is_front_page() ) )
echo " $site_description";

// Add a page number if necessary.
if ( $paged &gt;= 2 || $page &gt;= 2 )
echo ' ' . sprintf( __( 'page %s.', 'twentyten' ), max( $paged, $page ) );

Notice that I’m not using the wp_title $sep parameter to create the period after the page name. This is because I do not want there to be extra spacing before the period, and the wp_title function will add that unwanted space if you give it a $sep value.

Trying to figure it out

For the image posts, this template uses figure and figcaption to display the image if there is a caption given. In the backend of WordPress, you simply add your figcaption copy in the “Caption” dialogue box.

I am experiencing a little glitch with this feature. When I edit the “Caption” text within the text editor, if I format the text in any way (such as making a word bold, or making a link) and save the post, the formatting is lost when the page refreshes. It’s not a critical problem right now, but I hope to get this fixed when I have a chance.

Font-face

I added TypeKit’s free font Museo Sans @font-face for the heading and button texts.

Hold on to your socks

I added a plugin called Hold Your Color, which allows you to tag your posts with colors.

http://wordpress.org/extend/plugins/hold-your-color/

It also generates a color palette widget using hex-codes that you define. This palette can be used like a menu, which I did, so that users can navigate the posts by color.

The documentation is a little difficult to understand for this plugin, because some of the terms are confusing. For example, the variable $bulls threw me off at first. “$bulls” are supposed to be “bullets” - but not HTML bullets as you might expect! They are actually href links that are styled into square color swatches.

I had a serendipitous moment when I saw that this plugin developer is named Under-Warz. This made me happy, since socks are underwarz. Kind of.