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.

Posted on Leave a comment

Hello world! This is WordPress Yahoo! User Iinterface

Top Part of YUI-fied WordPRess Theme

I have been learning WordPress.com blogging since 2002 and started learning about theme development in 2006. In 2007, I became interested in developing WordPress.com themes based on the most famous and elegant Yahoo! User Interface (YUI) CSS Grids that I think so far still the most elegant one for CSS framework.

I know that the Yahoo! User Interface Library  itself has stopped developing further version recently. I also know that not many people are interested in working on YUI-Based or YUI-fied WordPress.com Themes, however, out of my personal passion, due to my love to seeing YUI CSS Grids elegantly display wordpress content, I am still manipulating wordpress themes and thinking of developing it further. Not developing YUI CSS Grids, but manipulate layout and content of wordpress themes.

In the meantime, I came across with Caridy Patiño’s YUI Bubbling Library. HIs YUI Bubbling is also dis-continued, unfortunately. However, the ones that I have downloaded are still with me, and I can still work with those JavaSripts for Tabview and Accordion manipulation. What Caridy Patiño has been doing also gave me examples that we can utilize YAHOO! UI for various purposes, in this case for me to implement YUI in WordPress theme.

I have used free wordpress blogs: yuiwp.wordpress.com and papuawp.wordprss.com  to explore more possibilities by inviting others out there to think about developing wordpress themes based on Yahoo! UI CSS Framework, but no luck. It is already 5 years since then, and I found myself as a single fighter diving into the sea, not knowing how deep it is and worse, not knowing how to get to the shore.

Sancta Simplicitas: minimalistic WordPress theme using YUI CSS and http://php-ease.com/ as well as John Turner theme called Twordder inspired me and gave me clue that I can still continue developing wordpress theme based on yahoo CSS grids as well as Yahoo JS Library in general. A few while later I found another WP Theme based on Yahoo! CSS Grids: called Obandes. I am stronger, and clearer on what to do.

Both Obandes and Twordder WordPress Themes helped me in setting up theme  functions.php for the css grids so that I can set up grids on theme admin section. With their method, I can now set at the theme admin whether two colums, one column, outer and inner left or right, and also change the width of the whole theme from 7\custom width to 100% width.

Today is 18 June, a week after my birthday on 10 June 2017, I just bought this domain called WPYUI (WordPress Yahoo! User Interface) in order to officially run the theme development.

I must make it clear, that I am personally the strongest supporter and user of all themes based on the rock-solid, robust and logical and easily editable WordPress theme developmed by Justin Tadlock called Hybrid Theme. (I will let you know more about Mr. Tadlock and his Hybrid Theme in a separate note).

I hope that this work I am happy to get involved with will finally bear fruit, i.e., generate small income for me in the future.

 

 

 

Posted on Leave a comment

Yes, Yahoo! YUI and WordPress can Get Along

I would like to declare that after almost 5 years of working on implementing Yahoo! CSS Grids and Yahoo! Javascripts, I can say that we can implement YUI into our WordPress blog themes, of course, the self-hosted ones.

It is also important to mention that I only understand the concept and rational of the “Rock-Solid Hybrid WordPress theme developed by Justin Tadlock. I must admit that I have tried many times utilizing many other wordpress frameworks, but  I must say that Hybrid Theme Framework is the simplest one to understand and very flexible to extend, endless possibility.

Justin developed the following themes based on his “hybrid-core’ framework

  1. Hybrid Theme
  2. Hybrid Base Theme and
  3. Stargazer

The first one is the one that I am using as Hybrid Theme for developing many child-themes. Secondly I am also using hybrid-base, but at this point just as testing stage.

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: http://www.tenman.info/wp3/raindrops/ and here is the author URL: http://www.tenman.info/wp3/

Posted on 3 Comments

Twordder WordPress Theme: Fully YUI and Twitter Based Theme

I just came across with this theme called “Twordder” by John Turner.

