Live Demo »Download Page »

Here is a screenshot:

My inspiration for this theme will no doubt be obvious to many. Genesis was not the first premium theme frame work that I’ve worked with. Over the years, I’ve become very fond of framing the content area with a double border, bracketed comment count, the grid layout, the styling of the post info…

Theme Features

The Adaptation theme includes the following features: Genesis Grid Loop (Thank you Bill for this post!), Option for Post Excerpts on Homepage, Landing Page Template, Out of the box support for Localization, 3 page layouts, featured images, custom background, custom header, custom menus, footer widgets, threaded comments… oh, and a German translation thanks to Dave.

Take it for a test drive…
Download from this page…

I’m a little scared to ask… but, I’d love your feedback!

What do you think? Be a sport and drop me a line in the comments. Did you end up using this theme? I’d love to see a link!!

Screenshot of the Adaptation Theme

Theme Features

The Latitude child theme includes the following features: Latitude uses the Genesis Slider plugin, has a Portfolio Page Template, 6 layout options, custom background, custom header, featured images, threaded comments…

Take it for a test drive…
Download from this page…

I’d love your feedback!

What do you think? Be a sport and drop me a line in the comments. Did you end up using this theme? I’d love to see a link!!

Screenshot of the Latitude Theme

Go ahead and open a new image.  I am going to make mine 700 x 700 px in size so that I can trim off a little when done and have it span the content area of my blog post (610px).

Next you will need to pick the base color of your fabric.  Often when I use this effect I’m creating a background (see the background of my blog) and therefore usually opt for a subtle light gray or tan.  Since I’m going to be using this image as the featured image in this post, I will select something slightly bolder.  The color that I will be using is #0078ff – a very rich blue.  Go ahead and fill your background with your selected color.

Create two new layers and call them Horizontal Multiply and Vertical Multiply.  (Shortcut for creating a layer: Ctrl+Shift+N)  Fill both of these layers with white.

Next we’re going to add some noise to both of these layers.  Select the Horizontal Multiply layer and go to  Filters > Noise > HSV Noise.  Your will now get a popup window that looks like this….

Adjust accordingly: Holdness: 1, Hue:  0, Saturation: 0, Value:140

Select the Vertical Multiply layer and follow the same process but alter the last option slightly. Holdness: 1, Hue:  0, Saturation: 0, Value:110

Set the mode of both layers to “Multiply”

Now using a motion blur we are going to make these dots look more like threads.

Select the Horizontal Multiply layer and go to:  Filters > Blur > Motion Blur. — Set the length to somewhere around 50 and the angle to 0 (important).  Next select the Vertical Multiply layer and navigate to: Filters > Blur > Motion Blur – Length 50 but this time set the angle to 90 (important).

Create two new layers and call them Horizontal Screen and Vertical Screen.  Fill these two layers with black.

Add noise to each layer – again mixing it up a bit on the “Value” for Horizontal and Vertical layers — Filters > Noise > HSV Noise… Holdness: 1, Hue:  0, Saturation: 0, Value:120 — Vertical Screen: Holdness: 1, Hue:  0, Saturation: 0, Value:146.

Set the Mode on these two layers to Screen

Next we’re going to add a Motion Blur to both layers. Select the Horizontal Screen layer and go to:  Filters > Blur > Motion Blur. — Set the Length to 50 and the angle to 0.  Next select the Vertical Screen layer and navigate to: Filters > Blur > Motion Blur – Length 50 but this time set the angle to 90.

Trim your fancy new linen texture to the desired size and voilà.

This tutorial was inspired by a post from Elixir Graphics: Creating an iOS linen texture in PhotoShop

We are going to assume that you have already selected the icons that you want to use and uploaded them to your custom/images folder. The icons that I am going to use are 32 pixels high. If yours are different, you might need to tweak the code accordingly.

Widgetize the header of Thesis:

Copy and paste this code into your Thesis custom_functions.php file to create your new header widget area. (It’s always a good practice to backup your files before you start making changes)

