Bud's Tech Shed

Archive for June, 2009

The Pink Cadillac theme came about almost by accident. I had already done the basic theme color scheme but couldn’t figure out what to do with it. Then about a week ago I made contact with a Wordpress user who wanted to make a sub-header area similar to a site he liked. He wasn’t sure how to go about doing it so I volunteered to help him out. Then BINGO, Pink Cadillac was born.

Pink Cadillac is loaded with features. It comes standard with four widgets predefined but uses only three. The fourth widget can be used for whatever you need. It would work great on a custom template page for example.

The four widgets are: Sidebar 1, Sidebar 2, widget_center and home_bottom. The readme file that comes with the theme explains how to use all of the features.

The theme also comes loaded with semantic classes for body, post and comments. Thanks to Sandbox for these features. It really gives a lot of control to the styling of the theme.

Home page post thumbnail images

If you want to include thumbnails on the home page it’s easy with a custom field. Simply assign the name “thumb” with the url of your image. That’s it.

Home page sticky post styling

The theme also supports “sticky” posts. Sticky posts are posts that will stay at the top of the home page no matter what date they were originally posted on.

You can change the default styling by editing the CSS associated with the sticky class in the extras.css file…

Google Adsense areas

There are two Adsense areas. A 468×60 ad block in the upper right header. And a 468×60 ad block that appears between post three and four on the home page.

The Adsense code is changed by editing the header.php and home.php files in the commented locations.

Sub-header

The sub-header located below the navigation is divided into three columns.  By default static content from the header.php file is displayed. The center column is a widget area and when activated will display the widget data.

Custom 404 error page

The 404 error page is probably the most neglected page on any site. In a word…BORING. So I’ve included a hopped up 404 error page that suits my style. Of course you can change it to anything you want.

Here’s a list of the features that come standard with Pink Cadillac:

1. Full width area between the navigation and main content:
   • Divided into thirds
   • Middle section widgetized
   • Expands to fit content
   • Use any HTML/PHP content
2. Two Adsense areas:
   • One 468×60 in header
   • One 468×60 between third & fourth post
3. Widgetized area below main content that can be used for:
   • Large Amazon ad carousel
   • Large text widget with anything in it you want
   • Database query
   • Collapses when there are no widgets defined
4. Semantic classes for body, posts and comments. Allowing you to:
   • Control the look of an individual post
   • Style page based on visitor browser and OS
   • Style based on whether visitor is logged in/out
   • Change style based on day, week, month, hour, minute etc
5. Sticky post class defined on home page with special CSS styling
6. Post excerpts on home page with thumbnails via custom fields
7. Custom 404 error page. No boring stuff here.

Plugins:

The only required plugin is limit_posts. This plugin does exactly what it’s name implies, it limits the length of a post to a predetermined number of characters.

You can use any other plugins that you find useful.

One thing to remember is to turn off all of your widgets you have enabled. Since this theme has different widget names, Wordpress may not know what to do with the widgets you have already assigned.

Well that’s about it. Download it, try it out and tell me what you think.

Demo Site

Copyright & License

Pink Cadillac is licensed under the GNU General Public License, version 2 (GPL).

2009 © Bud Griffin

In this tutorial I’ll explain how the Wordpress loop works and how to bend it to your will. The Loop is the heart of your blog and is used to display your blog posts. We’re going to be looking at a standard theme that uses the basic loop such as the default Wordpress theme or even a theme created with Artisteer. More sophisticated themes will have heavily modified or multiple loops to display the front page.

By controlling The Loop you can display what you want where you want. You can insert code before and after The Loop or even inside The Loop between posts. It’s up to you.

Below is the structure of the basic loop.

// Anything here will always be displayed 

<?php if (have_posts()) : ?>

// If there are post then whatever is here will only be displayed once 

<?php while (have_posts()) : the_post(); ?>

// 1. Stuff that gets displayed in the Loop
//Anything here will be output before the content

<?php the_content(); ?> // This function displays the content of each post

// Everything here will be output after the content

<?php endwhile;?>

// 2. Stuff that gets displayed only once when the loop is over 

<?php else : ?>

// 3. Stuff that get's done if there’s nothing to display 

<?php endif; ?>

