How To Add Custom Widget Areas To The Front Page Of The Digital Pro Child Theme

In this tutorial, you will learn how to add new custom widget areas to the Front Page of the Digital Pro child theme for Genesis.

Note: I no longer use the Digital Pro theme for Magnet4Blogging Media. I am currently using a modified version of the Business Pro theme that works with Genesis.

A few of my readers have kindly asked if I could write a detailed post on how I was able to modify and customize the Digital Pro Genesis child theme for this website.

Well, I in this post I hope to do just that.

I love the Digital Pro child theme. I've played around with modifying it many times over on my staging site, and I've finally tweaked it to just the way I want it to look and work on Magnet4Blogging.

If you don't already have this theme and would like to use it on your blog or website, click here.

What I'm going to show you primarily is how to add new widget areas to the front page of the Digital Pro child theme. Along with some other tips for changing the style and font.

Disclaimer:

Once again, this is a tutorial post for modifying and customizing the Digital Pro child theme for Genesis. Please don't attempt to try and modify any other Genesis child theme using the same methods below, in hope that it will work. You may end up breaking your theme.

Right, the other very important thing I want to quickly mention before we crack on is this:

Back up everything!

Yes everything, hopefully, you are using a quality backup service for your WordPress site. Something like BlogVault or VaultPress.

I can't stress enough about the importance of backing up your site. Also, if you're using a staging site or locally hosted WordPress site before doing this on your main live site, even better!

OK, this tutorial will also assume that you already have Genesis and the Digital Pro child theme installed. If you haven't, once again you can grab a copy of them both via my affiliate link.

Modifying the front page of the Digital Pro child theme

So what exactly do I mean by modifying the theme's front page?

Well, what I'm going to specifically show you is how to achieve this look for your homepage - See image below.

By the way, since updating this post, I've completely redesigned and rebranded the site. However, this tutorial is still very relevant if you're using the Digital Pro theme.

If you're currently using the default Digital Pro child theme settings on your website, you'll notice the screenshot above appears a little bit different from the default theme.

For starters, the modified look uses five widget areas instead of just three.

Let's quickly go over the elements that make up this "customized homepage" appearance.

1. Main above the fold hero section. (Theme default widget area)
2. Influencers section below the fold. (Newly added widget area)
3. Services section (Theme default, slightly modified)
4. Recent testimonials (Newly added widget area)
5. Information section above footer (Modified)
6. Footer section (Theme default)

Let's begin.

Step One: Adding additional widgets to the front page

First, log into your WordPress dashboard as normal.

Then, go to the Static Front Page (front-page.php file), and not the Theme Functions (functions.php).

Click on Appearance > Editor, then make sure that Digital Pro theme is selected, and that the front-page.php file is being viewed.

I want to remind you at this stage to ensure you've created a backup copy of all the contents on this page, just in case you need to revert back to it should you make a mistake.

What I usually do is copy the entire content of the page I'm going to be modifying, and then paste it into a blank notepad to save on my desktop. Should I make a mistake or need it later on, I can use it to restore things back to normal.

Disclaimer: If you break your site, I won't be held responsible. You are following these guidelines at your own risk.

Right, so on the Editor page you're currently on, scroll down the Static Front Page until you see this line:

// Add widgets on front page

Now carefully select the portion of the script highlighted in red, shown in the image below, and delete it.

DO NOT PRESS SAVE CHANGES AFTER... yet.

OK, so the next step now is to carefully select the PHP script below and paste it into the area where you just deleted the previous script.

You can look at the image above for reference of where the old code was originally placed. It simply replaces that code.

genesis_widget_area( 'front-page-1', array( 'before' => '<div id="front-page-1" class="front-page-1"><div class="widget-area fadeup-effect"><div class="wrap">', 'after' => '</div></div></div>', ) );

genesis_widget_area( 'front-page-2', array( 'before' => '<div id="front-page-2" class="front-page-2"><div class="wrap"><div class="flexible-widgets widget-area fadeup-effect' . digital_widget_area_class( 'front-page-2' ) . '">', 'after' => '</div></div></div>', ) );

genesis_widget_area( 'front-page-3', array( 'before' => '<div id="front-page-3" class="front-page-3"><div class="wrap"><div class="flexible-widgets widget-area fadeup-effect' . digital_halves_widget_area_class( 'front-page-3' ) . '">', 'after' => '</div></div></div>', ) );

genesis_widget_area( 'front-page-4', array( 'before' => '<div id="front-page-4" class="front-page-4"><div class="wrap"><div class="flexible-widgets widget-area fadeup-effect' . digital_widget_area_class( 'front-page-4' ) . '">', 'after' => '</div></div></div>', ) );

genesis_widget_area( 'front-page-5', array( 'before' => '<div id="front-page-5" class="front-page-5"><div class="wrap"><div class="flexible-widgets widget-area fadeup-effect' . digital_halves_widget_area_class( 'front-page-5' ) . '">', 'after' => '</div></div></div>', ) );

Make sure that you haven't accidentally deleted the closing curly bracket ( } ) at the end of the code.

AGAIN, DON'T PRESS SAVE CHANGES. You're not quite done just yet.

