Lime Key Media Maine Web Developers

WordPress Child Theme Development is Like Making A Sandwich

child-theme-sandwichAs I learn more about the powerful tool that is WordPress, I find that even web developers can say “mazel tov” when tweaking their site code. We’ve all heard of parent and child relationships for menu items (ie, drop down menus have submenu items called “children.”) What I didn’t know is that WordPress themes can also have children too. You can make your own child theme! You’re the chef in this coding kitchen. Imagine a web page is a delicious sandwich. Traditional layout dictates the bread-veggie-cheese-meat-bread stack of organization – like a sandwich. But your site is a header-image-menu-content-footer sandwich. Child themes let you shift around these layers so you can have your lettuce under your sliced turkey and switch that rubbery American cheese for a thick slice of gouda. You can change the order of your site elements as well as the style (ie, make it pita bread instead of marble rye) using CSS. 

Recently, a client wanted their default layout to switch from menu-above-header image to menu-below-header image. This is where creation of the child menu comes in handy. It basically gives you a solid way of keeping your sandwich made the way you want it.

You make a tasty sandwich! You can further develop its personality by adding further refinements and styling to which it can even become its own original template that you can provide to clients in the future.

Here is what the above code does, step by step:

  1. /* opens the child theme’s information header.
  2. Theme Name: declares the child theme’s name.
  3. Description: describes what the theme is. (Optional; can be omitted.)
  4. Author: declares the author’s name. (Optional; can be omitted.)
  5. Template: declares the child theme’s parent; i.e., the directory of the theme whose templates the child uses.
  6. */ closes the child’s information header.
  7. The @import rule brings in the parent’s stylesheet.
  8. The #site-title a rule defines a color (green) for the site’s name, overriding the corresponding rule of the parent.

Following the instructions via the WordPress Codex or download and install the One-Click Child Theme plugin to speed up this process a bit if you don’t want the hassle of coding and adding files via FTP. Get creative when you’re in the web kitchen, but hold the mayo.