If there are posts to display they’ll be output during the while loop (#1). When The Loop is finished displaying the required number of posts it will display whatever is in the endwhile (#2) section and then jump to the endif. If there aren’t any posts that meet the criteria to display then The Loop will jump right to else (#3) and display whatever is there before ending.

Now that you know how The Loop works, let’s look at some of the stuff you’ll find in the different sections. Wordpress has done all of the hard work and provided us with a bunch of template tags to control what gets displayed.

Below is a shot of The Loop (with lots of comments) contained in the index.php file of the default Wordpress theme…

You’ll notice that there are a lot of different template tags used to output all of the info about a post. In reality a typical theme will use only a fraction of the available tags. Go to here to see the complete list.

You’ll also notice that after the loop gets done looping it will output the pagination info that gets displayed on the home page, archives and search results pages.

You could replace the above code with WP-Pagenavi if you wanted.

Also every section is wrapped in a DIV with different style classes assigned to them. This is so that you can style every aspect of the output.

And finally, if there are no posts to display the else section will be output. This displays the Not Found message and the search form from the searchform.php file.

Well, now you know how all of that stuff gets on your page. In Part 2 I’ll show you how to control The Loop to display different info between posts. So stay tuned.

If you have any comments or need some help, leave a note. I’d love to hear from you.

This tutorial highlights themes created with Artisteer but can be applied to virtually any theme that doesn’t already have semantic classes. Adding dynamic semantic classes to your theme will allow you to style your theme down to the smallest detail. Suppose you want all of the posts on your blog that occurred in the winter to have a special wintery style. By adding new class functions every post will have an abundance of additional class selectors.

This is what the standard Artisteer theme gives you for class selectors on each post. Compare that to the image above. You can see that your choices are limited. In fact you only have one choice. This is the problem I had when creating the Cool Blue theme. I was forced to add external styling to everything because there were simply no other choices. Just think of all the stylin’ you can do with all of those new selectors.

There’s two ways to accomplish this improvement. This way is the simplest but will only work for WP2.7+. You simple add some code into the Post div using the 2.7 post_class tag. The second and more flexible method will be discussed in another tutorial where I’ll show you how to add classes to the body, posts and comments. Plus it will work with older version of WP.

Wordpress 2.8 adds yet another new tag, body_class to generate additional classes for the body.

So let’s get started.

Find this bit of code in your index.php…

<div class="art-Post">

And change it to this…

<div id="post-<?php the_ID() ?>" <?php post_class('art-Post'); ?>>

That’s it for the index.php. You also need to modify page.php & single.php with the same modifications plus any other files you may have that include the class=”Post” div.

This will add new class selectors to each post and is fairly easy to implement but will only work with WP2.7+. Now all you have to do is add some CSS to style with your new classes. Here’s an example of how you would add some class to a ’sticky’ post…

.sticky {
	background-color: #ffffff;
	background-image: url(images/featured.png);
	background-position: right top;
	background-repeat: no-repeat;
}

Here’s the result of this style for a ’sticky’ post…

Now we can add some new body classes as long as your running WP2.8.

This is even easier to accomplish. Should take less than 5 minutes.

Open your header.php file and find this line…

<body>

And change it to this…

<body <?php body_class(); ?>>

Believe it or not, that’s it. When you view your page source you should see something similar to this…

These are the possible classes that are available with the body_class:

• rtl
• home
• blog
• archive
• date
• search
• paged
• attachment
• error404
• single postid-(id)
• attachmentid-(id)
• attachment-(mime-type)
• author
• author-(user_nicename)
• category
• category-(slug)
• tag
• tag-(slug)
• page
• page-parent
• page-child parent-pageid-(id)
• page-template page-template-(template file name)
• search-results
• search-no-results
• logged-in
• paged-(page number)
• single-paged-(page number)
• page-paged-(page number)
• category-paged-(page number)
• tag-paged-(page number)
• date-paged-(page number)
• author-paged-(page number)
• search-paged-(page number)

This allows you to isolate and style just about every situation.

That’s it! Stay tuned for the next tutorial on adding even more semantic classes to your theme.

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.

The sidebars or widget areas in Artisteer all have a generic class assigned to them. This makes if difficult if not impossible to add additional style to just one widget area. An example would be if you wanted to create a theme that needed a unique header image for each widget area. There’s no way to isolate an individual widget.

Well, with just a small hack to the functions.php file you can add another class selector to every widget.

Find this bit of code in the functions.php…

if (function_exists('register_sidebars')) {
	register_sidebars(2, array(
		'before_widget' => '<!--- BEGIN Widget --->',
		'before_title' => '<!--- BEGIN WidgetTitle --->',
		'after_title' => '<!--- END WidgetTitle --->',
		'after_widget' => '<!--- END Widget --->'
	));
}

And change it to this…

if (function_exists('register_sidebars')) {
	register_sidebars(2, array(
		'before_widget' => '<div class="widget_%2$s">' . '<!--- BEGIN Widget --->',
		'before_title' => '<!--- BEGIN WidgetTitle --->',
		'after_title' => '<!--- END WidgetTitle --->',
		'after_widget' => '<!--- END Widget --->' . '</div>'
	));
}

What we’ve done is add a new class called “widget_%2$s”. The “%2$s” is Wordpress code for the title of the widget. Now our Search widget is wrapper in a DIV named “widget_search” and our Category widget is called “widget_categories” etc.

The only thing left to do is create some CSS to add additional style to our newly named widgets. If you don’t do anything, the look won’t change.

Here’s the CSS to change the background color of each widget in the image above…

.widget_search .BlockHeader .l {
background-image:url();
background-color:#222E60;
}

.widget_categories .BlockHeader .l {
background-image:url();
background-color:#000000;
}

.widget_archives .BlockHeader .l {
background-image:url();
background-color:#FF4B33;
}

.widget_widget_meta .BlockHeader .l {
background-image:url();
background-color:#222E60;
}

If you are creating a header image with some fancy text in it and you don’t want to display the default text just add this additional CSS for each widget…

.widget_search .BlockHeader-text {
display:none;
}

I used Firebug in Firefox to locate the CSS for the block_header_image then added the new class in front of it to isolate it. The background image is empty because I had to override the default image to display a different color. You could just as easily put the path to a different image for each widget.

You now have the ability to change every aspect of just one widget with a very simple addition to the widget code.

Have fun and get stylin’

Cool Blue is a theme that was created with Artisteer. Artisteer is a great program for quickly creating a basic Wordpress theme structure. It just has a few areas that need some adjustments. I’ve tried to address a couple of those areas with this theme. There’s nothing wrong with the basic generated theme, it’s just that some of the functions are boilerplate and it’s difficult to figure out how the magicians at Artisteer did things. I’m sure that as time goes by Artisteer will incorporate more and more of these type of features.

Artisteer saves untold hours in design that can be better spent on enhancing and adding your own special touch to your new blog site.

Cool Blue was created as a tutorial theme for other Artisteer users to learn how they can modify the basic exported Artisteer theme. This way you can customize your site so that it doesn’t look like so many other out of the box Artisteer sites.

Widgets

The basic Artisteer theme names the widget areas as Sidebar1, Sidebar2 and so on. Widgets can be used anywhere so I found a way to change the functions.php file to rename the widget areas to something more meaningful. After all, if you’re going to put a widget in the footer it shouldn’t be called Sidebar3.

Cool Blue includes these defined widgets:

• sidebar1
• widget_area_1
• widget_area_2
• widget_area_3
• footer_widget

You can rename these or even add more if you’d like. If you want to edit the widget names or add some more widget areas, find the following lines in the functions.php file…

if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'widget_area_1',
'before_widget' => '<!--- BEGIN Widget --->',
'before_title' => '<!--- BEGIN WidgetTitle --->',
'after_title' => '<!--- END WidgetTitle --->',
'after_widget' => '<!--- END Widget --->'
));

If you want to change the name, just overwrite the existing name with a new one. If you want to add more widget areas then just copy the above code and add it after the last sidebar declaration and give it a descriptive name.

Couldn’t be easier. All you have to do to incorporate the new widget names in your own theme is to copy the Cool Blue widget functions and overwrite the Artisteer widget functions. See the comment in the function.php file.

To add a custom widget area to the theme, copy the following code and put it where you would like it to appear.

<div class="widgetcontent" ><!-- Give it some style -->
<?php if (!art_sidebar(widget_area_1)): ?><?php endif ?>
</div>

Now just put some Amazon or Google Adsense code in a text widget and you’re ready to roll. The Cool Blue theme comes with extra widget areas above and below the main content area in the index.php page.

Secondary Navigation for Categories

Cool Blue adds a secondary navigation area just under the main nav bar. It will display category titles for all categories that have posts assigned to them. If you look in the header.php and extras.css you can see how this nav bar was implemented. It is very easy to incorporate into your own theme and you can style it any way you choose..

Custom Image Header Function

This was the most challenging feature to incorporate. The reason being is that there isn’t much info on this function. It’s a special API that’s actually built into Wordpress. It has some limitations but for some themes it’s a perfect enhancement.

This modification adds a new selection to your Appearance menu allowing you to add a new header image to your theme without any coding. All of the heavy lifting is done by Wordpress. You can upload a large image and the program will allow you to crop and resize it to get just the header appearance. You can even change the color of your header text. And if all else fails it will allow you to revert back to your original header image.