In this theme’s Tag, Turner says: Twitter inspired theme. Twordder is more of a framework than just a theme. You choose your layout, colors and background image. Features Include: Custom Background, Sidebar, Text, Links,and Sidebar Border Colors, Automatically pull color palettes from ColourLovers.com, Custom Background Image, Custom Logo, Custom Page Width, Left or Right Sidebar, Customize Sidebar Width, Rounded Corners in Firefox, Safari, and iPhone, Drop Down Menu Support, Facebook Connect Support, Threaded Comments, Gravatar Support, Microformats, Sticky-Post Class Support. Widgetized Blog Header, Footer and Page Sidebar. Theme by johndturner.com

In his own website, John says:

Twordder is a Twitter inspired WordPress theme. My current theme is an example. Features Include:

  • Custom Background, Sidebar, Text, Links,and Sidebar Border Colors
  • Automatically pull color palettes from ColourLovers.com
  • Custom Background Image
  • Custom Logo
  • Custom Page Width
  • Left or Right Sidebar
  • Customize Sidebar Width
  • Rounded Corners in Firefox, Safari, and iPhone
  • Drop Down Menu Support
  • Facebook Connect Support
  • Threaded Comments
  • Gravatar Support
  • Microformats
  • Sticky-Post Class Support

In fact John has moved his website from johndturner.com to http://www.seedprod.com/ Perhaps this is why WordPress says

This theme hasn’t been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

In this http://wordpress.org/extend/themes/twordder, WordPress says:

Twitter inspired theme. Twordder is more of a framework than just a theme. You choose your layout, colors and background image. Features Include: Custom Background, Sidebar, Text, Links,and Sidebar Border Colors, Automatically pull color palettes from ColourLovers.com, Custom Background Image, Custom Logo, Custom Page Width, Left or Right Sidebar, Customize Sidebar Width, Rounded Corners in Firefox, Safari, and iPhone, Drop Down Menu Support, Facebook Connect Support, Threaded Comments, Gravatar Support, Microformats, Sticky-Post Class Support. Widgetized Blog Header, Footer and Page Sidebar. Theme by johndturner.com

Posted on 2 Comments

YUI GRIDS is Applied into the Robust Hybrid Word Press Theme Framework

Without Major Modifications into the Theme, but only with Additions to the Hybrid WordPress Theme Functions

Well, I am not the one to be happy for this. Credits must go to Justin Tadlock, the author of the robust and comprehensive WordPress Theme, Hybrid  WordPress Theme Framework, the user-friendly, search-engine optimized parent theme, featuring 15 custom page templates and multiple widget-ready areas and for the YUI Grids implementation theme functions to Victor Goh, the author of a WordPress called yui-css-grid, A YUI Grid CSS based WordPress theme. YUI Grids CSS. This theme is based on the yui-app-theme and comes with 8 color schemes, 5 page widths and 6 layout combinations. Color scheme – dark blue, facebook, green, greenish, orange, purple, red, tan blue and custom. Page width – 750px, 950px, 974px, 100% fluid and custom. Page layout – 6 combinations of right and left sidebar with different widths. Customize your theme using the Dashboard menu Themes > Customize Theme after installing this theme.

With this modifications, I am now able to style the Hybrid Theme Framework and display them with YUI GRIDS layout.

The YUI GRIDS Layout has some the choices #doc, #doc2, #doc3, #doc4 and #custom_doc with varieties of left or right sidebars.

It is worth to notice as well that I also added two more menus, i.e., Footer Menu as an additional menu for joined after the Primary Menu Navigation (Page Menu Navigation) of the Hybrid Theme; and secondly I also added functionality for disabling and enabling subsidiary and secondary sidebars in singular.php and page-single page display. There is also Login/Logout Menu added here, copying from another verison of of Hybrid Theme called News WordPress Theme developed by Justin Tadlock and his colleague at  DevPress.

All of my themes will apply the same Navigation Menus as well as the disable/enable functionality for sidebars.