/* ----------------------------------
WIDGETIZED THESIS HEADER
---------------------------------- */
register_sidebars(1,
    array(
        'name' => 'Header Widget',
        'before_widget' => '<li class="widget %2$s" id="%1$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    )
);
function header_widget() { ?>
	<div id="header_widget_1" class="sidebar">
		<ul class="sidebar_list">
			<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Header Widget') ){	?>
				<li class="widget"><h3><?php _e('Header Widget', 'thesis'); ?></h3>You can edit the content that appears here by visiting your Widgets panel and modifying the <em>current widgets</em> there.</li><?php } ?>
		</ul>
	</div>
<?php }
add_action('thesis_hook_header', 'header_widget', '1');

Next we are going to add a little CSS to style and position our new header widget. You will need to copy and paste the following code into your custom.css file:

/* ----------------------------------
WIDGETIZED THESIS HEADER
---------------------------------- */
.custom .sidebar ul.sidebar_list {position: relative;}
.custom #header_widget_1 ul.sidebar_list li.widget {
	position: absolute;
	display: block;
	top:10px;
	left:470px;
	width:468px;
	}
.custom #social-icons a img { float:right; }

The last thing that you will need to do is to add a text box to the newly created header widget and drop in the following HTML. Go to your Dashboard >> Appearance >> Widgets >> and drag a text box over into the Header Widget area. You will then paste the following code into this text box (leaving the “Title” blank).

<div id="social-icons">

<a href="http://feeds.feedburner.com/YOUR_FEED_URL"><img src="http://comps.aaronhartland.com/thesis/wp-content/themes/thesis_18/custom/images/icon-rss.png" width="32" height="32" alt="RSS" /></a>

<a href="http://www.linkedin.com/in/YOUR_DISPLAY_NAME"><img src="http://comps.aaronhartland.com/thesis/wp-content/themes/thesis_18/custom/images/icon-linkedin.png" width="32" height="32" alt="LinkedIn" /></a>

<a href="http://www.facebook.com/YOUR_FB_IDENTIFIER"><img src="http://comps.aaronhartland.com/thesis/wp-content/themes/thesis_18/custom/images/icon-facebook.png" width="32" height="32" alt="Facebook" /></a>

<a href="https://twitter.com/YOUR_USER_NAME"><img src="http://comps.aaronhartland.com/thesis/wp-content/themes/thesis_18/custom/images/icon-twitter.png" width="32" height="32" alt="Twitter" /></a>

</div>

Obviously you will need to update the the path of each icon to your domain name and image name, and also add in your appropriate username for each social networking site. When done – you will have a nice widget area that contains your social networking buttons in the header of your Thesis theme. Enjoy!

Before you get started you will need to decide upon which icons you are going to add – and go ahead and upload them to your …custom/images/ folder. In this example, my icons are 32 pixels high – you may need to adjust the CSS and image proportions in the HTML according to your specific icons.

Adding a single widget to the footer of Thesis:

Copy and paste this code into your custom_functions.php file to create your new footer widget. (It’s always a good practice to backup your files before you start making changes)

/* ----------------------------------
WIDGETIZED THESIS FOOTER FUNCTION
---------------------------------- */
register_sidebars(1,
array(
'name' => 'Footer Widget',
'before_widget' => '<li class="widget %2$s" id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>'
)
);
function footer_widget() { ?>
<div id="footer_widget_1" class="sidebar">
<ul class="sidebar_list">
<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Widget') ){	?>
<li class="widget"><h3><?php _e('Footer Widget', 'thesis'); ?></h3>You can edit the content that appears here by visiting your Widgets panel and modifying the <em>current widgets</em> there.</li><?php } ?>
</ul>
</div>
<?php }
add_action('thesis_hook_footer', 'footer_widget', '1');

Next we’ll need to add a little styling to the widget that we just created and for the HTML that we are going to place inside of it. You will need to copy and paste the following code into your custom.css file:

/* ----------------------------------
WIDGETIZED THESIS FOOTER CSS
---------------------------------- */
.custom .sidebar ul.sidebar_list {position: relative;}
.custom #footer_widget_1 ul.sidebar_list li.widget {position: absolute; text-align: left; display: block; top:4px; left:0px; width:468px; }
.custom #footer-social-icons a img { float:left; }

The last thing that you will need to do is to add a text box to the newly created footer widget area. Go to your Dashboard >> Appearance >> Widgets >> and drag a text box over into the Footer Widget area. You will then paste the following code into this text box (leaving the “Title” blank – Obviously you will also need to update the the path of each icon to your domain name and image name, and also add in your appropriate username for each social networking site).

<div id="footer-social-icons">

<a href="http://feeds.feedburner.com/YOUR_FEED_URL" target="_blank"><img src="http://comps.aaronhartland.com/thesis/wp-content/themes/thesis_18/custom/images/icon-rss.png" width="32" height="32" alt="RSS" title="Stay Current" /></a>

<a href="http://www.linkedin.com/in/YOUR_DISPLAY_NAME" target="_blank"><img src="http://comps.aaronhartland.com/thesis/wp-content/themes/thesis_18/custom/images/icon-linkedin.png" width="32" height="32" alt="LinkedIn" title="Connect with me on LinkedIn" /></a>

<a href="http://www.facebook.com/YOUR_FB_IDENTIFIER" target="_blank"><img src="http://comps.aaronhartland.com/thesis/wp-content/themes/thesis_18/custom/images/icon-facebook.png" width="32" height="32" alt="Facebook" title="Follow Me on Facebook" /></a>

<a href="https://twitter.com/YOUR_USER_NAME" target="_blank"><img src="http://comps.aaronhartland.com/thesis/wp-content/themes/thesis_18/custom/images/icon-twitter.png" width="32" height="32" alt="Twitter" title="Stalk Me on Twitter" /></a>

</div>

Here’s a quick and easy way to add additional text to the right side of the header in Thesis. You’ll need to add just a bit of code to your custom_functions.php file and a little styling to your custom.css file.

Deep breath – here we go. The hook that you will be using is the “thesis_hook_after_title” This is for the area within div#header, after the site name & tagline. Your hook will be added to the custom_functions.php file. Here is the code that I used for this example:

/* Custom Header Rightside */
function add_header_right () {
?>
<p class="rightside">You could add some text here.<br />
<em>Call to action.</em> <a href="http://www.aaronhartland.com">Act now.</a>
</p>
<?php
}
add_action('thesis_hook_after_title', 'add_header_right');

Now for a little bit of styling for the text we just used in our new hook. This is done in the custom.css file. The “class” that we used in our code was titled “rightside”. So to style our newly added text we will use something like this:

/* Custom Header Rightside */
.custom .rightside {
	float:right;
	font-size:1.4em;
	line-height:1.571em;
	margin-right:0.1em;
	margin-top:-50px;
	text-align:right;
	}

1. Start with a new blank image. For this demo, I’m going to be using 640 x 200
2. Add a background gradient using the “Blend Tool”
3. Add your desired text – using a fat font
4. Right click font layer – select “text to selection”
5. Add new layer and name it gradient
6. Now we’re going to add a slight gradient to our text using the “Blend Tool” | Set gradient to: “FG to Transparent” and use a color that is slightly darker than your text – apply the gradient from the bottom up to about the middle of the text
7. Next, go to: Filters > Light and Shadow > Drop Shadow.  Set X, Y, and Blur to 1. Set the color: #ffffff (white) and the opacity: 20%
8. Then: Select > Invert
9. Lastly: Filters > Light and Shadow > Drop Shadow: X, Y: 1 | Blur = 6 | Color: #111111 | Opacity: 100%

The following video shows how I used these steps to make the image at the top of this post.  Here is my screen cast on how to make a letterpress effect using Gimp: