Archive for October, 2009
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.
This post has been updated to fix a couple of errors.
The top Search Engine Optimization (SEO) sites recommend placing an ad after the first post on your blogs home page. This is quite effective as the visitor is less likely to get ad blindness and ignore the ad.
This is very easy to do and shouldn’t take more than 10 – 15 minutes to implement. I’ll be showing how to insert the code in an Artisteer theme but the technique will work for any theme that uses the standard WordPress Loop.
The first thing to do is make a backup of your index.php file just to be safe.
You want to locate this bit of code…
<?php if (have_posts()) : ?>
And insert this directly above it…
<?php $count = 1; ?>
The above code will start our counter to determine which post we’re on. Next find this bit of code…
</div> <?php endwhile; ?>
And insert the next chunk of code between the div and the endwhile statement…
<?php if ($count == 1) : ?> <div class="adblock"> ==> Insert your Google AdSense code here <== </div> <?php endif; ?> <?php $count++; ?>
This will insert the ad code if the counter ($count) equals ’1′. If you want the ad to appear after the second post just change the number to ’2′. You’ll notice we also added a new CSS class so that we can position and style our adblock to fit our theme. Below is the CSS you might use to center a 468×60 adblock…
.adblock {
height:60px;
margin-left:84px;/* depends on your content width */
}
That’s it. Try it out and start monetizing you blog.
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, cranking, 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.
This tutorial will show you how to modify your theme so that you can have a different header image depending on what page or category your viewing.
There are a number of different ways to perform this task. This is pretty easy with minimal modifications to the theme. The modifications we’re going to make are for a typical Artisteer created theme, but it will work for just about any theme. Your mileage may vary.
This is sort of two tutorials in one. We’re going to make a small modification to the header.php file and we’re going to write a simple function and call it in the functions.php file.
Find this line of code in your header.php file…
<div class="art-Header-jpeg"></div>;
And change it to this…
<div <?php userfunc_header_image(); ?>></div>
You’re all done with the header.php file. Now for the fun part.
Now open your favorite text editor (NOT Word) and paste the following code into it…
<?php
// Function to use a different header image based on category or page.
// Copy elseif statements to create additional header for additional
// categories or pages.
function userfunc_header_image() {
if ( is_page('about')) echo 'class="header2"';
elseif ( is_category('261')) echo 'class="header3"';
elseif ( is_category('cat-a')) echo 'class="header4"';
else echo 'class="art-Header-jpeg"';//This should match the default header class
}
?>
Save this file as header_image.php and copy it to your theme directory that you have your modified header.php file in. We could have placed all of the above code (with the exception of line #5) in our header.php file but this way is neater plus we get to see how a simple function works.
You can add additional pages/categories by copying the elseif statement and adding a different header image unless you want to use the same one for more than one category/page. Don’t forget to change the category/page names to the proper ones for your theme. Also don’t forget to make additional CSS classes to match any additioanl header images you add.
Now open your functions.php file and insert the following line of code at the very top right after the opening ?php tag…
include_once (TEMPLATEPATH . '/header_image.php');
Almost done. Now all we have to do is define some CSS classes for our new header images. Just put the following CSS at the end of your style.css file. I just copied the CSS code for the default Artisteer header class and changed the name of the image. Your header image can be any name you want, just make sure the CSS matches.
div.header2
{
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 888px;
height: 250px;
background-image: url('images/Header2.jpg');
background-repeat: no-repeat;
background-position: center center;
}
div.header3
{
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 888px;
height: 250px;
background-image: url('images/Header3.jpg');
background-repeat: no-repeat;
background-position: center center;
}
div.header4
{
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 888px;
height: 250px;
background-image: url('images/Header4.jpg');
background-repeat: no-repeat;
background-position: center center;
}
That’s it, you’re all done.
Don’t forget to make your header images. If your modifying an Artisteer theme this works best on on square cornered header images.
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, cranking, 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.
