Genesis Tutorials

Add Agency Pro Themes Front Page To Genesis Sample Theme

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.

first section home page

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.

Lets start with adding the Javascript before we add the PHP and CSS code.


There’s 3 different types of code you need to add to the Sample theme to make this work.

Here’s a screenshot of the Javascript files which need to be added to the root directory of the sample theme. You can simply copy the entire folder and paste it into the child theme.


And here’s the child themes root directory showing you the js folder which contains all 5 Javascript files.

file structure

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.


  • 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

Here’s a full page view which doesn’t display the background image because of the way the javascript works when taking screenshots.

Genesis Sample – With Agency Pro Themes Front Page

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.


You will need to own the Agency Pro theme in order to access and copy over all the Javascript needed to make this work.

The Genesis Sample child theme is free and runs on the Genesis theme Framework.

More Posts Related To Agency Pro

2 replies on “Add Agency Pro Themes Front Page To Genesis Sample Theme”

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.

Leave a Reply

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