Kaizeku Ban » Themes

Chrome Milk 1.6.2 RC 1 Released

Avice — Mon, 10 Nov 2008 10:00:39 +0000

This release (at revision 63) fixes the bug with WPI content permalinks and added support for WordPress 2.7 comment features.

Chrome Milk 1.6.2 RC1 Screenshot

WordPress 2.7x reply form (jQuery thickbox)

A9 OpenSearch 1.1 Auto-discovery (OSD)

Various Microformats embed

Safari native search feature

WordPress 2.7x Comments Pagination

Download

Chrome Milk 1.6.2 RC 1 ·(436 KB) · SHA1 cheksum 76eb07ecc9d61fdabc33f9fb312842221e241e9d
Chrome Milk 1.6.2 RC 1 (tar.gz) · (377 KB) · SHA1 cheksum836b6859225b036f750143019a0b50f2b2e7f85c

More on this → Chrome Milk 1.6.2 Release Candidate 1

Beta test WP-iStalker theme

Avice — Tue, 04 Nov 2008 06:20:47 +0000

Chrome Milk

Version 1.6.2 is a downgrade of WPI brush milk WordPress theme. Because of complicated license issues and some others pure experimental code breakdown 60% of the features has been taken out.

Download

Read the quick start guide, if you meet all the requirements download it at google code page. WIP Demo.

Features

WPI is a features rich open source theme, you will have more control with content using WPI theme. Possible options include from a simple task like changing date format on single post to controlling what will be send in HTTP headers, imagine that!.

Template structure is base on W3C CSS3 layout and its semantically a POSH design (Microformats) . Checkout the no frill features list.

Screenshot

Chrome Milk

Theme options (WordPress 2.7x)

Advanced CSS and dynamic template

Extended features.

Customize styles for every known browser (with zero CSS Hack) - base on Browser capabilities project.
Customize styles for Mobile/Screen reader (pda, iphone, blackberry,psp, jaws)
Customize styles for specific OS (windows, mac, unix, debian, redhat, bsd)
Customize styles base on Client specific time (dawn,day,night,dusk,night). -require javascript.
~~Customize styles for search engine crawler or bots.~~ -grayhat

Bugs & patches

This are beta release (bug squashing level), minor glitch and bugs is to be expected so don’t look so surprised when you found ones. If you got an issue or patches to submit don’t post it here, write a ticket. Its make things more organize.

Latest

svn checkout http://wp-istalker.googlecode.com/svn/trunk/ wp-istalker-read-only

How to upgrade your theme to WordPress 2.7

Avice — Mon, 03 Nov 2008 18:27:15 +0000

There is new codex entry for theme authors specifically, check out Migrating themes to 2.7 and also read otto’s post regarding WP 2.7 comment paging and threading.

At last somebody notice the microID, I have implement microID in WP-iStalker themes since the first release this methods are good for comparing genuine user with fake one.

Error has been made

Avice — Wed, 29 Oct 2008 04:16:07 +0000

The “404 page not found” shouldn’t be so depressing so I rebuild WP-iStalker 1.6.2 404 page. It now has a Google Webmaster 404 widget customize to your locale language setting and it will also trigger ‘prefeching’ content (base on the request link and google fixURL suggestion).

Try get yourself lost around here. ^D

How to create specific CSS selector base on WP Post Type and Post ID

Avice — Wed, 16 Jul 2008 06:55:33 +0000

While spending my time stalking wordpress support forum, I stumbled on this 6 days old unresolved topics ” using page/post id to specify per-page css in 2.5″.

I’m about to upgrade a site from Wordpress 2.3 to the latest version. I’ve previously been employing the page id in order to have page specific CSS, e.g., pages with either 0, 1 or 2 sidebars.

For example, if the url is http://site.com/page1, the page is styled with a combination of a template and CSS to specify the width of primary:

#page1 #primary {margin-left: 0;width: 890px; }

I’ve read in some other posts here that Wordpress 2.5 no longer uses this, and now the post ID is used instead [...] ~ hauntedtapedeck

Workaround

Basically, what we need is a unique CSS Selector for specific post & custom page inside the template.

First we create a function for our CSS selector and save it inside WP theme functions.php

functions.php: get_post_selector_classname()

function get_post_selector_classname()
{ global $wp_query;

 if (!is_object($wp_query) ) return;

 if ($wp_query->is_single || $wp_query->is_page) {	 

	 $pid = $wp_query->post->ID;
	 $post_type = $wp_query->post->post_type; 

	 return 'wp-'.$post_type.' '.$post_type.'-'.$pid;
 }
}

