Please take a moment to answer these simple questions. You can improve WP UI a lot by doing so!

WP UI has been updated to work with latest WP versions a quite a while back. You can get it from GitHub for now, Atleast till I am able to get the WP SVN committing working again.

Apologies for the troubles and the delay.

+Kavin

Create and download the custom theme from themeroller

Visit the jQuery UI themeroller page. You will now land on the Roll Your Own tab. You can start customizing your theme from here.

jQuery UI theme roller

If you want to base your custom theme on another theme, click the “gallery tab”, and click edit under the desired theme.

Choosing a theme as the base

Customize the theme to your heart’s content.

Customize and Click Download theme.

Now comes the essential part, entering the correct CSS scope and folder name. I chose .wpui-custom and wpui-custom as an example, and this will be the argument to the WP UI shortcodes later on.

[wptabs style="wpui-custom"] ....................

[wptabs type="accordion" style="wpui-custom"]....

1. As it is essentially a CSS class name, it shall contain alphabets, letters(not as the first character though), hyphens and underscore.
2. Make sure you enter the preceding dotbefore the CSS scope.
3. You can also click “unselect components“, before clicking download. This will cut down the download size to  400KB~

Choosing a CSS scope

Click Download and then save the file (named something like jquery-ui-1.8.xx-custom.zip.)

Uploading the files to your server

Unzip the downloaded file and in the folder unzipped, navigate inside the CSS folder. There should the folder “wpui-custom” , as per our example and we chose that at the last step. This is the only folder we need to upload.

Extract the custom theme folder from the downloaded file

Fire up your FTP client, login to your server and browse to your uploads directory.

If the wordpress blog is in http://example.com/blog ,then the uploads folder should be at /blog/wp-content/uploads/ , assuming that your wordpress is installed in the folder “blog” present in the root folder. Basic guide on using FileZilla is at codex.

This should brief that in a bit.

Create and upload the custom themes inside the folder – wp-ui, under uploads

That’s all, the hard part’s over. Now the fun part.

Manage jQuery UI custom themes with WP UI

• Go to wordpress admin -> WP UI options page -> Style Tab -> Manage jQuery UI custom themes. See that empty table over there? That’s ready for some fresh made Custom themes.
• Click scan uploads, it should start scanning the uploads/wp-uidirectory and add them to the list.
• Do you have your theme uploaded elsewhere,want to link the theme? Click Add Theme.
• Need to edit that last entered theme? just Double click anywhere on the row, edit box will open up.

Now just click changes and you are ready to go!

Managing Custom themes in WP UI options page

Using the custom themes with Shortcodes

Remember that shortcode argument I told you earlier? Yes, that is now the style’s name. To use it, take for example with our example customize-downloaded-custom(ah!) theme “wpui-custom” ,

[wptabs style="wpui-custom"]...............

Now view the front end of your blog, your tabs and accordion should be using custom themes you created!

Cheerio!

Kavin

Overview

WP UI gives you the easier way for the Articles that stand out. Most of the WP UI’s features are implemented with wordpress shortcodes, which means that learning curve is smooth and there is no compromise between appearance and performance. It can significantly reduce the length of your articles, making it easier to read and digest.

WP UI comes with the following components.

Please note : All WP UI shortcodes except when they are used to get and display posts are enclosing shortcodes, that means every shortcode opened should be closed. For example:

	[wptabs] // Opening shortcode	
	[/wptabs] // closing shortcode

Alternative shortcodes are also available.

• [tabname] instead of [wptabtitle]
• [tabcont] instead of [wptabcontent]
• [tabs] instead of [wptabs]
• [slider] instead of [wpspoiler]
• [dialog] instead of [wpdialog]

When using alternative shortcodes, make sure that they do not conflict with shortcodes from another plugin.

Features

Style

• 14 unique attractive CSS3 styles.
• Ability all the jQuery UI themes
• Custom theme manager that handles the custom styles downloaded from jQuery UI themeroller

Content

• Include your posts, pages either single or multiple with a single shortcode.
• Smooth learning curve with the ability to handle most of the complex Web content
• Support for Nested tabs and AJAX loading inside the panels.

Help and support

• Documentation available right in the wordpress editor page.
• Support forums available right here

Usage of tabs, accordions, spoilers and dialogs

As mentioned earlier, all WP UI shortcodes are enclosing shortcodes, customizable with arguments [Codex : Shortcodes]. Please take a note of the below recommendations.

• Shortcodes work best when they are entered through the HTML mode of the wordpress editor.
• Different Shortcodes need to be in separate lines, but avoid the empty lines in between them. For example [wptabtitle] and [wptabcontent] shortcodes inside wptabs.

WP UI Components and their usage

The first one below lists all the shortcodes, arguments and the possible values. Second one below holds some sample shortcode structures.

Sample shortcode structures

[wptabs]
  [wptabtitle] Tab 1[/wptabtitle]
    [wptabcontent] This is the content of Tab1.[/wptabcontent] 
  [wptabtitle] Tab 2 [/wptabtitle]
    [wptabcontent] This is the content of Tab2[/wptabcontent]
[/wptabs] 

[wptabs type="accordion"]
  [wptabtitle] Tab 1[/wptabtitle]
    [wptabcontent] This is the content of Tab1.[/wptabcontent] 
  [wptabtitle] Tab 2 [/wptabtitle]
    [wptabcontent] This is the content of Tab2[/wptabcontent]
[/wptabs] 

[wpdialog title="Confirm this action" show="drop" hide="explode" ] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. [/wpdialog]

[wpspoiler name="Spoilers" showText="click to show" hideText="" ] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. [/wpspoiler]

List of styles

List of styles that can be used with the widgets are below

WP UI custom styles

1. wpui-light
2. wpui-red
3. wpui-blue
4. wpui-green
5. wpui-dark
6. wpui-quark
7. wpui-cyaat9
8. wpui-android
9. wpui-safle
10. wpui-alma
11. wpui-macish
12. wpui-achu
13. wpui-redmond
14. wpui-sevin

jQuery UI themes

1. ui-lightness
2. ui-darkness
3. smoothness
4. start
5. redmond
6. sunny
7. overcast
8. le-frog
9. flick
10. pepper-grinder
11. eggplant
12. dark-hive
13. cupertino
14. south-street
15. blitzer
16. humanity
17. hot-sneaks
18. excite-bike
19. vader
20. dot-luv
21. mint-choc
22. black-tie
23. trontastic
24. swanky-purse
25. base
26. black-tie

Plus, Custom themes downloaded from jQuery UI themeroller.

You can use the styles with any of the included wp-ui widgets, for ex.

Using a custom style, these are prefixed with wpui-

[wptabs style="wpui-dark"]

Using a jQuery UI theme is basically the same. For example,

[wpspoiler style="pepper-grinder"]

Some examples

Example 1

Now something with lot of content.

Writing

Children Reading... Image by scbailey

All children, except one, grow up. They soon know that they will grow up, and the way Wendy knew was this. One day when she was two years old she was playing in a garden, and she plucked another flower and ran with it to her mother. I suppose she must have looked rather delightful, for Mrs. Darling put her hand to her heart and cried, "Oh, why can't you remain like this for ever!" This was all that passed between them on the subject, but henceforth Wendy knew that she must grow up. You always know after you are two. Two is the beginning of the end. Mrs. Darling first heard of Peter when she was tidying up her children's minds. It is the nightly custom of every good mother after her children are asleep to rummage in their minds and put things straight for next morning, repacking into their proper places the many articles that have wandered during the day. If you could keep awake (but of course you can't) you would see your own mother doing this, and you would find it very interesting to watch her. It is quite like tidying up drawers. You would see her on her knees, I expect, lingering humorously over some of your contents, wondering where on earth you had picked this thing up, making discoveries sweet and not so sweet, pressing this to her cheek as if it were as nice as a kitten, and hurriedly stowing that out of sight

Quotes

Some block quote tests:

Here's a one line quote.

This part isn't quoted. Here's a much longer quote:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In dapibus. In pretium pede. Donec molestie facilisis ante. Ut a turpis ut ipsum pellentesque tincidunt. Morbi blandit sapien in mauris. Nulla lectus lorem, varius aliquet, auctor vitae, bibendum et, nisl. Fusce pulvinar, risus non euismod varius, ante tortor facilisis lorem, non condimentum diam nisl vel lectus. Nullam vulputate, urna rutrum vulputate molestie, sapien dolor adipiscing nisi, eu malesuada ipsum lectus quis est. Nulla facilisi. Mauris a diam in eros pretium elementum. Vivamus lacinia nisl non orci. Duis ut dolor. Sed sollicitudin cursus libero. Proin et lorem. Quisque odio. Ut gravida, pede sed convallis facilisis, magna dolor egestas dolor, non pulvinar metus magna in velit. Morbi vitae sem sit amet arcu vehicula gravida. Morbi placerat, est id pulvinar sollicitudin, ante augue vestibulum turpis, eu ultrices pede metus sit amet justo. Suspendisse metus. Mauris convallis mattis risus. Nullam et ipsum eu magna hendrerit pellentesque. Ut malesuada turpis nec orci. Donec at urna imperdiet libero tincidunt lacinia. Phasellus mollis leo pharetra velit. Quisque tortor. Nam pharetra est vel felis. Maecenas tincidunt, purus ac ultrices vehicula, ante magna ultrices orci, ac malesuada lectus purus sit amet odio. Vivamus id libero. Vivamus enim nisi, egestas aliquam, tincidunt malesuada, semper at, turpis. Vestibulum risus dolor, placerat quis, adipiscing sed, scelerisque a, enim. Vestibulum posuere. Mauris felis. Vivamus ornare. Maecenas mi. Mauris quis nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse potenti. In at lorem. Aliquam sed ligula eu erat ultrices congue. Aenean interdum semper purus. Phasellus eget lorem.

And some trailing text.

Tables

Table Layout Test

Title	Views
About Test User	1	More
260	1	More
Archives	1	More
235	1	More

Align

Left-align, no caption

Left-aligned image with no caption, and text before and after. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed odio nibh, tincidunt adipiscing, pretium nec, tincidunt id, enim. Fusce scelerisque nunc vitae nisl. Quisque quis urna in velit dictum pellentesque. Vivamus a quam. Curabitur eu tortor id turpis tristique adipiscing. Morbi blandit. Maecenas vel est. Nunc aliquam, orci at accumsan commodo, libero nibh euismod augue, a ullamcorper velit dui et purus. Aenean volutpat, ipsum ac imperdiet fermentum, dui dui suscipit arcu, vitae dictum purus diam ac ligula.

Right-align, no caption

Right-aligned image with no caption, and text before and after. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed odio nibh, tincidunt adipiscing, pretium nec, tincidunt id, enim. Fusce scelerisque nunc vitae nisl. Quisque quis urna in velit dictum pellentesque. Vivamus a quam. Curabitur eu tortor id turpis tristique adipiscing. Morbi blandit. Maecenas vel est. Nunc aliquam, orci at accumsan commodo, libero nibh euismod augue, a ullamcorper velit dui et purus. Aenean volutpat, ipsum ac imperdiet fermentum, dui dui suscipit arcu, vitae dictum purus diam ac ligula.

you see how the content behaves inside the tabs? If you have something looking wrong, you can bundle additional CSS through the plugin's option page.

Example 2 : Media

For embedding Videos, you may need to enclose the videos within [embed width="460px"][/embed] shortcodes, If the video exceeds the tab's width, please pass the width argument to the embed shortcode.

Demo

Above examples does not do any justice to this plugin's capabilities. Check out all the examples with the code involved below.

Demo : Components | CSS3 styles

Download

Download WP UI for WordPress
By kavin | Latest

Changelog

All versions

Each version of WP UI brings you additional features. Most of these are customizable through the options page. Due to this fact, it might be necessary to re-save the options after each update.

View the WP UI changelog

Documentation

You can find the documentation on WP UI at projects site.

Thanks to Soren Dayton for his suggestions on the posts feature that then became available from version 0.7.

Help and support

Most of the issues can be corrected by verifying the shortcode syntax.

Do enter different shortcodes in separate lines, but avoid the empty lines in between. If you want to enter the shortcodes in the same line, give at least two spaces before the next shortcode.

Get help and support

Cheerio,

kavin

 

Oh no.. not again.

As you can see Above image, the post content is missing, while all the other -Title, meta output just fine. And this really seemed worth playing with.

Causes

Most common – Some vaguely written function hooking into the the_content filter. Also note,

• Output of the_excerptwas ok.
• Problem appeared in all the themes, including the wp3.0 default twentyten, so problem is probably not related to a theme.

Debugging

Deactivating plugins one by one is the most widely suggested solution in the interwebs. Well, you can always try that out. But I didn’t want to disable/enable plugins one by one. First, it takes too much time, is boring and I always forget to enable a plugin or two and scratch my head for hours why something isn’t working.

As we know, wordpress hook/function the_content outputs the post’s content. Filters are attached to it, few from the core and some from the plugins.

1. Lets check if the content is fine. The function get_the_content(),  outputs the unfiltered content. I inserted echo get_the_content into 2010′s loop-single.php

Output the unmodified content with get_the_content()

And the result.

Content appears ok!

Fixing

Well, something is messing with the_content() hook here. To trace the culprit, I decided to use one fantastic snippet written by Rarst, that outputs the list of all hooks and respective filters attached to them.

function list_hooked_functions($tag=false){
	global $wp_filter;
	if ($tag) {
		$hook[$tag]=$wp_filter[$tag];
		if (!is_array($hook[$tag])) {
			trigger_error("Nothing found for '$tag' hook", E_USER_WARNING);
			return;
		}
	} else {
		$hook=$wp_filter;
		ksort($hook);
	}
	echo '<pre>';
	foreach($hook as $tag => $priority) {
		echo "<br />&gt;&gt;&gt;&gt;&gt;\t<strong>$tag</strong><br />";
		ksort($priority);
		foreach($priority as $priority => $function){
			echo $priority;
			foreach($function as $name => $properties) echo "\t$name<br />";
		}
	}
	echo '</pre>';
	return;
} // END function list_hooked_functions.
 echo '</pre>';
 return;
}

 echo '</pre>';
 return;
}

Running the above function without the argument(here the hook name) lists all the hooks with functions. In our case, specific problem is with the_content hook, So let’s try the below.

<?php
	// the_content is our hook.
	list_hooked_functions( 'the_content' );
?>

Let’s see the result now. Ha!

the_content hook and functions hooked.

So I found that a function I started and forgot to finish – clean_pre_shjs() was the reason behind this. I rewrote the function and now the content appears ok!

Let’s summarize the causes of my problem(pun intended).

Further

The article just points you out how much smart and interesting debugging can be. Try this function on any wordpress hook, core or yours own.

Rarst, who wrote the above snippet went further and has a new set of hook debug functions here. Please take a look at them.

+ Kavin.

I used the twenty ten theme as the parent theme for multiple reasons, two below.

1. Semantic HTML5-compatible markup.

2. Default theme, so virtually in every wordpress installation.

Why a child theme

• Easiness – new style.css file is the only requirement for the child theme.
• Maintenance – Child theme is safe from parent theme’s update process.
• Customization – Change the parent theme’s code without touching it. If theme offers multiple hooks, the process is even simpler.

Entire guide assumes that you have a local server installed on your computer. This is the safest, fastest, and easiest and portable way to work with. If you don’t have one, know how to install in PC or Mac .

Tools

1. Any basic text editor would do, Professional editors like Textmate/BBEdit (Mac) and Notepad++(windows) would accelerate the process.
2. Some reasonable HTML, CSS language skills. And some knowledge on PHP.
3. A latest browser. – Firefox or Chrome.
4. Debugging tools – These can be extremely helpful on fixing annoying errors. Get one for your browser.
   • Firebug for firefox.
   • Chrome comes with built in Console. Right click anywhere and select inspect element.
   • Safari, Enable developer tools from advanced preferences.
   • Dragonfly , if you swear by Opera. Right click anywhere and select inspect element.
   • Internet explorer? It is the best browser for downloading one of the better browsers listed above. No? okay, get IE9 and click F12 .

Magic of Style.css

Let’s choose a name for the child theme. For e.g. I chose Ashten.

Browse to your wordpress themes folder(it’s in /path/to/wordpress/wp-content/themes/). Locate the folder twentyten. Now, create a parallel folder with the name we chose.

Create the child theme folder

Create a file style.css,  that will be our child theme’s main style sheet.

Now copy the code below to the above file. This is the file header, enclosed within comments, located at start, that wordpress acquires theme details. Two important fields would be Child theme’s name( any valid name, except twentyten) and parent theme(template)’s name. Please refer with the image below.

/*
Theme Name: Ashten
Theme URI: http://kav.in/
Description: Dashy twenty ten.
Author: Kavin
Author URI: http://kav.in
Template: twentyten
Version: 0.1
*/

 

Declaring the parent theme from child theme’s stylesheet

Replace the values to Theme name, Theme URI, Author, Author URI to your liking. Essential line here is the Template: twentyten. WordPress, now will use twentyten’s files as the template.

Now proceed to the admin section of your blog. The new theme is shown as the option, like below. “Activate” the new theme.

Activate our new theme! Beginners, take a look at the highlighted information below the links.

Now reload the viewer facing side of your blog and take a look. An un-styled page appears. Why so? Because defining the parent theme auto-inherits only the code (functions, variables etc.) and Not the styles, unless explicitly imported. This is very useful, IMHO.

Now you’ve got two options. One, if you are fluent in CSS, you can start styling the theme from scratch. Second, start by importing the parent theme’s stylesheet and overriding theme’s styles there after. Let’s choose option 1, for now.

/**
 *  "../" points to the directory above. “../twentyten”, a folder in
 *  the above directory.
 *  @import url - Import function of the CSS. Accepts path or
 *  URL. Be careful with the CaSE sensitivity though.
 */
@import url("../twentyten/style.css");

/**
 *  Let us make sure that child theme is being loaded.
 */
body {
	background: skyblue;
}

Now reload the page. Child theme bears no difference to twenty ten, except for the background we modified, skyblue.

Our child theme, just like twenty ten, but with a skyblue background.

Now we shall proceed to next step.

Modifying the parent theme’s output from the child theme

Child theme can modify the parent theme’s code indirectly by altering the output.

It always helps a beginning developer to study the code and the documentation if available. Almost everything else can be figured out with Google. Excellent manual on PHP can be found at php.net, WordPress documentation can be found at wordpress codex.

Inside the child theme’s folder, create a file named “functions.php”. you can refer about functions.php at codex here.

Open the twentyten’s files (as required and when noted) alongside, as that helps to understand the process better. We are not touching the parent theme, it’s for reference purposes only.

Modifying the code can be done with

• Hooks – Filter and action hooks. (both have add_ and remove_ functions)
• Redeclaring the over-writable functions on Parent theme’s code.
• Alternative template files on child theme’s folder.

Hooks

WordPress offers two type of hooks – Action and filter. Action hooks are fired at specific points, or when an event occurs. Filters hooks – are used to modify input and output. Both type of hooks act similarly. Now, it’s time for some examples – way these are better understood.

Example:. Filtering post content

Say for example, we need to insert some text or image into the post. Each wordpress post’s content is output with the_content() function/hook. Like most wordpress functions, the_content() can be hooked and filtered.

Now let’s create a new function, which gets the input, and outputs the modified input. Then we attach the function to the_content()  .

Example , Add something above content.

code

// Insert something before the post.
add_filter( 'the_content', 'filter_content_before');

function filter_content_before( $input ) {
	// returns the output.
	// . is php concatenation operator.
	
	return "<b>Hello all</b>, " . $input;
	
} // END function filter_content_before

Result

Filtering: inserting before wordpress post content

Example – Adding something below post content.

code

// Insert something after the post.
add_filter( 'the_content', 'filter_content_after', 11);

function filter_content_after( $input ) {
	
	return $input . "Regards,<br />Yours admin!<br />";
	
} // END function filter_content_after


// Insert something after the post, but before previous one.
add_filter( 'the_content', 'filter_content_right_after', 10);

function filter_content_right_after( $input ) {
	
	return $input . '<hr style="background: skyblue; height: 4px;">';
	
} // END function filter_content_right_after.

Let’s take a look at the above code. By default, functions are hooked in the order they are added to the filter.

So far , filter_content_right_after() appears after filter_content_after() . Say, we want that to appear right after. Here comes the hook priority, the third argument to add_filter.

Lesser the number, Higher the priority.

Greater the number , lesser the priority.

So, function with priority number 1 would be executed long before function with priority number 12. That said, the filter_content_right_after() “10″ has a higher priority than filter_content_after() “11″. Hook’s priority are similar to CSS rules priority, later ones have higher priority(Cascading). If both our functions had priority 10, then they are executed in the order of attachment.

Result

Filter : insert content after post content in wordpress

This is most commonly applied to show up Advertisements at the top or bottom of the posts. Want to add something at specific points in every post? Here’s how.

code

/**
 * 	Insert something into the post, for example ads.
 */
add_filter( 'the_content', 'insert_between_moi_posts' );

