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_footer
The 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.
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-4
Grab 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.
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.
I would like to create in posts and/or pages the exact same widget areas available in the homepage in the Centric Pro theme.
Basically, in my website which is based on Centric Pro I would like posts (or pages) to show the same widget areas that the homepage show (not the same content, but the same widget areas), styled with the same styles.
The widgets I would like to replicate are home section 1, home section 2, home section 3 etc.
I read this guide: http://wpsites.net/web-design/widget-genesis/ and I tried to:
1) register widget areas
2) hook in the widgets
3) style them
but the final styling of the widgets in the posts is different from the styling in the home.
Then, I read this guide, and tried to apply your code, but again the final styling of the widgets was different. Could you please help me to fix this? I registered to your site, I’m not sure whether I need to send an email.
Thanks for your support
Brad Dalton says
Happy to help Marco
How many pages/posts do you want to create using the home page widgets?
Try this http://wpsites.net/web-design/custom-page-template-exactly-the-same-as-the-centric-pro-themes-front-page/
I had a question for you over on the StudioPress forum, and you rightly asked me to post it here since it’s about your code. Sorry — should have thought to do that before!
I copied and pasted the php EXACTLY AS YOU HAVE IT above in the functions.php file of Outreach Pro. It works great to accomplish what I want it to, except this:
I can no longer set the theme’s default layout (for posts) as content-sidebar. It’s defaulting to full-width content and it won’t let me change it.
I’d love your help with this. The site is under development, so I don’t have a public link, but I’d be glad to give you access to look at it if you e-mail me. Also, I’m happy to pay you a bit to get this sorted.
Thanks in advance!
I am in the backend dashboard since staying logged in since yesterday – I have put homepage/wp-admin and in a seperate tab i have tried the url FCs.com – my front end homepage comes up fine but when i add /homepage/wp-admin or even /wp-admin I don’t get offered a log in box or a dashboard page(as i am already logged in) . I just thought I would check it and try before I log out . so it looks like If I log out I will have to reset my password again in the wpadmin box to get back in like the last two times – Any idea what is causing this – or what may be written to mysql that I can change to stop this so I can just log in as normal on the url — please.
I have added define disallow file edit true now to the config – I just hope I am still able to edit!
Brad Dalton says
It seems your site has been hacked so you need to find out which files are affected and clean up the code.
You can install a plugin which scans your code or hire a malware clean up specialist.
Its impossible to provide support for localized errors caused by hacked code.
Brad, I Just had a thought ! The old child themes (or rather the homepage3.php with the links that work) and everything that goes with it I have put in a folder called — old folder —
Q. can these still be called up by wordpress by accident even though I have a new lot in the content themes folder?
cheers and thank you
Brad Dalton says
I would export your content and check it for malware first. You might want to reinstall a fresh copy of WordPress.
HI, I am working in theme twenty fourteen – I had someone help set up the site and a few temporary front page theme. I am trying to create a homepage from copying certain parts of the code that I have in three pages. My pproblem is I do not have any homepage templates and I do not want to mess up the childtheme I have at the moment. so my questions are. Where do I get the home widget pages from or how do I create them (not knowing code) can I download a homepage template? I think when he set the site up he deleted all the home page , home sidebar etc templates or overwrote them.
If I just create a new page and copy the various bits of code into it – how do I get it to be the homepage and how do I put the original homepage aside without deleting it please?
Brad Dalton says
Impossible to say unless i opened every file to see whats been changed.
Funny how the days grow shorter when one has problems!
I went into my hosting account -wp-content, themes duplicated the twenty fourteen theme and copied code from the original and edited it with the code I wanted – I then put the original files from the original theme into ‘old original folder’ and refreshed my wp site – don;t know what happened but the hompage said error nothing there and would not let me sign in ( luckily i have another computer open and changed the reading page back to an old page I had up- so on that note I had to undo everything I did!
MY problem is that on my themes I have the theme picture I want but I don;’t know how to get that theme picture as the homepage – when I click on customise theme , in the thumbnail appears the theme I want but on the main page to the right appears the page that has been slected in the settings , reading section — In the reading section there isn’t an option for homepage – WHat can I do to get my theme t show as the homepage please.
Originally I tried to copy the whole theme and duplicate the files as I said but with changes but I couldn’t get into the backend of admin.
Thanks again – sorry but am new to wordpress and am out of work thats why I need to get this site up to earn money and therefore can’t pay anyone to help me.
Brad Dalton says
I really think you should Genesis and a StudioPress child theme as its so much easier to customize.
However, you can name the file front-page.php or home.php in your themes root directory.
This should help https://codex.wordpress.org/Creating_a_Static_Front_Page
Thank you Brad, I have another problem – someone hacked into my wordpress and locked me out of admin. It took 2 days to find my way back in – I think finally I got back in by setting debug to false – not sure? then all the pages were messed up so for the last few days I have been going through php files and my sql. my index.php have nothing in them and I donot know what to write in them (3 are empty) my .htaccess I put the basic code in 2 of them but I don’t appear to have an htaccess for my wordpress – not in wp-admin, includes or content folder. should I create one ?
I watched a video saying that one can put their static ip address in the htaccess to stop anyne hacking whilst working on it – If one didn’t have a static ip then (they worked out that by taking off the last 3 digits of the ip address – but I couldn’t grasp it) one could block everyone out.
Do you know how I can do this as not only am I learning code and my way around everything I just spent nearly 4 days getting back into my site through wordpress admin – I have now put homepage-wp-admin but I dare not log out in case I have to log in again via the wordpress with yet another password reset. (each time I log in wp doesn’t recognise my password)
Hope you can help me and thanks again B
Brad Dalton says
You should install a plugin like Wordfence and make sure your username and password are more than 10 digits long containing upper and lower case letters, numbers and symbols.
Always backup your content using the WordPress export tool or take a database export.
Here’s a good page on WordPress Security http://codex.wordpress.org/Hardening_WordPress
And this eBook is very good http://build.codepoet.com/2012/07/10/locking-down-wordpress/
Hi Brad, Thanks that was really nice of you to reply so quickly. I Will look at the links you gave me and sure it will take me some time to swallow it all! lol. I am just getting used to the options list in my sql after looking at it for days. am i right in saying that the option transient feed_mod and the transient timeout_mod is something to do with my databases being saved to my email account (I set this up a while back so have been getting copies up till now)
Q. IF I upload these backed up database to my hosting account with fileziller
1. will it over-write what I have in my sql now (which I think would be good and take me back to where I left off)
2. Is there a special system for uploading it or just the normal way one would upload files to the hosting account (ie because its mysql do I have to tick a special box or folder for it to go into)
3. seperate question — not sure if I can make you understand what I am about to say but here goes.
A. “First” homepage (homepage3.php) was created and the links in the sidebar worked (23 links where the pics and content were needed editing) – BUT the front of the page was not how it should have been. — so –that was when I emailed you re the front page. OK so —
A1. THen I found the (second) homepage the one I was looking for, it was in another folder and copied it into the themes folder – giving me Homepage.php , homepage3. php and underconstruction.php but one style.php in the themes folder.
A2. I then find the style sheet for the “second homepage and swap it to the themes folder —
B. Now renaming homepage3.php to blank leaves me with my ideal “second” homepage renamed homepage/wp-admin — BUT only one href link is working – so I copied and pasted the link id’s from the homepage3.php to the now homepage but they didn’t work ? !
the page id’s were originally created by the “first homepage(homepage3.php) – Now are these id’s transferable as my links didn’t work once I’d copied and pasted them into the “second homepage?
E. If the link id’s are not transferable – how do I get the pages from homepage3.php to homepage/wp-admin
Thank you ever so much for your time and help – now i will have a look at your links . Hope you are well – regards Bianka
JJ Fox Walburn says
How do you get a different font color on the text part of the Featured Home widgets – I can’t find it in the CSS
Brad Dalton says
Did you try Firebug?
You need to use the correct selectors.
Great write up..I have a somewhat related question…
How do you avoid getting 2 titles for your widgets (above and below the image) when adding the title in the widget area and a title for the page and menu?
Brad Dalton says
You could hide it using CSS code.