Coding A WordPress Theme Demonstrated For You – Module 3

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

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

In this module we actually got into the process of coding the theme. In Modules 1 and 2 we had covered the basics and designed an elementary theme, and then ‘sliced’ that theme so that all the elements were ready for coding.

Going through this module is the beginning to understanding many things behind the WordPress code.

Even if you never plan on doing this yourself, following along as we code our design into a working theme allows you to see how CSS and HTML work together with WordPress to render a nice, clean, SEO and conversion-friendly theme.

Armed with the knowledge of how everything works together will allow you to make navigate your way around many themes, making the process of making small changes (that would have previously been subbed out to webmasters) quite easy!

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.

  • Getting background image loaded. 12:27
  • Lining everything up to the max width of the page with a ‘container’. 17:12
  • Positioning the header. 20:51
  • Why you should always use floats for your main containing divides. 21:55
  • The one major reason you should use absolute positioning for your menu. 22:58
  • Setting the background color of the page. 26:17
  • Adding the logo in our design. 27:24
  • How to making your logo a link back to the home page using a ‘class’ in CSS. 27:53
  • Common mistake people make when coding for a logo. 29:35
  • How to use dynamic code in your links so that you don’t have to make changes when you move your site from the test server. 30:17
  • Adjusting the position of your logo. 31:40
  • The best way to code for margins in CSS. 32:08
  • Coding for the upper right-hand side of header (phone number section). 33:26
  • How you should probably name your classes to prevent confusion later on. 34:14
  • How to use ‘web-safe’ font families in your designs. 36:21
  • Font tag vs. class vs. span to change font color. 40:54
  • Coding the main menu. 45:08
  • When should you use a span instead of a div. 45:31
  • Adding the necessary code to the functions.php to create the menu. 50:14
  • Precisely adjusting menu items on the menu. 56:13
  • Coding the body area of the theme. 61:24
  • A little trick to make it easier to code margins in your body area. 70:50

Click here to download a copy of the ‘Code.txt’ file, which is a compilation of a bunch of code that we have assembled to make it easy for you to find the code you need all in one place.

We refer to this file over and over again in Modules 3 and 4.