function insert_between_moi_posts( $content ) {
	// Insert this.
	$insert_this = '<p><a href="http://example.com"><img src="' . get_bloginfo( 'template_url') .'/images/ad_banner.gif" /> </a></p>';
	
	// Insert in place of our placeholder <!--ad-inserts-->
	$content = preg_replace( '/<!--ad-inserts-->/im', $insert_this, $content);	
	
	// always return the content, post will be empty failing to do so.
	return $content;
}

• <!–ad-inserts–> is our placeholder. It can also be {ad-inserts} , but using html comments is more safe.
• The content, here an image, will replace the <!–ad-inserts–> , wherever it occurs in posts.
• we use php function preg_replace, which replaces our placeholder wherever it occurs inside posts. Learn more about preg_replace.
• Now edit any post in wordpress admin, go to HTML mode, insert <!–ad-inserts–> anywhere and view the post on the blog. Now it should be replaced with an image.

Example below.

 

Inserting custom content in between posts Above, the placeholder insert and below, the replacement image that appears.

Overriding functions

Not every function can be over-ridden. Trying to redefine an already existing function with the same name will throw up an error – Fatal Error: Cannot re declare function_name (previously declared in line number..) . 

A Parent theme’s functions if enclosed within the  if( ! function_exists ) php conditional, can be overridden. Take the below function from twentyten, which you can find in functions.php inside twentyten folder.

if ( ! function_exists( 'twentyten_posted_in' ) ) {

function twentyten_posted_in() {
	// Retrieves tag list of current post, separated by commas.
	$tag_list = get_the_tag_list( '', ', ' );
	if ( $tag_list ) {
		$posted_in = __( 'This entry was posted in %1$s and tagged %2$s. Bookmark the permalink.', 'twentyten' );
	} elseif ( is_object_in_taxonomy( get_post_type(), 'category' ) ) {
		$posted_in = __( 'This entry was posted in %1$s. Bookmark the permalink.', 'twentyten' );
	} else {
		$posted_in = __( 'Bookmark the permalink.', 'twentyten' );
	}
	// Prints the string, replacing the placeholders.
	printf(
		$posted_in,
		get_the_category_list( ', ' ),
		$tag_list,
		get_permalink(),
		the_title_attribute( 'echo=0' )
	);

} // END function twentyten_posted_in.

} // END if !function_exists check.

Above function is declared only, if no other function by the same name exists. This function is used to output the information about, and below the post on single view.

Default output of twentyten_post_in()

Now, let’s say, we would like to have the post meta information as a list rather than continuous lines. So let’s re-declare the function twentyten_posted_in.

function twentyten_posted_in() {
	
	// Prepare the links.
	$tag_link = get_the_tag_list('Tags: ',', ','');
	$cats_link = get_the_category_list( ' , ' );
	$author_link = '<a href="'. get_author_posts_url( get_the_author_meta( 'ID' )) .'" title="View more posts by '. get_the_author() .'">'. get_the_author() . '</a>';
	$edit_post_link = '<a href="' . get_edit_post_link($post->ID) . '">' . __('Edit.', 'kavin') . '</a>';
	
	
	$post_meta = '';
	// Enclosing div.
	$post_meta .= '<div class="post-meta-foot">';

	// Avatar
	$post_meta .= '<div class="post-author-avatar">';
	$post_meta .= get_avatar( get_the_author_meta('user_email'), 72);
	$post_meta .= '</div><!-- end #post-author-avatar -->';

	// Post details.
	$post_meta .= '<ul class="post-meta-list">';
	// Author name and posts URL
	$post_meta .= '<li>Posted by : ' . $author_link . '';
	// List categories
	$post_meta .= '<li>Categories : ' . $cats_link . '';
	// List tags.
	if ( $tag_link )
	$post_meta .= '<li>' . $tag_link . '';
	// Permalink.
	$post_meta .= '<li>Bookmark : <a title="Permalink to ' . the_title_attribute( 'echo=0' ) . '" href="'. get_permalink() . '" rel="bookmark">Permanent Link</a>';
	// Edit post
	if ( current_user_can('edit_post') )
	$post_meta .= '<li>Manage : ' . $edit_post_link . '';
	$post_meta .= '<ul>';
	
	$post_meta .=  '</ul></li></ul></div><!-- end class post_meta-foot -->';
	
	echo apply_filters( 'twentyten_posted_in', $post_meta);
} // END function twentyten_posted_in

After some minimal styling, it appears as below. Cool, isn’t it?

New output from our redeclared function twentyten_posted_in

Overriding with alternate files (namesakes)

Template files, for example -

• header.php
• footer.php
• loop.php
• sidebar.php
• anything.php except index.php(unless wp 3.0 or newer)

will be over ridden, when a file with exact same name as the original parent file is present in the child theme dir. For example, to replace header.php, put your own header.php in child theme’s folder. Also, it’s better to copy the header.php from parent theme( here twenty ten), to child theme’s folder (here ashten) and then proceed with modifications. This way we can make sure we steer safe from messed up HTML tags.

Styling the Child theme

As told earlier, css styling can be done either from scratch, or after using @import url(“../twentyten/style.css”);. (Google’s page speed advises to avoid CSS @import, in such case, simply copy the code to the child). Child theme’s styles will override the parent theme’s styles as they occur later ( CSS cascading – later rules have higher priority ).

Next post on this series will be on adding various dropdown menu solutions and then fancy post sliders will follow.

Cheerio,
Kavin

Come on, who do want to use 3 Keyboards/mice at once? Well, I don’t. Using synergy quite a while on 3 of my computers – an iMac,  a Windows 7 PC  and Ubuntu(10.10) powered one, i wish to say that’s a geek’s advantage.

If you have not downloaded Synergy yet, now is the time! Get this awesome free-open source software over here.

Common problems

Synergy’s status can be found with the tray(Windows)/Menu(Mac) icon.

or  denotes that Synergy has started.

or  Synergy denotes Successful Client-server connection.

Chances are that you never saw the second one, eventually got frustrated and gave up. But trust me, Synergy is more worth the buck.

or Warning : Failed to connect to server : Connection Refused

This happens when the client tries to connect to the server, which is turned off. Or, synergy server is not running.

Solution :

• Start Synergy on the server computer and make sure it is configured correctly. That should fix the issue.
• If the above does not work, double check your firewall/Antivirus.
• Make the synergy auto start at login or power-on. For example, in windows :

Connection timed Out

Cause : Most often, Firewall/Antivirus on the server is blocking your connection attempts. Sometimes, the server maybe down or crashed/Unresponsive (relatively common on windows ).

Solution : Synergy uses the port 24800 for its communication. That port needs to be free/unblocked in the firewall.

• Open your Antivirus/Firewall configuration and allow the port 24800 through the firewall. If you are not sure about how to open the port in your specific brand of Antivirus/Firewall, do a google search with the keywords Open port in ‘_ANTI_VIRUS_FIREWALL_NAME_HERE_’ . I use ISP branded F-Secure, which conveniently offers an option “Open a Port” in its Internet shield settings.
• If the above solution does not work, check whether the server computer has crashed or Locked. If so, you need to restart it.

Server already has a connected client with name “Client_Name”

Cause : Two computers unintentionally given the same screen name(by which server identifies).

Solution :

• Change the name of one computer and try to reconnect.
• If not, restart the synergy server. That is done by right clicking Tray icon –> quit synergy and Start menu –> Programs –> Synergy+ –> Synergy+

Make Video / Games stay Full screen with synergy

Cause : Most video and games applications needs to be on Focus when viewed full screen. When the focus is lost, obviously they leave full screen to window mode. Synergy on moving the cursor to the next screen(that is to another computer), captures the focus on the previous screen and takes foreground. So video applications/Games on losing focus, leaves full screen or minimizes.

Fix :

Windows : Open the synergy main window and click options. Usually the last one is “Don’t take foreground window on windows servers” . Check and start the server.

Cannot initialize Hook library : Synergy already running?

Cause : You are trying to run another instance, while it is already running on the background.

Fix :

• Try connecting the clients. Unless synergy has crashed, it should connect promptly.
• If it does not, Open Task manager and look for synergys.exe under processes. Right click and choose to end the process.
• If the above does not work, open command prompt(+R keys–> Type “Cmd”->enter) and enter the below command. That should do it.

 taskkill /IM synergys.exe /F 

If it still doesn’t work, try gaucho’s tip, the first comment below.

Synergy : Not running / Synergy blocked tray icon

Synergy configuration / Firewall & everything seemed perfect. Yet, I faced this strange problem one day. Synergy tray icon showed a “blocked” symbol – i.e Red circle with a Diagonal line. I tried reconfiguration & reinstalled synergy numerous times, which was of no help.

Cause : You probably installed an additional input Language in your windows PC. And synergy is incompatible with some of the language’s characters.

Fix : None other than removing the input language that’s conflicting.

Hopefully this will be fixed, I presume. If anybody figured out a workaround, please share.

Other Problems

Synergy : Cannot read configuration

Cause : Something wrong with/in the Synergy configuration file.

Fix : If you typed the configuration file, Check for any typos and correct Section : name ……. End syntax. Otherwise, delete the configuration file and redo.

Cannot move cursor back to the other/previous screen

Cause : Unintentional wrong configuration. Trust me, it may get confusing sometimes.

Fix : Correct the configuration. In recent/beta versions of synergy, It is easy – just as arranging the monitor icons in exact order. If you have older version, proceed.

Synergy Configuration Revisited

Example :

You have two computers – For example iMac and Windows 7 Dell. Imagine those as two persons (or gals maybe ) standing next to each other.

• For iMac, dell is on the left. For Dell, iMac is on the right.
• Otherwise said, Dell is right of iMac. iMac is left of Dell.

i.e. relative to them. Likewise, relative to the computers. And not relative to third person/us. Got it?

So synergy configuration window – Click [New Link] and below the box, Enter the correct configuration like in the example above. That should do it.

My previous detailed post on Synergy Installation and configuration in Windows, Mac OS and Ubuntu Linux can be found here.

United, we rule.

Kavin.

Including scripts

The traditional method is by using the <script></script> tag.

Example.

<script src="http://example.com/scripts/script.js" type="text/javascript"></script>

With wordpress, procedure of including and managing scripts have never been more tidier.

WordPress ships with a lot of included scripts, though some of them might not be up to date. Script related wordpress functions are

1. 1. 1. wp_register_script()
      2. wp_enqueue_script   Codex()
      3. wp_deregister_script()

Click the respective functions for usage and parameters. These functions and others listed below are entered in your theme’s functions.php.

These functions are best understood with examples.

Example below, Include a script that comes with wordpress. e.g. jQuery or prototype.

 <?php
// All of these goes in functions.php
function load_inbuilt_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('prototype');
}

add_action('init', 'load_inbuilt_scripts');
?>

Example below, Load your own script to replaces the built-in one.

 <?php
function my_own_incl_scripts() {
	// remove the inbuilt one first.
    	wp_deregister_script('jquery');
	// assign theme directory url to a variable
	$themedir = get_bloginfo('template_url');
	wp_enqueue_script('jquery', $themedir . "/scripts/jquery/jquery.js");
}

add_action('init', 'my_own_incl_scripts');
?>

Load a script from alternate location e.g. google AJAX CDN or any remote server. Thereby replacing the inbuilt one.

 <?php
function load_remote_scripts() {
	wp_deregister_script('jquery'); //remove the in built one first.
	// Include the google cdn jQuery
	wp_enqueue_script('jquery', "https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js");
	// Load mootools from A remote server. Notice the script name.
	wp_enqueue_script('moo', "https://example.com/cdn/js/mootools.js");
}

add_action('init', 'load_remote_scripts');
?>

Example below, on Loading a script with wp_enqueue_script() and arguments.

 <?php
/* Say you need the script -
		* named "my_dep_script"
		* located in ""/scripts/cool/accord.js"
		* which is dependent on jQuery framework
		* and of version 1.2.3,
		* should be loaded in footer.
*/
function script_with_args() {
	wp_enqueue_script(
		'my_dep_script', // name of the script
		get_bloginfo('template_url') ."/scripts/accord.js", // location
		array('jquery'), //dependencies
		'1.2.3', // script version
		true); // load in footer.( wp_footer() must be present!)
}

add_action('init', 'script_with_args');
?>

Including styles

Well, procedure is similar to scripts above. Style related functions are

1. 1. 1. wp_register_style()
      2. wp_enqueue_style()

It is done with the wordpress function wp_enqueue_style() (codex reference).

Example below, Load a stylesheet file “my_style.css” from scripts sub folder.

 <?php
function load_my_styles() {
	// assign the url of theme to a variable $themedir
	$themedir = get_bloginfo('template_url');
	wp_enqueue_style( 'my_style',  $themedir . "/styles/my_style.css");
	}

// Load the above function via init hook.
add_action('init', load_my_styles);
?>

Example below, Load a style with wp_enqueue_style and arguments.

 <?php
function load_style_args() {
	$themedir = get_bloginfo('template_url');

	wp_enqueue_style(
		// Arg 1) name that wordpress refers to.
		'my_style_2',
		// Arg 2) URL to theme directory
		$themedir . "/styles/my_style_2.css",
		// Arg 3) its dependencies. Loaded in previous function.
		array('my_style'),
		// Arg 4) version of the style
		'0.1.2' ,
		// Arg 5) type : media, Other - print, all.
		screen );
}

add_action( 'init', 'load_style_args');
?>

Usage and Argument of above functions

wp_enqueue_script and wp_register_script both act similar, except that the url(second argument) is optional for the former.

Example usage of wp_enqueue_script() function with arguments.

 <?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
// $handle : Name that wordpress handles this script with.
// $src : location of the script file, if it's not included already.
// $deps : Other scripts THIS scripts depends upon. Default - array()
// $ver : Version of the script. Optional. - Default - WordPress version.
// $in_footer : Loads the script in footer. - Default - false.
?>

As like the script handling functions above, similar are wp_enqueue_style and wp_register_style.

Example usage of wp_enqueue_style() with parameters.

 <?php
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
// $handle : Name of the stylesheet.
// $src : Path to the stylesheet.
// $deps : Styles that should be loaded before this style.
// $ver : Version of the style.
// $media : screen , media, handheld or print.
?>

Using Javascript and CSS in wordpress admin pages

You can use the is_admin() function of wordpress to load the javascript and css only in admin pages. Quite useful for plugin and theme developers.

An example.

 <?php
if( is_admin()) {
	// scripts and styles for wp-admin here.
	// This loads only on admin pages.
	wp_enqueue_script('jquery');
	wp_enqueue_script('admin_fx',
	$themedir . "/scripts/admin/admin.js");
	wp_enqueue_style('my_admin_css', $themedir . "/styles/admin/admin_styles.css");
}

if( !is_admin()) {
	// scripts and styles for regular wordpress pages.
	wp_enqueue_script('mootools');
	wp_enqueue_style('my_blog.css');
}
?>

Above function loads the scripts and styles globally in all admin pages e.g. Dashboard, Appearance, Plugins, settings sections.

But, what if you want to include a javascript file to a single admin page(e.g. Theme options)? It is not that hard. Trust me.

Example

 <?php // Functions.php
// This adds the options page to the admin_menu hook.
add_action('admin_menu', 'theme_admin_page');

// Example options.page - Define the location and section.
function theme_admin_page() {
	$page = add_submenu_page(
			'themes.php',
			'Great Theme Options',
			'Customize theme',
			'edit_themes',
			'options',
			'theme_options_page'
			);
	// Add the scripts and styles ONLY to options page.
	add_action('admin_print_scripts-'. $page, 'options_includes');
}

function options_includes(){
	if ( is_admin()) {
		wp_enqueue_style('admin_css_own', get_bloginfo('template_url') . "/styles/my_style.css");
		wp_enqueue_script('scriptaculous');
		wp_enqueue_script('admin_fx', get_bloginfo('template_url') . "/scripts/admin_fx.js", array('scriptaculous'), '0.2.3', true );
	}
}

