Change News Themes Home Top Widget To Home Top Left & Right Widgets

In this tutorial, you can use the code i have written and tested to change the default home top widget into 2 separate widgets for the News theme by StudioPress.

By default, the home top widget displays from one side of the content area to the other. This code will enable you to create 2 home top widgets which are exactly the same as the home middle left and right widget areas.

Before: Here’s what the home page widgets look like out of the box.

After: Here’s what the home top left and right widgets look like after the modifications.

Here’s the entire code you need to replace in your home.php file:

Here’s the PHP code you need to add to your child themes functions.php file:

That’s it unless you want to style your new widgets differently.

Style Widgets Differently

Here’s the CSS code you need to add to your child themes style.css file:

Change the classes for home top left and home top right in the home.php code if styling your new widgets differently.

echo '<div class="home-top-left">';
			dynamic_sidebar( 'home-top-left' );
			echo '</div><!-- end .home-top-left -->';

			echo '<div class="home-top-right">';
			dynamic_sidebar( 'home-top-right' );
			echo '</div><!-- end .home-top-right -->';

Conclusion

Customizing a WordPress theme doesn’t get any easier than this which took less than 10 minutes.

Learn more about duplicating home page widgets in Genesis.

Know of any other theme which enables you to change the appearance of your home page and add custom widgets as easily as Genesis child themes?