How to Convert a WordPress Theme to a Genesis Child Theme

Phew! Tough question right? ‘How to Convert a WordPress Theme into a Genesis Child Theme’. Well, it’s a long question, but not that tough. Then again, it depends on your requirements.

(Note to self: Stop rambling and get to the point)

Okay.

Let’s continue. Say somebody put forth this requirement. Or say some developer suggested this as a solution for your website development needs. The first question that you should find an answer to, is why is there a need to convert a WordPress theme into a Genesis child theme?

A lot of blog posts, (like this one: WisdmLabs is now on Genesis, which we’d written a while ago), talk about the advantages of Genesis. You can’t go wrong with Genesis. But the switch should not be triggered by the idea of “Genesis”, but rather the disadvantages your current theme provides, which can be overcome by Genesis. For example, you could consider switching your WordPress theme to Genesis, because of either of the following reasons:

1. Your current site is running slow, and you need a light-weight framework
2. You like the look of a theme, but would prefer Genesis as the primary engine
3. You need to strip features of a theme, and instead of customizing it, are planning to build a new theme from scratch

Once you have solid reasons in place, you can go ahead with the transition process. Let’s break down what we would need to accomplish into achievable steps:

1. Import Design Elements: Mimic the styling of the theme, e.g. fonts, colors, layouts
2. Import Functional Elements: Provide the needed functionality, e.g. theme options, shortcodes

Importing Design Elements: Styling the Genesis Child Theme

To start with, you have to create a Genesis Child Theme. How do you create a Genesis Child Theme? You have to start by creating a stylesheet (style.css). As Genesis indicates, you have to copy (and not import), the entire framework CSS into your stylesheet.

Now, the WordPress theme, (whose CSS you want your Genesis child theme to have), will have its own stylesheet. Instead of blindly copying the CSS, entirely into your Genesis child theme’s stylesheet, you have to selectively duplicate the styling rules.

For example, say you wanted to change a simple feature, like the font. Then, you could simply change the default font, in the Genesis CSS you copied. Say you wanted to style the header, as per the WordPress theme. Then, you could add the header CSS into your Genesis theme.

Changing the Site’s Logo

By default, Genesis does not allow you to change the logo of your theme. To change the logo of your Genesis Child theme, by making changes in your CSS.

Importing Design Elements: Creating Layouts in the Genesis Child Theme

Genesis provides you layout options which you can select for pages on your site. But say you wanted a particular layout for your blog page or single post, which were provided by the WordPress theme. In this case, you will need to override respective template files, in your Genesis child theme.

If your WordPress theme supports a Box Layout, and you want the same look, you can provide it by overriding the CSS of your child theme. Usually a Box layout can be achieved by changing the outermost wrapper class of the content.

Importing Functional Elements: Adding Shortcodes and jQuery Effects

Your WordPress theme might offer a bunch of shortcodes, which you might want to incorporate into your Genesis child theme. In this case, you will have to create a functions.php file for your child theme, and add the same shortcodes there.

If these shortcodes make use of jQuery to register user input or add animation effects, then you will have to include necessary JavaScript files in your theme’s folder structure, and enqueue the needed scripts as well.

Importing Functional Elements: Theme Options

Several themes provide certain options. The options Genesis provides by default are very limited. In this case, you might want to offer a user certain options from your WordPress theme into your Genesis theme.

Say for example, the WordPress theme provides users the option to choose a header style. If you decide that your theme should have one particular style from the options provided, you have to just override the header CSS, or header template if needed, to provide the needed look and functionality. But say you wanted to allow users to have the option to select a header style. You then have to include theme options in your Genesis child theme. But remember, adding theme options can make the theme heavy and sluggish.

To allow users to be able to create their own page layouts, you might consider integrating a page builder. Especially if your current WordPress theme provides the same. A popular page builder you could consider is the Visual Composer Plugin. By default Genesis does not support Visual Composer. You can customize your theme to support such a page builder plugin.

Of course all of this is possible only if you have the theme with you, and not just the demo or look of the theme. Building a Genesis child theme, by simply studying a theme is a totally different ball game.

Do make sure to timely test the theme you’re building in several browsers and test the responsiveness of your layouts.

Aaaa..and you’re done! Elaborate isn’t it?! Those of you developers who have worked on this as well, do let me know your inputs, for the benefit of fellow readers 🙂

• WordPress Tips & Tricks
• With tags: Genesis, Genesis Child Theme, Genesis Framework, WordPress Theme Development

Share:

• Ankita R

Please note, some of the links in this blog post might be affiliate links. This means if you go on to purchase a product using such a link, we receive a small commission (at no additional cost to you). This helps us support the blog and produce free content. We only recommend products we work with or love. Thank you for your support!