Tag Archives: wordpress

Create Thumbnail From Offsite Image Using Timthumb Beta

thumbnail
by petervanallen

I host most of my images in Picasa and Flickr, for along time i couldn’t use the native feature in WordPress to create custom thumbnail that i wanted, i could upload it and use custom fields, but it would be tediously boring to do that.

A couple of month ago a message from heaven came by to fulfilled my wishes and whisper it to Ben Gillbanks ear, the developer of timthumb. So thus came the timthumb beta for offsite image. After downloading it i tried it, my wishes fulfilled and it looks awesome! Oh Joy

Happy! Happy! Joy! Joy! from psherman420 on Vimeo.

This hack is similar with the one that i use on this website and this was a follow up from my previous post about how to create custom index post layout, but the method could be applicable for other WordPress themes.

Here is the screen shot on how the thumbnail will look like on the home page (i’m using thematicsamplechildtheme in the Thematic folder)

thumbnail screenshot

First we need to download timthumb beta at Binary Moon in here, put it on your child theme folder then create a folder called temp & cache (writeable 777)

Here are the code that we are going to use

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<?php
function remove_index_loop() {
  remove_action('thematic_indexloop', 'thematic_index_loop');
}
add_action('init', 'remove_index_loop');
 
function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];
 
  if(empty($first_img)){ //Defines a default image
    $first_img = "images/default.gif";
  }
  return $first_img;
}
 
function custom_index_loop() {
  global $post;
    /* Count the number of posts so we can insert a widgetized area */ $count = 1;
      while ( have_posts() ) : the_post() ?>
        <?php $counter++; ?>    
          <div class="column <?php if ($counter == 1) { echo 'one'; } else { echo 'two'; $counter = 0; } ?>">
            <div class="clear-fix">
              <div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?>">
                <?php thematic_postheader(); ?>
                  <?php if(catch_that_image()) {
                    echo '<a href="' .get_permalink(). '" title="' .get_the_title(). '"><img src="' .get_stylesheet_directory_uri(). '/timthumb.php?src=' .urlencode(catch_that_image()). '&amp;h=100&amp;w=240&amp;zc=1&amp;q=90"></a>'; } ?>
                    <div class="entry-content">
                    <?php the_excerpt(); ?>
                    <?php wp_link_pages('before=<div class="page-link">' .__('Pages:', 'thematic') . '&after=</div>') ?>
                </div>
            <?php thematic_postfooter(); ?>
          </div><!-- .post -->
      </div><!-- .clear-fix -->
   </div><!-- .column -->
   <?php comments_template();
    if ($count==$thm_insert_position) { get_sidebar('index-insert');}
    $count = $count + 1;
    endwhile;
}
add_action('thematic_indexloop', 'custom_index_loop');
?>

The code below are to catch the first image on the post

1
2
3
4
5
6
7
8
9
10
11
12
13
function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];
 
  if(empty($first_img)){ //Defines a default image
    $first_img = "images/default.gif";
  }
  return $first_img;
}

i use the_excerpt for the content so there’s no image there, i’m going to try catch the first image from post so i can feed it to the timthumb, this awesome function is from WPrecipes Jean-Baptiste Jung.

after catching it, we can call it with this

1
echo catch_that_image()

then i’m going to insert it to the custom index loop

1
2
<?php if(catch_that_image()) {
                    echo '<a href="' .get_permalink(). '" title="' .get_the_title(). '"><img src="' .get_stylesheet_directory_uri(). '/timthumb.php?src=' .urlencode(catch_that_image()). '&amp;h=100&amp;w=240&amp;zc=1&amp;q=90"></a>'; } ?>

change the h=100&w=240 for the size as needed

Voila! it’s done! simple right! :)

Create Custom Posts Layout in Home Page (Thematic Child Theme)

As I said before in the last post, there two ways to do this, First is using page template, the other one is using Thematic hooks & filter.


pic by Everything and the rest

What I want to describe here is using the theme filter & actions. if you’re lazy like me to read articles, download a couple of thematic child themes, see examples of filters and see the core of thematic and learning by doing.

After viewing the core, I notice that there are two or three files that I needed to see in adding filter for post layout. First, because I want to change the post layout in the home page so I checked function.php and search for the post or content filters. In there I was leaded to content-extensions.php (see the comment “Load custom content filters”). then I looked for thematic index loop (line 22 comment).

For this example i want to try to create two column of posts that will appear like this in home page, note that i’ll be using thematicsamplechildtheme (inside thematic folder) from Ian Stewart

screenshot

here are the code for basic index posts lay-out, if you want to copy paste it, put it in your child theme function.php, I will explain more after the code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php
function remove_index_loop() {
  remove_action('thematic_indexloop', 'thematic_index_loop');
}
add_action('init', 'remove_index_loop');
 
function snippet_index_loop() {
  global $post;
        /* Count the number of posts so we can insert a widgetized area */ $count = 1;
        while ( have_posts() ) : the_post() ?>
            <?php $counter++; ?>    
            <div class="column <?php if ($counter == 1) { echo 'one'; } else { echo 'two'; $counter = 0; } ?>">
                <div class="clear-fix">
                    <div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?>">
                        <?php thematic_postheader(); ?>
                        <div class="entry-content">
                            <?php the_excerpt(); ?>
                            <?php wp_link_pages('before=<div class="page-link">' .__('Pages:', 'thematic') . '&after=</div>') ?>
                        </div>
                            <?php thematic_postfooter(); ?>
                    </div><!-- .post -->
                </div><!-- .clear-fix -->
            </div><!-- .column -->
 
                    <?php comments_template();
                    if ($count==$thm_insert_position) { get_sidebar('index-insert');}
 
 
        $count = $count + 1;
        endwhile;
}
add_action('thematic_indexloop', 'snippet_index_loop');
 
?>

And for the styling, you could use this

1
2
3
4
5
.column{width:250px; display:inline;float:left; overflow:hidden;}
.clear-fix{display:box;}
.one{margin-right:40px;}
.hentry{padding:0;}
.column .entry-content{width:245px;}

Lets elaborate the code first

1
2
3
4
5
6
<?php
function remove_index_loop() {
  remove_action('thematic_indexloop', 'thematic_index_loop');
}
add_action('init', 'remove_index_loop');
?>

The first thing that we need to create is adding the remove function for the default thematic index loop. The default (as seen in the content-extensions.php) is thematic_index_loop.

then we add an action to replace the loop that we move, lets called it custom_index_loop

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
function custom_index_loop() {
  global $post;
        /* Count the number of posts so we can insert a widgetized area */ $count = 1;
        while ( have_posts() ) : the_post() ?>
            <?php $counter++; ?>    
            <div class="column <?php if ($counter == 1) { echo 'one'; } else { echo 'two'; $counter = 0; } ?>">
                <div class="clear-fix">
                    <div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?>">
                        <?php thematic_postheader(); ?>
                        <div class="entry-content">
                            <?php the_excerpt(); ?>
                            <?php wp_link_pages('before=<div class="page-link">' .__('Pages:', 'thematic') . '&after=</div>') ?>
                        </div>
                            <?php thematic_postfooter(); ?>
                    </div><!-- .post -->
                </div><!-- .clear-fix -->
            </div><!-- .column -->
 
                    <?php comments_template();
                    if ($count==$thm_insert_position) { get_sidebar('index-insert');}
 
        $count = $count + 1;
        endwhile;
}
add_action('thematic_indexloop', 'custom_index_loop');
?>

the code

1
2
<?php $counter++; ?>    
    <div class="column <?php if ($counter == 1) { echo 'one'; } else { echo 'two'; $counter = 0; } ?>">

add the two column, if you want three column, just add another elseif and change the $counter then adjust the styling, but for now i will only give the styling for two column.

also i use the excerpt for the content

1
2
3
4
5
6
<?php
<div class="entry-content">
   <?php the_excerpt(); ?>
   <?php wp_link_pages('before=<div class="page-link">' .__('Pages:', 'thematic') . '&after=</div>') ?>
</div>
?>

i’m not using the default loop for thematic index (thematic_content), because it will be strange to see full content in small width column.

and the last one is

1
2
3
<?php
add_action('thematic_indexloop', 'custom_index_loop');
?>

to insert the action.

for the styling of the column

1
2
.column{width:250px; display:inline;float:left; overflow:hidden;}
.clear-fix{display:box;}

overflow hidden makes every one happy :)

1
2
3
.one{margin-right:40px;}
.hentry{padding:0;}
.column .entry-content{width:245px;}

