Posted on 2 Comments

To Align Centre my Subsiciary Menu at the Bottom Below Footer of my Theme

I found out that it was not that difficult to centre horizontally my menu at the bottom of my blog, particularly when I have only three or four links, and automatically align to left, so I want to see it all go to the centre.

I search the google.com and found this hack:


#subsidiary-menu {
float:right;
position:relative;
left:-50%;
text-align:left;
overflow: visible;
height: 34px;
margin: 0 0 20px 0;
z-index: 100;
font-size:14px;
}
#subsidiary-menu ul{
list-style:none;
position:relative;
left:50%;
}

Now you can see your menu align to the centre, I mean the entire menu, not just text of the menu within each “ul” or “li”.

I hope this helps me first of all.

Post Note

I must acknowledge that StackOverFlow has been so useful for me in searching many things to do with JS, PHP and CSS Styles. Just click link I provided here and see

 

Posted on 1 Comment

Today I have learned One Thing: A Grand Child Theme as a Plugin, and more…

Yes, I said “and more” because I have read other posts regarding grand-child theme as a plugin, primarily by Mark Barnes in his blog with snippets that I am using right now and from my WordPress.com Professor, WPProf. Justin Tadlock. I start by quoting what Tadlock has ssaid in his blog

The idea of parent/child themes became popular because it allowed the parent theme to be updated while keeping customizations intact within a child theme. That system works great. The problems begin when a child theme is updated. Users tend to want to take advantage of the update, but they can’t upgrade because they’ve made customizations

Essentially, we’ve just added another layer to the preexisting problem.. [http://justintadlock.com/]

Justin clearly differentiates

  • theme framework
  • parent theme,
  • child theme, and
  • grand-child theme

As I always say, Mr. Radlock is very rational, and his logic is simple and easy for me to understand. Well I am not a native English speaker, and I am not a WordPress graduate either. So I can see how difficult it is for me to understand what others are saying when I read their articles on WordPress. This sounds subjective, but I am just saying the truth for myself.

Below is the diagram for reference that Mr. Tadlock has presented in his blog

Theme structure when using a framework, parent theme, and child theme
Theme structure when using a framework, parent theme, and child theme

Theme framework is inside parent theme, and child theme is at the same level as the parent theme.

Next I am going to quote what Mark Barnes said on his blog about this very topic:

Child themes are the easiest way to style WordPress sites. Rather than create a site from scratch, you can create a theme that shares most of its code and styling with a parent theme. The benefits of creating a child theme instead of editing the main theme is that if the main theme gets updates, none of your changes are lost.

But what if you need to modify a child theme? If you’re working with a Framework, like Genesis, it’s very likely you are already using a child theme – and editing that brings about all the disadvantages of editing a parent theme – you lose your changes if the theme is ever updated.

The solution is surprisingly simple. Instead of editing the child theme, create a grandchild theme. It’s very similar to creating a child theme, except you do it via a plugin. You add your custom functions to the plugin, just as you normally would in functions.php (though remember your plugin will be called much earlier than functions.php, so you’ll need to make sure that any code in your plugin only runs when an action is fired).

<https://www.wp-code.com/>

So far so good, so far I understand what Tadlock and Barnes are saying here. The next challenge for me is this very question,

  • Can I call more than One Grand Child Theme in this one plugin?

Thankfully, the answer is “Yes, absolutely, I can call as many grand child as possible.

This is what I have added

  1. I added a “if ( current_theme_supports( ‘grand-child-theme’ ) ): statement
  2. Then call “what is the name of support, in this case, I have named two different names for two separate style.css; the first one is “hyk-style.css” and “hykchild.css”
  3. These two styles were previously my child themes, but I am now making them become grand-child themes. In fact I can create as many grand child themes as I want.
  4. Then go to the Child Theme “functions.php” and add_theme_support there. These are the two add_theme_supports that I have added for the two Grand Child Style I mentioned above: “add_theme_support( ‘hyk-style’ );
    add_theme_support( ‘hyc-gc-style’ );”
  5. Here is two example of such “if_current_theme_support”
if ( current_theme_supports( 'grand-child-theme' ) ){ if ( current_theme_supports( 'grand-child-theme' ) ){     wp_register_style ('grandchild_style', plugins_url('hyk-style.css', __FILE__).'', array(), $timestamp); }

if ( current_theme_supports( 'hyc-gc-style' ) ){     wp_register_style ('grandchild_style', plugins_url('hykchild.css', __FILE__).'', array(), $timestamp);}

What I do after all these is to comment and uncomment on both

  • add_theme_support( ‘hyk-style’ ); and
  • add_theme_support( ‘hyc-gc-style’ );

If I un-comment “add_theme_support( ‘hyk-style’ ); ” then the grand-child theme delivers “add_theme_support( ‘hyc-gc-style’ );” into my Child Theme.

I must remind myself that I cannot add_support to both of them, because the grand-child theme will call both styles which is not what I want to do.

I hope this is clear for now.

Before I end, I found out that there is another article on grandchild theme by  ·that was written in 2014, “A Theme Framework, Child Themes, & Grandchild Themes“. His explanation makes sense for me of what Justin Tadlock has said in his article, and this is a good article to read.

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

CSS Stylesheet Layout Gala

Posted on Leave a comment

Crash Course: YUI Grids CSS

The Yahoo User Interface Library is a rather extensive set of JavaScript tools for developers. Often left unnoticed are a few other useful components of the library that will speed up your coding: some CSS libraries. Today, I’d like to give you a tour of the YUI Grids CSS library.

Why?

Why should you even consider using the YUI Grids CSS library (hereafter referred to a “YUI grids”)? What makes it stand out? I haven’t looked extensively at other grids libraries, but I find these things compelling:

  • YUI grids uses easy-to-remember ids and classes, and clean markup; once you learn it, you could come back to your code in a month and know which parts are from YUI and what each piece does.

  • This reduces your load twice: no need to host the file on your server, as well as faster page loading if the client has the file cached.

  • Yahoo has baked in sidebar widths that correspond with the Interactive Advertising Bureau’s ad guidelines.

  • With multiple templates and the ability to nest page regions, Yahoo claims to offer over 1000 layout combination . . . all in less than 5kb.

Of course, YUI grids isn’t perfect. It’s a bit limiting when it comes to the pre-baked sidebar widths; however, if they suits your needs, you’ll save plenty of time, coding, and headaches when laying out your site.

Complete Guide: HERE

My Notes:

I think this is the most useful article that I have ever read regarding how to use YUI CSS Grids for my website templates. This is why I am also posting this as a separate page on this blog, as this is the core issue I am promoting in this blog, i.e., implementing YUI CSS Grids in my wordpress themes.