Bud's Tech Shed

Archive for the ‘Themes’ Category

Blue Moon is a magazine style Wordpress theme with lots of features.

• Navigation above or below header
• Glider panel for featured content
• Featured category panel
• Post excerpt with thumbnails on front page
• Automatic support for WP-Pagenavi
• Enable/disable comments on pages
• Dynamic semantic classes for body, post & comments
• Admin bar at top of page when logged in
• Ad/banner areas in header, main content, sidebar & end of posts
• Incorporates WP custom header API so that you can change header image withour editing any files
• Preview in admin options. See the changes without reloading your site
• Everything is controlled from admin panel. No file editing.

That’s a whole lotta features.

Custom Header Image

Admin Options

Once you’re logged in an Admin Panel will appear at the to of every page. This give you easy access to the main WP admin functions. This feature can be turned off in the admin options.

This option allows you to use your own header image (1000×125 pixels). You can upload a much larger image and crop it to fit the header area and automatically it uploads it. Couldn’t be easier, plus you can reset the header back to the original theme header.

Click the image on the left to see a larger image of the entire admin options page.

As you can see there are a load of options that can be modified without ever touching the theme files.

The featured video, 300×250 ad block and category list will stay in place even when widgets are enabled in the sidebar or you can selectively turn each one off.

You can even turn off the footer links if you don’t want them.

Page Templates

Blue Moon come with custom page templates to create an HTML sitemap and an AJAX enabled FAQ page.

Demo Site

Copyright & License

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

2009 © Bud Griffin

Green Envy is my latest theme created with Artisteer. I’m really having a blast with Artisteer. It lets me create the basic theme very quickly. Then I can spend my time improving it and adding features that put the theme in the premium range as far as options and flexibility go.

Green Envy is a magazine style theme and is loaded with features expecially if your looking for a theme that is set up for Google Adsense.

Major Features of Green Envy

• Place the navigation above or below the header
• Random header image – 10 different headers included
• Support 125×125 ads above the content
• Banner ad in header
• Banner ad between the 2nd & 3rd row of posts
• Banner ad below the title of single posts
• 300×250 ad block in sidebar
• Featured video block in sidebar
• Categories arranged in two rows in sidebar
• Google Analytics in footer
• WP-Pagenavi support built in
• Supports sticky posts

All features are managed from the Wordpress admin panel.

Required Plugins

Green Envy only requires two plugins, WP-Pagenavi for nice page navigation and WP125 for 125×125 ad management.

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

Demo Site

Copyright & License

Green Envy is licensed under the GNU General Public License, version 2 (GPL).

2009 © Bud Griffin

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

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