this styling is for more whitespace in the column.

by all means I’m still a noob, any and all feedback you can give would be helpful to me. please do leave a comments below.

Update:
This is an old article :) i may forgot a couple of things, but if you want to make three column using the function above, you add an else if in the code, the final code will look like this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function remove_index_loop() {
  remove_action('thematic_indexloop', 'thematic_index_loop');
}
add_action('init', 'remove_index_loop');
 
function snippet_index_loop() {
  global $post;
        /* Count the number of posts so we can insert a widgetized area */ $count = 1;
        while ( have_posts() ) : the_post() ?>
            <?php $counter++; $clear=''; ?>    
			<div class="column <?php if ($counter == 1) { echo 'one'; } elseif ($counter == 2) { echo 'two'; }  else { echo 'three'; $counter = 0; $clear='<div style="clear:both;height:0px;"></div>';} ?>">
			    <div class="clear-fix">
                    <div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?>">
                        <?php thematic_postheader(); ?>
                        <div class="entry-content">
                            <?php the_excerpt(); ?>
                            <?php wp_link_pages('before=<div class="page-link">' .__('Pages:', 'thematic') . '&after=</div>') ?>
                        </div>
                            <?php thematic_postfooter(); ?>
                    </div><!-- .post -->
                </div><!-- .clear-fix -->
            </div><!-- .column -->
 
                    <?php comments_template();
                    if ($count==$thm_insert_position) { get_sidebar('index-insert');}
 
		echo $clear;
        $count = $count + 1;
        endwhile;
}
add_action('thematic_indexloop', 'snippet_index_loop');

and the styling will be like this in the style.css

1
2
3
4
5
.column{width:160px; display:inline;float:left; overflow:hidden;}
.clear-fix{display:box;}
.two{margin:0 20px;}
.hentry{padding:0;}
.column .entry-content{width:245px;}

How to Add Typekit to your Thematic Child Themes

@font-face at-rule is one of the most anticipated feature in CSS3, it allow you to define custom font for your website, allowing you to upload fonts to your web server and deliver the font itself to the client browser

Typekit is a web service that provide fonts & the font delivery service for this use, the huge benefit of using Typekit is that you dont have to think about the font license that you’re going to use and the bandwidth that the font are going take, Typekit will take care of that. But lets get to the point on how to use it on your thematic child themes,

After signing in (currently on invitation only), you’re asked about the name and the address of your website (you can use localhost for testing environment) then you’re asked to add snippet code to your html head tag like this

1
2
<script type="text/javascript" src="http://use.typekit.com/XXXX.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

to use it on your thematic child theme use this code at functions.php

1
2
3
4
5
function childtheme_typekit() { ?>
<script type="text/javascript" src="http://use.typekit.com/XXXX.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<?php }
add_filter('thematic_head_scripts','childtheme_typekit');

(change the XXXX or change all the snippet code)

What this code does is put the script at your head tag. Easy right? if you want to know more about thematic you could visit Thematic Framework.

About Typekit, I was a late invitation on Typekit, i’ve notice on twitter that every body got the invitation since first august but i just get the invitation yesterday. My experience using typekit? it’s downright easy, u could automatically add font stack on the Typekit Editor in case the client browser doesn’t support @font-face.

after testing in localhost environment this is the screenshot of Typekit in action

This is good-dog font, using h1 selector with letter-spacing -1

Typekit comes in two version, the free and the pay version, the free version you’ll get less choice of font and you’ll get typekit badge while using it. There are 3 pay version scaling up the number fonts, bandwidth use & features.

Right now i’m using the free version, i haven’t thought in upgrading my account, because right now i dont have any plans on what i’m going to use it for.

Miabebo Shop: Nursing Covers & Diaper Bags

I’ve just finished helping my friend setting a simple online store for her last week, this project has been really an insightful experience for me, She gives many input to the design and response quick in every question i’ve ask, so development went fast. Without her input, the development wont be so quick, the only things that held us down is the product aren’t available when the website ready, so we have to wait a couple of days to fill the site with product pictures.

The site sell Nursing covers for breastfeeding, bib for baby and diaper bags. The language that are used is Indonesian because she targeted the Indonesian market first, but to her affirmation she also confirm that she is capable in dealing with international buyers.

Here are the screenshot of the site,

The question that may pop-up in your mind is why does an online store doesn’t have a shopping chart? It’s because the nature of the online consumer here in Indonesia. Using credit card in an online environment are still rare here, many of the Indonesian consumer doesn’t believe in the security of the interwebs and the popular bank here also doesn’t have the support in online transaction, they do have internet banking but they doesn’t support retailer to use their bank service on the retailer site. So the solution? using the good old fashion of contact form, even so, in my experience there still difficulty in using it, in that position, the default comment form of WordPress coming in, to back-up it up i also use chat-box and Yahoo messenger status ID.

Puspaningrum Theme

A couple of weeks ago, i got an email asking me to publish the design of the Thematic child themes of this site, so here it is. If u found bugs, just leave a comment or contact me.

The themes is simple and lightweight. Mostly i played only with font and layout, more about it you can read it here.

Screenshot

The Puspaningrum child themes uses two plugins. The CQS (custom query string) and Simply Yearly Archive. The CQS is to manage the view in the search, category, tags, archive month view and year view so it only appear four post for each page. The Simply Yearly Archive is for the archive page. Nevertheless the themes still work without the plugins.

How to use the Puspaningrum child theme

  1. Download the latest Thematic framework version here
  2. Download Puspaningrum themes
  3. If u want a custom query for the tags, category, search, year & month view appear nicely, just download CQS plugin here and set it like this screenshot
    cqs settings
  4. Download The Simply Yearly Archive if u want to have an archive page like this site
  5. if u want to change the logo just change logo.png (251x40px) in the images folder

Demo page? well just see the screenshot above or see this site, i currently use Puspaningrum theme. U can also add Google Analytics, just change the ID in functions.php line 159. The themes is GPL, a link back is appreciated but not required.

Using Thematic Child Themes

Third time’s a charm :) this is my third time creating child themes with thematic framework, there’s a learning curve to create it, like themes hooks and filters but all of them can be tackle in a matter of minutes. All of the unanswered ones can be found & solved in the thematic forums which have a very friendly community.

I hope from this moment on, I wont change themes anymore, maybe just re-align it in the future :) The purpose of the themes is simple, i dont want to feel bloated with many post in one page. Wont scroll much to read the content and of course i want to have the right font on the right place :)

The old themes i use vigilance themes from jestro

Old themes

the themes is awesome but i never really click with the font and the structure. Now, i’m using my own child themes based on thematic framework. The purpose large header for the title of the writing, because i think people will get tired seeing those same large logos over and over again but it will be more interested is the focus is in the title of the current content.

here are the new themes screenshot

my thematic childthemes screen shot

i wouldn’t lie that i get a lot of the inspiration of the design of this child themes from Coudal and Jason Santa Maria website design. I was looking an inspirational use of Georgia font and Jason’s site happen to give me a really excellent example on how to use one.

The site is still along way from finish, i didn’t add twitter widget yet but i’ve add my recent google reader’s favorite link. Didn’t use favicon yet, I’m going to mock-up a little touch of graphic on the site in the near future.

next are a couple of function that i’ve use in my functions.php on my thematic child theme.

i’ve change the header so there’s no dropdown menu here and i’ve removed , replace it with the new ones. Here’s how i edit the header title on thematic, also adding new title and access using thematic_header() filters

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// Delete drop down!
function childtheme_head_scripts() {}
add_filter('thematic_head_scripts','childtheme_head_scripts');
 
// Remove default Thematic actions
function remove_thematic_actions() {
 remove_action('thematic_header','thematic_blogtitle',3);
 remove_action('thematic_header','thematic_access',9);
}
add_action('init','remove_thematic_actions');
 
function childtheme_menu_args($args) {
    $args = array(
        'show_home' => 'Home',
        'menu_class' => 'menu',
        'echo' => true
    );
	return $args;
}
add_filter('wp_page_menu_args', 'childtheme_menu_args');
 
function childtheme_title(){ ?>
    		<div id="blog-title"><span><a href="<?php echo get_option('home') ?>/" title="<?php bloginfo('name') ?>" rel="home"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo3.png" alt="<?php bloginfo('name') ?>"/></a></span></div>
<?php }
add_action('thematic_header','childtheme_title',3);
 
function childtheme_access(){?>
	<div id="access">
		<?php wp_page_menu('sort_colum=menu_order')?>
	</div> <!--#access-->
<?php }
add_action('thematic_header','childtheme_access',9);

after that i’ve change a little bit on the post_meta and the post_footer. The last function that i’ve use is adding google analytics code on the footer. Here’s how to add Google analytics code on the thematic child themes footer (before close body tag)

1
2
3
4
5
6
7
8
9
function analytic_footer() {?>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "XXXXXXX";
urchinTracker();
</script>
<? }
add_filter ('thematic_after', 'analytic_footer');

all of the functions here is almost the same as the last time i post about thematic.

Update:
I’m releasing this thematic child theme, it’s called Puspaningrum Theme, you can view it here

My list of things to remember when re-design my own site

The worst part in creating or modifying WordPress themes is the multiple browser compability, a lot of my friends and client use old PC and use (gasp!) Internet Explorer, using those dreaded version 5 and 6. So if they find the site that i help make or create looks weird, shame on me. In the next couples of weeks maybe i’m going to re-design my site, i should have re-align but i felt this themes doesn’t click with me yet after a couple month. So I decided to change it.

The List

I usually have a list of what i check the themes before i implemented the design on my site, here it is and a couple of changes that i’m going to do with the next design

  1. Themes lay-out should cross browser compatible. i check it at least to 4 browser: IE 6 and 7, Firefox, Opera and Safari.
  2. Is the comment form awesome or not.
  3. Not using PNG transparency (i’m sorry but i hate to use hacks on IEs)
  4. Check the navigation menu, sometimes IE act nasty on this issue
  5. Because the interwebs is still expensive here in indonesia, specially in rural area, i tend to use less image on the themes, because here, the internet connection is really slow.
  6. Checking out the http request using firebugs, well this is a quite long explanations. but the keyword is, the more request files from the external page that is loads up, the page load more slowly.
    The files that sometime creates a huge pile of http request is, not using the CSS Sprites. Those million files of css and javascripts, the style.css, reset.css, the grid css, the layout css, the lightbox script, the form contact script, the rating script, u name it, it’s a huge pile of request too for sure. so i want to minimalize it in the next future.
  7. I want to play with font lots more, no more graphic heavy

Well i guess i better start it.

Smush It!

Asleep on a sunbeam
by .little.princess.

Been busy this couple of weeks due to my personal project. So i haven’t have the time to write a post, but many interesting things that i found during this a couple of weeks. The most interesting things is i remembered that i promised my friends to help her develop a site for her organization last december.

Seeing that it’s been to long delayed, I contact her that i’ll do it immediately postponing my personal project for two weeks. In theory if we routinely communicate at each other two weeks it’s a bit too long, but in reality it’s quite short. There are a couple of problem that we’ve stumbled, and i know that two weeks is too short for her demand, but seeing that she had limited budget i can’t help her too long. At the start of the project I immediately ask a couple question regarding her wants on the website, i figured out that she want a magazine type of site.

clipboard01

With the limited resources and time, in two days i use and customized Mimbo 3.0 theme from Darren Hoyt,and the result is perfect. The font that i use in the title is change, using big italic Georgia font for the h2 and the other things i change is the color themes to yellow. Right now i’m still waiting for her reply regarding the content.

logo

The other things that is interesting is i found Smush it!! This site is very awesome for optimizing pictures for web. A quote from the site

Performance just got a little bit easier. Optimizing images by hand is time consuming and painful. Smush it does it for you.

The result of using it is fantastic, on some occasion it’s better than using the “Save for webs” feature on adobe photoshop.

fontsquirrel

Other things that i’ve found interesting while exploring fonts, i found fontsquirrel which different from dafont.com, where comes with a variety of license, with fontsquirrel the font comes with commercial-use license.

There are also many interesting things i found regarding understanding web development like PatternTap and many articles from smashing magz. but i guess it’s time to get back to work.

Learning Thematic

At the moment i was designing a new themes for my wife, but it is still not finished yet because i’m not click with the final result, i want to change it again if i still felt awry with the design. So i wont give screen shot of the site in this post.

Awry
Pic by papadont

What i want to tell u in the process is, i was amaze this couple of week, i learn a lot. In the process of re-designing the site I use Thematic Theme Framework from Ian Stewart for the based framework, using child themes to create new themes, same as i did with my site. I was amaze how easy it is to create child themes with thematic, i use Thematic before on this site a couple of month a go but didn’t quite grasp yet the full feature of Thematic, i was really lazy back then :) boy do i miss a lot of things because of this laziness.

