Posted on Leave a comment

ScreenShots of Hybrid Child Theme So far

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 google.com 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"
src="http://ajax.googleapis.com/ajax/libs/yui/2.6.0/build/yuiloader/yuiloader-min.js">
</script>

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: "http://ajax.googleapis.com/ajax/libs/yui/2.6.0/build/",
require: ["utilities","container","tabview","reset-fonts-grids","datatable"],
onSuccess: function() {
//instantiate your DataTable here...
}
});
// Load the files using the insert() method.
loader.insert();
})();
</script></code

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.