Simone - a free accessible responsive WordPress theme

Simone and Building WordPress Themes from Scratch Using Underscores

Over the past few weeks two major releases took place, and now it’s time to talk about them:

First, the new free WordPress theme Simone announced my re-entry into the free WordPress theme space. If you’ve been following me for a while you know I’ve released free WordPress themes before and you may also know that I pulled them all last year because I wanted to bring my themes up to current standards. Simone is that and more. Which I’ll get to in a bit.

Secondly, my biggest lynda.com course to date titled WordPress: Building Themes from Scratch Using Underscores was released, and with it lynda.com subscribers can now learn how to build their own WordPress themes to be standards-based, accessible, responsive, and content-centric.

Interconnections

So why am I announcing both these releases with one blog post you ask? The answer is simple: The course, WordPress: Building Themes from Scratch Using Underscores, shows you how to build your own version of Simone, the theme that was released at the same time. Yes, that’s right: The lynda.com course walks you through the entire process of designing, developing, and building the theme that is now free from the WordPress Themes Directory.

Now that you know why, let me tell you a bit more more about both the course and Simone.

Building Themes from Scratch Using Underscores

WordPress: Building Themes from Scratch Using Underscores - a lynda.com course

One of if not the most requested future course I’ve been asked to build at lynda.com was a course on developing themes from scratch. Every week I get emails, tweets, Facebook messages, and messages on this blog asking about how to go from a design or an idea to a full-fledged functioning WordPress theme. So as 2014 began I started working on a new and expansive course that did just that: Took a design and built a full-fledged WordPress theme from scratch.

During pre-development of the course I decided merely building a theme for show wasn’t enough. I wanted the course to go beyond showing basic practices to show the process of building a shippable product. And to top it off I also wanted the end result to be accessible, translatable, responsive, and in accordance with the latest design and development patterns and standards. The result was the theme named Simone which will be covered later.

For the course I decided to use _s (Underscores) as the baseline. Building a WordPress theme from scratch from scratch makes no sense and _s is in my opinion the best starter theme available and the one all developers should be using. Considering its popularity there is scarcely any expansive documentation on how to use _s to build WordPress themes so I built the course as a deep-dive into the _s theme as well as the process of building themes from scratch. Whether you are an aspiring developer or a seasoned pro with experience with _s I am certain you will find a wealth of useful information in the course that will help you utilize the theme in a more effective way and build better, more responsive, and more accessible themes in the process.

Which brings me to Simone itself.

Simone – a Free, Responsive, Accessible, Content-first WordPress Theme

Simone - a free, responsive, accessible WordPress theme from Morten Rand-Hendriksen

My first thought when designing Simone was to find new solutions to the old problems faced by theme designers and developers: Where do you place the sidebar so it doesn’t interfere with the content? How do you make menus accessible? How do you incorporate social media links in a consistent way? How do you make the theme truly responsive? And easy to read on all screens? And easy to customize?

Starting with a clean slate I made a series of decisions: The theme should meet accessibility guidelines, the content should be in the center of the screen whenever possible, featured images should be responsive, the user should be able to add a social media menu using the standard menu manager, and the grid should be broken to utilize the space available on larger screens.

The result was something I have yet to see anywhere else (yes, I should receive an award for being humble): A theme that puts the content (literally) front and center and locks the sidebar to the right-hand side of the screen. This feature is only really visible on very large screens and it is one that I hope will be adopted by other theme developers in the future. With Simone the visitor is not forced to turn her head to the left to read the content on large screens, and the sidebar never interferes or fights for the reader’s attention. All as it should be.

The theme is full of advanced features:

  • Control of the header background color and link colors
  • Option for adding a header background image or displaying just an image as the header (or displaying no header at all)
  • Optional social media menu in the main menu area that shows social media icons based on the URLs each menu item is pointing to
  • Pagination navigation on index pages
  • Responsive featured images using the <picture> tag
  • An optional author box on single posts and author index pages (triggered by filling out the Author Bio field)
  • Optional integration with the WordPress SEO plugin to add social media links to authors from the Author Profile page
  • Pull quotes and pull images that break out of the content grid when the screen width allows it
  • Dynamic font sizes that change according to the window width
  • Accessibility standards throughout
  • HTML5 captions and galleries
  • and much more

You can get a full rundown of the features and functionalities of Simone by checking out the dedicated page for the theme.

Simone is for Everyone

Simone was built to be used, shared, changed, and evolved. To that end you can get the theme either by building it yourself while following the WordPress: Building Themes from Scratch Using Underscores course at lynda.com, by downloading it directly from the WordPress Themes Directory, or by downloading, forking, or contributing to it on GitHub.

If you have any additions, features, or alterations you want to add or want me to add to Simone you can either submit an issue, a feature request, or a pull request on GitHub. The theme is in constant evolution and development and I will evolve it in accordance with what you the user wants. Speak up and ye shall be heard!

Over to you!

Now that you’ve been introduced to Simone and WordPress: Building Themes from Scratch Using Underscores, I want to hear what you have to say both about the theme and the course. Say your piece in the comments below and let’s get the conversation going!


About Morten Rand-Hendriksen

Morten Rand-Hendriksen is a staff author at lynda.com specializing in WordPress and web design and development and an instructor at Emily Carr University of Art and Design. He is a popular speaker and educator on all things design, web standards and open source. As the owner and Web Head at Pink & Yellow Media, a boutique style digital media company in Burnaby, BC, Canada, he has created WordPress-based web solutions for multi-national companies, political parties, banks, and small businesses and bloggers alike. He also contributes to the local WordPress community by organizing Meetups and WordCamps.

