Most child themes include a widgetized home page which, when populated with widgets, displays the content of your widgets on the home page only.
Widgets are a very popular feature of WordPress themes and can also be used on other pages of your site.
In this tutorial, i’ll show you how to use your home page widgets on other pages or posts of your site.
I’ll also show you how to reposition these widgets so you can use them in different locations as well.
For this tutorial we’ll be using the Outreach child theme by StudioPress themes. The Outreach theme includes 4 widgets, side by side underneath a full width slider as shown in the image above. We’ll just be using the 4 widgets in different genesis_hook positions and removing the code which generates the home-featured widget for the slider.
These are the area’s (hook positions) you can display the 4 widgets in:
genesis_before_header
genesis_after_header
genesis_before_footer
wp_header
wp_footerThe widgets will also display in other area’s however you would need to modify the CSS code to make them work properly.
I’ll also show you how to use the home page widgets on other pages:
- while retaining the default home page widgets
- removing the default home page widgets so your home page displays your blog posts only
Copy Home Page Widget Code
The easiest way to replicate your home page widgets is to copy the PHP from your home.php file and paste it into your child themes functions.php.
If you want to retain your default home page widgets, you’ll also need to change the name of the functions. You cannot re declare the same function names or you’ll receive an error message.
You’ll also need to change the i.d’s for each widget as these also need to be unique. And you can remove the home-featured widget which is used for the home page slider or leave it on if you want to use it. In this example, i have removed it.
Here’s the code which i have modified and tested locally.
Don’t forget you can change the conditional tags and genesis_hook to output your widget content in any of the hook positions previously stated.
Example:
Next we need to style the widget areas using the existing CSS code for the home page.
Custom Page Widgets
The easiest way to style your new widgets is to use the existing CSS code located in your child themes style.css file.
You’ll notice the widget classes have been left the same as the home widgets so most of the styling will remain the same. You could even use the above PHP code without adding any additional CSS or modify the custom-widget CSS code below to change the appearance of your custom widgets.
Using a code editor like Notepad++, you can easily find the existing home page classes by searching for the code which applies to the styling of the default home page widgets.
home-sections
home-1
home-2
home-3
home-4Grab all the CSS code and change the selectors to your new custom classes.
Paste this code at the end of your child themes style.css file and modify the values for each property in the declarations if needed.
Here’s what the home page widgets look like using the wp_footer hook on all single posts.
Remove Default Home Page Widgets
The above code can be used while retaining the default home.php widgets or by removing the home page widgets. To remove them, simply remove all the code from the home.php file which generates the widgets and you should be left with this:
add a slider to your home page or keep the featured-home widget code in the file.
Another option is to add new widgets to your home page home.php file.
You could even create a custom page template like your home page.
Conclusion
There’s a fair amount of modification needed to get the home page PHP code working on other pages.
If you want to use new classes for each widget, you’ll also find it may take some time to get your custom widgets displaying side by side.
Have any questions?
Please leave a comment and i’ll do what i can to help.
Leave a Reply
You must be logged in to post a comment.