Search This Blog

Friday, January 30, 2009

My first Aesthetic wordpress theme: Modifed Lotus Flower Theme for 3 columns

A big Leap..


The past few days have been a big leap for me. Thanks to Google's search engine, tons of prolific writers across the world, and Tanvi Chanchalani, I learnt something about wordpress and css, which enabled me to modify a beautifully aesthetic 2-column wordpress theme called Lotus Flower into a 3-column wordpress theme. Not only this, using it, I was able to quickly make two websites on my newly purchased domain, wisdomspeak.org.

The purpose of this post is to recount my learning experience in slow motion for my own benefit and also for the benefit of those thousands of budding wordpress theme creators. Honestly, there is so much creativity out there. People get great ideas all the time. It would be a pity not to be of any service to them, so that they could help humanity. Well, seriously, I just want to help.

I Love you!.. but...


Ok, back to the mission.

When I initially saw the Lotus Flower theme on http://www.freewpthemes.net, I was so impressed (bowled over might be the right term) that it immediately struck me "the" one. And I used it very well, feeling happy.

But soon, I realized that to encourage the community to adopt the audio resources website that I was planning to build, Im going to need people to donate as well, which meant that they needed to see the Donate through Paypal plugin on the sidebar WITHOUT scrolling down.

Necessity is the mother of Invention..


The Support us plugin simply had to catch the attention of the person browsing the website, or else the idea would be buried in the annals of .. uhm.. the sidebar. So I had this really urging need of bringing it on the right hand side, along with some more visible links to related websites. Cmon now, I had to make it easy on the users, right, or else I wouldn't be doing my marketing homework right.

And so, i started looking around for means to add another sidebar. But there was this ONE problem. I didn't know squat about PHP or wordpress themes or CSS !

Hmm, but I had a couple of big factor on my side. I had the fire in the belly to make it work and I had TIME. Did anyone tell you that time is also a big resource? (The Capitalist says: Time is Money. In Hindi they say, समय बड़ा बलवान - time is very powerful).

And so, the hunt begins..


Ok, so the first thing to understand for customizing a wordpress theme is that the heart of the Look/Feel/User Interface is the style.css (cascading style sheet) file, which is usually in the home directory of the Wordpress theme ($WORDPRESS_HOME/wp-content/themes/<themename>). The directives given in style.css regulate the placement and cosmetics of the elements that make up the website.

The contents or elements themselves come from Wordpress's infrastructure (content entered through .../wp-admin.php console) and have got nothing to do with a style.css file. You could simply modify the sytle.css and achieve visually very different results. For example, check out wisdomspeak.org/vedictalks and wisdomspeak.org/mantra. They are both using the SAME theme, but just slightly different style.css  etc.

A different path of hit and trial..


But thats not how it played out for me. The paragraph above me is just me talking in retrospect.

First, I tried adding a second sidebar to the Lotus Flower theme. After googling a lot of pages, I could finally see sidebar2 in the Configure Widgets Page (through the Dashboard link):

1) Prefixed an argument "2," as the first argument to the register_sidebars() function in functions.php. Earlier, the function call was for register_sidebar() -- notice the singular case.
register_sidebars(2, array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));

2) Copied $WORDPRESS_HOME/wp-content/themes/<themename>/sidebar.php to $WORDPRESS_HOME/wp-content/themes/<themename>/sidebar2.php and made the following changes in sidebar.php and sidebar2.php:
# diff sidebar.php sidebar2.php
1c1
< <div id="sidebar-left">
---
> <div id="sidebar-right">
3c3
<               <?php if (!function_exists('dynamic_sidebar')
|| !dynamic_sidebar(1)): ?>
---
>               <?php if (!function_exists('dynamic_sidebar')
|| !dynamic_sidebar(2)): ?>

Earlier, the function call inside sidebar.php was only for dynamic_sidebar(). It wasn't working without it. Also, the <div id..> tag value was made more specific to -left or -right.

Later on, I realized that the advantage of this was that I could influence the look and feel of each sidebar individually.

3) Included <?php include( "sidebar2.php"); ?> in page.php and index.php like this:
<?php get_header(); ?>
<?php include( "sidebar2.php"); ?>

Then did the same for $WORDPRESS_HOME/wp-content/themes/<themename>/404.php, archive.php, search.php, single.php. The really dumb rule of thumb that I followed was: if there is a <?php get_sidebar(); ?> in the php file, it needs the 2nd sidebar too.  Common sense, eh?
4) At this point, lo and behold, I COULD see the 2nd sidebar in the Configured widgets page on Wordpress admin console and happily assigned the PayPal widget to the right sidebar. At least, I was getting somewhere.

5)  When I tried previewing the website live, it WAS showing the right sidebar, but the left sidebar was pushed way down on the left. So the content was very much there, but the UI/cosmetics was not displaying it right. This is where we need to brush up our CSS skills.

learning basic CSS..


Now, it was down to manipulating the style.css for accommodating the extra sidebar.This is where these tutorials from html.net really helped me understand the overall scheme of css. I still don't understand that much about how floating works. My approach to making the theme work was .. change one property, preview it and if it wasn't working, revert it back. Pretty much hit and trial based.

From common sense, I could reason that there was a need to play with a lot of width values width/padding/marging values for various elements in style.css, because ultimately that's what was causing the mis-adjustment.

Changed the style.css a bit to accomodate the 2nd sidebar to the right. I had to play with a lot of width values. I just guessed that some of those width/padding/marging values were infuencing the display. But I didn't understand the overall structure properly yet.
It was actually at http://www.html.net/tutorials/css/lesson13.asp that a lightbulb lit up in my mind. The example had used width: 33%;.

Ok, I thought, if this directive can be used for columns in a list, then why cant it be used for any other element? Or in other words, it should be possible to use a similar % directive for other elements in css too.

First blood..


This is where Tanvi helped me a lot in advising which sections and their properties to be changed. I wanted to cover more width on the screen (800x600 resolution is history). Keeping this in mind, she not only widened some settings, but also sent me widened images to go along with the new theme.

When I initially replaced the style.css for theme, its working on firefox, but not on IE: The left sidebar was not able to adjust on the top somehow, and was pushed down below. Also, the header and top navigation pane were not centered.  Thats when I realized that the new widened images had not been overlaid. After copying them, the screen is much wider, finally! However, there seems to be some sort of an adjustment issue with the radio widget's size or floating adjustment for IE. From googling, it seems that there are some CSS bugs for IE, especially around wrapping or floating.
After playing with width: <number>% directives for content, sidebar-left, sidebar-right sections of style.css (I identified them with the background image tag -- compared the filenames to the theme's images visually.), I was able to bring all the contents under a very uniformly formatted pattern.

I was experimenting with % values for width on top of the css and  this seems to be setting up the alignment very well for sidebars and the top! It almost like what is needed. But there was still a gap between the left sidebar and the main content box. It seems to be related to some margin setting for the content element. This is what worked out for me:
#sidebar-left {
        FLOAT: left; WIDTH: 20%
}
#sidebar-right {
        FLOAT: right; WIDTH: 20%
}
#content {
        BACKGROUND: url(images/img10.jpg) no-repeat left top;
 FLOAT: right ; WIDTH: 58%
}

In an effort to center and widen the header & logo and remove extra padding between header/logo, I kept playing with the properties of their sections:
#header {
        BACKGROUND: url(images/img02.jpg) no-repeat center center;
MARGIN: 0px auto; WIDTH: 1200px; HEIGHT: 60px
}
#logo-wrap
{
       PADDING-RIGHT: 0px; PADDING-LEFT: 0px;
BACKGROUND: url(images/img03.jpg) no-repeat left top;
PADDING-BOTTOM: 20px; MARGIN: 0px auto;
WIDTH: 1200px; PADDING-TOP: 10px
}

Now the top alignment was perfect, but the menu links at the top (links to the Wordpress "Pages") were aligned to the very left. Once again, Tanvi came to the rescue and said that the answer was to change the left padding for menu UL section:
#menu UL {
    PADDING-RIGHT: 0px; PADDING-LEFT: 145px;
PADDING-BOTTOM: 0px; MARGIN:0px; LINE-HEIGHT: normal;
PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}

This is when It was very much like what I wanted it to be. I was elated and thankful to have been able to achieve my goal.
Later that night, I saw that the padding for the elements in the right sidebar was off, not uniform. It was related to the left-padding pixel value being somewhat different for the list and element. I wouldn't say that even now all the left/right padding values for left/right sidebar's units/lists elements are uniform at 0px or 5px or 10px, but its just that the combination of hits and trial without a particular scheme worked out. You should take a more methodical approach and keep a uniform pixel side to make things easier.

The Modified theme ..


screenshot

The theme is available here for your download and further modification. The original theme's zip file is available here.

Later on, I modified the following two things to make a different theme for wisdomspeak.org/vedictalks (the new one is style.css):
# diff style.css.gold1 style.css
2c2
<       PADDING-RIGHT: 0px; MARGIN-TOP: 10px; PADDING-LEFT: 0px; FONT-SIZE: 13px;
BACKGROUND: url(images/img01.jpg) repeat-x left top; PADDING-BOTTOM: 0px; COLOR: #333333;
PADDING-TOP: 0px; FONT-FAMILY: "Trebuchet MS", Arial, Helvetica, sans-serif
---
>       PADDING-RIGHT: 0px; MARGIN-TOP: 10px; PADDING-LEFT: 0px; FONT-SIZE: 13px;
BACKGROUND-COLOR: #FFF380;
PADDING-BOTTOM: 0px; COLOR: #333333;
PADDING-TOP: 0px; FONT-FAMILY: "Trebuchet MS", Arial, Helvetica, sans-serif
98c98
<       BACKGROUND: url(images/img05.jpg) no-repeat left top;MARGIN-LEFT: 4px;
MARGIN: 0px auto; WIDTH: 950px; HEIGHT: 200px;
---
>       BACKGROUND: url(images/img05.jpg) no-repeat left top;MARGIN-LEFT: 4px;
MARGIN: 0px auto; WIDTH: 950px; HEIGHT: 20.3em;

The beauty of  HEIGHT: <number>em property is that it can scale up the image very well.

The new theme looks like this:

vedictalks-snap

Feedback..


I know this is not the best of the tutorials out there on the internet, but I would appreciate feedback/validation from you, whatever your level of expertise. I am still learning CSS and would love to try new things like scalable flash images in a wordpress blog.  So please leave a comment here. Thanks for your consideration.

Wednesday, January 7, 2009

Preface - Joining the Android revolution


Last year, I joined the Android open source revolution as a user. I took a difficult and controversial decision. I bought the G1 phone. Many people call it the T-mobile G1 phone, but I like to call it the HTC G1 phone, to give credit to the actual phone manufacturer. Agreed, it couldn't have happened without Google sponsoring the Android platform and creating the Open Handset Alliance. T-mobile got exclusive rights to the marketing of the very First device to run the Open source android platform and got a sweet deal for itself. It even convinced many people to buy the data plan.

I am sure a lot of people thought that they had to get the data plan to make the phone even work. Well, that was true, but only for the very first power up of the phone. Once it had registered the google account for the phone, it didn't really care if it had the data plan or not.

I bought the G1 through Ebay (unlocked). After utilizing Microsoft Cashback Livesearch feature with Ebay, I got a sweet deal for $375, including some accessories. Back in Nov 2008, I got a 25% cashback! A week later, Microsoft announced that they would give instant rebates, instead of delaying the cashback for 2 months via Paypal, as originally announced.
Later, I learnt that Tmobile also sells the unlocked handset to customers for $399 without contract, although its not openly said so. So if you are thinking of getting it from ebay/amazon, try hammering a Tmobile representative at a store. It might be worth getting it from Tmobile and make them liable (just in case the handset develops some issues).

After playing with the G1 Phone for a while, I thought it was a worthwhile investment for me, as I was able to get on the internet anywhere with the data plan. K-9 Email (just released a more stable version yesterday) and AIM IM (continuously improving) work well on this RC30 revision of the platform now, and honestly, that was all I needed to work efficiently; effectively, I had bought my independence.

The Android Market/Application Store


One of the most fascinating selling points of the android platform is the Market, which is in Beta stage till 15th Jan 2009, which effectively means that all applications are free on it. (The Pacman game is the lone exception, I guess). There are some very creative people out there who are developing applications left and right. I remember that when I got hooked to the market, I would check out the market almost every night and try out new programs.
This was also the time when I logged a lot of bugs/enhancements through http://code.google.com/p/android/issues/entry website. It was quite concerning to see that this website was not very much publicized, though. I guess Google wanted to keep it quiet till the Beta stage was over.

Streamfurious - Great potential


When I first played the StreamFurious application, I was fascinated at the various radio stations that I could play. It also set me thinking as to what was shoutcast/icecast in the first place.
On doing a bit of Googling, I came across some posts and youtube videos of how to build a shoutcast server, which seemed lucid enough.

http://www.frihost.com/forums/vt-15354.html - This is the one I used for my shoutcast server
http://wizardskeep.org/mainhall/tutor/shbroad.html -- this one has screenshots

http://www.youtube.com/watch?v=c1leou1vqE4 - This is a good video for Linux installation (recommended for stability)

This morning, I had some free time on my hands and decided to look into creating my radio station. I only used the first link, http://www.frihost.com/forums/vt-15354.html, and I was up and running with my station within 1+ hour (includes discovery and trial/error time). Now thats really OPEN technology.

Apparently, there are a lot of FREE shoutcast servers on the internet, and the most popular of them seem to be WINAMP's shoutcast plugin (from winamp.com) and the shoutcast server from shoutcast.com.

How does it work..


Come to think of it, the technology itself is quite simple, after all the abstractions and implementations.

The actual audio track is played in Winamp. Winamp, in turn, has a plugin, which talks to another Shoutcast streaming service (installed through the Shoutcast server). The Shoutcast service talks to the shoutcast.com servers for registration/status etc. and makes the audio available to internet users.
The entire flow could be depicted as:


Winamp (play audio here) --> Winamp shoutcast Plugin --> Your Shoutcast Server <--> Shoutcast.com

/\

|

Internet users (Shoutcast clients)

In addition, I had to enable port forwarding in my home router for port 8001 for 192.168.0.2 IP, so that external users could talk to my shoutcast streaming server.

Some Setup considerations..


One thing to note here is that I had to wait for an hour or so before my station actually got registered with shoutcast.com and was showing up in the search.
It seems that when the shoutcast server log shows this message, the registration can be assumed to done:

I think this is the right log message to look for the station registration..

<01/07/09@12:09:28> [yp_tch] yp.shoutcast.com touched!
<01/07/09@12:19:37> [yp_tch] yp.shoutcast.com touched!

Another thing to mention here is that the upload speed of the internet connection on your shoutcast server matters and would be key to decide what encoder setting you would use. If you expect N concurrent users and you arebroadcasting at 24kbps encoder setting, then your overall upload requirement is (N x 24) kbps at any time.

shoutcast-log

You got to make sure you can sustain that upload bandwidth. Even with 24 or 48 kbps, you get pretty good results. The default number of maximum users is 32, which is not bad for experimentation over cable modem internet speeds.

shoutcast-encoder-freq

