Posts Tagged ‘artisteer’
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.
No Comments »
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.
| Download Now: | cool_blue.zip |
|---|---|
| Version: | 1.0 |
| Updated: | June 7, 2009 |
| Size: | 216.14 KB |
| Downloaded: | 430 Times |
Copyright & License
Cool Blue is licensed under the GNU General Public License, version 2 (GPL).
2009 © Bud Griffin