19 comments:

  1. Nice! Looks crisp and clean!

    I’m curious about the name Simone – wondering if there is a cool story behind it.

    Hope all is well, by the way; it’s been too long since we got together.

    Cheers!

  2. As always you are full of surprises. I have been learning from you for many years on LYNDA.COM – (the best online learning application out there). You have helped me so much with problems no one could even touch. I am planning on watching these two courses as soon as I finish up this cumbersome project I am involved in. Thanks so much for all your hard work and effort. Plus you are a very good teacher, you don’t waste time cutting to the chase. I really do appreciate that. I will let you know how much I enjoyed your courses when I done watching them. Thanks.

  3. Your timing is perfect. I watched your child themes course about two years ago to tweak my own sites, and this spring I put myself on the road to professional WordPress development and re-upped my Lynda membership. There is a lot to learn at once so it’s great to have a systematic course. Thanks for all the thought you put into yours!

  4. goin’ thru the course now. FYI you have a few typos in ./Exercise Files/code-snippets/index.html:

    gwong@mbp15 code-snippets$ grep -n sinome index.html
    248:wp_enqueue_style( 'my-sinome-layout-style' , get_template_directory_uri() . '/layouts/content-sidebar.css');
    2656: wp_enqueue_style( 'my-sinome-layout-style' , get_template_directory_uri() . '/layouts/no-sidebar.css');
    2658: wp_enqueue_style( 'my-sinome-layout-style' , get_template_directory_uri() . '/layouts/content-sidebar.css')

  5. I have watched all of your previous training videos. I am just starting the training on Simone. Great work! I have been scouring the web for accessible themes. They are difficult to find. Not making accessibility a “built-in” is just wrong. It’s the 21 Century and I don’t want anyone to be turned away from my website. Thanks so much.

  6. Hello Morten Rand-Hendriksen,

    First I wanna thank you for your course. It really helped me a lot and now I understand the basics of making the theme for WordPress. However, I wasn’t really satisfied with “copy&paste” method. I understand that it would take a lot of time to not copy&paste, write the code in the video and explain it completely, but that’s what I was and I’m still looking for. I’d like to know how every line of code works/what it does, but well… I might check the codex then.
    Anyway really great course/tutorial. I enjoyed it a lot and now I’m even more capable to make my custom theme :-)

    By the way. I’ve seen in your video -> “09. Using Gravatars in comments” that you have used small icon before “Leave a reply” in the Photoshop version. I’ve “googled” a lot and I’ve found the way how to do it (I don’t know if you just forgot to do that or you jumped over that on purpose?) , because that icon fits there and it looks really good even tho it’s just a detail :)) Here is the code: (if there is an easier way to do that, then I’d be pleased if you wrote it)

    -> in functions.php

    function comment_reply_link_filter($content){
    return ' ' . $content . '';
    }
    add_filter('comment_reply_link', 'comment_reply_link_filter', 99);

    -> in style.css

    .reply i, .reply a {
    padding: 2px;
    color: #d36a1d;
    }

    And that’s it :))

    So thank you again for everything you’ve made and I’m looking forward to see your next stuff..
    Oh and I’ve almost forgot… really nice voice you got there :))
    Non English Guy, so sorry for my English. I hope you got everything I’ve said

  7. Hello Morten Rand-Hendriksen,

    Thanks for a great theme and tutorial. I am now learning on your WP course and I am wondering on how to fix my search form rendering on Firefox.
    Please see a problem on my site. http://www.nineteendesigns.com/wordpress/ When I click on search icon, the search box slide down and then jump up and delete the top padding. I tried to fix it but it is still not working. Can you please help me on how to fix this on Firefox? It is working on Chrome. Please ignore my menu.

    Thanks
    Kwan

  8. How to add slider on the main page of the simone, as now a day all modern websites have and also image gallery with lightbox.

    1. Image galleries with a lightbox can be triggered by installing a lightbox plugin (Lightbox, Greybox, Thickbox, Thinbox, Fancybox, etc) and pointing your gallery thumbnails to the Media File. It’s not a theme feature but a plugin feature.

  9. Hi Morten,
    Simone is a nice looking WordPress theme. I chose it due it to it being designed for Accessibility and Mobile devices.
    It looks great on a mobile, but you have a bug, which I have been trying to hunt down to no avail. At present on my PC the header I have is:

    Written by Kevin FoulgerAugust 4th, 2014August 4th, 2014 | Edit

    There are no spaces or titles.
    I thought it strange there were two dates. I only found out that one was a Published Date and the other was an Edited Date by looking at the HTML.
    I’ve been trying to work out which piece of php or CSS needs the “Published: ” and the “Edited: ” titles added. Will you be fixing this bug in a patch or a later release? How or where do I go in the code to fix this? Please help.

    1. That’s weird. There is a rule that specifically hides the updated date in the stylesheet. You can find it under 10.1 Posts and Pages: updated { display: none; }. For some reason it appears this rule is being ignored in your page.

  10. Taking your Building Themes from Scratch Using Underscores tut on Lynda.com. On chapter 10 working with Featured Images and am realizing the images did not import from Theme Unit Test. Have tried re-importing twice. Everything comes in but the media. All images report Failed to Import Media “Filename“. Finding precious little about this with Google. Tried removing and re-installing importer plugin. Also tried new .xml files twice. I’m stumped! Have you had any experience with this error? I’m very computer literate, so feel free to speak tech. Running WAMP 2.2 on Windows 7. My WP installs are always done using a subfolder, but I don’t think that is the issue… Any help is appreciated! Thanks!

    1. The WordPress Importer can be a total pain at times, and others are reporting the same issues with images not loading. The easiest way to get around the problem is to simply add images of your own to the posts. These posts are just test data so doing your own configurations will produce the same results.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>