Would you want to build your own genesis child theme for your blog?
Would you want to customize genesis child theme?
Are you looking for a detailed to for creating an outstanding custom genesis theme?
If your answer is yes then here I am going to share complete steps and guide to create a new genesis child theme. You can customize child theme as you want. Before this you have need genesis freamwork. You can buy genesis freamwork from studiopress.
Why should I design my own child theme
The very first question is arising in your mind that why should I desigin a genesis child theme. So here is answer,
- StudioPress updating genesis freamwork regularly. So if you customize genesis parent theme then at time of update you will lose all customization.
- If you want to setup your blog as a brand like dsdm.in, Blogging Rocket and shoutmeloud, you need a very unique theme design.
- In child theme, there is no encrypt and useless codes. So you theme will load faster.
- If you want to learn wordpress theme development, then you can learn a lot by these experiments.
So, here is how to create a simple genesis child theme.
In child theme we need just 2 files, function.php, style.css. Next if we planned to design custom templates, then we need files like header.php, main-page.php, blog-page.php etc.
Step:1 First create two files in notepad { function.php and style.css}. If you want to use your own theme screenshot then rename your logo with screenshot.php. We are doing this in notepad.
Now open function.php and paste following codes and save it.
<?php
//* blogging rocket genesis theme
include_once( get_template_directory() . ‘/lib/init.php’ );define( ‘CHILD_THEME_NAME’, __( ‘Blogging Rocket Pro Theme’, ‘rocket’ ) );
define( ‘CHILD_THEME_URL’, ‘http://bloggingrocket.com/’ );
define( ‘CHILD_THEME_VERSION’, 1.0.0′ );
Step: 3 Now open genesis parent theme and navigate style.css. Copy this folder to newly created style.css
Step: 4 Next make a zip file by combining above files{ function.php, style.css and screenshot.png}
Congrats, our genesis child theme is ready.
Next go to your wordpress dashboard and upload child theme. When you active this theme you will see same theme as genesis parent theme.
It is a simple genesis child theme. You can also get free genesis child theme from studioPress.
Now you are thinking that what the hell. To build a strong theme we need to customize function.php and style.css files. You can edit them from editor panel or via ftp.
Here I am sharing few codes for normal customization. All these codes will go to function.php
1. Move Primary Navigation Menu Before Header
If you want to move primary menu before header, then use these codes.
/** Move Primary Navigation Menu Above Header */ remove_action( 'genesis_after_header', 'genesis_do_nav' ); add_action( 'genesis_before_header', 'genesis_do_nav' );
2.Move Secondary Navigation Menu above Header
This code is used to move secondary menu before header.
/** Move Secondary Navigation Menu Above Header */ remove_action( 'genesis_after_header', 'genesis_do_subnav' ); add_action( 'genesis_before_header', 'genesis_do_subnav' );
//* Remove the primary navigation menu on home/front page remove_action( 'genesis_after_header', 'genesis_do_nav' ); add_action( 'genesis_after_header', 'myg_do_nav' ); function myg_do_nav() { if ( is_home() || is_front_page() ) return; genesis_do_nav(); }
4.Remove Both Primary and Secondary Navigation Menus on Home page
remove_action( 'genesis_after_header', 'genesis_do_nav' ); remove_action( 'genesis_after_header', 'genesis_do_subnav' ); add_action( 'genesis_after_header', 'myg_do_nav' ); function myg_do_nav() { if ( is_home() || is_front_page() ) return; genesis_do_nav(); genesis_do_subnav(); }
5.Add Custom logo to Genesis child theme
add_theme_support( 'genesis-custom-header', array( 'width' => 960, 'height' => 100 ) );
6.Remove Genesis Header From Front Page Only
add_action( 'genesis_before_header', 'myg_remove_header_home' ); function myg_remove_header_home() { if ( ! is_front_page() ) { return; } remove_action( 'genesis_header', 'genesis_header_markup_open', 5 ); remove_action( 'genesis_header', 'genesis_do_header' ); remove_action( 'genesis_header', 'genesis_header_markup_close', 15 ); }
7.Register a Beautiful Genesis Footer
/** Add support for 4-column footer widgets **/ add_theme_support( 'genesis-footer-widgets', 4 );
8.Remove Genesis Footer Credits Links
/** Customize or remove the Genesis footer credits links */ add_filter('genesis_footer_creds_text', 'custom_footer_creds_text'); function custom_footer_creds_text($creds) { $creds = ' 2015 My Genesis Themes</a>'; return $creds;
9.Re position Genesis Breadcrumbs
//* Reposition breadcrumbs from before .entry to inside .entry (above title) on single Posts and static Pages add_action( 'genesis_before_content', 'myg_reposition_breadcrumbs' ); function myg_reposition_breadcrumbs() { if ( is_singular() ) { remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' ); add_action( 'genesis_entry_header', 'genesis_do_breadcrumbs', 9 ); } }
10.Modify Speak your Mind Text for Comments
add_filter('genesis_comment_form_args', 'custom_comment_form_args'); function custom_comment_form_args($args) { $args['title_reply'] = 'Leave a Comment'; // $args['title_reply'] = ''; for total removal return $args; }
11.Change Comment Box Position to Above Comments
add_action( 'genesis_before_comments' , 'wps_post_type_check' ); function wps_post_type_check () { if ( is_single() ) { if ( have_comments() ) { remove_action( 'genesis_comment_form', 'genesis_do_comment_form' ); add_action( 'genesis_list_comments', 'genesis_do_comment_form' , 5 ); } } }
12.Remove URL Field from Comment Form
add_filter( 'genesis_comment_form_args', 'myg_comment_form_args' ); function myg_comment_form_args( $args ) { unset( $args['fields']['url'] ); return $args; }
13.Remove HTML allowed Tags in Genesis
function remove_comment_form_allowed_tags() { add_filter('comment_form_defaults','wordpress_comment_form_defaults'); } function wordpress_comment_form_defaults($default) { unset($default['comment_notes_after']); unset($default['comment_notes_before']); return $default; }
14.Remove Post Info in Genesis Theme
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
15.Remove Post Meta in Genesis Theme
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );
16.Add Custom Featured Image Size
//* Add image sizes for slider and home page add_image_size( 'slider', 1140, 445, TRUE ); add_image_size( 'home-widgets', 293, 150, TRUE ); add_image_size( 'related', 100, 100, true );
17.Change Search Box Text in Genesis
/** Customize search form input box text */ add_filter( 'genesis_search_text', 'custom_search_text' ); function custom_search_text($text) { return esc_attr( 'Search my genesis themes' ); }
//* Add last updated date to the post info in entry header add_filter( 'genesis_post_info', 'myg_post_info_filter' ); function myg_post_info_filter($post_info) { if (get_the_modified_time() != get_the_time()) { $post_info = $post_info . '<br/>Last updated on: ' . the_modified_date('F j, Y', '', '', false); } return $post_info; }
19.Remove Primary Sidebar in Genesis
/** Unregister genesis primary sidebar */ unregister_sidebar( 'sidebar' );
20.Remove Secondary Sidebar in Genesis
/** Unregister Genesis secondary sidebar */ unregister_sidebar( 'sidebar-alt' );
These are some basic codes for editing genesis theme.
Final Words: I wrote almost complete guide for creating custom genesis theme . However if you are facing ang problem, feel free to drop comment here.
Wow! I never tried creating a theme but well, this article will help surely 😀
Using a custom theme always make a good impression on your readers but at the same time its not a easy thing to create own Theme when you are nob in coding at all , this is awesome article for a newbie who wants to have a custom theme 🙂 Cheers !!!!
I have shared step by step guide for creating child theme. So i dont think you will face any issue.
However, i am here to help each and every coder 😛 .
I use MyThemeShop themes on my blogs, because unable to create own theme using Genesis. This tutorial help to create my own theme in future.
Can you provide sample theme using this tutorial ?
Ok. I will update a simple genesis child theme here.
Stay connected with me and blogging rocket.
Still Waiting for your next article on Genesis Customization.
Will write soon
Awesome work, I was trying to create, but i was stuck in the middle. Thanks for your guide for helping out!
This article helped me a lot in designing genesis child theme.
You are doing great job. Keep it up brother.
great post bro… Thanks for sharing 🙂
Sir, would you be kind enough to guide me to a theme based on my requirement. Sir, i have went through 100 s of demo but i am not able to zero on to a theme for my site although i have zeroed on using Genesis Framework.
I Want to change my Mobile Menu Style, Can you share the details for it?
If you are using genesis then i will write a tutorial soon.
Subscribed and Bookmarked!
bro plz tell how to download free genesis theme?
we cannt download all themes free. But few themes are present for free download. Plz google this.
Nice articles written very well all details but for me so hard to create my own custom themes thanks for sharing this helpful information to us some time I’ll try to make it
bro, please send me genesis framework. i am not having money to buy. Thanks for information
Good Luck!
Check your mail bro.
sir, your Genesis theme was awesome. Can you send me your Genesis child theme. I liked your design and I am searching for child theme for my site without writing content.
Help me
Hi bro.
Its my custom theme. and i wasted 20+ days to design this theme.
If you need any other theme, then mail me at janiprabhat{at}gmail.com
Informative and good guide for starters!
Btw good theme as well :3
cool share bro. Would like to implement on my website. Thanks a ton for detailed guide.