Tinker Gnome Page

This is my tinker page using a custom page template. This is where I learn about WordPress, CSS, HTML, plugins, templates and jQuery scripts.

Since I don’t know much about jQuery, a good starting point will be to watch some videos on “jQuery for Absolute Beginners” series.

  Current Experiments

  • Lab Work #4 Adding Google Fonts into WordPress default TinyMCE Editor
  • Lab Work #3 Jetpack for WordPress plugin has been released. I have installed the plugin for my self-hosted wordpress powered blog.
  • Lab Work #1 WordPress Page Template
  • Lab Work #2 WordPress Plugin – Shashin to extract and display EXIF data from Picasa web album.
  • Shashin to work with another jQuery Image/Gallery Viewer plugin called YoxView.

LAB Results:-

Lab Work #4 Adding Google Fonts into WordPress default TinyMCE Editor

This is Google Font – Open Sans

This is Google Font – Roboto

// Enable font size & font family selects in the editor
if ( ! function_exists( 'wpex_mce_buttons' ) ) {
	function wpex_mce_buttons( $buttons ) {
		array_unshift( $buttons, 'fontselect' ); // Add Font Select
		array_unshift( $buttons, 'fontsizeselect' ); // Add Font Size Select
		return $buttons;
add_filter( 'mce_buttons_3', 'wpex_mce_buttons' );

// Add custom Fonts to the Fonts list
if ( ! function_exists( 'wpex_mce_google_fonts_array' ) ) {
	function wpex_mce_google_fonts_array( $initArray ) {
	    $initArray['font_formats'] = 'Roboto=Roboto;Open Sans=Open Sans;Lato=Lato;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats';
            return $initArray;
add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' );

// Customize mce editor font sizes
if ( ! function_exists( 'wpex_mce_text_sizes' ) ) {
	function wpex_mce_text_sizes( $initArray ){
		$initArray['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
		return $initArray;
add_filter( 'tiny_mce_before_init', 'wpex_mce_text_sizes' );

// Add Google Scripts for use with the editor
if ( ! function_exists( 'wpex_mce_google_fonts_styles' ) ) {
	function wpex_mce_google_fonts_styles() {
	   $font_url = 'http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic';
                add_editor_style( str_replace( ',', '%2C', $font_url ) );
                $font_url = 'http://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic';
                add_editor_style( str_replace( ',', '%2C', $font_url ) );
add_action( 'init', 'wpex_mce_google_fonts_styles' );


Lab Work#3 Jetpack for WordPress Plugin Features Test Results:

Feature: Image Gallery – Tiled … this feature suppose to allow creative formats to display image galleries: mosaic, circles, squares, and a slideshow view!

Lab Work#1 Page Template

FINALLY! I have wrap this entire content, including the menu/navigation bar above, inside the correct DIV tags. If I don’t, the menu/navigation bar thingy above will not align with the default twenty ten header image. I didn’t realize that I can call get_header() , instead of mucking around with the manual code/div/etc.

Anything below the table is executed from the custom page template:

Section  Calling  Reference
Comments  comments_template() http://codex.wordpress.org/Function_Reference/comments_template
Footer  get_footer() http://codex.wordpress.org/Function_Reference/get_footer
What do you think of this post?
  • Sucks 
  • Boring 
  • Useful 
  • Interesting 
  • Awesome 

5 Responses to Tinker Gnome Page

  1. raz says:

    Cause the yoxview-init.js is not loaded, if you view the source on the browser you would see that it's outputting php code on line 245.
    jQuery didn't actually get to load due to that.

    • Keith Soon says:

      Errr…I am kinda stuck in my experiments … going about blind here… Can help-ah? I am not sure how to get it working. Hmmm…

      • raz says:

        I saw a jQuery overwrite [jQuery.noConflict()] in the code as well, so you need to replace the $() with $j()


        <script type="text/javascript">
                                   dataUrl: 'http://picasaweb.google.com/ksoon71/NoStrobe&#039;


  2. Iva Dering says:

    Howdy! Do you know if they make any plugins to assist with SEO? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good gains. If you know of any please share. Thanks!

Your email address will not be published. Required fields are marked *