From iThemes Codex
Jump to: navigation, search


Designed with authors in mind, the latest child theme for iThemes Builder will showcase your work perfectly.


Live Demo

Blog entry announcing the release of Book Nook

How to set up homepage to look like demo site

Update on Thursday, May 16, 2013: Book Nook demo site PSDs can be downloaded from the link in this forum post.

1. Create Pages. This will help in setting up nav bar since Pages will be listed in the next step.

2. Go to Appearance -> Menus. Create a menu named say Main having your desired items (Pages, Categories, custom links etc).

3. Create a layout named say, Home. Width = 960px.

Add modules in this order:

2012-07-12 19-25-05.png

Navigation Module

Select the menu created earlier in Navigation Type dropdown.

2012-07-12 19-32-41.png

Header Module

2012-07-12 19-33-59.png

In the demo site, an image is placed in a Widget Content widget in Header module's sidebar having the following code:

<a href=""><img class="alignnone size-full wp-image-61" title="purchase-small-ad" src="" alt="" height="58" width="411"></a>

Instead of the image, if you would like to use HTML code so you can alter the price and change the "Purchase the Book" phrase, place the following in a text widget in the Header module's widget area:

Change URL and any text in the above to your liking.

Then add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):

    Purchase Button

.purchase-button a {
    display: block;
	border: 1px solid #000000;
	border-radius: 3px;
	background-color: #b35332;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(179, 83, 50)), to(rgb(123, 43, 16)));
	background-image: -webkit-linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
	background-image: -moz-linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
	background-image: -o-linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
	background-image: -ms-linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
	background-image: linear-gradient(top, rgb(179, 83, 50), rgb(123, 43, 16));
    padding: 0.5em 1.3em;
    text-decoration: none;

	-webkit-transition:  all .2s linear;
	-moz-transition:  all .2s linear 0s;
    max-width: 320px;
    width: 100%;
    text-align: center;

.purchase-button a:hover {


.purchase-message {
    color: #FFFFFF;
    font-size: 1.4em;
    text-shadow: 1px 1px 3px #333;

.purchase-price {
    color: #35160c;
    font-size: 1.1em;
    padding-left: 0.5em;

to get


Widget Bar 1

2012-07-12 19-35-32.png

Widget Bar 2

2012-07-12 19-39-29.png

Widget Bar 3

2012-07-12 19-40-43.png

Footer Module

2012-07-12 19-41-54.png

4. Create a Page named say, Home and select Home layout for this in the Custom Layout meta box. This page can be left blank.

2012-07-12 19-46-47.png

5. Go to Settings -> Reading. Set Home as the Front page.

2012-07-12 19-48-19.png

6. Visit your site's homepage and you should see the basic structure similar to that of demo site. Hover on Builder in the top WordPress bar and click on Manage Widgets for this Layout. Add your desired widgets in the sidebars.