23

How To Create A Custom Genesis Child Theme 2017

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.Create An Outstanding Custom Genesis Child Theme

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,

bloggingrocket-theme

  1. StudioPress updating genesis freamwork regularly. So if you customize genesis parent theme then at time of update you will lose all customization.
  2. If you want to setup your blog as a brand like  Blogging Rocket and shoutmeloud, you need a very unique theme design.
  3. In child theme, there is no encrypt and useless codes. So you theme will load faster.
  4. 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

genesis-theme

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' );


3.Remove Primary Navigation Menu on Home Page

//* 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' );
}


18.Add Last Updated Post Date in Genesis

//* 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.

Get more stuff like this

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Prabhat Jani
 

I am an online entrepreneur. Marketing, Branding, Blogging & SEO are the few things I love and I love to talk to like minded people. So, make sure you drop me an email now, if you are one.

Click Here to Leave a Comment Below 23 comments
Arvind - July 25, 2016

Wow! I never tried creating a theme but well, this article will help surely 😀

Reply
Jaidayal Saraswat - July 26, 2016

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 !!!!

Reply
    Prabhat Jani - July 26, 2016

    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 😛 .

    Reply
Shaikh Masood Alam - July 26, 2016

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 ?

Reply
Lara - July 26, 2016

Awesome work, I was trying to create, but i was stuck in the middle. Thanks for your guide for helping out!

Reply
Anmol Singhi - July 27, 2016

This article helped me a lot in designing genesis child theme.
You are doing great job. Keep it up brother.

Reply
Babanpreet Singh - July 30, 2016

great post bro… Thanks for sharing 🙂

Reply
Erick Hachey - August 29, 2016

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.

Reply
Akash Tyagi - September 4, 2016

I Want to change my Mobile Menu Style, Can you share the details for it?

Reply
Daksh Miglani - October 16, 2016

Subscribed and Bookmarked!

Reply
rohaan - October 27, 2016

bro plz tell how to download free genesis theme?

Reply
Bheru Lal Gaderi - November 1, 2016

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

Reply
vijaygopal - November 15, 2016

bro, please send me genesis framework. i am not having money to buy. Thanks for information
Good Luck!

Reply
Suresh - December 3, 2016

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

Reply
    Prabhat Jani - December 3, 2016

    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

    Reply
Sanket Maheshwari - February 25, 2017

Informative and good guide for starters!
Btw good theme as well :3

Reply
pankaj bishnoi - July 7, 2017

cool share bro. Would like to implement on my website. Thanks a ton for detailed guide.

Reply

Leave a Reply: