Join Carrie Dils for an in-depth discussion in this video Structure and layout, part of WordPress and Genesis: Building Child Themes from Scratch.
- View Offline
- Exercise Files
- It's about time to give our theme some shape.…In this movie, I'll show you how to…set your site's container width,…set up a content-sidebar layout,…and add in some web accessibility improvements.…I'm going to go ahead and start with a regular post,…and then tackle the homepage later in the course.…First, let's turn to our web developer tools…to see what the HTML structure of this page is.…All modern browsers include some form…of web developer tools…that enable you to inspect the code.…I'm using Chrome, so I can right-click…and choose Inspect Element.…
If you're not sure where the web developer tools…are for your browser,…a quick Google search should turn that up.…So here in Inspect Element, I can see our HTML tag,…our head tag, our body tag, and then we can drill down…to site-container, our header,…our site-inner, and our footer.…Those are our highest level elements,…so that's where I want to start with our styles.…I'm going to go ahead and node these classes:…site-header, site-inner, site-footer,…and add those to my CSS.…
- Why build a theme from scratch?
- Creating a theme folder
- Creating the CSS and PHP files
- Adding a theme setup function
- Adding features and functionality to your child theme
- Styling the theme
- Adding content to widgets
- Making the theme responsive with media queries
Skill Level Intermediate
1. Building a Theme
2. Setting Up Your Basic Theme Structure
3. Generating Site Features and Functionality
4. Building Out Your CSS
5. Going Further with CSS
6. Putting It All Together
Prepare your theme2m 31s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.