Do you want to Build a Child theme for your Genesis Framework ?
Read out how you can make it !
If you are using WordPress as your blogging platform then you must have experimented with various themes so far. Did it ever occur to you that you may also be able to get a customized theme of your own? If yes then you must have given it a thought. However, if you are not sure how you can get a WordPress theme of your own then you are going to find some useful information in this post.
I’m going to tell you how you can create a child them of genesis framework by yourself. There are various advantages of having your own child theme like, your theme will have only those features that you need and secondly, you can also make any changes in future easily.
Let us start building our own child genesis theme
There is an action called wp_footer in WordPress that allows you to add some information in footer of your page easily. You will have to add this action in your function.php file. For example, if you want to add your Google Analytics code in the page, you can do it as follows.
There is a filter excerpt_length that lets you decide how much text will be displayed when you use the_excerpt() in your theme. You can modify it by putting it in your functions.php file.
Start Building Your First Child Theme
The steps that you should carry out are mentioned below.
- Create a subdirectory for the child theme project on your site
- Install WordPress and Genesis
- Entire functionality of website should be built in to the theme
- Use proper CSS to make output look similar
Creating the Child Theme
Go to /wp-content/themes and here you should create a spare directory for your child theme. Give it a name like “childtheme”. There are only two files that you are going to need for your child theme and these are functions.php and style.css. If you want, you can write a completely new style sheet for your website but a good option will be to modify the existing file.
Go to /wp-content/themes/genesis/style.css and copy it to /wp-content/themes/childtheme/style.css. Make sure you don’t use @import in CSS because it will sync your child theme with parent theme and you don’t want it to happen.
Look at the top of your stylesheet to change the information. You should put Template: genesis because this is how you can define it as a child theme.
Customizing the Child Theme
Your child theme is now activated but you still need to customize it for your use. Below, you will find some important information about theme customization.
This is what we will do
- Update Theme Settings
- Building The Menu
- Setting up content area for Home Page
- Create Footer Area
Update Theme Settings
The good thing about genesis is that, it allows you to control many features directly from WordPress backend so you don’t have to go into coding again and again. Find this option in t Genesis > Theme Settings.
Here you will find all those things that you can change in theme like the header logo, the home screen image and many other things as well.
Building the menu
If you want, you can create your own menu but it is not necessary. You can leave this step if you don’t desire to have a customized menu of your own. Below is a code that I used to combine a primary and a secondary menu inside the header.
Setting up the content area for Home Page
Since our Home page is going to be static and it doesn’t show recent posts so I will go ahead and create a page called Home.
Next, I will create the content area. First, you will have to remove the default loop, genesis_do_loop() and replace it with our own, be_home_loop(). After all the tweaking, this is how the functions.php file will look like.
This is the final customization that we need to do. In this section, we will be creating a footer file. The customization will be made in functions.php file.
Following code will add search feature in footer area.
That’s it. We have successfully created our own child theme of genesis. There are many functions which are not added in this theme but you can make any changes as per your mind. You can also ask an efficient web design company to make a child theme according to your demands as well. If you have any more suggestions then let us know. Thank you