Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Faster WordPress Hosting: An Experiment for the Best Load Time (79ms). SEE HOW

How To Create Custom Widget In WordPress Using Genesis Child Theme

Updated on February 15, 2018

5 Min Read
Reading Time: 5 minutes

Genesis is one of the most widely used WordPress Frameworks for styling website layouts. It is popular among developers due to its parent-child theme architecture. It enables them to customize child themes as per their requirements without affecting the core functionality of the parent theme.

In this article, I will demonstrate how easy it is to customize the Genesis child theme by creating 4 widget areas inside Genesis Sample theme that comes free with Genesis Framework.

1. Setting Up Development Environment

In order to install Genesis Framework, you must have a WordPress installation, either locally or on a server. I assume, that you have already installed WordPress on your server and if not, launch your WordPress using Cloudways Platform.

Now download the copy of Genesis Framework and Sample theme from StudioPress and activate the framework on your WordPress website.

Note: For Genesis theme customization, I am using Sublime Text 3 as my text editor. However, you have the choice to choose any other text editor.

2. Child Theme Customization

Open Sample Genesis theme in your text editor and create a new file front-page.php in the root directory.

Now open front-page.php  and add the following snippet.



This will initialize Genesis Framework.

sublime text editor

Sample theme does not come with front-page.php, therefore, I have to explicitly create this page to register our widget areas.

Genesis Custom Widget planning

Custom Widget Areas

I will begin adding widgets by modifying theme’s function.php file but before I actually start writing code, let me explain the back-end logic.

Here I am declaring a function that takes an array of parameters:

  1. id – to identify our code.
  2. name – is what we will see in our WordPress Dashboard.
  3. description – this will also show in WordPress Dashboard.

Note: “id” and the “name” of the function should be unique.

Now open function.php and add the following code snippets at the end of the file.

For Slider Widget

genesis_register_sidebar( array(
           'id'       => 'front-page-1',
           'name'     => __( 'Homepage Slider Widget', 'genesis-sample' ),
           'description' => __( 'This is a widget that goes on the front page.', 'genesis-sample' ),
) );

For Content Widget 1

genesis_register_sidebar( array(
   'name'       => __( 'Home Content Top Left', 'genesis-sample' ),
   'id'         => 'content-1',
   'description'   => __( 'Top Left Home', 'genesis-sample' ),
 ) );

For Content Widget 2

 genesis_register_sidebar( array(
   'name'       => __( 'Home Content Top Middle', 'genesis-sample' ),
   'id'         => 'content-2',
   'description'   => __( 'Top Middle Home', 'genesis-sample' ),
 ) );

For Content Widget 3

 genesis_register_sidebar( array(
   'name'       => __( 'Home Content Top Right', 'genesis-sample' ),
   'id'         => 'content-3',
   'description'   => __( 'Top Right Home', 'genesis-sample' ),
 ) );

As seen below, I have successfully created 3 different widgets. Now let’s go ahead and upload the customized theme in WordPress Dashboard.

GenesCustom Widget dashboard

Note that the widgets can be seen in the Widgets tab. However, activating them will not have any effect on the front-end of our theme. That is because I have not added the markup to display these widgets inside our front-page.php file.

In order to add markup to display widgets, I am declaring a custom function in front-page.php file. In that function, I am calling widget from its “id”, which was previously created in function.php file along with some HTML markup.

Although Adding this function will still not do anything as we have not attached this function to any action yet.

For that, I am declaring an action that contains a hook ‘genesis-meta’ and in that, I am calling a function ‘my_homepage_setup’. In this function, I am checking that the widget area is active or not. If yes, then I have to hook that widget to a specified location and then call that widget function to display the widget markup.

Now I will add the following code snippet in front-page.php file.

Slider Widget

add_action( 'genesis_meta', 'my_homepage_setup' );

function my_homepage_setup() {

     if ( is_active_sidebar( 'front-page-1' ) )  {
            //* Add slider widget
           add_action( 'genesis_after_header', 'display_front_page_1_widget' );

// Add markup to display slider widgets.

function display_front_page_1_widget() {
     genesis_widget_area( 'front-page-1', array(
           'before' => '<div class="front-page-1-widget"><div class="wrap">',
           'after'  => '</div></div>',
     ) );

Content Widgets (1, 2 and 3)

add_action( 'genesis_before_content', 'ng_home_page_widgets' );

//* Add the home widgets in place

function ng_home_page_widgets() {
           if ( is_front_page('') )
           genesis_widget_area ('content-1', array(
                'before' => '<div class="one-third first hometopcol toplefthome">',
                'after' => '</div>',));
           if ( is_front_page('') )
           genesis_widget_area ('content-2', array(
                'before' => '<div class="one-third  hometopcol topmiddlehome">',
                'after' => '</div>',));
           if ( is_front_page('') )
           genesis_widget_area ('content-3', array(
                'before' => '<div class="one-third  hometopcol toprighthome">',
                'after' => '</div>',));

Finally Some CSS Styling Inside Your style.css file

I am adding CSS to style widget areas. However, you can style whichever the way you like.

For the sake of simplicity, I am only defining the size and padding of content widgets: border and background color for website container.

.first {margin-left:0px;}

.site-container {background: #fff;}
.site-inner {padding-top:0px;}

homecontent {
           font-size: 16px;
           line-height: 1.3;
           box-shadow:1px 2px 5px 0px rgba(0, 0, 0, 1);
           margin-top: 25px;
           position: relative;}

.textwidget {padding: 12%;text-align: center;}

.hometopcol {
     margin-top: 0px;
     border: 4px solid rgb(255,69,0);}

.widgettitle {
           padding: 15px 0px 0px 15px;
           border-bottom: 4px solid rgba(162, 152, 135, 1);
           margin-bottom: 10px;
           text-transform: none;
           font-size: 16px;}

.widgettitle:after {
           content: " ";
           position: absolute;
           top: 43px;
           left: 5px;
           right: 5px;
           border: 1px solid rgba(162, 152, 135, 1);}

Let’s get back to WordPress website and see the changes. For Slider Widget, I will be using Smart Slider 3. You may use any slider widget of your choice. For Content Widgets, I am simply going to use text.

Genesis Custom Widget list

Final Look

At the end of this article, I am able to create 4 custom widgets for Genesis Sample child theme. By default, Genesis theme does not come with any header widget but now I have my own custom widget that can be used for a slider or to display any other piece of information. The other 3 content widgets can be used to highlight products or services or any other feature.

After activating all the widgets, the front page should look something like this:


In the beginning of this article, we only knew how to use Genesis WordPress theme as Sample child theme but as we moved along, we learned how to create custom widget areas inside WordPress Genesis Sample theme and how to position them in the front page design.

I am sure, this article has given you enough confidence to customize or create your own Genesis child theme yourself. For best practices, it is recommended to check official Genesis and WordPress documentation.

Share your opinion in the comment section. COMMENT NOW

Ibad Ur Rehman

Ibad Ur Rehman is a WordPress Community Manager at Cloudways. He likes to explore latest open-source technologies and to interact with different communities. In his free time he likes to read, watch a series or fly his favorite Cessna 172SP in X Plane 10 flight simulator.

Start Growing with Cloudways Today!

We never compromise on performance, security, and support.

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!