Next we call the get_post_selector_classname function inside the template. You can call this function anywhere inside your template but the best placement for the class selector is inside body tag (more weight for inheritance).

header.php
```
<body class="<?php echo get_post_selector_classname();?>">
```

Available CSS selector

The following CSS selector is available inside WP post single and page only.

body.wp-page
body.page-ID
body.wp-post
body.post-ID

CSS Example

styling “single page” post.

body.wp-single{background-color:#f6f6f6;}

styling a single page with post ID 69.

body.single-69{background-color:#f6f6f6;}

styling custom page with post ID 42.

body.page-42{background-color:#f6f6f6;}

styling all custom page.

body.wp-page{background-color:#f6f6f6;}

Wordpress 2.6.2

I’m not sure why its not working thought. For WP 2.6.2, try the below code

// add inside functions.php
function post_selector_classname()
{ global $wp_query;

	$output = 'wp-';

 if ($wp_query->is_single || $wp_query->is_page) {	 

	 $pid = $wp_query->post->ID;
	 $post_type = $wp_query->post->post_type; 

	 $output .= $post_type.' '.$post_type.'-'.$pid;
 } elseif($wp_query->is_home) {
 		$output .= 'home';
 }

 echo $output;
}

call inside template (header.php)

<body class="<?php post_selector_classname();?>">

Refer query.php inside wp-includes folder for more WP hierarchical sections.

Wp-iStalker 1.6 hidden theme options

Avice — Sun, 06 Jul 2008 03:59:04 +0000

There are more than ten hidden options in Wp-iStalker theme, these hidden options will be available if certain conditions are met. Checkout the requirements below

1. Blog header Advanced Customization

Upload any TTF fonts inside /themes/wp-istalker-%versions%-pb/public/fonts directory.
GD2 is enabled

2. Post layout avatar options

Enabled Avatar refer Admin > Settings > Discussion > Avatar Display

3. ICRA pics-ratings

Upload ICRA labels.rdf inside your wordpress blog root directory.

4. Post layout relative date options

Activated Dustan’s time since plugin

5. ClaimID delegate meta link options

Valid microID hash

6. XRDS

Activated WP Openid plugin.

7. Language alternate meta links

Activated Global Translator plugin.

8. Related post widget extra options

Activated “Related posts widget”.

9. A9 Open search auto-discovery

Make sure there is no osd.xml in your wordpress blog root directory
The theme public directory is writable /themes/wp-istalker-%versions%-pb/public/

10. APC template options

Premium versions only

Enabled APC
Defined WP_CACHE constant inside wp-config.php
Upload APC object-cache.php inside /wp-content/ directory

11. Botnet Cloaking options

Premium versions only

Install CrawlTrack within the same wordpress database

Themes plugin dependencies

Avice — Sun, 08 Jun 2008 11:06:53 +0000

A good theme designer should avoid the need to relies on third party plugins.

Is plugin deactivated

Unfortunately, some WordPress theme out there has a “major pending headache” for plugin dependencies breakdown sydrome. Because of this un-friendly trends there is bound shit to happen when the specific plugin is not maintain properly or on certain case of a sudden WordPress upgrade render the plugin useless (this happen a lot when previous WP 2.3 release).

To make it worse some ignorant-end-user decide “not to” upgrade their WordPress blog because their favorites theme’s has this specific plugins that will only work with previous vulnerability WordPress version & thus the never ending quotes war begin.

Theme with Plugin dependencies

From the smashing lists of “10 Fresh, Elegant and Clean Wordpress Themes“ there is 3 out of 10 theme with plugins dependencies issue. These threesome is an experienced theme designer. How many wordpress theme with plugin dependencies is out there?

So what’s the point of having clean & elegant theme if it doesn’t properly work and throw “Fatal Error” when certain plugin is deactivated.

Similar issue

Before you asked why you need to write better plugin support read on the following articles at WTC.

Plugin Deactivation Issues by Ronald Huereca
If Plugin Deactivation Breaks Your Blog by Jeff Chandler Jeffro2pt0.

Introduction

This guide is intent for WordPress theme designer in hope to improve theme quality and avoid plugin dependencies.

Wordpress Hook

As this is a “quick guide” so I wont cover this broad topics. It might take sometimes to understand the concept still its worth the time. You can read it at WordPress Codex ↓

http://codex.wordpress.org/Plugin_API

Avoid Plugin dependencies best practice guide

Lets assume you want to add Lester Chan advanced pagination plugin (Wp-pagenavi) in your theme.

Fallback function

1) First we created a default function for the page navigation links (the next & previous page links). Saved it inside functions.php in your theme folder /wp-content/themes/mytheme/.

functions.php

function wpi_post_link()
{
	next_posts_link(__('&laquo; Older Entries','mytheme-name'));
	echo '&nbsp;';
	previous_posts_link(__('Newer Entries &raquo;','mytheme-name'));
}

Tips: to avoid duplicated function name conflict, its a good practice to have your own unique prefix for function name , ( i.e., wpi_get_time, themename_foo )

HTML & Action Hook Placement

2)Next we add our pagination hook (wpi_pagination) inside index.php templates ( & similar templates files i.e., home.php, category.php, archive.php ) .

index.php

<!-- pagination -->
<div id="pagination" class="border clear-both">
<?php do_action('wpi_pagination');?>
</div>

Example using default (kubrick) wordpress theme index.php templates files.

(kubrick) index.php

<?php get_header(); ?>

	<div id="content" class="narrowcolumn">

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

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

			<div class="post" id="post-<?php the_ID(); ?>">
				<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
				<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

				<div class="entry">
					<?php the_content('Read the rest of this entry &raquo;'); ?>
				</div>

				<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
			</div>

		<?php endwhile; ?>

		<!-- pagination -->
		<div id="pagination" class="border clear-both">
		<?php do_action('wpi_pagination');?>
		</div>

	<?php else : ?>

		<h2 class="center">Not Found</h2>
		<p class="center">Sorry, but you are looking for something that isn't here.</p>
		<?php include (TEMPLATEPATH . "/searchform.php"); ?>

	<?php endif; ?>

	</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

is plugin active (optional)

3) For earlier version of WordPress (version 2.3.x & below) you will need to add the following function.

functions.php

if (version_compare($GLOBALS['wp_version'], '2.5', 'lt'))
{
	function is_plugin_active($plugin_filename)
	{
		$plugins = get_option('active_plugins');

			if( !is_array($plugins) ) settype($plugins,'array');			

		return ( in_array($plugin_filename, $plugins) ) ;
	}
}

Register Action Hook

4) Open your wp-content/themes/mytheme/functions.php and add the below code.

functions.php

add_action('wpi_pagination',
		 ( is_plugin_active('wp-pagenavi/wp-pagenavi.php') ) ?
		 'wp_pagenavi' : 'wpi_post_link' );

Download example code

Note: There is a file embedded within this post, please visit this post to download the file.

Conclusion

If you are one’s of those aspiring WP theme designer “do try” not to depend on third party plugins and avoid using the below phrase if possible

“requires the following plugins to work …”

A public release theme should be “clean from plugin dependencies” and let the end user decide what plugins they need and should have.

External Links

WordPress Codex: Plugin API → Action Reference

WPI Cross Browser Support

Avice — Mon, 19 May 2008 10:48:51 +0000

If you are frustrated that certain WPI version (i.e., public & beta) doesn’t support MSIE. I intentionally did that (just) to annoyed Microhoo and the rest of MSIE users (that is 70% of internet population).

Cross Browser Autoload

Before you stalked me, WPI WordPress theme has a build in function for auto-loading cross browser stylesheet and script files. This function is available since our first release.

How to load Browser specific CSS & Scripts?

We asume you are using the crappy broken MSIE 6 browser running on Windows XP.
When WPI theme load it will look for specific stylesheet & script files like below list.

stylesheet → /themes/wp-istalker/css/ ↓
1. ie.css
2. ie-6.css
3. winxp.css
javascript → /themes/wp-istalker/scripts/ ↓
1. ie.js
2. ie-6.js
3. winxp.js

If any of the files exists, It will queue the specific files and append it to the master file then proceed with minified → crunch → combine → gzip or deflate (if the ua allowed it) and send it to the browser as a single file. Walla

Depend on the user UA the complete files will be cached inside the the following cache directory.

/themes/wp-istalker/cache/css/*.css.compression-type
/themes/wp-istalker/cache/scripts/*.js.compression-type

the combine files can be found at

/themes/wp-istalker/css/combine-md5hash.css
/themes/wp-istalker/scripts/combine-md5hash.js

how to check for browser versions number?

Its a bit tricky to know the correct name and version numbers, here’s how I do it.

Go to your blog frontpage and look inside the source code body-tag. On the “class” attribute you can find something similar like the below example. ↓

<body id="wpi-blog-kaizeku-com" class="wp-home firefox firefox-20 winxp -foaf-Document">

If you have firebug → console.log($(’body’).attr(’class’) );

code break:

wp-home → Section , Refer WordPress Template Hierarchy
firefox → Browser name
firefox-2 → Browser name & Major Version numbers.
winxp → OS platform

for variant of gecko base engine (i.e., prism, flock, seamonkey,mozilla suite) it will just show it as “mozilla mozilla-19 winxp” or something similar.

just to see how clever this go, you can used this wonderful root body browser-class-name CSS selector to create different CSS styling/tweak for cross browser like so ↓

body.safari div.hentry{
 position:relative; top: -10px; min-height:400px
}
body.ie-6 div.hentry{
 height:auto;height:450px
}
body.opera div.hentry{
 min-height: 500px
}

The CSS files Ordering

Inheritance is very important factor in CSS. Below is list of files sort by number starting from top to bottom.

@import url('/wp-content/themes/wp-istalker/icecream.css,auth.css,single.css,lang.css,firefox.css,winxp.css');

icecream.css → global css (style.css) load at all page include in this file is our blueprint.css (blueprint framework css), image.css.
I prefer delicious filename more than generic :) .
auth.css → this file will be loaded if you are registered user.
single.css → section files
sections: home.css, single.css, attachment.css, page.css, search.css, archive.css, category.css, tag.css, year.css, month.css, day.css, 404.css etc..
plugins & widgets → supported plugins and widgets file will be append here (i.e., wp-pagenavi, openid, global translator, wpseo, wpstats)
firefox → browser name specific stylesheets
firefox-2 → it get more specific.
platform → os/platform base stylesheets. good for declaring supporting fonts class
extra_css - filter hook wpi_css_import_array

Custom Hook

Hook for each of the import files → wpi_css_import_$int
$int → 1 to 7

notes
if you want to append a file just after the section css you will used ‘wpi_css_import_2′ as hook. I wont cover the how part in this guide. check out Wordpress Codex if neeed too.

If you are on MSIE6, this page will render in XML ;p. Not my fault really, This site has valid xhtml, CSS 2.1 , xhtml/xml, WCAG A1 & Section 508. Your browser just pwned too much propriety language to survive

Support the standards so it will continue to look good in the future.

WPI Gravatar shortcode

Avice — Sat, 17 May 2008 19:47:44 +0000

Wp-iStalker (WPI) theme has plenty of undocumented shortcode i.e., redirect, cropper, hcard, just to name a few.

Notes

WPI gravatar used SPAN and CSS inheritance instead of the normal image <img> tag. It may seem a bit weird in term of normal coding standard. But this implementation will save you some bandwidth and rendering time in the long run. Data embed is also part of HTML 5 draft work in progress ([wpi_redirect href="http://www.whatwg.org/specs/web-apps/current-work/#embedded0" title="Html 5 Data Embed"]data embed[/wpi_redirect]).

Avatar Shortcode

[wpi_avatar attribute="value"]Content[/wpi_avatar]

Content:

A comma separate value.

Email → valid Gravatar Email (e.g., billgates@microsoft.com)
Invalid or wrong email will be replace with [wpi_redirect href="http://scott.sherrillmix.com/blog/blogger/wp_identicon/"]wp-identicon[/wpi_redirect] geometrical avatar.
Size → 35
size range from 15 to 150 (multiples of 5 - 15,20,25 .. 100)

Attributes:

An attribute-value pairs. Default value as follow.

title → gravatar
align → left
possible value : left, right, center & none
url → null
link the avatar (Embed with hcard/microid format)

Example Galore

simple gravatar shortcode
```
[wpi_avatar]sakurab@somewhere.org[/wpi_avatar]
```
[wpi_avatar]is.b.e@hotmail.com,35[/wpi_avatar] Gravatar aims to put a face behind the name. This is the beginning of trust. In the future, Gravatar will be a way to establish trust between producers and consumers on the internet. It will be the next best thing to meeting in person. ~ about gravatar
blank gravatar shortcode (identicon)
```
[wpi_avatar]1.618[/wpi_avatar]
```
[wpi_avatar]1.618[/wpi_avatar]Identicons allow visual representations of commenters without requiring any external sites or user interactions. With 40 possible shapes (about 70 with inversions) in 3 possible positions, around 8000 distinguishable colors and four different rotations for each part, there should be several billion possible shape combinations … ~ [wpi_redirect href="http://scott.sherrillmix.com/blog/blogger/wp_identicon/" title="wp_identicon"]wp-identicon[/wpi_redirect]
full gravatar shortcode
```
[wpi_avatar url="http://gravatar.com" align="right" title="Microhoo"]hbill.gates@gmail.com,40[/wpi_avatar]
```
[wpi_avatar url="http://en.gravatar.com/site/privacy" align="right" title="Microhoo"]hbill.gates@gmail.com,40[/wpi_avatar]Gravatar.com collects your email address as part of the gravatar service. We will never rent, sell, or otherwise distribute or make public your email address. We hate spam as much as you do. The way gravatar requests are structured, your email address is encrypted before transmission. Your email address cannot be harvested from gravatar enabled sites due to gravatar requests. We take your privacy seriously. ~ [wpi_redirect href="http://en.gravatar.com/site/privacy" title="Gravatar police"]Gravatar Policy[/wpi_redirect]

Custom Hook

Filter Hook for wpi_avatar shortcode.

wpi_avatar_shortcode

Return raw html output.
see: KaizekuShortCode::avatarCallback().

External Links

Must read → Wordpress Shortcode Limitation

WPI Redirect Shortcode

Avice — Sat, 17 May 2008 08:22:23 +0000

Simple shortcode for making safe external redirect. Made this for those SEOware user.

introduction

Wordpress 2.5 introduce new function for adding shortcode (aka bbcode). A simple set of functions for creating macro codes for use in post content. It just make developing plugins much easier and neat. If you want to digg more about WordPress shortcode check out the [wpi_redirect href="http://codex.wordpress.org/Shortcode_API"]WordPress Codex Shortcode API[/wpi_redirect] .

Shortcode

[wpi_redirect attribute="value"]text[/wpi_redirect]

attributes:

with default values

href = #content
title = redirect
rel = external noarchive
class = curie

if there is no “text” the default value is “Link”.

Example

redirect links to wordpress.org

[wpi_redirect href="http://wordpress.org" rel="noarchive"]WordPress.org[/wpi_redirect]

results → [wpi_redirect href="http://wordpress.org" rel="noarchive"]WordPress.org[/wpi_redirect]

Wp-iStalker Custom Wordpress Hook

The WordPress Filter Hook for our redirect shortcode.

wpi_redirect_shortcode

This hook return raw html output.
see: KaizekuShortCode::redirectCallback().

Lo, the do and dont

When to used redirect links?

This depends on your content & context as whole. If the external sites that you are linking doesn’t have any weight with your content. So is best to used redirect links instead of the normal links.
When NOT to used redirect links?

I’ve encounter some damaging issue with certain Wordpress Translation Plugins. Because of the relative links, the translation scripts might create a local cache of the external sites in your server. Its a complete mirror of wasted sources. so beware. You might get penalized for duplicate content proxy hacking. scarry.

External Links

Must read → Shortcode Limitation

Kaizeku Ban » Themes

Chrome Milk 1.6.2 RC 1 Released

Chrome Milk 1.6.2 RC1 Screenshot

Download

Beta test WP-iStalker theme

Chrome Milk

Download

Features

Screenshot

Advanced CSS and dynamic template

Bugs & patches

Latest

How to upgrade your theme to WordPress 2.7

Error has been made

How to create specific CSS selector base on WP Post Type and Post ID

Workaround

Available CSS selector

CSS Example

Wordpress 2.6.2

Wp-iStalker 1.6 hidden theme options

1. Blog header Advanced Customization

2. Post layout avatar options

3. ICRA pics-ratings

4. Post layout relative date options

5. ClaimID delegate meta link options

6. XRDS

7. Language alternate meta links

8. Related post widget extra options

9. A9 Open search auto-discovery

10. APC template options

11. Botnet Cloaking options

Themes plugin dependencies

Is plugin deactivated

Theme with Plugin dependencies

Similar issue

Introduction

Wordpress Hook

Avoid Plugin dependencies best practice guide

Fallback function

HTML & Action Hook Placement

is plugin active (optional)

Register Action Hook

Download example code

Conclusion

External Links

WPI Cross Browser Support

Cross Browser Autoload

How to load Browser specific CSS & Scripts?

how to check for browser versions number?

The CSS files Ordering

Custom Hook

WPI Gravatar shortcode

Notes

Avatar Shortcode

Content:

Attributes:

Example Galore

simple gravatar shortcode

blank gravatar shortcode (identicon)

full gravatar shortcode

Custom Hook

External Links

WPI Redirect Shortcode

introduction

Shortcode

attributes:

Example

Wp-iStalker Custom Wordpress Hook

Lo, the do and dont

When to used redirect links?

When NOT to used redirect links?

External Links