Designing a WordPress Child Theme

WordPress began as an open source blogging system that is now the most popular Web Content Management System used by professional web designers.    It is probably the most effective platform for   building a custom-designed website with complete content editing capabilities, user interaction and thousands of plugins to extend the basic features.  Best of all,  ISPs do not charge for WordPress installation and it is based on the HTML/CSS/PHP/MySQL technologies that we learned in the class.

WordPress Architecture

  • Pages
  • Posts
  • Themes
  • Widgets
  • Menus
  • Categories & Tags
  • Plugins
  • Users

Creating a WordPress Child Theme

A WordPress child theme is one that has another theme defined as it’s template in the commented header of the style.css file. It inherits it’s layout and bahaviors (function.php) from its template theme, unless they are overridden in its own function.php. Style.css is all that is needed for the WordPress dashboard to list the child theme.  A child theme is the basic building block for a WordPress design and should be sufficient to create a unique identity based on one of the many professional themes available.

  1. Explore the WordPress Dashboard and the Appearance – Themes page
  2. Explore the theme files in the Dreamweaver Files Panel.
  3. Create a new folder with the theme name, copy  style.css from your template theme folder to the new folder  Edit the name and template comments in the header of styles.css.   Add  screenshot.png to the folder to identify it in the themes page.   Upload the folder.
  4. Refresh the WordPress Dashboard Theme page and the child theme will be visible – preview and activate it.

WordPress Themes can each have their own styles, behaviors, layouts, widgets, plugins and other elements.    The Twentyten Theme is useful to create your theme from, because many of the main visual elements are defined within a widget of the theme dashboard.   Unfortunately, this feature adds the CSS rule to the head of each page.    The book explains how to use the functions.php file from twentyten to override that definition.  It is a good insight into how the functions.php override works.

Most other elements of the theme style are accessible through style.css.   In Dreamweaver it is possible to use Live View and CSS Panels and the styles.css definition in Code View to create the style of your theme.

1 comment for “Designing a WordPress Child Theme

  1. Tom
    April 30, 2011 at 9:02 am

    Here’s a great doc on WordPress Child Themes. It’s from the WordPress Codex

Comments are closed.