Step Two: Add additional rules to if-statement in meta fields

Next, scroll up the page you are currently on until you see this line:

function digital_front_page_genesis_meta()

Now carefully select the script highlighted in red, as shown in the image below, and delete it.

Then, carefully select the PHP script below, and paste it into the area where you just deleted the old script.

Remember to double check to ensure you haven't accidentally deleted the curly opening bracket ( { ).

Look at the image above for reference if it makes it easier.

if ( is_active_sidebar( 'front-page-1' ) || is_active_sidebar( 'front-page-2' ) || is_active_sidebar( 'front-page-3' ) || is_active_sidebar( 'front-page-4' ) || is_active_sidebar( 'front-page-5' ) )

All you're doing here is adding two additional 'if-statement' rules to the meta fields for the new additional widgets you've just added in step one. 'front-page-4' and 'front-page-5'.

Now you can press Save Changes. However, you're not done yet.

Registering the new widgets in Functions.php

Next step is to register the widgets in your Functions.php file.

If you look on the right-hand side of the Editor page, you will find; Theme Function (functions.php) file. Click on this.

Then, scroll all the way down to the bottom of the Functions.php page until you see this - See image below.

Once again, I would recommend backing up a copy of the contents of this page before making changes to it.

Now, place your cursor at the very end of the line of code and hit space twice to create some new space (lines).

Then, carefully copy the PHP script below, and paste it into the bottom of your functions.php file.

genesis_register_sidebar( array( 'id' => 'front-page-4', 'name' => __( 'Front Page 4', 'digital' ), 'description' => __( 'This is the 4th section on the front page.', 'digital-pro' ), ) );

genesis_register_sidebar( array( 'id' => 'front-page-5', 'name' => __( 'Front Page 5', 'digital' ), 'description' => __( 'This is the 5th section on the front page.', 'digital-pro' ), ) );

Close any spaces you have from the end of the previous code, 'front-page-3'. (If there are any spaces)

You can now press Save Changes.

You have just registered two additional widget areas to make a total of five widget areas for the front page.

If you now go to Appearance > Widgets, you'll see that this is the case. If it isn't the case, then something has gone drastically wrong, and you may have to restart the process all over again.

If you need help with any of this, remember, I am available to hire.

What have you just done?

You've simply added two new additional widget areas to your theme's front page.

Instead of adding them individually, like front-page-4 and the front-page-5, I've provided you with the complete replacement PHP codes for all the widgets on the front page, just to save you a HUGE amount of time.

Typography and CSS styling

For those of you interested, I also had to change some of the CSS rules of the Digital Pro theme front-page.

To make CSS styling easier for this child theme (or in fact for any other Genesis Child Theme), I used or I'm using two additional plugins.

They are:

1. Genesis Extender Plugin which you can find here (aff).
2. WP Google Fonts plugin which you can find here.

Genesis Extender Plugin

You can use Genesis Extender to write new CSS rules that will override the default CSS in your Digital Pro child theme.

If you're familiar with even basic CSS, you can use some to style the new widgets to your liking.

If you don't know where to start, simply take a look at the Digital-Pro: style-front.css template to see how the other widgets on the homepage are styled for reference. See image below.

You can then create your own CSS based on the CSS rules of the other widgets on the front page.

The Genesis Extender is ultimately the best plugin you can use to make custom changes to your favorite Genesis child theme, so do check it out if you haven't already done so.

WP Google Fonts Plugin

The WP Google Fonts plugin will enable you to easily change the content typography style, without doing any theme hacking.

I personally loved the default "Poppins" font-style used for the headlines in the Digital Pro theme, but we wanted something different for the body content.

The name of the font-style we used for the DP theme was called "Open Sans" and you can find it here.

In fact, we're still using the 'Open-Sans' font-style for our new custom theme.

Colors and layout

Finally, if you're interested in learning about the custom colors the old Magnet4Blogging theme was using before the recent upgrade, here they are:

These are the only two colors we used over a white background layout (#FFFFFF).

As for the general layout of the Digital Pro theme, we just went for the default layout. Asides from using a little bit of CSS to override some of the settings, everything else was left as is.

Wrapping things up

OK, so I hope this post was informative enough for you. Let me recap the things you need to do to achieve the look I showed you at the start of this post:

1. Install Genesis theme framework and the Digital Pro child theme (If you don't already have them)
2. Back up everything.
3. Add additional two widgets to the front page by using the complete PHP code provided to replace default code.
4. Add additional rules to If-statement in meta fields using the complete PHP code provided.
5. Register new widgets in functions.php file using the additional PHP code provided.
6. Check you have new widget areas under Appearance > Widgets.
7. Add content and style with CSS.

The main task here is adding the new widget areas to your homepage. Take your time and remember to back up everything before you crack on with this.

Once again, if you are able to, I would recommend creating a WordPress installation locally on your computer and try it there first, before modifying anything on your live site.

Or perhaps you have a staging site where you can try this on first. If that's the case then great!

Hope you've enjoyed this little tutorial, if you have any questions please pop them in the comment section below. Or you can email me here. I will try my best to answer them for you.