Bud's Tech Shed

Archive for May, 2010

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.