The first thing that help me the most in the process is Thematic provide me with 960 grid system background template (12 column 18px height) to help me change layout, using it as the background on the body (just un-comment it) i could easily move within the grid system. But the template that was provided is the 12 column, i prefer the 16 columns, so i create a new background template with 16 column with 18 pixel high based on the 960 Grid System, here’s the template if u want to use it.

Other things that help me also are guide on adding and customizing page template on child themes in Ian’s blog. The forum also filled with helpful people, just be sure to post there politely :)

Oh yeah in case u want to add Home link to the navigation bar, just add this code to your functions.php in your child themes folder, this is the first thing i look in the forum, the newbie code to add home in your nav bar :P

function nav_menu() {
	$menu = '<div id="menu"><ul>';
	$menu .= str_replace( array( "r", "n", "t" ), '', wp_list_pages('include=24,27,28&title_li=&sort_column=menu_order&echo=0') );
	$menu .= "</ul></div>n";
	echo $menu;
} 
 
add_filter( 'wp_page_menu', 'nav_menu' );

There are others beside home that i want to add in the navigational bar, one of them are rss icon, feed by email and search bar. The current code below is one of the way to add all of them and adding favicon before the head tag and also adding google analitycs code before the close of body tag

<?php
function childtheme_favicon() { ?>
    <link rel="shortcut icon" href="<?php echo bloginfo('stylesheet_directory') ?>/images/favicon.ico">
<?php }
add_action('wp_head', 'childtheme_favicon');
 
function home_menu() {
    $menu = '<div class="menu"><ul>';
    if ( is_home() ) {
        $menu .= '<li class="current_page_item"><a href="';
    }
    else {
         $menu .= '<li><a href="';
    }
    $menu .= get_option('home') . '/" title="Home">Home</li>';
    $menu .= str_replace( array( "r", "n", "t" ), '', wp_list_pages('title_li=&sort_column=menu_order&echo=0') );
    $menu .= 	'<li><div class="clear" id="rss-feed"> 
					<a href="http://feeds.feedburner.com/XXXX" class="rss">RSS</a>
					<a href="http://www.feedburner.com/fb/a/emailverifySubmit?feedId=XXXX&amp;loc=en_US" class="email">Email Updates</a>
				</div></li>';
    $menu .= '<li><form action="'.get_option('home').'" method="get" id="searchform">
					<div class="">
						<input type="text" tabindex="1" size="20" value="" name="s" id="s"/>
						<input type="submit" tabindex="2" value="Search" name="searchsubmit" id="searchsubmit"/>
					</div>
				</form></li>';
	$menu .= "</ul></div>n";
    echo $menu;
}
add_filter('wp_page_menu', 'home_menu' );
 
function analitycs_footer() { ?>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("XXXXXXX");
pageTracker._trackPageview();
} catch(err) {}</script>
<?php }
add_filter('wp_footer', 'analitycs_footer' );
?>
</php>

Don’t forget to customize the css to make the rss button, rss feed by mail and the search bar more pretty :)

Website New Themes

I need a new themes that is light weight and have great typography. That is when Press Box Theme for wordpress from creative synthesis come in handy.

I fall in love the instant i saw the design. It was the color combination and the typography that strike me the most, so i try and right now i’m customizing it. There are light setting, contrast and dark. I had enough with light setting, i want to try the dark setting on this website.

While changing themes i also add hittail code, i want to have a certain course for this site to develop, not just for entertainment.

Here is the screenshot of my last theme

The themes that i use before is Thematic Framework from Ian Stewart, I love the simple color tone but i was kind of suck at customizing it. Well actually i like the custom change that i’ve made but my wife think it’s too pale. Its really hard to leave Thematic because it had the best widget setting i’ve ever seen in my entire time using WordPress (For a free themes.). I dont need to change the core of the themes to add ads in single post, just add a widget in it. There are 3 widget position for single post, 2 position in sidebar, 3 for the footer and 3 for the index page. That is quite a selection. but i want to spice things up, change a little, so i use PressBox, here are the screenshot

The dark tone that i choose is just for a change of scenery and it more light in the eyes too. Hope this is going to be best themes i’ve ever use :D

Cheers!