WPITECH
WordPress Tutorials

How to Add a Widget Area to a Page Using Genesis

How to Add a Widget Area to a Page Using Genesis

If your website based on the Genesis framework then you already know how easy is to manage things like changing layouts, widgets on your homepage or using different sidebars for your website. Here’s how you can add a widget area to a page, step by step.

1. How to Create the Widget Area

To add a new widget area in your child theme, add the following code in functions.php.

genesis_register_sidebar( array(
'id' => 'page-widget',
'name' => __( 'Page Widget', 'WPITECH' ),
'description' => __( 'This is the widget area for a specific page.', 'WPITECH' ),
) );

You can change the ID, name, and description whatever you want. If the widget area is going to your contact page, you could change the ID to something like “contact-widget” or “contactuswidget.”

2. How to Display the Widget Area

You want the widget area to display on a particular page, so you need to add this code to functions.php.

If your Genesis child theme uses XHTML (older or non-Pro themes):

//* Add the page widget in the content - XHTML
add_action( 'genesis_after_post_content', 'WPITECH_add_page_content' );
function WPITECH_add_page_content() {
if ( is_page('ID') )
genesis_widget_area ('page-widget', array(
'before' => '<div class="page-widget"><div class="wrap">',
'after' => '</div></div>',
) );
}

If your Genesis child theme uses HTML5 (Pro child themes):

//* Add the page widget in the content - HTML5
add_action( 'genesis_entry_footer', 'WPITECH_add_page_content' );
function WPITECH_add_page_content() {
if ( is_page('ID') )
genesis_widget_area ('page-widget', array(
'before' => '<div class="page-widget"><div class="wrap">',
'after' => '</div></div>',
) );
}

3. Add Some CSS Rules

You have to use CSS if you want your widget to display correctly. Here is some basic CSS that you have to add in to your child theme’s stylesheet.

.page-widget {
line-height: 1.5;
padding: 30px;
}

.page-widget p {
margin-bottom: 24px;
text-align: center;
}

4. Drop in Some Widgets and Check How It Looks

Now go to your widget area under Appearance > Widgets. Drag a widget into the new area, then go back and check out your page to see how it looks!

Related posts

5 Best RSS Feed Plugins for WordPress

WPITECH

15 Ways to Speed Up WordPress Performance in 2019

WPITECH

How to Create Your First WordPress Block Gutenberg

WPITECH