function theme_options_page(){
	echo '<div class="wrap">';
	echo '<div id="icon-tools" class="icon32"></div>';
	echo '<h2>Sample Theme Options</h2>';
	echo "<p> Hello there! This is your admin page</p>";
	// Form goes here.
	echo "</div><!-- end the wrap container -->";
}
?>

That does the job.

Selective use of Javascript and CSS

There might be some situations when you want to run  javascript code on a single type of page. For example : you might want to include a script that runs only on Author pages. You can do it with the conditional tag is_author() and wp_enqueue_script() function. Usage is similar to the is_admin() above.

Likewise, with conditional tags you can selectively use Javascript and css in wordpress.

Notes and Troubleshooting

1. When you replace the jQuery that ships with wordpress, make sure to use noConflict mode. This allows simultaneous usage of other script libraries. More about this here.
2. When your script is not working, check whether it is loaded. You can use Firefox’s Firebug extension (or Chrome’s Inspect element so). Look under the “Net” Panel –>  “JS” tab for any 404 not found error(Colored Red). If it is a 404, then check whether the path to the script is correct. Double check the variables and concatenation, if you use them. If not, there must be something wrong with the javascript code. Most common culprits are spelling errors and case-sensitivity.
3. Check with firebug for any duplicate scripts. Plugins may sometimes use a different version of the same library that you use.
4. It is recommended to load the scripts in the wp footer. You can do this with $in_footer (5th) argument of wp_enqueue_script.
5. Always perform these procedures on a locally installed wordpress(PC, Mac), or at least on an alternate wordpress installation.

Conclusion

The purpose of this guide is to provide organized information that is often vague and scattered through out the web. If you have any questions/ wish to correct me, or criticism which i really appreciate, Please do.

Beginners learning Javascript can make use of these books – JavaScript: The Definitive Guide by David flanagan, or JavaScript: The Good Parts by Douglas Crockford. While Complete knowledge of javascript is not needed nowadays, because of availablity of multiple javascript frameworks such as jQuery, prototype. But it does serve build a strong base for the frameworks.
 

Absolute and relative paths

Absolute path is the Full path to an object or a document in the filesystem, whereas Absolute URI is the Full URL to the object or document.

Example of Absolute URL

http://kav.in/downloads/wordpress/

http://ftp5.gwdg.de/pub/linux/debian/debian-cd/5.0.7/i386/iso-dvd/

And relative path refers to the locations of the objects and documents relative to the document on the same server. 

Example : Relative path to sub directory images. 

<img src="images/picture1.jpg" title="An awesome picture" /> 

Example : relative path to an image inside a folder images located a level above the current document folder is done with  ../ .  Similarly, ../../ refers to the directory that’s two levels above the current one. 

<img src="../images/picture_up_above_inside.jpg" title="The picture above" />

Be careful when you are using relative paths in wordpress.

WordPress theme paths

Both absolute and relative paths can be used in wordpress. Absolute and relative paths are used in PHP/html while CSS uses mostly relative.

Images in the same server are referred to with relative paths in CSS.

Graphical example on using the paths

Take a look at the above image. let us link to these image from css. Now please proceed to the below example code.

/* link to picture inside sub-folder images */
body {
	background: url("images/achu.gif") repeat;
}
/* link to an image in directory a level above. */
.awesome-picture {
	background: url("../uploads/picture1.jpg");
}
/* Linking to an image on another server with Absolute server */
.strangewrap  {
	background: url("http://capability.es/top/secret/strange/omg.png") no-repeat;
	display: block;
	width: 150px;
	height:80px;
}

Variables

Use of PHP variables can save us a lot of time and code. WordPress’  built-in functions bloginfo() and get_bloginfo() displays your blog’s information. While the former automatically echoes the output, latter is for use only with php echo. Check out the WordPress Codex reference for bloginfo() and get_bloginfo() for the usage and arguments.

Open your theme’s header.php and insert these code above the header [ div id=”header”> ]

An example, if you want to get the Absolute path to your theme directory.

<?php bloginfo('template_url'); ?> 
// OR
<?php echo get_bloginfo('template_url'); ?>

// Output in my case was 
// http://kav.in/sandbox/wp-content/themes/twentyten

Note the use of echo with the function get_bloginfo() , as get_bloginfo does not echo the output by default.

Say, for example you have a sub-folder “scripts” within the theme folder. Now you may need to link to a javascript file script.js inside it. So, instead of typing the entire URL again and again, we can just use  get_bloginfo. It also helps avoid the typos.

<?php
$themedir = get_bloginfo('template_url');  //assign the theme path to variable $themedir
// similarly $scriptdir = $themedir . “/scripts”;
?>
<script src="<?php echo $themedir ?>/scripts/script.js" type="text/javascript"></script>

WordPress Constants

Constants store information which can be used through out the template. Once defined, its value remains constant.

<?php // THIS goes in functions.php
// defined constants can be used throughout the theme now.
define( 'THMDIR', get_bloginfo('template_url'));
define( 'SCRIPTDIR', get_bloginfo('template_url') ."/scripts");
?>
<!-- this goes in header.php-->
<script src="<?php echo THMDIR ?>/scripts/script.js" type="text/javascript"></script>
<script src="<?php echo SCRIPTDIR ?>/script2.js" type="text/javascript"></script>

Note: Make sure you start with the forward slash after the variable name, when you use get_bloginfo to return the URI.

Kavin