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.

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.

Javascript

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.

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

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

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.

Requirements

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

• Use The Agency Pro Themes Front Page Middle Widget In Template On Any Theme