News WordPress Themes

WordPress Child Themes, Close Up

4.5/5 (2)

A child theme in WordPress is a theme that inherits functionality of a parent theme. When using child themes, you can add or modify the design and functionality of the parent theme without modifying the parent theme itself. This means that you can update the parent theme when a new version arrives, saving all your previous changes. To create the child theme, you need to create a theme folder and put the style.css file with a corresponding title.

***

Imagine a dead simple situation. You bought a nice Responsive WordPress theme with lots of pages, widgets, shortcodes, settings, themes, etc. You need to: change a color scheme and add couple of visual tweaks. This situation has two possible solutions:

Option #1: open an archive with a ready-made theme, inside you’ll find dozens of files. You will have to understand the structure of this theme and which files need to be modified.

Option #2: use the child theme. What exactly it is we'll discuss further.

So What Are Those Child Themes?

WordPress Child Theme borrows its functionality from the parent theme, which can be modified depending on your needs. In this case, the parent theme is a core - the framework, all visual changes you will be making are done in the child theme. In other words, if we need to change a style of the theme, you’ll have to work with styles file, overwriting properties and keeping other files intact.

Developing the child theme is very simple. Create a directory by using FTP or whatever file management application your host provides, put a properly formatted style.css file in it, and you have the child theme!

The child theme contains a "Template: parent-theme-dir" header to distinguish it from standalone themes. With a little understanding of HTML and CSS, you can create a basic child theme, modify the styling and layout of a parent theme to any extent, without actually editing the files of the parent theme. That way, when the parent theme is updated your modifications are preserved.

***

The child theme can be found in its own folder inside the WordPress folder wp-content/themes. The name can differ though the folder should contain the file style.css, the only required file of the child theme.

The Structure of the Child Themes

The only file that we need to modify in a child theme is the style.css, where we need to change necessary lines:

1
2
3
4
5
6
7
8
/*
Theme Name:     myFramework child
Description:    myFramework child description
Author:         Your Name
Author URI:     http: //demolink.org/
Template:       myFramework
Version:        1.0
*/

In this file, all fields would be familiar to you from the previous themes which you may have edited before. But have a look at the field Template. There, we have to specify the name of the parent template folder (myFramework). Thus the child theme will understand which one of those templates is parent.

Next in the file style.css, we can duplicate the style template, but it's better to use @import for this:

1
@import url("../myFramework/style.css");

At this stage, we could have stopped - a minimal child theme is ready, all that remains is to modify the style.css file. But we will go further and think about how to work with functions in the child theme.

The Functions in a Child Theme

The functions of any theme could be found in a functions.php file. Using the functions.php in the child theme has its own peculiarities: the file functions.php of the child theme is loaded before the parent functions.php file (unlike, for example, style.css that replaces parent style.css). In order to know whether functions work, we need to check if they exist:

1
2
3
4
5
if ( ! function_exists( 'YOUR_FUNCTION' ) ) {
 
...
 
}

Other Theme’s Files

In case you need to change the structure of some elements in the child theme (header, footer, page templates), everything is quite simple. The child theme files (single.php, page.php, ...) work the same as the style.css file, overriding the parent theme files (an index.php file can be overridden only from WordPress version 3.0.).

This allows you to add templates which are not subject to the parent theme (for example, a site map page or pages with a single column, or add/reverse template of the parent theme).

Why Do We Need This?

Using child themes is a pretty common, comfortable, and safe practice to customize ready-made themes. We are not modifying the parent theme itself, and it will enable us to get timely updates, improve the parent theme, and promptly fix possible bugs.

WordPress Frameworks

Time goes by, but the user’s tastes barely change. 11 months ago we’ve described the most popular WordPress frameworks as of April 2012, this list practically didn't change. Here is a new list of Top frameworks for WordPress.

Thesis Theme Framework

