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

Simone is a new free WordPress theme designed and developed by 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.


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

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.


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).


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, on this page to present the characteristics of Simone, you develop nothing about accessibility ready… Why ?
Colette from Paris

This is a question more so than a comment, but I am new to and the fact that this theme is accessibility ready drew my attention to it.
The question I have is, is it possible to use css to change the body typeface (and colour) to increase contrast and make it usable by a mainly visually impaired audience of my site? I have tried already but changing the attributes inside the body tags doesn’t seem to do anything. … Any help would be greatly appreciated!

Hi, thanks for this amazing theme. I’ve trying to change the text name in header for a logo, but I can’t do it work (I’m not a designer). Can you help me to achieve this? Thanks!

Hi George did you figure out how to get the logo in the header? I’m trying to do the same thing.

Wow! What a difference. Previously I had the Eleven40 Child Theme from Studio Press installed on the Genesis Framework. Downloaded and Installed the Simone Theme and right out of the box several problems are solved. Is there going to be a Paid version of Simone?

Thank you for this great theme. Is there a way to have a smaller header, say 180 deep instead of 300 deep. I tried making the change in a new custom-header.php and placed it in an inc folder inside of my child theme but did not work. Thoughts?

Hi Morten.
Great theme and a great lynda tutorial! I look forward to using it for my projects.
How easy would it be to ‘sassify’ the styles for Simone or at least Underscores. Do you plan to do this at all?

Also, as of Aug 11, 2014, if you visit and click on “Advanced Options”, you’ll now find that you can check a box to add Sass support.

Thanks to you, Morten for an excellent theme and accompanying course to learn from 🙂

You are my favorite teacher on WordPress. However, there are two points I don’t like about Simone.

1. When displayed on large screen, say imac, 24 dell monitor, etc, sidebar is very far from the content. Main navigation is at far left and search box is at far right. I don’t quite understand this design and I prefer everything stay in the middle.

2. On single post pages, the picture under navigation will show strange grey grid background while other background is pure white. I know you use this background for home page, but only a very small area of this grey background shown on the single post pages makes it feel like error.

Still, very good classes on and learned a lot from you. Thank you.

Hi Cece, let me quickly answer your qualms about Simone:

  1. When designing Simone the purpose was to put the content in the physical center of the screen and push the sidebar away to make it not distract from the content. The choice of locking the sidebar to the right side was deliberate because the sidebar seldom if ever add value to the content itself. This is a rather unusual design decision but it is one I believe will become more prevalent in the future. The content that matters – the content itself – stay right in the middle unlike with pretty much every other theme with a sidebar.
  2. The grey grid background you see behind the Featured Image on single posts is also there for a reason to visually separate the image from the rest of the content. This is a fairly standard design technique that is used to accommodate large Featured Image areas because the user often uploads images that are not big enough and without a contrasting background the layout looks disjointed.

Simone is an opinionated theme with opinionated design that tries to do things a little differently. There are enough themes that look the same and I don’t think there is much point in me adding to that pile. That said I appreciate all feedback and I’m making constant updates to the theme. One such update may be to provide an option where the sidebar is displayed along side the content rather than all the way to the right.

Dear Morten,

first of all I want to appreciate your teaching at Very impressive and easy for beginners too.

The WordPress theme Simone is also very impressive.

Thank you for being such a sport.

My Favorite Mor10 >
After installing the theme “social sharing” Button are not displayed on right side bar…

Hy Mor10……
You are my favourate tutotr at “lynda library”.
I had many Ques… about web Development? And i have learnt all of your cources.
As the torrent sites like “kickass” “piratebay” and many others can be develop on wordpres?
plz make other many cources on other plateform like “joomla” “Druple” and many more!
Thanks a lot…

Dear Morten

Firstly, I would say ‘Simone’ is a great template and very appealing on the eyes.

I’m trying it out on my affiliate links site (though it’s designed for a different purpose).

How and where do I change width of the main content ? I would like to make use of some of the wide open space on the left. Will you please help me with some pointers.

Thanks in advance for your help.


Hey coach,hats off for job here,trying out with the theme at the moment, can i change the background colour or upload an image can i reduce the size of the header image,it seems wide

Thanks for being here and good success


