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
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
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!
43 replies on “Simone and Building WordPress Themes from Scratch Using Underscores”
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!
All my themes are named after philosophers. This one is named after Simone de Beauvoir.
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.
Thanks Jeremiah! I hope you like both the theme and the course.
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!
I left a simlar comment on how impressed I am with Simone on mor10.com. Is there going to be paid version?
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')
Eesh. My dyslexia is getting the better of me again. I will get that fixed. Thanks for the heads up!
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.
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
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
Hello
I’ve been working on the underscores course and I’ve come up with the same issue using firefox. The search field seems to drop down and then jump up losing that top padding. Did you find out how to fix this problem? Thanks
Apart from this issue great course from Morten Rand-Hendriksen!
Hi. I managed to solve the issue with losing the search box top padding in firefox. It had something to do with the floated elements in the social menu.
I used a before pseudo element to clear the floats above the search box.
.search-box-wrapper::before {
clear: both;
}
You are the absolute best! Thank you so much for that fix.
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.
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.
Hey Morten, thanks for generating such an awesome content and helping us becoming better WP dudes.
Is then a plugin the best way of approaching having galleries with lightbox effects? I wouldn’t need this feature in every post type, so would be worth it installing a plugin. Do they, generally, slow down the site? Do you know if there are benchmarks available for these kinds of plugins?
Cheers
Josep
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.
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.
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!
PS – Yes I am checking “Download and import file attachments”. 🙂
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.
Thank you Morten. Appreciate the insight and knowing its not just me. Have a great weekend!
Hi Morten,
I just finished your tutorial on Underscores and the Simone theme. Your presentation and style work well. I learned a lot and think it gave me most of what I need to retool my website in WordPress. That being said… maybe I missed it… but, it feels like the last step is missing. How do I package the new theme up for deployment to my server?
Hi Morten,
I’ve been checking out this course, and so far it’s been great! Nice work. Thanks for sharing it.
In the hope that it might be helpful to you (for any future edits) or to others, I did want to mention that I noticed what appear to be a couple of small mistakes in Section 3, in the video “Applying global styles.” At around 1:35 into the video, you start to explain how the _s theme uses “rem” for font-sizes, in order to make the math for calculating relative font sizes simpler. You say this:
“A rem size is relative to the outermost defined font size, which means the body. And in the reset, the body has already been set to 100%. That means if you want to match, let’s say, 16 pixels in font size, you say 1.6 rem. If you want to match 18, you say 1.8, and so on. So, by using rem sizes, it’s much easier to get the relative font size right.”
It’s the first two sentences here that seem to have the small mistakes. First, a rem size is relative to the root element of the document, which is the html element (not the body element) in this case. Second, the reason that 1.6 rem is equal to 16 pixels in font size isn’t that the root element’s font size has “already been set to 100%.” It’s true that the root font size is initially set to 100% in the reset, but 100% on pretty much any browser is 16px, in which case 1.6 rem would actually be 25.6 px (16 * 1.6). Instead, the reason that 1.6 rem ends up equal to 16 px in this case is actually that the root element’s font size of 100% is immediately overridden in the reset, and set as font-size: 62.5%. 62.5% of 16 px (the default px size, which we get by initially setting the root element to font-size 100%) is 10px. The 1.6 rem font-size works with respect to that value. (More briefly, 1.6 rem is equivalent to 16 px because the html element (not the body element) is first set to 100% — 16 px — and then set to 62.5% of that — 10 px.)
It’s a small issue, but something that seemed worth mentioning, especially because it confused me when I heard you say it and I ended up having to double-check. I hope it’s helpful.
Thanks again for the course!
Great course. My only wish is when you added a no-sidebar feature, you also showed how to add an additional sidebar on the left, thus having a three column layout. I’m trying to do it with an if/ elseif/ else statement in the function file along with registering the additional sidebar, an additional layout.css page and an additional page template. No php errors, however, it’s not adding the new sidebar.
Any help on that you could give me I would appreciate.
It’s interesting to know that you give name to your creations after philosophers. Morten, i have been making themes myself with TemplateToaster since long. Can you tell me whether your Simon theme will be more advantageous to me than TemplateToaster?
Trying to follow the Lynda course. Great methodology and style but I’ve got a problem with Styling The Menu section. Using an underscores download from the beginning of October (theme doesn’t exactly match your videos), copied the code snippet and my “.main-navigation ul ul” menus disappear:(by commenting out each line individually, I think it relates to the “display: none;” css but I don’t know enough css to diagnose any further). any pointers? thanks.
problem solved. checked the complete code snippets and found the video didn’t exactly match the current underscores content.
We recently started a blog on accessibility & we chose Simone…we are in love with its accessibility features. There are two accessibility issues that are over looked. The categories & tags display just as links & there is no way an assistive aid user can identify them. Can you please guide us how to fix this?
We built a basic child theme & we are hoping to add few more accessibility tweaks into it….thanks a lot for providing this wonderful theme.
Hi Morten,
I’m learning a lot with you!
I’m having a problem on increasing the height of site-branding.. Once I increase it, the image background stop being responsive. Do you have any idea on how to fix it?
Thank you!
Hello Morton, I downloaded Underscores and have been following along with your Lynda tutorial. The strangest thing is happening though. I have to add -999em for left position instead of 0 or the drop downs will stay open! Is that a bug in underscores? Anyway, thanks for the great tutorial!
.main-navigation ul ul {
float: left;
position: absolute;
left: -999em;
z-index: 99999;
padding: 0;
background: #4d4d4d;
}
.main-navigation ul ul ul {
left: -999em;
top: 0;
}
Hi Morten,
I saw you on the WP Watercooler (among other places) and your statements around accessibility really hit home for me. I have always taken proper UX design / development seriously, and ignoring accessibility just isn’t an option.
I will be looking at your Lynda courses and intend on tweaking my own Genesis starter theme (and my own site) to make it accessible. Would love to share it with you when I’m done to get your feedback.
Thank you for being such a great resource on the subject.
Best,
Patrick
I just started and I am in chpt. 3 episode 5. I am trying to find a way to add sample content like how Morten has and I don’t think I missed anything. What was your way around this?
Hi Morten,
In your My Simone theme, I tried to create a gallery with lightbox. When I click on an image and view it in a modal, the image appears in a small fixed width. It looks weird. I tried same gallery code in TwentyFourteen and TwentyThirteen, It works fine.
How can I fix this issue in My Simone theme?
Thank you 🙂
Drop down menu is not working in latest _s version please update your course video because i am stacked on it.
Just a heads up for whoever may be struggling on the section of the tutorial where you remove the sidebar. Morten forgot to mention that you needed to remove the line ” from the ‘page-nosidebar.php’ file. This resulted in the unstyled widgets appearing below the content. Hope this helps 🙂 it took me just a little while of struggling to figure it out. Great tutorial though!
I’m not sure if this is the issue Andrew mentions, I can’t find page-nosidebar.php, but I’ve encountered a problem in the movie “Styling basic layout components”. The changes discussed in “3.6 – Making the site layout responsive” and the CSS changes identified for /layouts/content-sidebar.css .site-content:
.site-content .widget-area {
width: 380px;
float: right;
padding: 4rem;
background: #fff;
background: hsl(0, 0%, 100%);
}
don’t work. I experimented and found that I could apply some of the desired changes shown above in style.css:
.widget {
width: 380px;
background: #af4;
border: 2px solid, black;
}
I added the background color just to see if that selector would have any effect in the web page. I commented out the “width:” setting in .widget-area because it did nothing. I’ve been searching through the PHP code to see where the problem might be, I would think that content-sidebar.css would override anything in style.css, but obviously nope. I have been learning how WordPress creates a web page though by following the path through the PHP files.
CORRECTION:
I noticed that when I did comment out the “width:” setting from content-sidebar.css, the effect failed even though it still existed in style.css. There appears to be something odd going on that requires width: 380px; to be set in style.css (in .widget{}) and content-sidebar.css (in .site-content .widget-area {}).
Sorry.
There seems to be a difference in the version of underscores used in this tutorial and the current, as of my taking the course, that causes things to work differently. For me to get anything near the behavior shown here, I needed to use the following:
.content-area { width: 90%;
.site-content .widget-area { width: 600px;
At a width of 100% for .content-area the sidebar never appears to the right. I changed the background colors of .body and .site-content .widget-area to see how they bump up to .site-main and of .widget to see how it fits in .widget-area. At a browser width of 1116 the widget-area is forced below the site-main and at 1117 it is moved to the right.
So, if you’re having issues, maybe this might help.
Well, here’s another post. I finally got my display to look like Morten’s. The code is a bit different because I had to find different width values with this version of underscores than what was used in the tutorial. In the content-sidebar.css file, use this in place of that provided in the Code Snippets (the background colors were used to show what region each element occupies ( also, temporarily add to body{background: #88f122; } and to widget {background: #851;} so that you can easily see this and then delete when all is right):
/*
* Theme Name: my-simone
*
* Layout: Content-Sidebar
*
* Learn more: https://developer.wordpress.org/themes/basics/template-files/
*/
/*.site-main*/.site-content .content-area {
background: #b2b2b2;
}
.site-content .widget-area {
width: 600px;
float: right;
padding: 4rem;
background: #fff;
background: hsl(0, 0%, 100%);
background: #678;/*$$*/
}
.site-footer {
clear: both;
width: 100%;
}
.entry-header,
.entry-content,
.entry-meta,
.entry-footer,
.tag-links,
.post-navigation,
.comments-area,
.paging-navigation {
position: relative;
max-width: 780px;
max-width: 78rem;
padding: 0 4rem;
margin: 0 auto;
}
@media screen and (min-width: 2320px){
.content-area {
width: 100%;
float: left;
margin-left: -600px;
padding-left: 600px;
}
.entry-header,
.entry-content,
.entry-meta,
.entry-footer,
.tag-links,
.post-navigation,
.comments-area,
.paging-navigation {
margin-right: 0;
}
}
@media screen and (max-width: 2319px){
.site-content .widget-area {
width: auto;
max-width: 780px;
float: none;
margin: 1em auto 0;
}
}
You are the best wordpress tutor I have ever come across. Keep up with the good work mor10.
Great template, Simone. Even my girlfriend liked it, says it all 😉
Just one question: I use a thumbnail on the left of a post, which then removes the date and author information. If looked into the code and it should display, but it doesn’t. Could you help me with that?