Simone – Responsive, Accessible, Content Focussed, Free WordPress Theme

Simone - a free accessible responsive WordPress theme

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, accessibility support, internationalization, RTL language support, 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

Language Support

Simone is fully translatable for LTR and RTL languages through standard WordPress internationalization (i18n). Out of the box the theme ships with English as the default language and translation support for the following additional languages:

  • Catalan (CA via Faleg)
  • Chinese (simplified) (zh_CN via Jerry Wang)
  • Dutch (nl_NL via Richard van Naamen)
  • Finnish (fi via Sami Keijonen)
  • French (fr_FR via Christine Rondeau)
  • German (de_DE via Caspar Hübinger)
  • Hungarian (hu_HU via Beata Kozma)
  • Italian (it_IT via Giorgio Riccardi)
  • Norwegian Bokmål (nb_NO)
  • Persian / Farsi (fa_IR via Emad Navy)
  • Portugese (pt_PT via João Gomes)
  • Russian (ru_RU via Vladimir Samoletov)
  • Spanish (es_ES via Juan Pablo)
  • Swedish (se_SE via Ted Derneby)

More translations are forthcoming in regular updates. If you want to contribute your own language translations to Simone feel free to submit a pull request to the Github repo.

Customizer options

Extended options available from the Customizer:

  • Background color and background image on index and archive pages (new in version 2.0)
  • Display excerpts or full content on index and archive pages (new in version 2.0)
  • Sidebar position right (default) or left (new in version 2.0)
  • 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
  • Foursquare
  • Github
  • Google+
  • Instagram
  • jsFiddle
  • LinkedIn
  • Pinterest
  • Reddit
  • Soundcloud
  • Stack Overflow
  • Tumblr
  • Twitter
  • Vimeo
  • Vine
  • Yelp
  • YouTube
  • WordPress.com

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 default position of the sidebar is hard right meaning it will stick to the right side of the screen. The position can be changed to hard left in the Customizer.

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 sidebar, max content width 300px (set position in Customizer).
  • 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.

Licenses and External Assets

Simone is distributed under the terms of the GNU GPL v2

Simone’s code base started out as _s as it were on February 6, 2014.

The theme features three custom fonts:

The accessible main menu is powered by Superfish (MIT License).

Responsive triggers for Superfish and Masonry powered by Enquire.js (MIT License).

Namesake

Simone is named after renowned philosopher and feminist Simone de Beauvoir.

Contribution and future development

Simone is open sourced and in continuous development. The current development version of Simone is available on GitHub where you can fork it, build on it, and contribute back if you have a new feature you want to share.

If you have feature requests leave them under Issues on GitHub.

107 replies on “Simone – Responsive, Accessible, Content Focussed, Free WordPress Theme”

Hello,

I have a problem with too much H1 tags used in the themes, I tried to change the H1 tag from menu-toggle:

to use H2 tag instead:

After I made this change the menu on small devices wasn’t working.

How can I fix this?

Thanks,
Markos

Thanks so much Morten for Simone! This is the best accessible free theme so far.
I’m using it to build my new website but noticed that social media icons don’t show up on the menu bar. I tried everything I could find in the Internet but can’t fix it. I really want the social media to be on the main menu bar. Any suggestions? Thanks! M

have you gotten any answers to your question? b’cause mine didn’t show up too.

hi morten,
i like your theme and right now i am trying to set up my layout with it which works fairly well.
the only problem i struggle with is that the 4 footer widgets behave in a way i don’t want them to: right now, the 4 footer widgets are only shown in one row when the window has a width of 1846 px. to the left and right of the widget row there is a padding of almost 200px. i’d like to have the window width at 1200 px showing all 4 widgets in a row and reduce the side padding significantly.
obviously the width of the footer widgets and the padding of the widget row are calculated somewhere i could not find out. is there a way to get control over the dimensions concerning the footer and its containing widgets?

.footer-widgets .widget {
float: left;
width: 320px;
margin: 0 4rem 8rem 4rem;
}
this says, put a widget to the left -> pad 4rem to the right, then put another widget to the left^2. if you want it to fit at 1200, i would probably remove the left and right padding and change the width to 300px. good luck!

How do I change the font-family for posts only? Not pages.

Thank you very much.

Hi Morten,

Thanks for a great wordpress them. I am using WordPress 4.2.4 with Bitnami Virtual Applicance. I am using the Simone them. I had a problem with Social menu. I did not see the checkbox for “Open link in a new windows/tab”. How can I fix this issue?

Morten,

I got my issue resolved. I am new with WordPress. Thanks again for your theme.

Great theme!

Is there an easy way to add three widgets to a single row within the footer? Whenever I add a third, it creates a second row. I’d like to have all three widgets contained within the same row to minimize the height of the footer.

Any suggestions?

Thanks!

Yes. Great theme, cheers. Can’t understand why its not one of the most used themes on wordpress, but I’m sure people will find it in time.
Pity its named after Simone de Beauvoir (perhaps you’d dedicate the next one to Kierkegaard?!)
har det bra!

For those of us taking the WP: Building Themes from Scratch with Underscores course on lynda.com, it would be nice to include the Post Format: Gallery post along with the associated images in the .zip download package.

Best regards

Hi,

Thank you for a great theme! I learned a heap from your lynda.com tutorial…

I am trying to get the page background image to be responsive – please assist.

Thanks,

Matthew

Hi Morten,

I have been a great fan of all your WordPress tutorials in Lynda library. To-day, I was watching your most recent tutorial on Building Child Themes.

In the video, you refer popper theme as parent theme for exercise project. You also mention that it is available in WordPress theme directory. As of to-day, I couldn’t find in the directory. Where could I download popper theme from? I would like to try out your exercises.

Thank You

Thank You. Popper, is a great theme for content presentation and I learned a lot from your child theme course.

I have been learning a lot from your tutorials. Now a days, sticky Navigation, seems a growing trend in popular sites including New York Times, Washington Post, Bloomberg News etc. Do you plan to have a short tutorial course in future?

I am so glad your first day of school was a success. I can only imagine the nerves, I’ve been out of my career for over 20 years. Sounds like you found a wonderful way to spend the day (and get paid!!) what could be better? Lovely weekend!

Hi

How can i change the time format on header of comments and posts to “d/m/Y” ?

Hello Morten – I’ve done many of your tutorials on Lynda.com, as such i use the Simone theme which is very elegant. Unfortunately the most current build seems to have some thing wrong with it/it’s css or perhaps the loop? The paragraphs inside the div.entry-content seem to blow out of the theme and things sort go get loopy. I’m very new so it’s hard to describe, but something is off with how the posts display in individual post views. Is there a way to get the previous build to work with?

Hi Morten,

first i want to thank for your tutorials at lynda.com.

So, I want to create a social menu as you did on my-simone theme.

first i creat social menu in functions.php.

Then I add the fonction “social_menu()” in template-tags.php, and I call it in header.php

function social_menu() {
if ( has_nav_menu( ‘social’ ) ) {
wp_nav_menu(
array(
‘theme_location’ => ‘social’,
‘container’ => ‘div’,
‘container_id’ => ‘menu-social’,
‘container_class’ => ‘menu-social’,
‘menu_id’ => ‘menu-social-items’,
‘menu_class’ => ‘menu-items’,
‘depth’ => 1,
‘fallback_cb’ => ”,
)
);
}
}

after creating my social menu it don’t show up !!

i tried also the method made by Justin Tadlock and it doesn’t work either.

I can’t find what I’m missing.

Many thanks for your help 🙂

A wonderful theme that we’re hoping to use for our charity, but is it possible to change the font? Serifed fonts are harder to read for those with sight problems.

Hello Morten,
You know that I use your theme in 2 websites. Today I have 2 problems :
Can you tell me if this problem about hx out of “main” is a problem and how to change it
(I don’t hnow what is hx )
and second problem : Every person who analyse the website says that H1 and H2 in the Header and again H1 in the title of the pages and the articles (so also in the menu) and again H1 in the widgets / make too much H1 in the same page. It’s bad for the referencement. What de you think about this ?
Thank’s a lot for answering
ColetteG from Paris

In french :
Alerte Problème détecté: Votre code HTML5 utilise la balise ‘main’, ce qui est une bonne chose. Mais vous avez des balises hx qui sont en dehors de votre zone ‘main’.
Résolution recommandée: Toutes vos balises hx devraient être dans la zone couverte par votre ‘main’, car elles doivent faire partie de la zone text principale de votre page.

Alerte Problème détecté: Votre page contient plus d’une balise h1. Ce n’est pas optimal
Résolution recommandée: Nous vous conseillons de ne garder qu’une seule balise h1 par page. Cela permet d’indiquer au moteur de recherche le sujet principal de votre page, en complément de la balise titre.

Is there any way to make the footer widgets smaller to get 6 across? The way I have it, my widget footer area is taking up way too much room on my site and it is not necessary for the widgets to be so large.

Thank you

I really like this theme, I’m using wordpress.com at the moment. The tagline for my header is grey, and I can’t change it. The picture I’m using is also grey. So it’s invisible. There doesn’t seem to be an option to change the color of the tagline. If it wasn’t for this, it would be nearly perfect. I’m aware that wordpress.com might be restricting me, and I might need to use wordpress.org to get access to all the features. Could that be the problem?
Also, I’m a beginning user, and I can’t seem to figure out how to get the sidebar to show up. I see it in the features though. Am I missing something? I want to put a widget there…

Morten: I love the Simone theme – but my post feed on right sidebar does not link to individual posts. When the link is clicked the site does go to the Posts page, but it says “page not found” at top of page – and it does not direct to the specific post. Can you lend me a hand? I am new at all of this…

hello
tank you for simone theme, but I have a problem in this theme, it is mobile navigation.
When I click on mobile navigation it still says noting move or hide.
I want it move or hide after clicking on. please help me to fix it
you wan check my web http://www.edvinautohuolto.fi

thank you, I really like this theme, I’m using wordpress.com at the moment. The tagline for my header is grey, and I can’t change it. The picture I’m using is also grey.