The Agency Pro theme by StudioPress includes a really nice looking front page with widget areas and hover effects.
In this tutorial, i’ll show you how you can add exactly the same front page to another theme built on Genesis.
I’ll be using the Genesis Sample child theme for this project however you could modify the code to work with other StudioPress themes.
Image Gallery – Check Out What It Looks Like
Click each image in the gallery to check out what it looks like on the Sample theme.
There’s 3 different types of code you need to add to the Sample theme to make this work.
You can also see the front-page.php which needs to be created using a text editor like Notepad++. You can then add the PHP code from the view raw link in the Gist below and paste it into the new file.
PHP & CSS
- The Media Queries.css code should be added to the existing Media Queries at the end of your child themes style.css file.
- The PHP code for functions.php should be added at the end of your child themes functions.php file. If your theme includes support for a custom background, you can remove that line of PHP code from your functions file.
- The style.css code should be added near tghe end of your child themes style.css file before the start of the code for the Media Queries.
Full Page View
Background Image on Front Page Only
If you only want the background image to display on the front page, simply copy and paste the code from the functions file to Line 25 of the front-page.php file.
Learn more about how to Display The Agency Pro Background Image Only On The Front Page.
The Genesis Sample child theme is free and runs on the Genesis theme Framework.
How can I change the home-middle to a flexible widgets instead?
Brad Dalton says
There’s a fair amount of work involved to do that so it’s something i would need to work out locally and then write an entire tutorial.