Thank you for creating such a great launching pad for WordPress sites! I have used Simone for a handful of sites already, and what makes Simone so great is that I don’t have to completely go from the ground up, so a lot of the heavy lifting is already done, and even moments where I need to make quite a bit of tweaks are still much easier than if I would have started with only _s. Excellent work!

Hi, Morten,

Simone still remains one of the most impressive themes I’ve come across. I have one question due to an SEO commenting on the theme’s use: The SEO says that having the .title-box h1 and h2s across the entire site is likely harmful for SEO. I was under the impression that due to HTML5 structure that having the h1 and h2 for site branding was completely acceptable for SEO. Do you have any thoughts on this?

And as always, I admire you for your abilities, generosity, and attitude. Thanks for being a mentor!

If your “SEO” says the title box H1 and H2 titles are harmful for SEO, you should stop listening to that person. That is not at all accurate and disconnected from how search engines and HTML5 content hierarchies work.

The H1 through H6 headings are used to provide contextual hierarchy in the site. In a future version of Simone, the heading structure will change, but that is purely for semantic purposes and has nothing to do with SEO. As long as there is a clear hierarchy, Google and other search engines are not at all concerned with what markup you use. This is more of an accessibility issue than anything else, and that’s why I will change it in the future.

Hi Morten,
I have been following your most WordPress courses. Recently, I took your _s theme building course, designed my Khorunga theme as part of the course. My khorunga theme is very similar to your Simone except few glitches here and there which I could not get through the exercises.
In my site I am using modified version of Khorunga, using child-theme (header, fonts etc) but I had to cheat and modify the main theme files to modify background and feature images dimensions. I very much liked your entire design but the modifications I made were for testing my learning experience only. I would like to follow your updates would like to keep my theme updates as much as possible.
I thought to share this with you and congratulate you for doing a great job!

Hello Morten,
I viewed your Lynda class & downloaded Simone. However, on my large screen the sidebar still appears on the bottom as if it were a small screen. I can’t figure out where to change that. I keep returning to the videos but there isn’t anything about that specific issue.

I’m comfortable editing the CSS as needed & to some extent I can change the javascript. I haven’t watched the developer videos.

Hi Morten,

Thanks alot for this great theme and the tuts at!
I am playing around with the theme and are planning to use it for my own site real soon. While I was playing around I noticed there was no translation file for the Dutch language yet. So I created one and submitted it via your site.
Hope you will implement it in your next update.


On the no-sidebar layout, I would like the content area to be 1000 px. I have copied the no-sidebar.css and placed it in my theme and made the change there. I have added a functions.php to my theme changing the path to my no-sidebar.css and nothing had worked.

What is the correct way for increasing the size of the content area on the no-sidebar layout?


Great theme, thanks for putting it out there.

One issue I can’t seem to solve is when I view my site on a phone, there is a lot of blank space to the right that a user can scroll to. This trouble didn’t seem to pop up until I added a header image, and it doesn’t occur on tablets or desktops.

Has anyone else had this problem or know what is going on?

Thanks and again, nice work!

Hi, I really like Simone, but I have a question:

How can I make the header image occupy the whole screen, like you have on this page? In my case, the image doesn’t strech, and remains a 1200×300 with ugly white space to the sides. Thanks in advance

I had the same question, but I managed to get my header to occupy the whole screen and not have the white border around it by using a high resolution image. I had downloaded an image from seed prod and then uploaded it to my header and seemed to work. I’m still at a loss on how to do it with a normal image, but using a high resolution image seems to work.


I’m keen to follow any improvements you make to this theme. As it really is a very good reference for any theme builder looking for a solid foundation.

I’d love to see dates next to the version numbers in the readme.txt. I’m not sure if this is common practice. However it would be really helpful.

The Lynda course for this theme was excellent.
Thank You.


Hello,i use Child Themes, but it has some wrong about the style.

I put the code in Child Themes’s functions.php.

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style') );


I’m planning to use your theme, but want to replace the svg grid background by a gif version, because it gets flickering when scrolling in Firefox (Windows and Linux tested). Possibly some kind of redrawing issue with scrolling.

I created a child theme in WordPress, but I can’t figure out how to get working a “custom” version of the content-sidebar.css in the layouts sub-directory of the theme. Pushing the rules to modify in the style.css does not work (aside from the .single-post-thumbnail class which IS in the original style.css, but only working for articles pages, not home page or category listing, where the .site-content of the second css file apply).

How can I get my “additional” content-sidebar.css work over the original one ?

Thanks in advance.

The 2.0 version of Simone comes with Customizer options for custom background color and image. You can just swap out the default image with a new one in the Customizer – no need for a child theme any more.

Simone looks great and was an excellent theme update for our blog. Any options for increasing the size of Author photos? Would prefer option of larger images to put a face to the blog post(s). Is this possible with the recent update?

Hi mor10,
I really like this theme,but I am having trouble with featured image width.For some reason my featured image width is always 445px instead of 780px.Can you please help?

on my website
I have done the updated to the new version 2.0
But, all the text area is going to the left…
and I had build all in the previous version
Can you tell me how to do… like It was ?
(I have another website with your Simone :
I don’t updated… so you can see how it is…with the previous version)
And sorry if my english is not so good
Best regards
Colette from Paris

@ColetteG: I took a look at your site and I figured out what’s going on. Your child theme style.css file is a complete copy of the parent theme style.css file. That means you are sticking the old styles from the previous version on top of the new styles.

When you create a child theme style.css file you don’t need to copy all the styles from the parent over. Instead you add only the styles you want to change. Child theme stylesheets come in addition to the parent theme stylesheet rather than as a replacement. That’s what makes them so powerful.

What’s happening in your site is this: First the parent theme style.css is called. Then the layout styles (in your case /layouts/content-sidebar.css) are called. Then the child theme style.css file is called, and because that file is a copy of the original style.css, all the styles here override both the parent theme style.css and content-sidebar.css.

The easiest way to fix this is to clear out your child theme stylesheet and add back in only the elements you want to change from the original theme.

Thank you so much for answering… and sorry if I was empressed.
It is better like this… (somebody told to write all,that’s why I did )
To add on child theme is ok
but to remove I cannot do it
(for example I don’t want any uppercase in title box and in the Menu
I remove in parent theme because I don’t know how to do in child theme.
thank you
I like very much the Simone theme and also I’d choose it to built in accessibility for Les yeux de l’imaginaire that concern people visually impaired.

Ty so much for this great theme and tutorials. I’m curious to know if I can download and import the website content which you used in Building A One Page Style Site In WordPress tutorial

Dear Morten, thank you so much for designing this open source theme. I am a layperson who has a volunteer to work with me to re-create on WordPress (since the Joomla it’s built on is so out-of-date that it is a security risk and will soon not be able to be hosted!)…

We are a local charity. We have no funding to pay a developer! Our volunteer is not very up to speed at all on accessible sites. Basically we are trying to create a new version of disabilitybray that is accessible, but hard to find accessible themes on WordPress. We want tabs and to add social media feeds perhaps and make it a little less static, but it has to be accessible!

Do you know of any themes – I am getting a bit desperate here! We could pay for a theme too… any help you could give would be greatly appreciated…

Thanks so much,

I didn’t see a post about this, so if I am repeating I apologize in advance.

I have discovered that if all your posts are by a single author, then the blog index page (content.php) does not show the “Written by AuthorName”. However, if you look at a single post (content-single.php) the Author information does show.

When I inspect content.php, the author information is in the code for each post but there is a CSS rule hiding it. The CSS Rule from styles.css under the Meta Section (approx line 1358) is:

.updated:not(.published) {
display: none;

I solved this one of two ways:

1) Have a post that uses a second author
2) Remove the CSS that is hiding the author

What I have not been able to find is where the code is checking for a single author and applying the CSS Class that uses the style.

Have you already encountered this issue? Can you point me to where the code is checking for the blog index to have only one author and applying the Class? I just want to run it completely to ground for my education.

Thank you in advance!

site built using a child theme of Simone was working fine for about six months. Recently I noticed that the header background color was not running the full width—there was instead default dotted images showing up to the right and left of my header background image which is 1280 px wide. I can’t seem to figure out how to get the color back and get rid of those images. Looks like the same image that appears in posts in the default Simone theme. I have tried the customizer but to no effect.

Found the problem, someone in my group turned on the default background image and I just turned it off. Thanks for having a great site and building the Simone theme!

