I tried to take all the things that Artisteer owners want and wrap it all up in a nice package that drops right into the Artisteer program.

I think the two biggest enhancements are being able to add a linked logo image with a widgetized header and the ability to modify all of the default navigation options. I even added a couple extra features to the vertical navigation. Now you can name it anything you want or you can completely eliminate the title altogether.

And best of all, no messing around with the code. Everything gets exported from Artisteer styles to your design.

Anyway, jog on over to the new site The Templateer and check it out. There is also a very limited time special offer. So get on your running shoes and head on over.

Here’s a few screenshots of some of the features:

A fully customizable header with logo and widget area

A fully widgetized footer

Some magazine style layouts with configurable options

Some other areas that can be modified

This technique comes out of the new twentyten theme and is very easy to implement into your Artisteer created theme.

The first thing that needs to be done is to enable the new post_thumbnail function (if it isn’t already enabled). Open your functions.php file and add this to the top right after the opening PHP declaration…

// add post_thumbnail support
if ( function_exists('add_theme_support') )
  add_theme_support('post-thumbnails');

Save the file and then open your header.php file. What we are going to do now is add a little bit of magic to the art-header-jpg DIV that will over-ride the default header image.

In your header file the DIV you want looks like this…

<div class="art-header-jpeg"></div>

We want to make the code look like this…

    <div class="art-header-jpeg">
	<?php
	if ( is_singular() &&
		has_post_thumbnail( $post->ID ) &&
		( $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
		$image[1] >= 1000 ) : // change 1000 to the width of your header
		echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
			else : ?>
<?php endif; ?>
	</div>

Don’t forget to change the ‘1000′ in line six to the value of the width of your header image.

NOTE: This works best with a square header image. On rounded corner headers Artisteer make two images. One is a background PNG with the rounded corners and the other is your JPG image that sits on to of it.

That’s it, you’re done. Now  make some header images that are the same size as the default header and then load up your theme and go to the edit screen for an existing (or new) post.

If all is working you should see a new box on the right side of your post edit page that will allow you to attach a thumbnail to the post.

As long as the image you attach is at least as wide as your header then the it will over ride the default image when you view the post otherwise it will just show your default header.

Now every page or post can have a different header image.

Anyway, that’s about it. Give it a try and have fun.

REMEMBER: Backup, backup, backup. And don’t work on a live site. It’s really a pain when you blow up WP and can’t access your site. Ask me how I know

So without anymore fanfare, here it is…

Create and export a theme with a double sidebar.

Open the functions.php file and change register_sidebars from 2 to 3.

if (function_exists('register_sidebars')) {
	register_sidebars(3, array(
		'before_widget' => '<div id="%1$s" class="widget %2$s">'.'<!--- BEGIN Widget --->',
		'before_title' => '<!--- BEGIN WidgetTitle --->',
		'after_title' => '<!--- END WidgetTitle --->',
		'after_widget' => '<!--- END Widget --->'.'</div>'
	));
}

Make backup copies of your sidebar1 and sidebar2 files in case you want to go back.

In sidebar1.php change the first line from this…

<div class="art-layout-cell art-sidebar1">

To this…

<div style="width:50%;float:left;">

Do the same thing for the sidebar2.php file. The width I split equally but you could make one bigger than the other as long as they equal 100%.

Next open your index.php file and find the includes for the sidebars. You are going to replace this..

<?php include (TEMPLATEPATH . '/sidebar1.php'); ?><?php include (TEMPLATEPATH . '/sidebar2.php'); ?>

With this…

<div class="art-layout-cell art-sidebar1" style="width:40%;">
<div style="width:100%;float:left;">
<?php if (!art_sidebar(3)): ?><?php endif ?>
</div>
<?php include (TEMPLATEPATH . '/sidebar1.php'); ?>
<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
</div>

The width percentage on line one should be the total of sidebar1 and sidebar2 from your style.css file. I left the art-sidebar selector in in case a background color or image was used.

Basically what I did was move the art-layout-cell from the sidebar files and created a new div to wrap all of the sidebars in.

The new sidebar3 won’t appear until you place a widget into it from the dashboard.

I left all of the styling in the DIV’s instead of creating classes and adding them to the style.css file because I was too lazy . That will be for another day.

Load up your theme and see if it works. If does then make the same changes to the single.php, page.php, archive.php, search.php and 404.php files as you did for the index.php file. If it doesn’t work then someone did something wrong.

Here’s the result with a randomly generated Artisteer 2.4 theme…

Give it a try and let me know what you think.

After fooling around for a couple of hours I got it working and it turned out to be easier than I thought. I now have a cool menu that can have any combination of pages, categories and even external links.

The first thing that needs to be done is to make the theme aware of the nav-menu. Open the functions.php file in your favorite editor.

Right after the opening php tag add this…

if ( function_exists('add_theme_support') )

	// This theme uses post thumbnails
	add_theme_support( 'post-thumbnails' );

	// This theme uses wp_nav_menu()
	add_theme_support( 'nav-menus' );

I figured we may as well add post-thumbnail support too

That’s it for the functions.php file. Now open the header.php file and locate your art-menu code. It should look something like this…

<div class="art-nav">
	<div class="l"></div>
	<div class="r"></div>
	<ul class="art-menu">
		<?php art_menu_items(); ?>
	</ul>
</div>

We’re going to replace the unordered list with the new wp_nav_menu so that it will now look like this…

<div class="art-nav" >
	<div class="l"></div>
	<div class="r"></div>
	<?php wp_nav_menu( array(
		'sort_column' => 'menu_order',
		'menu_class' => 'art-menu',
		'title_li' => '<div class="l"></div><div class="r"></div>',
		'menu' => 'pages', // this is the name of your menu you created in the menu admin
		'link_before' => '<span class="l"></span><span class="r"></span><span class="t">',
		'link_after' => '</span>'
	) ); ?>
</div>

The new wp_nav_menu has a number of options that allows us to wrap the menu and duplicate exactly the styling of the Artisteer menu, almost. The only thing we can’t do (or at least I haven’t figured it out yet) is that Artisteer adds a class .active to the active link of a menu item. The wp_nav_menu function adds a class for the active item but since there is no CSS style for it the active menu is not set. But all is not lost, we just have to add a little CSS to our style.css file.

Find the following code in your style.css file…

.art-menu a.active .l, .art-menu a.active .r
{
  top: -66px; /* this will unique to each theme */
}

.art-menu a.active .t
{
  color: #070807; /* this will unique to each theme */
}

Right after the last css item add the following…

.art-menu li.current-menu-item a .l, .art-menu li.current-menu-item a .r ,
.art-menu li.menu-item-parent a .l,.art-menu li.menu-item-parent a .r	{
top:-66px; /* make this value the same as the one above */
}

.art-menu li.current-menu-item a .t, .art-menu li.menu-item-parent a .t {
color:#070807; /* make this value the same as the one above */
}

Substitute the values indicated by the comments in the above code with the values from your theme. This CSS will now properly show the menu item as active.

That’s it. You should now have a WP 3.0 compatible menu for your theme.

Since WP 3.0 is in beta some things may change. One of the things missing from the beta is to create a class to indicate when there is an active parent item for a child menu that is active. This functionality will be included in the final release of WP3.0 and I’ve added the CSS to take advantage of it when it becomes functional.

Here’s a shot of my test site with a normal Artisteer menu on the to and a custom WP3.0 menu on the bottom of the header.

So here it is. The anatomy of an Artisteer theme in PDF format.

Now you can set up your own web server on your local computer with just one application that includes everything you need. You can do all of your theme testing locally and be confident that it will run exactly the same when you upload it to your web host.

I’ll be showing you how to install WAMP (Windows, Apache, mySQL & PHP) on your Windows PC. If you’re using a Mac you can download MAMP or XAMPP and follow the directions from the download site.

The first thing to do is get the latest version of WAMP.

Double click the installer and you should get the following screens. Windows Vista and Windows 7 users may get some other security warnings but after that it should be what follows…

Accept the license agreement…

Select the destination folder. If you want it someplace other than drive C change it now…

Select whether you want a quick launch icon and a desktop icon..

Click install and your about done…

Once the installation is complete you’ll see the SMTP outgoing mail server screen. Don’t worry about the mail server, just click ‘Next’ because you won’t be sending email from your local server and it takes some additional configuration anyway (that’s not covered here).

All that’s left is to click ‘Finish’.  Go ahead and start the server as we’ll be installing Wordpress next.

Now for the big test. Launch your browser and type ‘localhost‘ into the address bar. You should see something similar to the next image…

If you used the default setting during installation then c:\wamp\www will be the root of your web server. Anything you put in the root folder will be available from your browser as if you were browsing the web. By default the wamp server installs an index.php file in the root that will show some information about your web server, a couple of applications and then everything else that’s been placed in the www folder.

If you keep everything in separate folders, you can have as many different installations of Wordpress that you want. Or bbPress, Drupal, Magento, a standard HTML/PHP website or anything other kind of web site. In essence, each folder represents a different web site address. As long as you don’t over write the index.php file that’s in the root you’ll always be presented with a directory listing of your separate websites.

Before we get to installing Wordpress we need to make one modification to the Apache server.  We need to turn on mod_rewrite so that we can use permalinks.

Fire up your text editor (not word processor) and open the httpd.conf file. Be careful editing this file. It contains the configuration for the Apache server. If you mess it up you will probably crash the server so make a backup before editing. If you installed WAMP in the default location the file will be located here:

C:\wamp\bin\apache\Apache2.2.11\conf\httpd.conf

Your looking for the line: #LoadModule rewrite_module modules/mod_rewrite.so which should be around line 116. To enable mod_rewrite just remove the ‘#‘ symbol at the beginning of the line.

Save the file and then restart the Apache server if it was already running. Now you’ll be able to enable ‘Pretty Permalinks‘ on your Wordpress site.

Let’s start the Wordpress installation.

We’ll be following the Wordpress Famous 5 Minute Install with a couple of changes to fit our local web server.

Step 1: Download and Extract

Grab the latest version of Wordpress. Unzip it and copy it to your www folder. At this point you should rename the default Wordpress folder (wordpress) to something descriptive such as ‘wp-sales-site‘. Try to avoid using spaces between words, us a dash or underline instead.

Step 2: Create the Database Using phpMyAdmin

Point you browser to ‘localhost‘ and then click on ‘phpmyadmin‘ under the ‘Tools‘ heading.  This is where the install deviates from a normal web host install. Since your on a local server that is typically not viewable by anyone but you there is no password required and the user name is ‘root‘ by default. So all you need to do is provide a name for your database, but no user name or password.

Step 3: Set up wp-config.php

You can create and edit the wp-config.php file manually but it’s much easier to let Wordpress do it for you. Point your browser to ‘localhost/wp-sales-site/wp-admin/install.php‘ and you will see the next screen. Go ahead and create the configuration file…

Now we tell Wordpress details about our database that we created earlier.

1. This is the database we created in phpMyAdmin
2. Our user name is ‘root‘ by default
3. Leave the password blank
4. Our database is located on ‘localhost‘
5. This is the default prefix

Go ahead and click ‘Run the install‘…

Give you blog a name. This will appear as your blog title. You have to put in an email address even though it won’t be used. Then hit ‘Install Wordpress‘…

At this point Wordpress is installed.  A default user named ‘admin‘ has been created with a random password. Write this password down. You will change it when you login-in on the next screen.

That’s it! You’ve just installed a local WAMP server and done your first installation of Wordpress. You no longer have to fire up your FTP program and upload changes to your site. Just copy them to the appropriate folder on your local web server.

Remember, you can create many Wordpress installations by keeping them in their own directory.

Good Luck and have fun!

This tutorial will be aimed at Artisteer generated themes, but it will work for virtually any Wordpress theme. This will also only work with Artisteer themes with square header images. Rounded headers have two images, a .png that provides the round corners and a .jpg that is positioned on top.

The first thing you need to do is create your new header images. They need to be the exact same size as your original image. You can make as many as you want. Create a new folder called ‘headers’ in the images folder of your theme. You need to name the header images as follows:

• header_1.jpg
• header_2.jpg
• header_3.jpg
• header_4.jpg
• header_5.jpg
• …
• header_XX.jpg

Now open your header.php file in your favorite text editor and find the following code…

<?php wp_head(); ?>

Then insert this code directly above it…

<?php wp_enqueue_script('jquery'); ?>
<script type="text/javascript">
counter = 1;
num_images = 5; // Enter the number of images to rotate
dir = "<?php bloginfo('template_url'); ?>/images/headers"; // This is where your images are stored

function rotateHeader() {

	var header_img = 'url(' + dir + '/header_' + counter + '.jpg)'; // jpg, png, or gif

	jQuery('.art-Header-jpeg').css('background-image', header_img); // .art-Header-jpeg is the div you want to replace
	counter++; if (counter > num_images) counter = 1;
}

</script>

The above code enables JavaScript and does all the work of rotating our images.  The code is commented so that you can change some of the default values.

Next change the body tag to look like this…

<body onLoad="javascript:setInterval( 'rotateHeader()', 10000 );"> <!-- Set time in milliseconds 5000=5 seconds -->

This bit of code will enable the rotation script but not until after the page loads.

The next thing that we need to do is pre-load our header images so that there is no delay in displaying our headers. The easiest way to do this is in an invisible DIV. We will tell the browser to load the images and then we will style the DIV to display:none.

Add the following code right after the < body > tag…

<div style="width:1px; height:1px; display:none;">
    <img src="<?php bloginfo('template_url'); ?>/images/headers/header_1.jpg" />
	<img src="<?php bloginfo('template_url'); ?>/images/headers/header_2.jpg" />
	<img src="<?php bloginfo('template_url'); ?>/images/headers/header_3.jpg" />
	<img src="<?php bloginfo('template_url'); ?>/images/headers/header_4.jpg" />
	<img src="<?php bloginfo('template_url'); ?>/images/headers/header_5.jpg" />
</div>

In this example we’re rotating 5 different images. If you want more or less you just have to make sure and adjust the code accordingly.

That’s about it. Remember if you have any questions just drop me a line.

Note: This really only works for headers that are square cornered. When you make a header with rounded corners, Artisteer creates two images. One is a square cornered .jpg that sits on top of a rounded corner .png image. We could make a random rotator for the two different images but then it would defeat the purpose of being super simple. So we’ll save that for another time.

The first thing you need to do is create your new header images. They need to be the exact same size as your original image. You can make as many as you want. Create a new folder called ‘headers’ in the images folder of your theme. You need to name the header images as follows:

• header_1.jpg
• header_2.jpg
• header_3.jpg
• header_4.jpg
• header_5.jpg
• …
• header_XX.jpg

Now open your header.php file in your favorite text editor and find the following code…

<?php wp_head(); ?>

</head>

Then add the following code between wp_head and /head…

<style type="text/css">
div.art-Header-jpeg {
background-image: url('<?php bloginfo('template_url'); ?>/images/headers/header_<?php echo(rand(1,5)); ?>.jpg');
}
</style>

The new CSS style above is the key to everything. Since we are using some PHP to generate a random number we can’t include it in our CSS file. By putting it in the head after our original style.css declaration we will automatically override the default CSS.

This bit of code is what does all the work…

<?php echo(rand(1,5)); ?>

It generates a random number and appends it to the name to generate a new random image name. You can change the last number (5) to match the total number of header images you create if you want more or less than five. The more images you have the more random the generator will seem. If you don’t have an image with the new generated name there will not be an image displayed, since it couldn’t find it.

As you can see from the image below, the original CSS style has been replaced by the new style.

NOTE: If you want to use a different image format than jpg, then just change the extension in the new style you added.

That’s it. Now you can have a random header with minimal modifications to your theme files.

The peel away effect is a great way to get your visitors attention and direct them to some special content or product. It’s fairly easy to implement. You can also place it just about anywhere, not just in upper corner.

The directions will show implementing the peel away in an Artisteer created theme but you can put it into just about any theme or website design.

Download the zip file containing the peel away script and the starter images.

Step 1 – Edit peel.js

First we need to configure the peel.js file. For Wordpress users, I would suggest that you upload the peel folder to you current theme folder (wp-content/themes/your_current_theme/).

Open this file in your text editor and change lines 1,2,3,8,9 to reflect the URL’s of your site. I’ve used my site as an example…

jaaspeel.ad_url = escape('http://budstechshed.com/free-wordpress-install/');
jaaspeel.small_path = 'http://budstechshed.com/wp-content/themes/cardboard_bts/peel/small.swf';
jaaspeel.small_image = escape('http://budstechshed.com/wp-content/themes/cardboard_bts/peel/small-bts.jpg');
jaaspeel.small_width = '100';
jaaspeel.small_height = '100';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;

jaaspeel.big_path = 'http://budstechshed.com/wp-content/themes/cardboard_bts/peel/large.swf';
jaaspeel.big_image = escape('http://budstechshed.com/wp-content/themes/cardboard_bts/peel/large-bts.jpg');

Step 2 – Edit the images

There are two images you need to create called small.jpg and large.jpg. There are some sample images included so that you don’t have to do anything right away.

• small.jpg – The small background image your visitors see before content behind gets revealed. The size is 100 x 100 pixels.
• large.jpg – The image visitors will see when the corner peels away. The size is 500 x 500 pixels.

Step 3 – Upload files

Now all you need to do is upload the entire peel folder to your website. Remember to put it in the location you specified when you edited the peel.js file.

Step 4 – Add Javascript to header.php

Now open header.php in your text editor and add the following line between the wp_head and the closing head tag…

<script src="<?php bloginfo('template_url'); ?>/peel/peel.js" type="text/javascript"></script>

It should look like this…

<?php wp_head(); ?>
<script src="<?php bloginfo('template_url'); ?>/peel/peel.js" type="text/javascript"></script>
</head>

Actually, you can place the peel.js script just about anywhere. The placement in the example above will put the peel away in the upper right corner of the browser. On my site I put it in the beginning of the Sheet-body DIV so that it peels away from the header image.

That’s it!

If you have any questions or need some help, just leave a comment and I’ll do what I can to help you out.

Disclaimer

I make no promises as to the functionality of these modifications to your theme code. Do it at your own risk. Do it on a backup copy. Do it while wide awake and after having plenty of sleep or plenty to drink, your choice. Don’t do it to your original code. Don’t do it while sleepy, cranky, or driving. And most important, don’t expect it to work the first time. If it does work the first time you probably got lucky. Besides, if you don’t break things you never figure out how they work. And last but not least…Have fun and learn something new.

Instead of just giving your visitor a confusing page with a cryptic message, offer them a solution. I’ll bet most site owners error pages are the default, ugly uninformative error page.

Below are few inspirational 404 pages…

Let’s make an awesome 404 error page

We could use a plugin to redirect our visitor but I would prefer that they know the URL is wrong so they can update their bookmark or link.

Fortunately Wordpress keeps track of everything we’ll need to make a killer 404 page and keep our visitor from getting lost and leaving. The $wp_query->query_vars['name'] variable holds the information we need to make our new 404 page.

If a visitor hits our 404 page we’re going to give them some choices to help them find their way. Here’s what we’ll provide them…

1. We’ll show them some posts to choose from that may be related to what they’re looking for.
2. We’ll give them a search box to do a site search.
3. We’ll give them suggestions to check the URL for spelling.
4. We’ll direct them to our sitemap (you have one don’t you?).
5. And finally, we’ll direct them back to our home page.

Here’s the code we’re going to be putting in our 404.php file.

Put the following code just above the get_header(); line…

<?php get_header();?>

Like this…

<?php
function bts_strip_attachments($where) {
	$where .= ' AND post_type != "attachment"';
	return $where;
}
add_filter('posts_where','bts_strip_attachments');
?>
<?php get_header();?>

This function cleans up the query_posts results so that we can get the rest of the info we need for our visitors.

Now put the following code in place of your existing 404 error message…

<h2>Sorry but I can't find the page you're looking for...</h2>

		<p>Let me help you find what you came here for:</p>
		<?php
			$s = preg_replace("/(.*)-(html|htm|php|asp|aspx)$/","$1",$wp_query->query_vars['name']);
			$posts = query_posts('post_type=post&name='.$s);
			$s = str_replace("-"," ",$s);
			if (count($posts) == 0) {
				$posts = query_posts('post_type=post&s='.$s);
			}
			if (count($posts) > 0) {
				echo "<ol><li>";
				echo "<p>Were you looking for <strong>one of the following</strong> posts or pages?</p>";
				echo "<ul>";
				foreach ($posts as $post) {
					echo '<li><a href="'.get_permalink($post->ID).'">'.$post->post_title.'</a></li>';
				}
				echo "</ul>";
				echo "<p>If not, don't worry, I've got a few more tips for you to find it:</p></li>";
			} else {
				echo "<p><strong>Don't worry though!</strong> I've got a few tips for you to find it:</p>";
				echo "<ol>";
			}
		?>
			<li><p>
				<label for="s"><strong>Search</strong> for it:</label>
				<form style="display:inline;" action="<?php bloginfo('siteurl');?>">
					<input type="text" value="<?php echo esc_attr($s); ?>" id="s" name="s"/> <input type="submit" value="Search"/>
				</form></p>
			</li>
			<li><p>
				<strong>If you typed in a URL...</strong> make sure the spelling, cApitALiZaTiOn, and punctuation are correct. Then try reloading the page.</p>

			</li>
			<li><p>
				<strong>Look</strong> for it in the <a href="<?php bloginfo('siteurl');?>/sitemap/">sitemap</a>.
				</p>
			</li>
			<li><p>
				<strong>Start over again</strong> at my <a href="<?php bloginfo('siteurl');?>">homepage</a> (and please contact me to say what went wrong, so I can fix it).</p>
			</li>
		</ol>

For Artisteer Generated Themes

If you’re modifying an Artisteer generated theme you’ll want to place the above code into your 404.php file in the location I’ve indicated below…

<div class="art-BlockContent-body">
// Replace the code in this div with the new code above
<h2 class="center"><?php _e('Error 404 - Not Found', 'kubrick'); ?></h2>

</div>

You might also want to change the text in your block header. Find this bit of code…

<?php _e('Not Found', 'kubrick'); ?>

And replace “Not Found” with some other descriptive text. Remember to keep it within the single quotes.

Now that you’re all done you should have a 404 page that looks something like this…

Now get to work and make a great looking and informative 404 error page for your site.

If you have any questions or need some help, just leave a comment and I’ll do what I can to help you out.

Disclaimer

I make no promises as to the functionality of these modifications to your theme code. Do it at your own risk. Do it on a backup copy. Do it while wide awake and after having plenty of sleep or plenty to drink, your choice. Don’t do it to your original code. Don’t do it while sleepy, cranky, or driving. And most important, don’t expect it to work the first time. If it does work the first time you probably got lucky. Besides, if you don’t break things you never figure out how they work. And last but not least…Have fun and learn something new.