Sridhar Katakam

Genesis and WordPress Tutorials

Genesis Starter Child Theme

by 100 Comments

Update on August 23, 2017: Here is the newer version.

Originally published on March 28, 2015
Updated on May 22, 2016

For most of the custom PSD to WordPress work that I do, I use a modified version of Genesis Sample – a starter Genesis child theme if you will.

genesis-sample-starter

In this post I would like to share my modified Genesis Sample starter child theme based on Genesis Sample 2.2.3.

Download link is at the bottom.

Live Demo

Below are a few changes/additions to Genesis Sample:

Inline Mobile Responsive Hamburger menu

  • Renamed “After Header Menu” back to “Primary Navigation”
  • Removed Header Right widget area
  • Repositioned Primary Navigation menu from below the header to inside header to the right
  • CSS changes so the hamburger menu continues to remain at the right and not drop below the site title/logo until at least 440px

Inline Logo

The default WP/Genesis method for setting up logo is as a background image. I prefer using the regular img element in the HTML output instead.

To use image logo in place of the site title text,

  1. in functions.php, look for the block of code with comment text of “Add support for custom header” and change the width and height to twice that of your desired logo display size. The default is 600 x 160 meaning, we are going to show the logo at 300 x 80.
  2. while there, uncomment add_filter( 'genesis_attr_site-description', 'abte_add_site_description_class' );
  3. go to Appearance > Header and upload your 2x sized logo image
  4. in style.css set the 1x width of logo for .site-title img

Bye bye Blog Page Template

Don’t use the Genesis Blog Page Template.

When Bill says something you just do it, no questions asked.

Also added code in functions.php to remove the Blog Page Template meta box from Genesis theme settings.

Archive Page Template – Shouldn’t it be called Sitemap?

Yep.

Thanks again, Bill.

2015-03-28_17-59-30

Search form input placeholder text – Go away on focus

Regular:

Screen Shot 2015-03-28 at 6.14.27 pm

When clicked inside:

2015-03-28_18-14-49

CSS Adjustments

  • Removed fixed pixels width for .title-area
  • Replaced pixels width for footer widget areas with %s
  • Added CSS for improving the appearance of standard Gravity Forms forms. Before -> After

Download my Genesis Starter theme

References:

http://www.studiopress.com/genesis-sample/

https://sridharkatakam.com/inline-logo-in-genesis/

https://sridharkatakam.com/how-to-remove-site-description-tagline-in-genesis/

