Bud's Tech Shed

Archive for July, 2009

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

Artisteer makes no provision for placing the search box anyplace other than the sidebar. I searched through all the themes I had collected and found a technique that worked quite well. I just needed to add a new DIV with the search code, some CSS for style/placement and I was ready to roll.

It doesn’t matter if our nav bar is above or below the header. The only down side is we’ll be losing about 25% of the width of the nav bar for the search box.

Find this chunk of code in your header.php file. Yours may not look identical, the code seems to vary slightly by version.

<div class="nav">
    <ul class="artmenu">
        <?php art_menu_items(); ?>
    </ul>
    <div class="l"></div>
    <div class="r"><div>
        </div>
    </div>
</div>

In my case I needed to place the additional code in the class=”l” section. Anyway what you need to do is add this bit of code into the above code block…

<!-- Begin Search Box -->
	<div class="nav-search">
	  <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
		<div style="width:auto;margin:0 9px 0 0;">
		<input type="text" value="Search this website... " name="s" id="searchbox" onfocus="if (this.value == 'Search this website... ') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website... ';}" class="nav-searchbox" />
		<input type="submit" id="searchbutton" value="Search"  />
		<div class="l"></div></div>
	  </form>
	</div>
<!-- End Search Box -->

So that we have this…

<div class="nav">
<div style="width:78%;float:left;">
	<ul class="artmenu">
		<?php art_menu_items(); ?>
	</ul>
</div>
    <div class="l">
<!-- Begin Search Box -->
	<div class="nav-search">
	  <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
		<div style="width:auto;margin:0 9px 0 0;">
		<input type="text" value="Search this website... " name="s" id="searchbox" onfocus="if (this.value == 'Search this website... ') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website... ';}" class="nav-searchbox" />
		<input type="submit" id="searchbutton" value="Search"  />
		<div class="l"></div></div>
	  </form>
	</div>
<!-- End Search Box -->
    </div>
    <div class="r"></div>

</div>

We also make add a DIV around the “artmenu” with some css to shorten it up so that it doesn’t cover the search box. See lines 2 and 6 above.

All that’s left is to give it some style to match our theme. Just drop the following code in your style.css file…

/* Search */
.nav-search	{
float:right;
width:auto;
margin-top:6px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}

.nav-searchbox	{
background:#FFF !important;
color:#000000;
font-weight: normal;
padding:2px 0px 2px 2px;
margin:0 2px 0 10px;
border:1px solid #6B6B6B;
display:inline;
width:140px;
}

#searchbutton	{
font-weight:normal;
background: #7B9B7E !important;
color:#000;
margin:0;
padding:1px 2px 1px 2px;
border:1px solid #000000;
display:inline;
width:auto;
cursor:pointer;
}

That’s about it. You should now have a search box in your nav bar. You’ll need to modify the background and border colors in the CSS to match your theme.

If your not using it already I highly recommend running Firefox with the Firebug add-on. You can inspect every element on the page and you can even temporarily modify the CSS to see how it will affect your layout before you make changes. I’d be lost without 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, 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.

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

In the newer versions of Artisteer they have provided a footer link option in the Appearance panel for your theme. The image on the left is what you get by default. This was a great addition and made life a bit easier for folks that didn’t like to edit their source files. But something seemed to be missing. So being the curious guy that I am, I started to poke around in the functions.php file. And what did I find? I found the missing link to making your Artisteer themes more user friendly especially if your building sites for other users.

Now you can expand the admin panel to as far as you’d like and add an almost unlimited array of options. Check out the image at the right. That’s the admin options for a new Artisteer generated theme that I’m just finishing up.

Well, let’s get started. I would probably rate this as a moderate level of difficulty. As long as you know how to edit your source files, know to make backups and don’t panic when things melt down you’ll be OK.

For this example we’ll be adding some code that will add a 468×60 ad in the right side of our header. We’ll add a small bit of PHP code and some CSS to get to display in the proper area of the header.

Find this bit of code in your functions.php file…

$themename = "Artisteer Test";
$shortname = "artisteer";
$default_footer_content = "<a href='#'>Contact Us</a> | <a href='#'>Terms of Use</a> | <a href='#'>Trademarks</a> | <a href='#'>Privacy Statement</a><br/>Copyright &copy; 2009 ".get_bloginfo('name').". All Rights Reserved.";
$options = array (
array(  "name" => "HTML",
"desc" => sprintf(__('<strong>XHTML:</strong> You can use these tags: <code>%s</code>', 'kubrick'), 'a, abbr, acronym, em, b, i, strike, strong, span'),
"id" => "art_footer_content",
"std" => $default_footer_content,
"type" => "textarea"),

Yours may be slightly different but will have all of the same elements. What we want to do is add some additional selections and variables to use in our theme. Plus we’ll clean up the style a little and add a new title to the option.

The first thing is in line #2 $shortname = “artisteer”, the word in parenthesis can be changed to anything you want as it doesn’t appear to be used anywhere at the moment although it may in the future but that wont matter for now. If you want to change it you can.

Next, we want to put a comma at the end of line #9 above (if you don’t already have a comma there). I discovered this the hard way. You’ll get an error if it’s not there. After you put the comma in place hit carriage return a couple of times so that we have room to insert the next bit of code.

Now insert this in between line 9 & 10 from above…

array(    "name" => "468x60 Header Banner Ad Settings",
"type" => "heading",
"desc" => "You can specify ads (google ad/affiliate ad/banner) on this section. The ad will be displayed as 468x60 Header Banner."),

array(    "name" => "468x60 Banner Ad",
"id" => $shortname."_home_ad_468",
"std" => "Enter 468x60 Ad Code Here",
"type" => "textarea"),

The first array gives us our heading styled section and the second array defines our variable and the type of input we want. In this case a text area for our banner code.

You can add as many different sections as you want as long as you are defining new variables. You can have text areas, check boxes, radio buttons and single text lines.

Now we’ll add the code to the header to display our new ad block. Save your functions.php file and open your header.php file.

Find this bit of code…

<div>
<div></div>
<div>
<h1 id="name-text">
<a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div id="slogan-text">
<?php bloginfo('description'); ?></div>
</div>

</div>

Again, yours may be slightly different. What we want to do is put our new code after the closing div for the logo and before the closing div of the Header. In this example we would put it starting at line #9.

Here’s the code to put starting at line #9…

<div class="header-ad">
<?php echo stripslashes(get_option('artisteer_home_ad_468')); ?>;
</div>

On line two you want to put your shortname if you changed it from “artisteer”. Now all we have to do is ad a little CSS to get our add to appear in the right place. My example is based on a header of 125px high and I want it on the right side. You can play with the CSS and move things around to suit your theme.

Here’s the CSS to add at the end of your style.css file…

.header-ad	{
float:left;
margin-top:35px;
margin-right:10px;
margin-bottom:0;
margin-left:516px;
height:70px;
}

That’s it. You should now have an expanded admin panel. Experiment by adding new options to your theme. I’ll be releasing a new theme called Green Envy that will have a whole load of options that you can turn off/on with a number of ad and video blocks. So check back in a few days, I just have to clean up a few things and it will be ready to go.

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.