Create custom widgets in WordPress with the Genesis Child ThemeGenesis is the most widely used WordPress framework for creating website layouts. It is favored by the developer. It lets them customize sub-themes as required without affecting the core theme's core functionality.

In this article, I will demonstrate how easy it is to customize Genesis sub-themes by creating 4 widget areas within the free Genesis theme with the Genesis Framework.

  1. Set up the development environment

To install Genesis Framework, you must have WordPress installed, locally or at the server. Assuming you have WordPress installed on the server or if not, launch WordPress using the Cloud Platform.

Now download the copy of Genesis Framework with theme template from StudioPress and activate the framework at the WordPress website.

Note: To customize the Genesis theme, I use Sublime Text 3 as a text editor. However, you have the right to choose any other text editor.

  1. Customize sub-topics

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

Now open front-page.php, add the following code.

This will initialize the Genesis Framework.


The sample theme doesn't come with front-page.php, so I have to explicitly create this page to register our widget area.


We will start adding widgets by modifying the function.php file in the topic, before we actually start coding, let us explain the back-end logic.

Here, we are declaring a function with an array of parameters:

  • id – to identify the code from us.
  • name – is what we will see in WordPress dashboard.
  • Description – this will also show up in WordPress dashboard.
READ  Roll In The Top 10 Best Travel Website Templates Of The Month

Note: domain id with the same function name must be unique.

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

For sliding gadgets

  1. genesis_register_sidebar (array (
  2. ‘Id’ => ‘previous page-1’,
  3. ‘Name’ => __ (‘Home slider widget’, ‘genesis template’),
  4. ‘Description’ => __ (‘This is a widget that appears on the front page.’, ‘Genesis-sample’),
  5. ));

For Content Widget 1

  1. genesis_register_sidebar (array (
  2. ‘Name’ => __ (‘Top left home page content’, ‘genesis template’),
  3. ‘Id’ => ‘content-1’,
  4. ‘Description’ => __ (‘House on top left’, ‘genesis template’),
  5. ));

For Content Widget 2

  1. genesis_register_sidebar (array (
  2. ‘Name’ => __ (‘Top content in the middle’, ‘genesis-sample’),
  3. ‘Id’ => ‘content-2’,
  4. ‘Description’ => __ (‘Top Middle Home’, ‘genesis-sample’),
  5. ));

For Content Widget 3

  1. genesis_register_sidebar (array (
  2. ‘Name’ => __ (‘Top right content’, ‘genesis template’),
  3. ‘Id’ => ‘content-3’,
  4. ‘Description’ => __ (‘House on top right’, ‘genesis template’),
  5. ));

As seen below, we have successfully created 3 different widgets. Now go ahead and upload your custom theme at the WordPress dashboard.


Note that the widget is seen in the Widgets tab. However, activating them does not have any effect on the interface. That's because we haven't added the markup to display this widget at the front-page.php file.

To add a widget display markup, we are declaring a custom function in the front-page.php file. In that function, we call the widget from the Id, which was previously created in the function.php file along with the HTML markup.

Although adding this function will not do anything because we have not tied this function to any action yet.

So we take action that contains the ‘genesis-meta’ hook there, we are calling the ‘my_homepage_setup’ function. In this function, we check to see if the widget area is working. If so, then we have to append the widget to the specified location and then call the widget function to display the widget marker.

READ  5 Great WordPress Plugins For Testing A B

Now, we will add the following code to the front-page.php file.

See more: Build a Website with WordPress

Widget slider

add_action (‘genesis_meta’, ‘my_homepage_setup’);

my_homepage_setup () function {

if (is_active_sidebar (‘front-page-1’)) {

// * Add slider widget

add_action (‘genesis_after_header’, ‘display_front_page_1_widget’);



// Add bookmark to show slider widgets.

display_front_page_1_widget () function {

genesis_widget_area (‘front-page-1’, array (

‘Before’ => ‘


‘After’ => ‘ div> div>’,



Content widgets (1, 2 and 3)

add_action (‘genesis_before_content’, ‘ng_home_page_widgets’);

// * Add household items to the location

function ng_home_page_widgets () {

if (is_front_page (”))

genesis_widget_area (‘content-1’, array (

‘Before’ => ‘


‘After’ => ‘ div>’,));

if (is_front_page (”))

genesis_widget_area (‘content-2’, array (

‘Before’ => ‘


‘After’ => ‘ div>’,));

if (is_front_page (”))

genesis_widget_area (‘content-3’, array (

‘Before’ => ‘


‘After’ => ‘ div>’,));


Finally, some CSS inside your style.css file

We are adding CSS to the style widget area. However, you are styled the way you like.

For simplicity, we only define the size and content widget buffer: the border is the same background color as the website container.

.first {left-margin: 0px; }

.site-container {background: #fff;}

.site-inside {padding-top: 0px; }

homecontent {

color: # 7e7467;

font size: 16px;

line height: 1,3;

shadow box: 1px 2px 5px 0px rgba (0, 0, 0, 1);

top margin: 25px;

Relative position; }

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

.hometopcol {

top margin: 0px;

height: 280px;

border: 4px solid rgb (255, 69, 0); }

.widgettitle {

color: # c4421b;

padding: 15px 0px 0px 15px;

lower border: rpxba 4px (162, 152, 135, 1);

bottom margin: 10px;

Text converter: None;

font size: 16px; }

.widgettitle: after {

content: “” ;

Absolute position;

top: 43px;

left: 5px;

READ  How to add video thumbnail images in WordPress

right: 5px;

border: 1px rgba solid (162, 152, 135, 1); }

Go back to the WordPress website and see the changes. For Widget Slider, we use Smart Slider 3. You can use any slider widget you like. For content widgets, we only use text.


The last look

At the end of this article, we created 4 custom widgets to the Genesis Sample sub-topic. By default, Genesis theme does not come with any title widget but now we have our own custom widget to be used with sliders or to display any other information. 3 other content widgets are used to highlight products, services or any other features.

After enabling all the features, the first page will look like this:



In the first part of this article, we only know how to use the Genesis Genesis theme as a sub-theme, but as we moved, we learned how to create custom widget areas in the WordPress Genesis Template theme and then how to Position them on the previous page design.

We confirm that after reading this article, you can easily customize or create your own Genesis sub-theme. For best practices, check official documentation from Genesis and WordPress.

Read more :

Leave a Reply

Your email address will not be published. Required fields are marked *