https://sridharkatakam.com/add-inline-mobile-responsive-menu-genesis-sample/

  • Great stuff Sridhar,
    I think these are more sensible and ‘flexible’ defaults than the default Genesis sample theme.

    A couple of questions:
    1, Did you consider going mobile first?
    2, What about accessibility? Did you think about or are you considering making it more accessible, like Carrie Dil’s Utility Pro theme?

    Thank you for sharing this! 🙂
    Rich

    Reply

  • nice work Sri. Rreally like this. I just starting working on a starter theme for all my projects. I may move to your and add some sass and a few other components. Really clean. Love it.!

    Reply

  • Nice job Sri. I’ve just started working on my own Genesis starter child theme that combines the power of Genesis with Bootstrap. These are some great ideas to implement too. Keep up the great work.

    Reply

  • Thanks Sri, this is awesome. I was starting to play around with another version of the Sample theme, but it’s now a bit outdated and I love the changes you’ve made!

    Reply

  • Wow… this is definitely much much better then the Genesis Sample Theme. Keep going and growing…

    Cheers!
    Joseph

    Reply

  • Wow, amazing. I love it!
    Thanks for this. I think that the responsive menu should be standard in a basic theme, I guess they forgot about it. Will use it for my next project.

    Reply

  • Great template, thankyou it’s just what i needed.

    Is there anyway that you can make the footer 100% instead of 32%, this is the code that i have found and if i adjust it in firefox, it works, but i cannot locate it anywhere

    .gwfoot-footer-one-one-third {
    width: 32%;
    }

    Reply

  • Found a problem. Under Genesis/Theme Settings.

    Header
    Use for site title/logo:
    Dynamic text = Shows the logo.png image. Should show text?
    Image logo = Shows nothing?

    Thanks for all your work Sridhar!

    Reply

  • Hi, ive used your template, and its great, so nice and simple just want i needed.

    Just wondering when i put text into the header it aligns right on mobile and ipad.

    What do i need to adjust to get it to do the same as the search bar.

    http://culoulsawmills.com.au

    Thanks

    Reply

  • Sridhar,
    Thanks so much for providing this starter theme. I used it on a new site this past week.

    Question: I’d love to have a ‘landing page’ template with this theme. Can you point me in the right direction? Should I just find an existing child theme with one and copy that?

    Thanks again!
    Craig

    Reply

  • Thank you for the changes, they are great! In the Genesis > Theme Settings there is a ‘blog page template’ section that allows you to select to show only posts from a specific category. However, with the changes there is no blog page template now so how do I still show only recents posts from one category on the home page?

    thanks

    Reply

  • Are there any turtorials that show how register a new widget area for this theme, i would like to make a full width windget area above the footer section.

    Thanks

    Reply

    • If you search this site for “register widget”, you’ll find a lot of tutorials. Find the one closest to your needs and tweak it.

      Reply

  • Thanks so much for sharing your version of the starter theme! I do have one question I hope you are available to answer. How do I switch to a different version of my logo when viewing on a tablet and/or mobile device, if that makes sense?

    Reply

  • Awesome starter theme thank you. I wish to make the header full width, pushing the logo to left side of screen and nav to right side. Can you point me in the right direction with this?

    Reply

  • I’m new to Genesis and previously used HTML5 Blank as a starter theme for WordPress. I barely made modification to the theme files. Now that I’m trying to learn and absorb Genesis, I’m looking for the most basic child-themes and that brought me to you!

    My question is… I am a Mobile-First developer. You theme is not Mobile-First. In the world of Genesis… what does this mean? Is it just a matter of the stylesheet having min-width up top and growing as you go down the page… or is there something in the functions.php file that is different?

    Reply

      • Thanks for the quick reply. I saw that mobile first theme, but I ran it through themecheck.org and it only got a 59%. That makes me nervous. The errors were:

        Critical alerts
        Unwanted files : hidden file(s) or folder(s)

        .ds_store .git was found.

        Deprecated functions : get_bloginfo

        get_bloginfo( ‘stylesheet_directory’ ) was found in the file functions.php. Use get_stylesheet_directory_uri() instead.

        Line 14: wp_enqueue_script( ‘mobile-first-responsive-menu’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/responsive-menu.js’, array( ‘
        Line 15: wp_enqueue_script( ‘mobile-first-sticky-message’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/sticky-message.js’, array( ‘j
        Warnings
        Unwanted directories : GIT revision control directory

        GIT revision control directory
        .git was found.

        Are these cause for concern?

        Reply

          • Wow! Thanks! I started using your starter theme for my first project with Genesis. I just commented out all the media queries for now and am building it mobile first. I think I’m going to continue doing that and add min-width as I go along. I will also A/B your starter theme and his, note the differences and try to understand why they exist. I’m looking forward to learning this framework and you’ve been a big help.

            Thanks again.

  • Thanks so much for the great theme! I feel silly asking, but for the life of me I can’t figure out how to upload my custom logo image. Can you please direct me?

    Thanks!

    Caroline

    Reply

  • Thanks for another great contribution following up your posting of what changed in the new sample theme. I like the way you have handled the menu. I definitely will give it a try.

    Reply

  • For some reason when I upload this to my deploy installation, the title is 100% and the right menu is pushed down

    The title-area is using .header-full-width .title-area

    I’m not sure how I even did that!

    Reply

  • Hi Sridhar!

    Just wanted to say thank you for sharing your starter theme!!
    Besides developing websites, are you doing SEO too?

    Thanks

    Reply

      • Hi Sridhar,
        I started to customize the starter theme and everything works fine. But after I added the css classes ‘.right’ to the last 2 menu items and ‘.last’ to the last menu item – I get the following: the two menu items are on the right side but in the wrong order. So the wrong menu item has ‘padding-right:0px;’.

        Does anybody know what I did wrong here?

        you can see it on musikerdienst.com

        Thank you!

        Reply

        • There’s no CSS for last selector in Genesis. So it will not work as you expect.

          As you have observed the order of the right floated menu items will be reverse of how they are present in the custom menu. So you can simply edit your menu and swap their order.

          Reply

          • for me the problem is that when I change the order of the menu items, the order of the mobile menu will change, too. So the order of the mobile menu will always be different to the menu of bigger screens.

  • Hi Sridhar, when uploading my custom logo, WordPress forces me to crop the image, then saves a re-named cropped version. Is there a way to get around this? Thanks

    Reply

      • Yes, retina display. My dimensions are set to 240px by 96px and my logo file is double this size. When I upload it I only get the option to save AND crop. Thanks….

        Reply

  • I noticed the latest Genesis Sample Starter Theme is version 2.2.4. Is there any reason that I should wait for an update on your theme which is based on 2.2.3?

    Reply

  • Will this starter theme still allow you to have a menu under the header? Same as the regular starter theme?

    (and like your own site!)

    Reply

      • I think what I mean is I’d like the choice?

        As it stands, I can have the menu under the title area (like your own site for example) or I can have the menu on the right in the header area (like the your sample theme).

        With yours, it seems that you can only use the menu in the title header area?

        Of course I could be mistaken? Can you have a menu in either position?

        Reply

        • Below header nav (instead of being floated to the right of header) can be set up by making these changes:

          1) In functions.php

          a) delete

          [php]// Reposition the primary navigation menu
          remove_action( ‘genesis_after_header’, ‘genesis_do_nav’ );
          add_action( ‘genesis_header’, ‘genesis_do_nav’ );[/php]

          b) change

          [php]add_theme_support( ‘genesis-structural-wraps’, array(
          ‘header’,
          // ‘nav’,
          ‘subnav’,
          ‘footer-widgets’,
          ‘footer’
          ) );[/php]

          to

          [php]add_theme_support( ‘genesis-structural-wraps’, array(
          ‘header’,
          ‘nav’,
          ‘subnav’,
          ‘footer-widgets’,
          ‘footer’
          ) );[/php]

          c) optional: to use Header Right widget area delete

          [php]// Remove Header Right widget area
          unregister_sidebar( ‘header-right’ );[/php]

          2) Make changes in style.css per https://www.diffchecker.com/d8fmVM4b. Left side is the code in Genesis Starter and right side is the modified code.

          Reply

  • This theme is very impressive! I have however been having issues with the genesis column classes with the addition of the CSS grid in the theme… as well as any existing clearfix, as grid cancels our floats and clears. Is there a way to update these so to continue to work?

    Reply

  • Great theme, i have use on one of the my website and this theme really good because they increases the loading page speed of my website.
    Thanks for this.!

    Reply
    • >