Archive for the ‘Tutorials’ Category
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.
- This is the database we created in phpMyAdmin
- Our user name is ‘root‘ by default
- Leave the password blank
- Our database is located on ‘localhost‘
- 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.
You’ve probably seen the cool peel away effect in the upper right corner on some websites and wondered how the heck they did that. It certainly caught your attention.
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.
There are a lot of reasons visitors to your site may get the feared “404 Error” page. They made a mistake and typed in the URL wrong. Or the page was renamed or deleted. Whatever the case they end with a page that just says “Error 404 -Not Found”. Check out the default “Kubrick” themes 404 page (default 404). That surely doesn’t help your visitor. They may think there’s something wrong with your site and just move on and leave for good.
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…
- We’ll show them some posts to choose from that may be related to what they’re looking for.
- We’ll give them a search box to do a site search.
- We’ll give them suggestions to check the URL for spelling.
- We’ll direct them to our sitemap (you have one don’t you?).
- 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.
People have asked how to add a widgetized sidebar area above an existing double (two narrow) sidebar. So here it is. This tutorial is geared toward Artisteer generated themes but the concept will work with most themes, you’ll just have to work a bit to figure out where to modify your non-Artisteer theme code. This tutorial also uses a theme that was created with and earlier version of Artisteer so some of the CSS classes may have a slightly different name but it won’t be too hard to figure out.
Our sidebars before modification looks like this…
And will end up looking like this…
So let’s get to work.
First we need to modify our functions.php file so that WP knows we have another sidebar we want to add widgets into. Find this bit of code in your functions.php file…
if (function_exists('register_sidebars')) {
register_sidebars(2, array(
And change the ‘2′ to a ‘3′ so that you have this…
if (function_exists('register_sidebars')) {
register_sidebars(3, array(
Save the file. Now WP will will know that we have 3 dynamic sidebars.
Next we’ll modify the index.php file to add the new sidebar. So open your index.php file and look for this bit of code…
<?php include (TEMPLATEPATH . '/sidebar1.php'); ?> <?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
Then we’ll add this code directly above the first sidebar include…
<div class="sidebar3"> <?php if (!art_sidebar(3)): ?><?php endif ?> </div>
Now you index.php should look like this…
</div> <!-- This is the closing DIV for content/art-content --> <div class="sidebar3"> <?php if (!art_sidebar(3)): ?><?php endif ?> </div> <?php include (TEMPLATEPATH . '/sidebar1.php'); ?> <?php include (TEMPLATEPATH . '/sidebar2.php'); ?> </div> <!-- This is the closing DIV for contentLayout/art-contentLayout -->
We’re going to call it sidebar 3 even though it’s above sidebars 1 & 2 just to keep it simple.
If you want the new sidebar to appear on all of your pages, you need to do the same mods to the pages.php, single.php, archives.php and archive.php files. Plus any page template files you’ve created.
The last thing we have to do is add some CSS to get it oriented properly. This is where things may look a little different depending on what version of Artisteer theme you’re working with.
Find the sidebar code in your style.css file. My code looked like this…
.contentLayout .sidebar2
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 199px;
}
Newer versions of Artisteer will have “art-” in front of everything. So make sure you adjust the code according to your version. Anyway, just copy one of the sidebar chunks of code and paste it right after it. Then rename it from “.contentLayout .sidebar2″ to “.contentLayout .sidebar3″. You also need to change the width of sidebar 3. Just add up the width of sidebar1 and sidebar2 to get your new width.
Your new sidebar3 CSS will look something like this (your width will probably be different)…
.contentLayout .sidebar3
{
position: relative;
margin: 0;
padding: 0;
border: 0;
float: left;
overflow: hidden;
width: 409px;
}
Save your file and your done.
When you go to your widget panel you should now see “sidebar 3″. If you don’t have any widgets assigned to “sidebar 3″ then everything will look like it did before the modification.
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.
