Simone is a new free WordPress theme designed and developed by lynda.com staff author Morten Rand-Hendriksen.

Simone is available from the WordPress Theme Directory and from the theme installer in your WordPress site. You can download the most current version directly from GitHub by following this link.

The theme is based on _s (Underscores) and features future-forward web design and development standards. All the buzz-words are covered: Responsive web design, accessible menus, screen-focussed typography and font-scaling, HTML5 markup, high-resolution support through CSS and icon font graphics for that crisp and clear “Retina-ready” look, the list goes on.

The primary focus when designing and building Simone was putting the content front and center. This is achieved through the use of large easily legible fonts that scale based on screen size and by placing the content in the middle of the screen whenever possible. Wider screen space is utilized to its full extent by centering the featured image and main content, breaking post meta out of the content, sticking the right-hand sidebar to the right edge of the screen with the remaining content centered, and allowing blockquotes and images aligned left and right to break out of the main stream and get a pull-quote effect.

Features

Customizer options

Extended options available from the Customizer:

  • Header background color
  • Header text color
  • Link color (changes link colors throughout the site including site title. Also sets color of .border-custom class.)
  • Optional Header image of 1280px x 300px can be displayed in combination with title and tagline or on its own.

Optional Social Media menu

The header features an optional social media menu which is displayed on the far right of the menu area. Social media icons from Font Awesome are automatically generated based on the URLs of different social media services so a link menu item with a Twitter URL will automatically show the Twitter icon etc. To activate the menu simply create a new menu and assign it to the Social Menu template location.

The social menu is inspired by this article by Justin Tadlock.

Social networks currently supported:

  • Dribble
  • Facebook
  • Flickr
  • Github
  • Google+
  • Instagram
  • LinkedIn
  • Pinterest
  • Tumblr
  • Twitter
  • Vimeo
  • YouTube

When a network is not supported an external link icon is displayed.

Widgetized areas

By default Simone has a one-column centered layout. When widgets are assigned to the Sidebar the Simone will run with a two-column layout. The default page template has the sidebar applied. An optional no-sidebar template is also provided.

The Recent Posts, Recent Comments, and Archive widgets have icon font styling applied to clearly indicate to the visitor what type of content is presented. Custom styling is also applied to the Custom Menu and RSS Feed widgets.

The footer widgetized area is displayed in a responsive Masonry tiled layout when the document width allows it.

Simone has two widgetized areas available:

  • Optional Right sidebar, max content width 300px.
  • Footer, max content width 320px.

Editor styles

Simone has built in editor styles that ensure the appearance of your content in the post and page editors is as close to the appearance of the content on the live site as possible.

Featured Images

Posts and pages can have Featured Images. On single posts and pages max Featured Image (Post Thumbnail) size is 1060px x 650px. On index pages the featured image is displayed in 780px x 250px hard crop.

Pull quote blockquotes

When using blockquotes the user can opt to add the .alignleft or .alignright classes to the blockquote tag. The blockquote will turn into a left- or right-aligned pull quote when the document width allows for it. On wide screens the quote will be pulled out of the frame of the content to float to the left or right.

Blockquote citations

Blockquotes support the <cite> tag which displays in a smaller sans-serif font aligned right and below the quote.

Post Formats

Standard and Aside post formats are supported. Asides are displayed without headings or meta content in index pages. All other displays are identical with Standard posts.

Proper paging, single post, and paged comments navigation

On index pages proper paged navigation is displayed on the bottom of each index clearly indicating where the visitor is in relation to all published material.

On single posts navigation links with the titles of the previous and next posts are displayed.

In the event of paged comments similar comment navigation is provided at the bottom of the comments section.

Helpful 404 and no search results pages

When a visitor lands on the 404 (nothing found) page or makes a search with no results she is presented with a helpful message explaining what went wrong, a search field to make a new search, and a list of the 6 most recent published posts.

Extras

Image border classes

Simone ships with three border options for images and other elements that can be applied by adding a class to the desired element. The classes add a 1px solid border around the current element. The classes are .border-black (black), .border-gray (#b9b9b9 or 25% gray), and .border-custom (defaults to header color but is overridden by custom link color in Customizer). These classes are added to allow the user to add borders in a semantic and standards based way.

Friendly comment moderation

When a visitor leaves a comment that is held for moderation she is met with a friendly note highlighted in green rather than a warning.