Posted on Leave a comment

I am glad for Finalizing: YUI AutoGrids WordPress Theme

AUtogrids Yahoo! UI Theme based on Hybrid Theme by Justin Tadlock

Yes, call it with “domain text: autogrids“, but the complete name for it is “YUI AutoGrids WordPress Theme”, another WordPress theme that I build based upon Hybrid Core Theme by Justin Tadlock

This theme that utilizes the elegant, comprehensive and tidy YUI library is now being presented with more modifications on both sides of the blog.


On the left side of viewer (right side of the screen) is a dynamic extra sidebar” and on your right side or (left side of the screen) is a static one. The static is using sidebar navigation breadcrumbs, the function calls get_template_part(‘loop-nav-sidebar’);

Whereas the dynamic one uses “header sidebar utility”, so it calls a sidebar file. (get_sidebar(‘header-sidebar’);

According to Hybrid Theme do_atomic_rules, I am calling both of them “after_header”. Other themes use “before_primary” hook, but this one uses “after_header” hook because these two extra sidebars need not to be affected by disappearing sidebars in single and home pages.

Nothing will appear when you do not put anything on “header-sidebar” widget space on “wp-admin/widgets.php” section. But on the static sidebar you will see there is no “widgets” available but it is manually done. This is why I call it semi-automatic. It is automatic because sidebar-breadcrumbs will show some information on the current page/ content appearing on the screen. If a category is called, then category descriptions with subcategories and total posts on the category are displayed on sidebar-breadcrumb.

Front Page Layout

It comes with the possibility of utilizing “page-font-page.php” template if one wants to have a Front Page with specific categories and display.

AutoGrids YUI Theme based on Hybrid Theme with Front page
AutoGrids YUI Theme based on Hybrid Theme with Front page

Theme Demo

The Live Demo of the theme can be found at General Themes Demonstration will be available at, however, I am still doing the work so will be coming not long time from now.


Now I invite anybody who wants to join me in this project, I am open to it. Please email me at

Posted on Leave a comment

How I Call YUI CSS Grids in My Hybrid WordPress Theme

I have found there are four ways so far. The first one is by calling it via cdn library simply by using “google.load(“yui”, “2.7.0”); just after the <body> tag in my blog theme header. This looks very simple and the easiest one, but I must admit, I have not yet used this even once. I cannot give any opinion on this. I will do so sometime later.

The second method is commonly used, directly calling the link like this on the header.php of the theme.
<!--Include YUI Loader: -->
<script type="text/javascript"

This is just to call the library. After that we need to call the functions or the reasons we called YUI Library as follows:
<!--Use YUI Loader to bring in your other dependencies: -->
<script type="text/javascript">
// Instantiate and configure YUI Loader:
(function() {
var loader = new YAHOO.util.YUILoader({
base: "",
require: ["utilities","container","tabview","reset-fonts-grids","datatable"],
onSuccess: function() {
//instantiate your DataTable here...
// Load the files using the insert() method.

We can see here, we are calling “reset-fonts-grids”, “skin”, “tabview” and whatever functions we want to use in our blog.

I have used this method for long time now and I have developed some child-themes using this method. However, as commonly known, this is not the way that most bloggers would recommend us to call a JS or CSS library.

Then I used a third way, that is, using “media.php” file under the ‘functions’ folder of my them. If you are familiar with our Hybrid Theme Framework, then you will know what I am talking about here. This “functions” folder is my Hybrid Child Folder, under /library/ folder. In fact my Hybrid Child Themes also use the same structure as the Hybrid Theme folders.

In media.php file, I call any library I would like to call, I register those js, then I enqueue them

wp_enqueue_script( 'yui-utilities' );
wp_enqueue_script( 'yui-tabview' );
wp_enqueue_script( 'yui-bubbling-core' );
wp_enqueue_script( 'bubbling-dispatcher' );
wp_enqueue_script( 'bubbling-accordion' );

I want to use YUI Tabiew and bubbling core, that helps my theme to display tooltips, as you can see in this theme. That is why I call YUI ‘utilities.js’ and then YUI ‘tabview.js” plus bubbling ‘core.js’

A third way of calling YUI Library is directly from the theme functions.php, by adding ” add_action(‘wp_enqueue_scripts’, ‘yahoowp_init’, 11 );” For this function, then I will use

if ( ! function_exists('yahoowp_init' ) ) {
 function yahoowp_init() {

The last way is to call it from a WordPress Plugins folder. I created the media.php file and changed it into a plugin, then I activated the plugin in order to call the Yahoo! UI Library that I needed. I think I will dig more into this method in order to keep my child theme clean so that it can be easily updated.

I will explain more on what these “calls” or “functions” do to my Hybrid WordPress Child Themes in separate entries.

Posted on 1 Comment

YUI Based and Multicoloured “raindrops” WordPress Theme

The description of this theme says it all:

This theme file has the automatic arrangement of color function in specifying the layout customizing function and the reference color by Yahoo User Interface. The color can specify the tradition color and the American tradition color of Japan by the name. An automatic arrangement of color and the layout can be changed to the expression who you further seem by your instruction.

This theme was tagged:

Tags:black, blue, gray, brown, green, orange, pink, purple, red, silver, tan, white, yellow,dark,light,one-column,two-columns,three-columns,four-columns,left-sidebar,right-sidebar ,fixed-width ,flexible-width, custom-colors, custom-header, custom-background, custom-menu, editor-style, theme-options, threaded-comments, sticky-post, translation-ready, post-formats, featured-images

When I tried to implement this theme, it is pretty complicated as it has its own framework that could not help me to adapt it to my favourite “HybridWordPress Theme by Justin Tadlock.

You can access this theme here: and here is the author URL:

Posted on Leave a comment

PHP Ease YUI Class Based WordPress Theme

This WordPress theme framework is a custom implementation of our Page class. Tailor made to simplify the process of creating a WordPress theme, while giving you total flexibility and control afterwards. This class will completely separate your page’s content from it’s layout, freeing you from establishing an ugly foundation of inflexible divs. This framework is the cure for the common divitis.

The PHP Ease WordPress Theme Framework is somewhat stylish in it’s own right, but if you don’t make any changes to suit your fancy then you’re not seeing the big picture. Making changes with this framework is so easy, you’ll be a professional WordPress Theme Designer in no time. I have prepared a sample Child Theme that you can use for your own personal playground.

The WordPress Theme Framework that this author develops is quite interesting. He uses classes for each function.

Posted on Leave a comment

Build a Simple Ticker in YUI

Kicking off my “Make it with YUI” series, I decided to begin with something classic. Building a “ticker” or a tickertape like element for your site is not too difficult to do without YUI, but if you already have it on your site, or are considering using it for adding more interactivity, you might like this. YUI transitions come to great effect here, and turn this bit of code into a fairly trivial exercise. Click over to the “result” tab to see our ticker in action.

Similar Articles:

  1. YUI newsticker <>
  2. YUI maximum length for textarea (with counter) <
Posted on Leave a comment

YUI3 Example: StumbleUpon List

YUI3 Example: StumbleUpon List. I have used this in my Word Press blogs and it works very well.

Using YUI3 YQL Query Utility to display a StumbleUpon user’s recent favorites. View a demo here.