Bud's Tech Shed

Archive for February, 2010

When you start designing Wordpress themes it becomes a real hassle to constantly upload files to your web server to see if your latest tweak did what you wanted it to.  And what happens when your latest modification messes things up and your live site is non functional?  What you need is your very own web server. All of the individual applications are available, Apache , PHP and mySQL. But putting all of the pieces together is a real challenge.

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!

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.

Modifying your theme to include random header images doesn’t have to be difficult. In fact it isn’t any more complicated than adding a few lines of code to the header.php file. I’ve created themes with random header images using a number of different techniques and this is by far the simplest way ever. It may not be the most efficient technique or the most random but it is easy.

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.