Thesis, by DIYthemes, is one of the most popular WordPress theme frameworks. Its versatility and flexibility make it ideal for novice to expert developers. The features include a full options panel for customization with coding, layout generator, typography emphasis and future-proof customization system. Its efficient HTML, CSS, PHP framework and user-friendly controls make customization precise, regardless of design experience. Customer support and help features include a community of users, forums, emails, and telephone numbers to help with any issues or concerns. Unfortunately, it only comes with one default theme for customization in the WordPress dashboard. If you choose to make changes not provided in the dashboard settings, you will have to know CSS.

***

Catalyst Theme Framework

Catalyst is a premium WordPress theme framework with many features geared more to a design platform. With over 900 design options, you can create a website or blog, customize it with flexibility and ease using the CSS building tool that writes code for you. The SEO infrastructure is effective, ranking high on the most commonly used search engines, like Google, Yahoo, and Bing. Unlike other frameworks, Catalyst does not offer a multimedia box, which makes embedding videos easier.

***

RichWP Theme Framework

RichWP is a premium WordPress theme framework with built-in caching system, making it the fastest framework available. Features include ready design presets, point and click design editor, custom page placement and SEO preferences. Customer support and help come with manual documentation, video tutorials, instructions and tips for customization. Unfortunately, it sometimes does not work well with WordPress plugins that use jQuery. Occasionally, plugins that load jQuery before the framework does cause JavaScript to break.

***

Genesis Theme Framework

Genesis Theme Framework, by StudioPress, is a well-known WordPress theme subscription service that provides access to over 40 child themes. Because of a large amount of child themes available and its user-friendly interface, it is one of the most popular frameworks for beginner developers. Genesis offers native support for SEO (search engine optimization), custom widgets and layout options, security and support. Although customer support and user help features are great, designing beyond what the child themes offer may present a learning curve, since documentation is missing for manual customization.

***

Cherry Framework

Cherry framework is a custom development of the TemplateMonster team. Cherry framework is a parent theme, i.e. the core. The line of Cherry WordPress themes developed on this framework come enhanced with the Bootstrap functionality. You can easily replace an appearance of a page and edit its elements. From Bootstrap, there were borrowed CSS, Javascript files that allow creating pages using grids, patterns, typography, tables, forms, navigation, pop-ups, etc. In addition, our developers created an ultimate cross-browser compatibility and responsiveness that make themes fully compatible with all popular browsers and the layout adaptable to all major handheld devices.

Cool Stuff in Cherry Themes

Booking Form

Booking Form is a native feature of TemplateMonster’s Cherry WordPress themes, the main functionality of which is aimed at a checkout. This type of pattern can cover the following themes: booking, car rental, search for babysitters, etc. This order form has an input validation and a feedback, a site admin will get a letter with an order. Here are some screenshots of booking forms from some of our templates.

***

***

***

The form can be fully customized through the admin panel – you can either switch on or off specific fields of the form, edit text, etc.

***

Cherry Framework Update

Every once in a while our development team will release an update of the Cherry Framework. Once the update is ready, every owner of the Cherry-powered WordPress theme will be notified within his/her admin panel to update to the latest version. Keep in mind that once an update is installed, no rollback will be available.

Coming Soon Cherry Features

  • Localization: when installing a theme, the frame will detect the language file of the WordPress admin panel and install the same language.
  • Cherry framework will be packed with the booking form mentioned above.
  • Integration with WooCommerce and Jigoshop will make Cherry themes shop-ready.
  • Cherry store: the Cherry options menu will get one more item and that is a Cherry Store where you'll be able to browse through newly designed products, get some interesting info about the framework, read news (all without leaving your admin panel).

***

SPEAK UP! Now it's your turn. You've definitely used WordPress for your personal website, or for your client. Share your first experience with WordPress child themes.

3 Responses

  1. Thank you very much. Very useful topic for beginning web masters.

Leave a Reply

Your email address will not be published. Required fields are marked *