WordPress Child Themes

Powers Home BreweryAlthough this blog is intended to primarily focus upon my watercolor artwork and the continual development of my fine art e-commerce website, occasionally I make a discovery while developing my other websites that I think my readers would find useful. The past week has revealed some great information that I wish to pass along.

I recently had the unfortunate displeasure of discovering that the websites I have hosted through Comcast via their Personal Web Page (PWP) service are no longer being supported. Coupled with the company’s lack of support is an apparently frequent server outage crisis which has caused me to receive several emails from disgruntled visitors. One of my websites using this hosting provider is a home beer brewing website that receives several hundred visitors a day. The site has been in existence since 2004 and incorporates some very extensive home beer brewing recipe calculators that required thousands of hours to write, troubleshoot, and refine. In fact, the most elaborate calculator on the site has over 6000 lines of JavaScript code. Over the years, the online calculators have become quite popular with home beer brewing enthusiasts. Due to the site’s popularity and the enormous amount of time and effort required to write the calculators, I made the decision to move the entire website to GoDaddy hosting as I did with my Powers Fine Art watercolor website. I am very happy I chose to move the art site in November of 2012 now that there is a distinct possibility that Comcast personal webpages may permanently disappear at any time.

Since I have formed an affection for the WordPress platform and its incredible array of features and plugins, I decided to completely rebuild the home beer brewing website from the ground up. The process went very smoothly and I chose to utilize WordPress’ Twenty Twelve default theme. I didn’t want to invest much money into the project since the site is filled with free information and isn’t an e-commerce entity.

The Twenty Twelve default theme conformed to all my necessary criteria and I found it very easy to modify the static page, header, and footer templates. I made some modifications to the theme’s Cascading Style Sheet (CSS) and my home brewing website was back in operation in under a week’s time. Incorporating a 301 redirect into a .htaccess file I uploaded to the old Comcast server space insured old users would find the new site. I also made sure to update all my Google Webmaster Tools information and my Bing Webmaster Tools data so my search engine rankings wouldn’t be too terribly impacted by the move.

After some thinking, however, I began to realize that if the WordPress default theme was ever updated as part of the entire WordPress installation, I would lose all the custom template work I had accomplished. This is something that already impacts my Powers Fine Art website and it is incredibly aggravating to need to continually modify files after a theme update occurs.

Some Internet investigation, however, revealed an interesting feature integrated into WordPress of which I was not previously aware. There is already a mechanism in place known as the child theme that was designed to prevent changes, modifications, and custom templates from being overwritten.

A child theme is essentially a folder created within the WordPress themes folder. It contains a required style.css file with some unique header information to indicate which theme it is modifying as well as any additional CSS modifications. The folder also contains the modified theme template pages which are used instead of the pages native to the original.

A standard WordPress folder hierarchy is depicted below:

site_root (www)

wp-content

themes (directory where all themes are stored)

theme-name (directory of an example parent theme)

theme-name-child (directory of child theme; can be named anything)

style.css (required file in a child theme; must be named style.css)

I simply created a child theme folder titled twentytwelve-child using my FileZilla FTP client. I wrote and uploaded a new style.css file and copied the modified and custom template pages to the new folder. I selected the new child theme from the WordPress administration dashboard and instantly, the new website was protected in the event of a future theme update.

WordPress’ child theme codex reveals that the style.css file in the child theme folder can contain the following entries but absolutely must contain the Theme Name and Template information in order to be properly utilized:

/*
Theme Name: Twenty Twelve Child Theme
URI: http://example.com/
Description: Child theme for the Twenty Twelve theme
Author: Your name here
Author URI: http://example.com/about/
Template: twentytwelve
Version: 0.1.0
*/

For my situation, I also added the following line to the style.css file in order to inherit the original theme’s CSS code:

@import url(“../twentytwelve/style.css”);

It is important to note that there can be no additional CSS code before the @import entry or the original CSS will not be utilized for the child theme.

The style.css file below shows the complete file I used and the CSS modifications I incorporated in order to center the Twenty Twelve theme’s menu:

/*
Theme Name: Twenty Twelve Child
Theme URI: http://wordpress.org/extend/themes/twentytwelve
Description: Child theme for the Twenty Twelve theme for PowersBrewery.com
Author: Ken Powers
Author URI: http://powersbrewery.com/
Template: twentytwelve
Version: 0.1.0
*/

@import url(“../twentytwelve/style.css”);

.main-navigation {
width: 100%;
border-bottom: 1px solid #EDEDED;
border-top: 1px solid #EDEDED;
border-color: rgba(0,0,0,0.1);
}

.main-navigation ul.nav-menu {
border: none;
margin: 0 auto;
display: block;
width: auto;
}

I ran into one small issue when I indicated I wanted to use the child theme from within the WordPress administration screen, however. My menu wasn’t displaying correctly when viewed with the child theme. I did a little more quick Internet searching and discovered that I needed to go to Appearance/Menus, and indicate the primary menu for the theme was the one I created for the master theme. It seemed a little odd that all other theme-pertinent appearance options transferred to the child theme but the menu selection did not. In any event, it was a very quick and easy change and now everything is working as it should.

Once I discovered how easy it is to create a child theme for WordPress, I performed the same steps to my Powers Fine Art website. The theme for the art site gets updated very regularly so I was frequently having to make changes to the original files. Now, however, I don’t have to worry about continual modifications.

As can be deduced from this article, utilizing a child theme for modifications is the logical approach. Had I initially known about this WordPress feature, I would have definitely incorporated its usage when I moved and redesigned my fine art website. Hopefully the discoveries I make while stumbling through my artistic and web development journey are useful to those who are following a similar path.

Tagged with: , , , , ,
Comments (0)

Be the first to leave a reply!

Leave a Comment

* required

This is a unique website which will require a more modern browser to work!

Please upgrade today!