Simple customizations for your Genesis child theme
As web designers, we are always looking forward to working more efficiently. As I started on a long overdue task of redesigning my portfolio, I was reminded of how much I love WordPress and how fast I was up and running when using the Genesis framework. A framework is essentially a WordPress theme structure that is put in place to be built upon. The Genesis framework by StudioPress is comparable to a block of Legos. It makes the different components of the theme easy to work on and easy to move around. Genesis is a very popular framework because it’s well supported and there are many tutorials that exist if you get stuck during the process.
As we all know, we do not edit the WordPress core. The same goes for the Genesis framework; we do not edit any of the framework files. All of our theme building is done in a Genesis Child Theme, which gives you the flexibility to create the perfect site. It is highly recommended that any building is done in a test environment when you’re developing your child theme or making customizations. Extensive testing is beneficial so you have the peace of mind that everything looks and functions correctly before officially sharing it with the world.
When you’re creating or modifying your child theme, there are customizations that you may want to make to enhance it. For a few of these customizations, we’ll be using the functions.php file in your child theme. This file is essential when making customizations.
Looking for a starter Genesis theme?
Remember, you must have the Genesis theme installed as the parent theme when you are creating a child theme. This child theme depends on the functionality of Genesis. Once you have it installed, there is a great starter theme to use if you’d rather not purchase one. This Genesis Sample Theme can be found on the StudioPress site.
You may notice that the Genesis Sample Theme looks pretty bare-bones, but to start all you need is a functions.php file and a styles.css file and you can build or adjust as you move along.
Add your Google Analytics tracking code
Chances are you’re using analytics of some sort to gauge the traffic for your site. Google Analytics is a great tool. All you need is a unique tracking code and you’re good to go. Signing up for a Google Analytics account is quick and easy. As an added bonus, it is free.
If you do have a tracking code already, be sure to bring this along with your new theme so you can insert it via the Genesis theme settings page. This is easy to do, but not always easy to find.
First, sign into your WordPress admin account. Once you’re logged in, click on Genesis > Theme Settings. You will see options for the Header and Footer. This will be pasted in the Header field.
It should look something like this:
As you can see from the above screenshot, it’s pretty simple to add your tracking code and use the tools in Google Analytics to view your site data. However, this may be limiting depending on how much of data you would like available to you.
What if you want to see other business data besides what Google Analytics offers? If you are more of a power user, there are plugins out there that let you view valuable stats. One worth mentioning is Google Analytics for WordPress by MonsterInsights. It connects your site with Google Analytics, allowing you to view performance data. There are a lite and pro version, so many types of analytics are available. If you are using a plugin, chances are that you will not need to manually add the Google Analytics tracking code to the header and you’ll follow the plugin guidelines. Often there is a place in the plugin settings where you will add a reference to the snippet to connect to your account.
Adding widget area
Maybe you want to add a block of text, author box, or something that you’d like to appear after each post. Adding a widget is a quick way to create this functionality.
The Genesis Visual Hook Guide plugin shows the different areas of the page and is helpful when specifying locations for your function. That’s how you will know to reference genesis_before_comments in the function so the widget shows up in the correct place.
This is done in the functions.php file. First, we register our widget area. Then we use a function to actually add it to the page.
//* Register widget area called 'after-post'
genesis_register_sidebar( array(
'id' => 'after-post',
'name' => __( 'After Post', 'sample' ),
'description' => __( 'This is a widget area that can be placed after the post', 'sample' ),
) );
//* Hook after-post widget area located after post content
add_action( 'genesis_before_comments', 'after_post_widget' );
function after_post_widget() {
if ( is_singular( 'post' ) ) {
genesis_widget_area( 'after-post', array(
'before' => '<div class="after-post widget-area">',
'after' => '</div>',
) );
}
}
Creating a custom home page
This is a scenario where we will create a custom template file for a custom homepage file. In this example, multiple widgets areas are used to build the home page. When using widgets, it is easy to create, maintain and update content.
If your theme has a front-page.php, it already contains a custom homepage. If not, one can easily be created that is named front-page.php.
When created, all you need to do is add the following code in front-page.php:
<?php genesis();
Add custom widget areas to front page
To begin adding custom widget areas to your homepage, you will go to functions.php and add those areas. You can add just one, or as many as you need. This example is showing three widget areas.
Make sure that you are pasting this code after the php tag.
// Register widget areas
genesis_register_sidebar ( array(
'id' => 'front-page-1',
'name' => __( 'Front Page Widget #1', 'sample' ),
'description' => __( 'This is a front page widget area', 'sample' ),
));
genesis_register_sidebar ( array(
'id' => 'front-page-2',
'name' => __( 'Front Page Widget #2', 'sample' ),
'description' => __( 'This is a front page widget area', 'sample' ),
));
genesis_register_sidebar ( array(
'id' => 'front-page-3',
'name' => __( 'Front Page Widget #3', 'sample' ),
'description' => __( 'This is a front page widget area', 'sample' ),
));
The widget areas show when you go to Appearance > Widgets, but they will not be shown on the actual homepage yet. To get them to show up on the homepage, this will require markup to actually display the widget.
Create action to show widgets
To get it to actually show up on the page, actions and functions need to be added to front-page.php. This will go before we call genesis();.
add_action( 'genesis_meta', 'digital_front_page_genesis_meta' );
/* Widget support for front page */
function digital_front_page_genesis_meta() {
if ( is_active_sidebar( 'front-page-1' ) || is_active_sidebar( 'front-page-2' ) || is_active_sidebar( 'front-page-3' ) ) {
add_action( 'genesis_after_header', 'digital_front_page_widgets');
}
}
This widget goes before genesis_before_content. The Genesis Hook Guide shows the various places where action hooks can “hook in.”An action was attached and it is checking if there is an active widget and it will determine where it will hook. Here, the widget is going to go after the header, but there are many other places where widgets can go.
Here are just a few examples:
- genesis_before_header
- genesis_before_sidebar_widget_area
- genesis_before_footer
- genesis_before_comments
It’s getting there, but the real magic happens when the function is called to display the widget.
Function to add widgets to front page
Often this step is done before attaching an action, but it should go under the action snippet. A custom function is created here. The genesis_widget_area function is being called.
You can add as many divs here as you wish. I have an inner one with a class of .wrap, which I find helpful. You can change this to be whatever you’d like. One thing for organization purposes: having an id/class that references the widget with a recognizable naming convention is very helpful. This array contains markup that can be wrapped around the widget, which is good for CSS styling, which can be modified to be different from this example. Double check that you are still looking at front-page.php, since this snippet also belongs in there.
//* Add widgets on front page
function digital_front_page_widgets() {
genesis_widget_area( 'front-page-1', array(
'before' => '<div id="front-page-1" class="front-page-1"><div class="wrap">',
'after' => '</div></div>',
));
genesis_widget_area( 'front-page-2', array(
'before' => '<div id="front-page-2" class="front-page-2"><div class="wrap">',
'after' => '</div></div>',
));
genesis_widget_area( 'front-page-3', array(
'before' => '<div id="front-page-3" class="front-page-3"><div class="wrap">',
'after' => '</div></div>',
));
}
You can then create a layout and use widget areas for the homepage content.
Adding your logo
A logo is a necessary branding element, so adding it to your site will really make your users feel right at home.
Chances are your theme will have the capability to upload a logo file. If you’re using the Genesis Sample Theme, you will. The easiest way is to go to Appearance > Customize and Upload your logo file. You may have to adjust the CSS a bit and add margin and padding if needed.
In the functions.php file, you may find something that resembles this:
// Add support for custom header add_theme_support( 'genesis-custom-header', array( 'width' => 500, 'height' => 120 ) );
If you have a different size preference, you can change the width and height values to accommodate your logo.
Changing footer credits
Most themes, by default, come with a link to the theme and copyright information. One quick and easy way to change the footer credits uses the functions.php file and shortcodes. There are plugins that allow for simple changing of footer credits, so you can decide which method works best for you.
Say you don’t want the theme information in the footer but you do want to keep the copyright information. This will make a global change to the footer, and you’ll no longer have to see the theme information in the footer.
//* Customize the footer credits
add_filter( 'genesis_footer_creds_text', 'my_custom_footer_creds' );
function my_custom_footer_creds(){
$creds = '© 2015 Your Name.';
return $creds;
}
That will work, but what if you would like the information to auto-update when the year changes?
There’s a trick to automatically update the year. Including the shortcode [footer_copyright] lets us set it and forget it.
//* Use a shortcode instead
add_filter( 'genesis_footer_creds_text', 'my_custom_footer_creds' );
function my_custom_footer_creds(){
$creds = '[footer_copyright] Your Name.';
return $creds;
}
It doesn’t matter if you prefer to update the footer in the theme or use a plugin to do this. It all depends on preference. If you plan on changing themes often, it makes sense to use a plugin for footer content. The reason for this is that if you have the analytics code in a theme file, you will have to remember to update to the new theme. A plugin will work across all themes. Genesis Simple Edits is the perfect solution for something like this. It’s simple to use and with a small snippet, the footer will stay up-to-date across multiple themes.
You’ll see the option on the left for Simple Edits under the Genesis heading. This plugin gives you access to a Genesis settings page. If you scroll down to “Footer Output,” you will see how adding a shortcode and text allows for a global change. The [footer_copyright] shortcode makes sure that the copyright year is always up-to-date.
The footer is not the only thing that can be modified with this plugin. In addition to the footer, Simple Edits allows you to modify the post-info (byline) and post-meta on any Genesis theme. Using text, shortcodes, and HTML in the text boxes provided, you can easily edit these areas.
Adding personal touches to your theme is the fun part of the design process! These customizations are great examples of simple changes that help personalize your website and really make it your own.
Great to see you guys recommending Genesis. Absolutely agree with what you said about being a great framework upon which to build a solid website. What is also great about it is that it removes a lot of the leg work in setting up a WordPress website that conforms to best standards (or gives you a foundation best standards if you are not the strongest developer).
The only things that I was slightly disagree with are:
Google Analytics
Yes, you absolutely can integrate Google analytics by pasting the script Google provides you with into the header section on the Genesis settings page.
However, that isn’t best practice (from a WordPress perspective). I almost always integrate Google Analytics through a plug-in these days (Yoast’s is particularly good). While you shouldn’t be moving away from the Genesis framework once you start using it, if you or the client does decide to use a non-Genesis Child theme, their website will no longer be tracked by Google analytics.
By moving the Google analytics set up to plug-in, the website will continue to be tracked even if the user stops using Genesis in the future.
Changing Footer Credits
Again, this is better done using StudioPress’ own Genesis Simple Edits plugin. While there is nothing wrong with editing the code in the child theme, if the user decides to choose a different Genesis child theme, the footer customisations will be lost. By using a plug-in, you can ensure that the user doesn’t have to go into the function.php file to fix it again.
Widgets
The last thing I would add really depends on who your end user’s. if you are dealing with a blogger who understands widgets and is likely to be wanting to chop and change their website quite frequently, 10 widgets are and okay approach. However, if you were building this website for your business who just wants to be able to post content quickly and easily, a custom meta box approach is better.
ACF works amazingly with Genesis. Indeed, I – and most of the other top Genesis Framework developers – use on almost all the website built using the Genesis Framework.
Hi Ben,
Really appreciate you taking the time to share your thoughts on Genesis approach to theme customization. It goes to show that we have multiple options to accomplish specific things. For the implementation of Google Analytics, using Yoast is certainly a viable option. I would encourage anyone using a third party plugin to make sure it secure, up to date, and that it works with the current version of Wordpres that they are running.
You also bring up an important point that footer credits can be modified in the Genesis Simple Edits plugin. Personally, I try to keep the number of plugins I use to an absolute minimum. It keeps things simple and less chance of issues when there are updates. But on the other hand, I also know a lot of developers who do not see a problem with using many plugins. It’s just personal preference.
Hi Abbey,
Thanks for the post!
It seems that the ” ” in the footer code breaks something. With it, the site doesn’t load. Without it, the site does load.
Can you confirm if that’s the case for you?
I can’t seem to post that HTML in the comments. It’s the non-breaking space that I am referring to.
Genesis is such a solid framework. Love using it and my clients do as well!
This has been extremely helpful, as I’m getting ready to create my first Genesis website from scratch. No ready-made child theme to dissect.
Also, I absolutely love the design of your site. It is very pleasant.
Matt
Agree.
The desing of this website is really looking awesome. It’s says that, we can customize the genesis theme as the way we want. ;)
Very detailed and useful post. I planned to purchase Genesis framework+Magazine pro template. Aft customization can I sell that template? Or it’s against some policy?
Please Advise.
Abbey,
I have been reading some of your posts and am finding them very enjoyable, informative.
You have a great talent for translating all the “Techy” language into actual readable content.
and because of this I have subscribed ;)
BUT……..
I would love to know the workings of the eBook ipad shown on this page – http://highfive.getflywheel.com/managing-50-wordpress-sites/thanks?submissionGuid=62dadcb9-d2ad-4559-94c1-810a19efade6
and the code for it, ie. js script etc.
many thanks
Mick
Sorry to comment late on this article but I just wanted to send a thank you for writing it. I’ve been building WordPress sites for a four or five years, now, but just recently started using the Genesis Framework. This was very helpful.
Hi,
the post is really nice. I just bought a genesis theme but i want to customize it totally , please can you tell me which plugin is best to do it.
great tutorial , i was looking for remove footer credit, thanks for the help
Thanks for your tutorial.
But how can I add slider in homepage?
Is there a way to custom single page (single.php), i’m on stress now, haha
Hello, Abbey!
I am kind of a noob to meddle into coding as I am not so confident touching them. But thanks for the confidence boost by writing on this topic! :)
Gonna work on my Genesis framework to make it beautiful!
Thanks for covering it!
~ Adeel
I am using Genesis Framework – Magazine Pro and my site looks cool with that theme. Also this framework loads at lightening fast.
Hello,
Thank you for explaining in a detailed way. I heard about this Gensis theme but as I’m not good in Blogging, I kept this aside though I liked the theme very much. With the clear explanation of your article, I can setup the theme by my own. Thank you for step by step way with the clear images.
very helpful, I was looking for such a great tutorial, finally I’ve customized my Genesis theme with magazine pro.
Great to know about this. Thank you.
Nice article!
It helped me to customize credits of Genesis Parent Theme..
Thanks for your tutorial.
Can you write any tutorial about adding a logo in the left side of navigation bar in magazine pro theme ?
thnks for share can you share some css code with example
My site looks cool with Genesis Framework ;)
I am now stress, is there a way to custom single page hehehe
that’s great I was just looking to customize footer credit and got it. I also added widget on my genesis website.
2 codes in 1 place.
Really awesome.
Wow, those 2 things also helped me too. I guess Abbey knows what we want.
is there a plugin to make it easy? this is very difficult for beginners like me :(
thanks for this article genesis theme inbuilt with some widget area but we can increase their count by just copy and paste code again with different value
Hy, your posts are quite helpful dude, not a waste of time and I learned a lot.Keep It Up!
I don’t think the Framework is for noobs.
Thank you so much, this guide is Outstanding.
I had purchased the theme but was very disappointed when customizing it but this post did a great Job!
Thanks for sharing this article.
Recently, I’m shifted to Genesis framework and this helped me lot.
Hi Abbey,
Great Post!
Can You help me?
i added code after <?php tag like you did, but when saved the setting i got an error and can't access my wordpress.
I am using genesis theme, work perfect and load fast, thank you for sharing
Very Great Information
Thanks Sir/Mam
Thank you so much for the great explanation about genesis. I was also thinking to move to this theme thats why I search for its customization and google sent me to this post. I will try to find more info here.
Thanks again
Mudassir
Register Widget area and customize footer creadit, helped me a lot.
thank you so much.
Hello,
Thank you for explaining in a detailed way. I heard about this Gensis theme but as I’m not good in Blogging, I kept this aside though I liked the theme very much. With the clear explanation of your article, I can setup the theme by my own. Thank you for step by step way with the clear images.
I’ve been longing to add a custom widget area to my Genesis website home page. this guide is just what I need.