Bud's Tech Shed

Archive for the ‘artisteer’ Category

I just wanted to let everyone know that I’ve created a new site with a fabulous (at least I think so) new product. It’s the first Artisteer program add-on.

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

I’ve been playing around with the new beta version of Wordpress 3.0 and discovered a technique for having different headers for each page or post. The best part is that it will work with v2.9.2 so you don’t have to wait for v3.0 to come out.

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

When Artisteer 2.4 came out some of the usual techniques for styling the page changed. Especially when dropping a wide sidebar area over an existing double sidebar. The folks at Artisteer decided to change how the page was styled by using the dispay:table selector. That was a real head scratcher because I can’t remember ever seeing it used in that way. After playing around for a bit I gave up because I had better things to do. Anyway about an hour ago I was doing something completely unrelated and all of a sudden the light bulb came on. It was a 10 minute job and I had a working wide sidebar.

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.

I’ve been playing around with the beta release of Wordpress 3.0 lately and really like the new navigation menu. It’s very slick. Anyway, I wanted to make see if I could make the new nav menu work with the styling of my Artisteer menu.

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.

I’ve modified a lot of themes made with Artisteer. It took awhile to figure out how all of the pieces of the theme worked together. Along the way I started documenting my discoveries.

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

Some people are never satisfied. They liked the Super Simple Random Header Image but they wanted more . They wanted the header images to change every 10-15 seconds without having to refresh the page. So after a little head scratching and searching I’ve found the solution.

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.