Also, remember that the lower your encoder settings, the more people can connect to your radio station. Know that BBC UK streams audio at 24kbps, so its not bad to use smaller settings. (but then they must be having a cluster of shoutcast servers and multiple relay server too, I'm guessing).

I started off with 24kbps first, but later switched to 64kbps to experiment with downloading speeds for StreamFurious. Also, I was using Comcast High speed Internet with download speed of 3.5mbps and upload speed of 1.5mpbs (speedtest.net would tell you).

Mantra Pushpam @ Atlanta - My Radio Station


mantra-pushpam

I always wanted to listen to Vedic Mantras/Chants whenever I wanted to. Thanks to Open source technology (shoutcast), Google, HTC, Tmobile and ebay, now I am able to play Vedic chants/Mantras on the G1 phone through StreamFurious client.

shoutcast-server-running

All I had to do was click on http://71.204.14.23:8000, click on Listen tab and the browser redirected the request to Streamfurious, which then added the station through the listen.pls file and buffered media upto 2mb before playing the streaming audio. Now, I was on an EDGE connection, so it took a while for the buffering to happen. On 3g Networks, it should be even faster.
Note that Streamfurious does not have the capability to add a radio station manually as of now, but if you go to the source URL of a streamcast server and click on Listen, the default browser is smart enough to redirect the request to Streamfurious. That's how I'm getting around it for now.

For the iPhone users..


For the iPhone users, there are FlyCast (FREE! Very cool article here: http://cybernetnews.com/2008/09/16/free-iphone-app-streams-music-in-the-background/) , iRadio and Shoutcast radio applications that came out in the market. I am still having my iPhone friends try this out.
Here is a very good article on how to listen to Shoutcast radio stations using iTunes.. http://cybernetnews.com/2008/10/23/cybernotes-add-shoutcast-radio-streams-to-itunes/

Another good article with Video review is at http://www.appvee.com/t/shoutcast-radio

For them BlackBerry users..


For the Blackberry power users, FlyCast works well for them. Information on how to download and install FlyCast is available at http://www.blackberryforums.com/aftermarket-software/158658-flycast-download-links.html

When the installation dialog comes up, click "Set Application Permissions" and then click "Download". On the configuration screen, change the "Connections" and "Interactions" settings from "Custom" to "Allow". Press "Back" and then "Save". The application will download and install. If you have a Bold - Run "FlyCast" from the Downloads folder

If you have a Curve - Run "FlyCast" from the general "Ribbon"

You have have to register here - FlyCast - Now your smartphone is complete, then  log in from your BB.

FlyCast has set up a support site for iPhone and BlackBerry users. Please visit FlyCast Forums Index page for tips on getting the most from FlyCast on your BlackBerry.
Additionally, You can also run audio streaming through the Slacker application, as seen here : http://blog.laptopmag.com/video-hands-on-with-slacker-application-for-blackberry

StreamFurious Vs AntPlayer


When I tried running the station again later today with StreamFurious (version 0.0.6), it started deleting the buffer first (which it was not recycling -- seemed like a bug for sure. I wrote to feedback@streamfurious.com about this and did not get any response from them). The deletion of the buffer resulted in timeouts and not a very good user experience. This forced me to look for more alternatives in the android market for playing shoutcast streams.

Through http://www.howardforums.com/showthread.php?t=1468651, I found AntPlayer, which seems to be more mature in terms of finding stations (the search feature actually works) and also a good buffer recycling mechanism.

On day 1, I had better success with AntPlayer for some reason. However, on the subsequent days, at random times, StreamFurious seemed to work better than AntPlayer. Actually, AntPlayer seemed to hang while buffering totally, while StreamFurious did not seem to repeat the buffer deletion syndrome anymore. (It COULD have to do with the fact that I had restarted the shoutcast server a couple times on the first day itself).

A caveat with StreamFurious seems to be that it uses up the battery very quickly. Also, it seems StreamFurious is getting more publicity in the market due to the keyword Stream in its application name.

http://mantra.podzone.org:8000/listen.pls - Making the radio station URL  user friendly and Pnemonic to memory


Since I am running this station from my home on a regular Dell latitude D630 laptop on Windows XP and Comcast Cable internet (behind a Netgear router), the actual external IP would change from time to time. I wondered: How could I make the radio station's URL independent of the IP?

Then I remembered that a long while back, I had used free DNS services provided by dyndns.com. DynDNS has many paid services, but you can associate an IP to some predetermined domains (you get to choose the sub-domain though) for FREE.

So I created a free account on dyndns.com and associated my shoutcast server's external IP 71.204.14.23 (got through http://www.Whatismyip.com) with mantra.podzone.org.

update-for-mantra-podzone-org1

Whenever I would have to reset the internet connection or restart Windows, the external IP would change. To re-associate the latest external IP, I would simply go to https://www.dyndns.com/account/services/hosts/ and assign the latest IP (it detects the external IP auto-matically) to mantra.podzone.org. This way, the users do not have to remember anything, but  http://mantra.podzone.org:8000/index.html.

If you click on the Listen subtab, the browser should be able to open the listen.pls (playlist) file with a suitable application on the mobile OS.

You've got to utilize the power of free stuff on the internet.

Network utilization Stats..


Now, I was also interested in the network utilization stats on my wireless network due to shoutcast broadcast per user. When I played the station through streamfurious on my G1 phone, i monitored the local wireless network interface's bandwidth usage (11mpbs maximum bandwidth) and got this graph:

wireless-bandwidth-usage-from-task-manager

As you can see, it was using less than 1% of 11mbps bandwidth per mobile user.

Feedback welcome


If you found this article helpful and would like to discuss/express your views, please do leave a comment and we can discuss over web/email.

Thanks a lot for your time to read this article!