As I mentioned previously, I selected Thematic as the parent theme under which I am am developing a new website for the University of Illinois Archives.  Over the past several months, I set up the basic site structure, colors, fonts and layouts.  I am preparing to dive into deeper customization, but before doing that, I would like to list some resources that I found helpful in learning about Thematic and in customizing the site.  Then, I will describe some of the steps I took to actually customize the site.  If you want to see the work to date, a screenshot is below the fold.

New University of Illinois Archives Website, as of July 24, 2012

The site includes site level navigation along the top, as well as a context sensitive navigation system on the left.  A blog is integrated under the ‘what’s new’ tab.  In addition, I added a custom graphics and adjusted the size of the header and other menus.  A few small changes need to be made before the site can be launched to the public, but it is basically functional and ready for usability testing.

If found the following resource very helpful in setting up WordPress as a CMS using a Thematic Child Theme.  I’ve put these in a logical order, and if you also want to implement Thematic as a CMS, I’d suggest working through them in the order listed.

  1. Catswhocode Thematic Tutorial.  This beginner’s level tutorial will help you get started on theme customization, the right way.
  2. Simple Section Navigation Widget makes it a snap to have a cont context-sensitive “local” menu on the left or right side of your site, allowing people to browse through your static pages.
  3. Themeshaper Theme Development Tutorial. This very extensive series provide a great deal of background information you will need to be successful in creating a child theme.  It lists tools, provides background on the structural HTML elements typically used in the <div> elements of a WordPress site, recommends a suggested template and directory structure, tells you how to fill in the templates (such as header, footer, and index.php), and helps you understand how to call and use functions to fill in the templates.  The information is useful in a general sense, but does assume a certain amount of background knowledge, so I suggest reading item number two and three (shortcodes and functions) while going through this tutorial.  One should also be aware that the tutorial is talking about ‘regular’ (not parent/child) themes, so a lot of the specific techniques discussed in this tutorial apply to all wordpress development.  But, it is good to understand what is happening across wordpress before delving into a child theme creation.
  4. WordPress Child Theme Basics.  This very helpful tutorial describes how to link your child theme to a parent theme and how to begin customizing your site.  It outlines the structure of the theme, noting how you import the parent theme styles and functions, then use style.css to override the parent theme styles.  It also delves a bit into using the file functions.php to override some of the parent themes functions.  (This is important if you want to change the output of a particular element in the HTML output.)
  5. Thesis Folder Structure.  Eric Hansel recommends a logical and easy to understand structure for your theme files.  Using this will help you keep everything organized and understandable to others (and yourself.)
  6. Themeshaper action hooks tutorial. WordPress itself, as well as most themes and plug ins make use of a ‘hooks’ system.  Action hooks are typically used to put some content into an ‘empty’ placeholder area on the page.  (Theme developers provide these areas so widgets or other content content can be added.  For example, you may want to add a copyright noticed after the footer; in thematic you would do this by ‘hooking’ the action to the thematic_below_footer() function.
  7. ThemeLab Thematic Tutorial.  This is an intermediate level tutorial, which goes into quite a bit more detail about action hooks and how to modifying some of thematic’s built in functions by using filter hooks.
  8. Themeshaper filter hooks tutorial.  Like many themes, and WordPress itself, Thematic includes action hooks.  Action hooks allow you to ‘hook into’ and modify or filter the content that will be placed on the page.  For example, if you want to add an image to a header, you might use a filter hook to to replace part of the existing header content and to put the image into a particular location in the file.  See also this page explaining the differences between action and filter hooks.
  9. This layout page shows the locations of many of the widget areas, divs, and action/filter hooks.  It does not include all of the hooks or filters in the latest versions of Thematic.
  10. Net magazine has a tutorial regarding shortcodes, which are are macros or shortcuts you can use to put a piece of dynamic content onto a page.  It explains how to create, register and reference your own shortcodes.  You might need to define some shortcodes if you plan to create a custom widget or code that might be reused on several pages.
  11. WordPress Hooks Snags and Barbs. This is a very advanced tutorial, which goes into the details regarding how action and filter hooks, as well as the wordpress loop really work; it might be helpful to refer to this only if you need to diagnose a ‘misbehaving’ hook, and understanding all of it will make you a much better wordpress developer!

Tagged with: