How to Add a Genesis Widgeted Area

For branding purposes, web developers and site owners often customize the default Genesis template. One of the most edited sections of the Genesis child theme is the sidebar. Here, we offer you tips on how to add a widgeted area (sidebar) to a Genesis theme.

Backing up the function.php file

To be able to add a widgeted area  or sidebar to a Genesis theme, we will be editing the functions.php file. Make sure that you have at least a basic understanding of PHP before you proceed. You will also need to create a backup of the file by downloading it from the remote server to your computer via FTP.

Familiarizing the register and display functionsweb dev coding

Familiarize yourself with the functions below as you will be encountering them throughout this article:

  • genesis_register_sidebar() à this function will register the sidebar
  • dynamic_sidebar() à this function will display the sidebar

Registering your sidebar

Open your functions.php file in a text editor and copy the code provided below.

genesis_register_sidebar( array(
‘id’              => ‘ad-after-content,
‘name’     => ‘Ad After Content,
‘description’          => ‘This is a new sidebar that will display after the content.’,
) );

The “id” section must be a unique identifier that uses lowercase letters and numbers. Special characters (except for hyphens and underscores) and spaces are not allowed. The “name” section is used to identify the sidebar in the dashboard.  The “description”, as the name suggests, is used to describe where the sidebar will be used.

To register your sidebar, add the code to your functions.php file. If you already have existing sidebar registered, you can then place the code next to the last genesis_register_sidebar() function. Otherwise, you can place it at the bottom of the file.

You can register as many sidebars as you want by using the above code snippet. Just make sure that you use a unique “id” each time.

Displaying your sidebar

After registering the sidebar, you will then need to call it. In this article, we will load the sidebar right after the content using the genesis_after-content_sidebar_wrap hook. Use the Genesis Hook Reference to choose the right hook when inserting your sidebar.

Following is the code that we need to add into the functions.php file:

/**This loads the new sidebar right after the content**/
add_action( ‘genesis_after_content_sidebar_wrap’,  ‘child_after_content_ad_sidebar’ );

Function child_after_content_ad_sidebar() {
echo ‘<div class=” ad-after-content’”>’;
dynamic_sidebar( ‘ad-after-content’ );
echo ‘</div>’;

}

If you wish to use the “Genesis Simpkle Hooks” plugin, you will need to add the code snippet below to the “genesis_after_content_sidebar_wrap” section (Note: make sure that PHP is enabled on the hook).

< div class=”ad-after-content”>;
<?php dynamic_sidebar( ‘ad-after-content’ ); ?>
</div>

Styling your sidebar

If you want to apply style to your sidebar you can do so by using CSS. Below is the code snippet that you need to insert at the bottom of you style.css file:

.ad-after-content {
clear: both;
margin: 2px auto;
width: 468px;
}

You can further customize the appearance and style of your sidebar by adding more properties and values into this code snippet.

Image by Flickr

Article By: Wasim Ismail

Wasim’s a project manager at Alrayes Web Solutions along with an online SEO consultant & blogger for business at wasimismail.com, specialising in online business.


Comments are closed.

Three Measures To Keep Track Of A Cell Mobile Phone appforspy.com mobile tracker app