If you choose to put this function into your own them, keep in mind that the header image needs to be rectangular. No rounded corners as Artiteer adds a transparent overlay to create the rounded courners and this will be lost with this function.

If you want to see how this was done, look at the end of the functions.php file for the admin code. Look in the header.php file for the changes to the header. Cut and paste the code into your own theme. The code has some comments in it for modifying the header size and you may have to play with the CSS styling to get things perfect.

Note: I removed the footer link editor from my functions.php file because there was a conflict with the custom image header function.I’ll put it back and update the theme when I get time to re-incorporate it.

Misc Theme Info

Image Thumbnails In Post Excepts:

Posts that appear on the front page can have a thumbnail image attached to them. When you create a new post (or edit an existing one) just add a custom field called “thumb” and give the URL of the image. The image will be scaled down to 100×100 pixels, so it would look best to have a square image to start with. If you don’t want a thumbnail, don’t include a custom field.

Custom Field Input

Post Result

Plugins:

The only required plugin is limit_posts. This plugin does exactly what it’s name implies, it limits the length of a post to a predetermined number of characters.

You can use any other plugins that you find useful.

One thing to remember is to turn off all of your widgets you have enabled. Since this theme has different widget names, Wordpress won’t know what to do with the widgets you have already assigned.

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.

Copyright & License

Cool Blue is licensed under the GNU General Public License, version 2 (GPL).

2009 © Bud Griffin

Sidebars don’t belong in the sidebar area anymore. In fact they shouldn’t be called sidebars but widgetized areas. Unfortunately Artisteer’s naming system is sidebar(1) to sidebar(x). Doesn’t mean much to me when it’s in the footer.

Here’s how I changed the sidebars to more descriptive names. I’ve included five sidebars, you can have more or less. It’s up to you. You can change the names to anything that makes sense to your theme.

Well, here goes…

Find this code in functions.php

if (function_exists('register_sidebars')) {
	register_sidebars(2, array(
		'before_widget' => '<!--- BEGIN Widget --->',
		'before_title' => '<!--- BEGIN WidgetTitle --->',
		'after_title' => '<!--- END WidgetTitle --->',
		'after_widget' => '<!--- END Widget --->' . '</div>'
	));
}

Replace it with this code. You can name the sidebar whatever you want, just remember no spaces or other special characters (to be safe). You can have as many as you want. I do know that this works so don’t change anything except the name of your widget. Your widget name is in single quotes after ‘name’=>. If it doesn’t work or breaks your code then you made a typo or left out a quote.

    if ( function_exists('register_sidebar') )
    register_sidebar(array('name' => 'sidebar1',
		'before_widget' => '<!--- BEGIN Widget --->',
		'before_title' => '<!--- BEGIN WidgetTitle --->',
		'after_title' => '<!--- END WidgetTitle --->',
		'after_widget' => '<!--- END Widget --->'
	));

    if ( function_exists('register_sidebar') )
    register_sidebar(array('name '=> 'below_featured',
		'before_widget' => '<!--- BEGIN Widget --->',
		'before_title' => '<!--- BEGIN WidgetTitle --->',
		'after_title' => '<!--- END WidgetTitle --->',
		'after_widget' => '<!--- END Widget --->'
	));

    if ( function_exists('register_sidebar') )
    register_sidebar(array('name' => 'footer-left',
		'before_widget' => '<!--- BEGIN Widget --->',
		'before_title' => '<!--- BEGIN WidgetTitle --->',
		'after_title' => '<!--- END WidgetTitle --->',
		'after_widget' => '<!--- END Widget --->'
	));

    if ( function_exists('register_sidebar') )
    register_sidebar(array('name' => 'footer-mid',
		'before_widget' => '<!--- BEGIN Widget --->',
		'before_title' => '<!--- BEGIN WidgetTitle --->',
		'after_title' => '<!--- END WidgetTitle --->',
		'after_widget' => '<!--- END Widget --->'
	));

    if ( function_exists('register_sidebar') )
    register_sidebar(array('name' => 'footer-right',
		'before_widget' => '<!--- BEGIN Widget --->',
		'before_title' => '<!--- BEGIN WidgetTitle --->',
		'after_title' => '<!--- END WidgetTitle --->',
		'after_widget' => '<!--- END Widget --->'
	));