Hi Morten,
Hope you’re doing well.
I have an issue with Simone as well as two questions.
I use the MediaElement.js plugin to display audio content on my website. I’m also using this commercial theme on my website. It’s versatile; however, I want to switch to Simone as it’s much more accessible to me as a visually impaired individual.
However, when I switch to Simone, MediaElement.js doesn’t function normally. That is, many elements of the so-called “playback frame” are hidden and users, say, can no longer move backward/forward in the audio or alter the volume. I’m wondering what causes that or if there is a good solution to take care of it. MediaElement.js is a good plugin as it’s HTML 5-ready — something I prefer to flash at least as the default option. It works very well with my current theme. Do you recommend a better HTML 5 media plugin?
As for my questions:1. I’m wondering if there’s a way to get Simone to also display the summary for the very first post on the homepage. My final post appears fully on the homepage and I want to change that — if possible.2. Can we get Simone to keep a certain post on the homepage — preferably at the top of other posts? Sometimes I tend to post something whose importance is so high that I want to keep it on my homepage regardless of the status of the rest of my posts.
Your help would be much appreciated.

Yes, but you should create a child theme before you attempt it. Once you have a Simone child theme directory, copy the comments.php file from the parent theme directory to the child theme directory. Find the code comment_form(); (should be near the bottom of the file) and replace this section with:

$comment_fields = array(

'author' =>
'' . __( 'Name', 'domainreference' ) . ' ' .
( $req ? '*' : '' ) .

'email' => '',

'url' => '',
'fields' => apply_filters( 'comment_form_default_fields', $comment_fields )

Nice WordPress theme and have excellent features! Thanks a lot for sharing a write-up exploring a lot about theme – a WordPress theme generator! Another superb template creator is TemplateToaster. It is worth to style great and appealing website layouts. Try and give your reviews.

Hi Mor10, LOVE your lynda courses! Do you know when you will be releasing a new version of Simone? I’ve been following your “building a one page” course, and I’m having that problem with page and single-post content not centering correctly (I believe it’s the issue you flagged as a bug). Haven’t yet figured out how to override the problem, so am looking forward to the next version of Simone. Thanks!

Absolutely amazing job Morten! State of art. I found the code-snippets really helpful. Really thought over tutorial.

Hi Morten,
Have been following your building a one-page videos, and am having difficulty getting the menus to work correctly. I have a set of sub-menus that I’m trying to get working and they don’t show up. When I switch to any of the other installed themes the menus work as expected. Any pointer/suggestion would be more than welcome.

Thank you Morten for this theme! Thoroughly enjoyed the Lynda tutorial and learned so much from it. I’m wondering if there is a way to make the content area wider on the “no-sidebar” template. I’ve tried a few different things and am still having difficulty. Any help or tips would be appreciated.

Thank you again!

I’ve decided to build a new WooCommerce website based on Underscores (maybe Simone as the parent) and it would be great to get a Lynda tutorial on Ecom developer best practices.

I originally downloaded the Legenda theme from 8themes but the source code is an absolute mess and you are forced to mess with the parent files to do overwrites.
You’re the best WP developer around so it would be great to even get a few WooCommerce setup tips and maybe a handful of UX functions that you think every ecommerce site needs to have.

Just a suggestion . =-)

Scott, if you’re still wondering, @ he has some great tuts on setting up a few different Ecom platforms including Woo. Just a FYI.

Hi Morten

I have been looking at your theme for a while thinking that I will use it for my website. I have had it installed, and I miss a full width page template. Is there already such a page somewhere, or do I have to make it myself in a child theme.

From Mikael

I have made a new website for a client but before going live I have realised that when viewed on mobile (320px) I am seeing a large white space to the right which interferes with scrolling. I have sent a few emails about this but no reply. It really sucks as I have spent weeks building this site and looks great only to fall short on the mobile view. I have even made a clean install of the Simone theme incase I did something wrong but it still appears. Any help from anyone on this would be amazing. The lack of support on here and is not good as we are paying customers. (


I’ve been using Simone theme to create a blog. After searching a while this is the one I like the most, and I am also interested in the accessibility of it.

I am trying to add related articles (by category and tag) to a new page based on the single page with no side bar.
The related articles already show on the single post page, so there is no need for plugins.

What part of the code should I add to the new page for the related articles appear under the content of this single page?

Thank you!