Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Before we start let me give you a preview of the completed theme we'll be working towards. I've named it Simone after the philosopher Simone de Beauvoir. And the full version of this theme will be available on the Word Press theme directory and on GitHub by the time this course comes out. I designed and built Simone to meet current standards and forward thinking ideas. As we progress through the course, I'll explain these different elements in more detail but here's a quick overview. Simone is a fully responsive standard WordPress theme that will work on any WordPress site out of the box.
You don't need to do any customization to make the theme look the way it does right now. At the top, we have a custom header that displays the site title and tagline. In the header, we can swap between this colored background, or we can go to the customizer and activate an image as a background. Below the header, we have two menus. We have a standard WordPress menu. That is fully accessible through keyboards and has multiple levels of drop downs. The menu also has page highlighting, so if you go and visit a single page, you will see where you are currently in the menu.
And it also has a drop down level highlighting for those pages. We have a custom social menu that leads to different social networks, and a custom search bar that opens when you click on the search link. On the front page we displayed a first post and with a full frame featured image, and then the entire post. And then, for the remaining post, we displayed them in a truncated format. With the title, the meta content, and an expert with a continued reading button. Scrolling down the page we have custom page navigation. So it's easy to navigate between different sections of your site.
On the right hand side, we have a custom sidebar with a fixed width. With custom styling for recent posts, recent comments, archives and also the RSS feed. The sidebar is fully responsive and will gracefully fall in under the main content when there's no room for it. So when I scroll down, you'll see the sidebar appears. At the bottom of the site we also have an optional widgetized area that displays sidebar widgets if we want to. And these widgets are controlled with masonry layouts so that they fill out the space nicely.
And all the way at the bottom we have the standard WordPress footer content. For single pages, we have a slightly different lay out and design that displays the meta content on the left hand side in a responsive way. We can also break out block quotes and images to float out of the main frame and we have custom pulse navigation and custom commenting. For pages, we have two page templates. We have the regular page template which looks like the regular posts. We have a sidebar on the right and the content on the left.
And we also have a custom page template that displays the content without a sidebar. To top everything off, we have a custom search templet that displays search results in an understandable way. And also, gives tips if you make searches that return nothing. And we have a custom templet to handle 404 pages. And to wrap things up, on the back end, we've taken the extra step to add in Editor Styles. So that when you write content inside the Editor, the content matches what it will look like on the front end.
In creating this course I decided I wanted you to be able to create a fully functional theme you can use on your own site. Or build out further when you're done with this course. This course is comprehensive and there's a reason for it. When you finish this course you should have a full understanding of how you can use the underscore's starter theme. To build any theme you want based on your own designs. And by the end of the course, you will have actually built out the exact theme you're looking at here. So now that you know what you'll be working towards, let's get started.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.