This session was recorded on Thursday, December 6th, 2012.
This is the fifth module of a multi-module training series where we are going through the basics of how to code your own WordPress theme.
This module focused on mainly, two things: 1) coding a footer menu that was different than the header menu and 2) coding the ‘blog’ elements of a WordPress theme.
We showed you how to alter the functions.php file and set up a second menu for your WordPress site and then proceeded to make our menu and style it with CSS.
Next, we coded the blog pages, as well as the main blog page (that lists the various blog posts). Then we provided some valuable code that you can ‘recycle’ and then slightly alter to fit your own needs when you code the Comments section of your blog posts.
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.
- Adding the footer menu. 3:44
- Modifying the functions.php file to support another menu. 4:55
- Adding the footer menu in the backend of WordPress. 5:34
- Adding the new menu class to your theme (so the newly created menu will show up). 6:46
- Styling the new footer menu with CSS and a shortcut that saves a LOT of time. 8:26
- Precisely positioning the footer menu. 9:20
- Making menu items ‘drop up’ instead of be ‘drop down’. 11:21
- Styling the ‘blog’ part of our theme. 13:45
- Styling the ‘comments’ part of a post. 13:52
- Using gravatars. 19:45
- Cleaning up some of the default elements in the WP comment system. 20:58
- Styling the “more…” feature of blogs. 23:34
- Styling the blog H1s. 30:55
- Adding separation between elements in the blog post to make things look better. 36:19
- Using the ‘loop’ to our advantage so we can repeat certain elements of a blog post. 37:12
Click here to download a zip file containing the items we talked about on this call:
- styles and function comments.txt