WP Smith

Creating WordPress & Genesis Websites Since 2010

  • Home
  • About
  • Services
  • Blog
  • Contact

Mar 13 2011

How to Widgetize the Home Page of the Expose Genesis Child Theme

In order to widgetize the Expose Child Theme, you have to do three things.

1. Edit the CSS to make .portfolio-posts absolute. So find the following CSS.

[html]#content .portfolio-posts, {
background: #FFFFFF;
float: left;
width: 280px;
min-height: 280px;
margin: 0 10px 10px 10px;
padding: 9px 9px 9px 9px;
border: 1px solid #D5D5D5;
display: inline;
-moz-box-shadow: 0 0 3px #BBBBBB;
-webkit-box-shadow: 0 0 3px #BBBBBB;
overflow: hidden;
}

#content .portfolio-posts h2 {
font-size: 18px;
}

#content .portfolio-posts p {
line-height: 20px;
}[/html]

and delete #content.

2. Edit functions.php to include the widgeted area. Add the following code after // Register widget areas:
[php]genesis_register_sidebar(array(
'name'=>'Home 1',
'id' => 'home-1',
'description' => 'This is the first section of the homepage.',
'before_title'=>'<h3 class="widgettitle">','after_title'=>'</h3>'
));
genesis_register_sidebar(array(
'name'=>'Home 2',
'id' => 'home-2',
'description' => 'This is the first section of the homepage.',
'before_title'=>'<h3 class="widgettitle">','after_title'=>'</h3>'
));
genesis_register_sidebar(array(
'name'=>'Home 3',
'id' => 'home-3',
'description' => 'This is the first section of the homepage.',
'before_title'=>'<h3 class="widgettitle">','after_title'=>'</h3>'
));[/php]

3. Edit home.php to incorporate the widget. Then comment out the following:
[php]//require_once(PARENT_DIR . '/index.php');[/php]

And add the following just after that:
[php]get_header();
genesis_home(); ?>

<div id="content home-widgeted">
<div class="widgeted-home home-1">
<?php if (!dynamic_sidebar('Home 1')) : ?>
<div class="widget">
<h4><?php _e("Home", 'genesis'); ?></h4>
<p><?php _e("This is a widgeted area which is called Home.", 'genesis'); ?></p>
</div>
<?php endif; ?>
</div><!-- end .widgeted-home home-1-->
<div class="widgeted-home home-2">
<?php if (!dynamic_sidebar('Home 2')) : ?>
<div class="widget">
<h4><?php _e("Home", 'genesis'); ?></h4>
<p><?php _e("This is a widgeted area which is called Home.", 'genesis'); ?></p>
</div>
<?php endif; ?>
</div><!-- end .widgeted-home home-2-->
<div class="widgeted-home home-3">
<?php if (!dynamic_sidebar('Home 3')) : ?>
<div class="widget">
<h4><?php _e("Home", 'genesis'); ?></h4>
<p><?php _e("This is a widgeted area which is called Home.", 'genesis'); ?></p>
</div>
<?php endif; ?>
</div><!-- end .widgeted-home home-3-->
</div><!-- end #home-widgeted -->

<?php get_footer(); ?>[/php]

Now, Expose Home Page is widget ready to give more control on the front page. You may need to add some CSS to style even further.

Written by Travis Smith · Categorized: Genesis, Tutorials

StudioPress Premium WordPress Themes     WP Engine Managed WordPress Hosting

What can I do for you!?

Custom Development

We develop plugins by determining both business/functional and technical requirements, following WordPress development best practices, and using agile methodology to ensure you get the best solution.

Consulting

Have questions? Need a reliable developer to consult? Please contact us today!

Customized Theme

We can customize your theme or child theme, or create a child theme for you based on your needs while enhancing the performance of every individual attribute.

Customized Plugin

We can customize your plugins, extend plugins (e.g., Gravity Forms, Jetpack, Soliloquy) based on your needs ensuring security, performance, and positive business impact.

Contact Us

About Travis Smith

As a WordPress enthusiast, developer, and speaker, Travis writes about what he learns in WordPress trying to help other WordPress travelers, beginners and enthusiasts with tutorials, explanations, & demonstrations.

Comments

  1. Travis Baker says

    February 9, 2013 at 12:33 pm

    Hey great tip on how to widgetize the home page. Worked like a charm!

    Reply
  2. David says

    June 5, 2013 at 10:43 pm

    How to ads the Home Page of the Expose Genesis Child Theme? I need ads add center home page, please help me.
    Demo: http://eblogart.com/
    Thanks

    Reply

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Twitter
  • Facebook
  • LinkedIn
  • Google+
  • RSS

Copyright © 2025 � WP Smith on Genesis on Genesis Framework � WordPress � Log in