Coding A WordPress Theme Demonstrated For You – Module 2

This session was recorded on Thursday, November 8th, 2012.

This is the second module of a multi-module training series where we are going through the basics of how to code your own WordPress theme.

Imagine being able to outsource custom theme development and confidently knowing the quality of the product you are getting back.

Or think about how nice it would be to be able to make minor and even major changes to your existing theme because you know where to go and what to do.

Even if you never plan on coding your own theme, knowing  how the WordPress structure works makes it much easier and quicker to make your own coding changes!

In this module we actually did a mini design from ‘scratch’ to show you how a custom theme is actually ‘born’.

While most viewers won’t be opening up Photoshop to design your own themes, you at least get to see how easy it can actually be to design a basic website.

Next, we started ‘slicing’ up the design elements and organizing them neatly into a folder so that we could easily begin the coding process (which we will cover in Module 3).

Below the video is a list of some of the areas we covered. Scroll to the section  that you are most interested in (after the video loads).

Join us ‘live’ on the next coaching call so you can watch ‘live’ over our ‘virtual’ shoulder and ask your question(s)!

So go ahead and register for this coming Thursday's call as well!

Again… below the video (at the bottom of this post) is a list of questions that were covered in the call.

  • Coding a simple design 4:51
  • Bringing in the different layers we are going to build the website with 6:32
  • Making a menu 8:15
  • A trick we use to make sure menus are evenly spaced 11:34
  • Planning for a slider on the home page (or original entry page) and why we don’t want to use it on sub-pages 12:19
  • Adding a shadow underneath the logo 13:55
  • Bringing in an image for the slider 14:06
  • Why using the right font on your mockups is important 19:38
  • Working on the body area 21:20
  • Why in many cases you need to stick with a white background in your body area 21:34
  • Styling the outer edges of your body area 22:30
  • Creating the footer area 23:28
  • Adding filler text to the main body 24:31
  • The ‘overhead’ menu 25:53
  • Designing the sidebar 27:30
  • Creating a contact form 30:07
  • Why the wording is so important on the contact forms 30:21
  • Adding form fields in the contact form 31:52
  • A trick to make sure all of your form fields are the same shape and width 32:51
  • Making the submit button 32:52
  • How to save space on your sidebar and simultaneously increase conversions 33:55
  • Getting the finished design ready for ‘slicing’ 36:06
  • One reason the ‘mockup’ process is better for dealing with clients than just altering an existing template 36:49
  • Slicing the design 37:40
  • When you’re going to need to use a PNG image instead of a JPG 38:59
  • Naming your ‘slices’ so you (or others) can recognize what they are later 44:17
  • Why in most cases you should save your images as JPGs as opposed to PNGs 46:10
  • A trick for ‘slicing’ the buttons uniformly so you don’t have to use different padding later on for each button 48:13
  • ‘Slicing’ your submit button and creating a CSS hover effect 50:06
  • ‘Slicing’ the content well of the design 53:21
  • A trick for easily making more slider images without having to worry about matching the original size 57:40
  • Why we upload PSD files (via ftp) to the host server 60:17
  • Getting the ‘Blank Theme’ so we can start coding the design that we just ‘sliced’ 61:03
  • Getting a screenshot of the theme for the Themes folder 62:20