Now the fun part.

To replace an existing Artisteer side bar function, find this code in your sidebar.php…

<?php if (!art_sidebar(1)): ?>

and change it to something like this…

    <?php if (!art_sidebar('below_featured')): ?> <-- Don't forget the single quote -->

To put a new sidebar somewhere just insert the following code. Just wrap it in a DIV statement so that you can style it. You don’t have to do much, just set some size and position stuff and Artisteer’s default styling will take care of the rest. Artisteer’s sidebar style looks quite good so I chose to use their style instead of creating my own.

    <div class="homepageamazon"; ><-- whatever class name you want -->

        <?php if (!art_sidebar('below_featured')): ?><?php endif >

    </div>

Here’s my CSS code to style the above for my center content sidebar on one of my other sites.

.homepageamazon  {
       clear:both;
       float: left;
       width: 640px;
       margin: 0px 0px 0px 0px;
       padding: 0px;
       }

For the above widget, I just enabled a text widget in the ‘below_featured’ widget position and pasted my Amazon widget code. Easy, instant widget area.

If you’re changing an existing Artisteer side bar (sidebar(1)) you don’t need to do any styling just change the name.

Since a couple of people have asked, here is the code I used to put three widget areas above the footer area.

1. Create a file called ‘footer-bar.php’ and put the following code in it…

<!-- Footer Bar Code Start -->
<div style="float:left;width:1000px;background-color:#343932;">
<!-- Footerbar -->
<!-- Left panel -->
<div style = "clear:both;"></div>

<div class="sidebar-footer-left">
<?php if (!art_sidebar(footer-left)): ?><?php endif ?>
</div>

<!-- Center Panel -->
<div class="sidebar-footer-mid">
<?php if (!art_sidebar(footer-mid)): ?><?php endif ?>
</div>

<!-- Right Panel -->
<div class="sidebar-footer-right">
<?php if (!art_sidebar(footer-right)): ?><?php endif ?>
</div>

<!-- Footer Bar Code End -->
</div>

Line 2 above sets the width and background color of our new div. Change the values to fit your theme.

2. The put the following at the end of your style.css file…

.sidebar-footer-left
{
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  overflow: hidden;
  width: 333px;
  height:367px;
}
.sidebar-footer-mid
{
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  overflow: hidden;
  width: 333px;
  height:367px;
}
.sidebar-footer-right
{
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  overflow: hidden;
  width: 333px;
  height:367px;
}

The width and height of each div will need to be changed depending on your theme.

All that’s left is to add the following code to the very top of your footer.php file…

<!-- Footer bar -->
<?php include (TEMPLATEPATH . "/footer-bar.php"); ?>
<!-- end Footer bar  -->

Line 3 above is the ending div for ‘Sheet-Body’ (or some other name depending on your version of Artisteer).This ending div may appear at the end of the index.php (and archive.php, single.php page.php etc) in later versions. So if it doesn’t work, start looking for the proper div. It’s also very important to use a good text editor, like Notepad++ (for Windows) as it will help you identify closing elements by highlighting them.

NOTE: These mods were done on a theme created with a very early version of Artisteer. Some of the div names that are now used will be different but the basic ideas still works. Your theme dimensions will probably be different so you will have to play around with the sizes and colors of the different properties. Also remember that there are many ways to do this and what I have done here worked for me with what I was doing at the time. Everyone’s themes are different and not all mods work exactly the same as presented (especially as new versions of Artisteer are released). So don’t get discouraged, just keep at it. Persistence pays off.

Well, that’s it. Hope it was clear enough for everyone.

Important: Backup your files before modifying them. Use a text editor not Word. Don’t use the Wordpress theme edit function as it doesn’t save your old work. If you break something it can be a pain to get things back the way they should be. And last but not least Have Fun and learn something new today. If all else fails ask questions.