Bah oui, en ce moment je suis pas mal sur le “bench” alors je m’occupe comme je peux. Donc voila, j’ouvre mon photoblog. Ce dernier ne change en rien les photos que je telecharge sur mon flux flickr. Le photoblog me servira uniquement a telecharger une photo de temps en temps parce que (a mon humble avis) j’estime qu’elle sort un peu du lot par rapport a toutes les autres que je prends. Si vous voulez y faire un tour, il suffit de cliquer ici ou bien de suivre le menu permanent FOTOBLOG ci-dessus.

Pour les geeks parmis vous, le photoblog est toujours propulse par wordpress, mais il fait utilisation d’un plugin intitule YAPB Yet another photoblog. Vous pouvez telecharger ce plugin ici.

One of the things I wanted to add to this theme, was support for widgets. Grid Focs is a 3 column theme. Out of the box, the two right most columns contain hard coded elements. But what if you wanted to change the content of those two columns regularly with no fuss? Widget support is the ticket.
So, inline with Derek’s philosophy here is my contribution to the theme: I bring you, how to widgetise the Grid Focus wordpress theme. In this tutorial I will show you how you can add widget support to the columns shown in red in the picture below.

It’s very simple and you can probably do it in 5 minutes. Remember before you start, to backup all the files you will require to modify – I will not be held responsible if it does work. This has been tested on my web site running wordpress version 2.2.

Ok, let’s get started.

Step 1:

The first thing you need to do is to create a file called ‘functions.php’ in which you have add the following code. This is a file that WordPress looks for and reads it if it finds it:

<?php
if ( function_exists('register_sidebar') )
    register_sidebars((2),array(
        'before_widget' => '<div class="sidebar_widget">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));
?>

Once you have done that, save your file and upload it in the same folder that holds your theme.

Step 2:

In this step you will need to modify the file originally provided with the theme called ‘second.php’. This step really is up to you as it depends on much of the original structure you want to keep. For example you might want to keep the link sections and add widgets, you might want to keep the meta section and add widgets – it’s up to you. In my case, I have kept the search form and added widget capability.

The original code of the file ‘second.php’ was:

<div id="midCol">
	<?php include (TEMPLATEPATH . '/searchform.php'); ?>
	<div class="middle_links">
		<h3>Your choice links</h3>
		<p>Your choice links. Let readers know what they should be reading on your site.</p>
		<ul>
			<li><a href="#">Link Title</a> - Link description (optional)</li>
			<li><a href="#">Link Title</a> - Link description (optional)</li>
			<li><a href="#">Link Title</a> - Link description (optional)</li>
			<li><a href="#">Link Title</a> - Link description (optional)</li>
			<li><a href="#">Link Title</a> - Link description (optional)</li>
		</ul>
	</div>
	<div class="middle_links">
		<h3>Your choice links</h3>
		<p>Your choice links. Let readers know what they should be reading on your site.</p>
		<ul>
			<li><a href="#">Link Title</a> - Link description (optional)</li>
			<li><a href="#">Link Title</a> - Link description (optional)</li>
			<li><a href="#">Link Title</a> - Link description (optional)</li>
			<li><a href="#">Link Title</a> - Link description (optional)</li>
			<li><a href="#">Link Title</a> - Link description (optional)</li>
		</ul>
	</div>
	<div class="middle_links">
		<h3>Subscribe</h3>
		<p>Stay updated on my meandering thoughts &amp; activities via RSS (Syndicate).</p>
		<ul>
			<li><a href="feed:<?php bloginfo('rss2_url'); ?>" title="Full content RSS feed">Content RSS</a> - Straight to your reader</li>
			<li><a href="feed:<?php bloginfo('comments_rss2_url'); ?>" title="Full comments RSS feed">Comments RSS</a> - Add to the discussion</li>
		</ul>
	</div>
	<div class="middle_links">
		<h3>Meta</h3>
		<ul>
			<?php wp_register(); ?>
			<li><?php wp_loginout(); ?></li>
			<?php wp_meta(); ?>
		</ul>
	</div>
</div>

After my changes, my file now looks like:

<div id="midCol">
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>
<?php endif; ?>
</div>

Step 3:

In this step you will need to modify the file originally provided with the theme called ‘third.php’. Again, this depends on you – on how much of the original file you want to keep. In my case, I have kept the original file structure (i.e the option to add picture links) and simply added widget capability before the links.

The original code of the file ‘third.php’ was:

<div id="tertCol">
	<div id="elseWhere">
		<h3>Before you go</h3>
		<p>Going so soon? May these links be a guide to web enlightenment. Schwing!</p>
		<ul id="imgLinks">
			<li><a href="http://5thirtyone.com/grid-focus" title="Download Grid Focus by: Derek Punsalan"><img src="<?php bloginfo('template_directory'); ?>/images/guide/grid_focus_531.gif" alt="Grid Focus - 531" /></a></li>
			<li><a href="http://is.derekpunsalan.com/" title="Visit Derek Punsalan...is"><img src="<?php bloginfo('template_directory'); ?>/images/guide/is.gif" alt="Derek Punsalan...is" /></a></li>
		</ul>
	</div><!-- close #imgLinks -->
</div><!-- close #tertCol -->

After my changes, my file now looks like:

<div id="tertCol">
	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
	<?php endif; ?>
	<div id="elseWhere">
		<h3>Before you go</h3>
		<p>Going so soon? May these links be a guide to web enlightenment. Schwing!</p>
		<ul id="imgLinks">
			<li><a href="http://5thirtyone.com/grid-focus" title="Download Grid Focus by: Derek Punsalan"><img src="<?php bloginfo('template_directory'); ?>/images/guide/grid_focus_531.gif" alt="Grid Focus - 531" /></a></li>
			<li><a href="http://is.derekpunsalan.com/" title="Visit Derek Punsalan...is"><img src="<?php bloginfo('template_directory'); ?>/images/guide/is.gif" alt="Derek Punsalan...is" /></a></li>
		</ul>
	</div><!-- close #imgLinks -->
</div><!-- close #tertCol -->

All you now have to do, is to go to the ‘Widgets’ section (under Presentation) in the admin part of your site and add the widgets you want.

I have included has a ‘help’ an archive file that contains all three created/modified files. You can grab that archive file by clicking on the shopping cart below.

These functions are:

• the_content (to which certain parameters can be passed). This function will output images, links…basically everything as you typed it in your post.
• the_excerpt (to which no parameters can be passed). This function will output the post excerpt if there is one or it will output up to the first 55 words of your post content in a pure text form.

As you will have noticed I use both these functions here at renet@web. I use the_content to output the latest post and then the_excerpt to display the next 4 posts.

There are two things that I never liked with the function the_excerpt:

• The post excerpt displayed terminates with the characters [...]
• The length of the post excerpt is 55 words long and I never knew where that value could be changed

But despair no more, thanks to John Wrana a cure is at hand and in fact full credits are given to him for coming up with this trick of sorts. I should also warn you that if you do not understand what is indicated below, then you should not attempt to do this at home (then again maybe it’s my accent that makes it hard to understand) – this implies changing standard WordPress files – proceed at your own risk.

My comprehension of German is a bit dodgy (haven’t been using it for quite some time), but what I could make in John’s post is that we need to change a bit of code in the file functions-formatting.php which you should find in the wp-includes folder of your WordPress installation. What you need to do is to, in that file find the function

d3BfdHJpbV9leGNlcnB0KCk6

.

Bearing in mind what I said above, in that function I changed two things:

A) The number of words displayed in the post excerpt.
1. Change in the line where it says:

2. JGV4Y2VycHRfbGVuZ3RoID0gNTU7

3. the number of words you want to see in your excerpt.
4. Change the value ’55′ to whatever you want.

B) The standard ending characters [...] in the post excerpt.
1. Change in the line where it says:

2. YXJyYXlfcHVzaCgkd29yZHMsICdbLi4uXScpOw==

3. The characters [...] to whatever you want.
4. You may decide to just change it to something like –> or … or >>>

Before, I press this post, I should also point out that Chris J. Davis has written a wonderful post where he explains how to customize post excerpt using a more sophisticated method.

Just a quick update. My reboot is featured here.

The next design came out at the end of 2005. This site design was inspired by the very snazzy binarybonsai website. Again I used the relaxation theme as a base. I dropped the sidebar, changed the code to display the post content and no longer the excerpt, added some plugins to display the latest posts and comments, implemented the asides technique for displaying posts and added the ajax commenting method. A little later down the track I experimented with the script.aculo.us javascript libraries and added a sliding navigation bar (drawer like). You can see a larger picture of the theme here.

Recently I stumbled across the css reboot site and read that a reboot would be happening on May 1st. At first I thought I would not have enough time to get something decent of the ground – but what the hell I thought, if it is not ready for this reboot it’ll be for the next one. Because I like the one column theme, my first approach was to try and keep it. I also thought of having a grey background that would contrast nicely with colourfull post pictures. You can see a larger picture of the theme here.
Something wasn’t right – I wasn’t really pleased with that design. So I went back to the drawing board and that is how the present look came to be. You can see a larger picture of the theme here.
Once I felt sorta happy with the design, I asked for some feedback on the wordpress forums and so far the response has been pretty positive. I’ve still got a few days to iron out the last glitches…

Here is the code that is needed to do it – simple – (‘foo’ represents the

ZGl2

you want to ‘animate’)

DQo8RElWIGlkPWJ1dHRvbj4NCjxhIGhyZWY9IiMiIG9ubW91c2VvdmVyPSJFZmZlY3QudG9nZ2xlKCdmb28nLCdzbGlkZScpOyByZXR1cm4gZmFsc2U7Ij4NCjxJTUcgc3JjPSJwYXRoL3RvL2ltYWdlL3RvZ2dsZXIuanBnIiBib3JkZXI9MD48L0E+IA0KPC9ESVY+DQo=

Second I think that the DomTab referenced in Kirk’s post seems to be a bit of an overkill for the job that is expected. So i’ll try to make it simpler…I think.

The following has been tested on the following configuration:
- OSX / Safari
- OSX / Firefox
- WinXP / Internet Explorer

If it does not work on your setup, chances I cannot do much about it.

The basic idea here is that we want to offer a user, ‘Tabs’ to navigate through a section of your site. You want every click on a tab to load some content in a

PGRpdj4=

tag. Yet you only at anyone time want to see the content of one tab in your browser. (you still with me?).

In javascript I can make all the

PGRpdnM+

‘s on my page disappear, but you don’t want to do that (because that would probably hide your whole page). I can also hide only one

PGRpdj4=

but again that is not what I want to do (I don’t know which tab is active and therefore need to hide them all).

So, I took the road less travelled (or the easy way out, whatever you want to call it). I’ve added a function that hides all the

PGRpdj4=

‘s of my tab contents (naming each and everyone of them – which is OK because you would’nt have a zillion tabs anyway).

This example assumes that there are 4 tabs. What it does, is that it hides all my

PGRpdj4=

‘s that have an

aWQ9InRhYjEi

(tab2, tab3 and tab4 remember we have 4 tabs)

ZnVuY3Rpb24gaGlkZW0oKQ==

CQl7

CQkJZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3RhYjEnKS5zdHlsZS5kaXNwbGF5ID0gIm5vbmUiOw==

CQkJZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3RhYjInKS5zdHlsZS5kaXNwbGF5ID0gIm5vbmUiOw==

CQkJZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3RhYjMnKS5zdHlsZS5kaXNwbGF5ID0gIm5vbmUiOw==

CQkJZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3RhYjQnKS5zdHlsZS5kaXNwbGF5ID0gIm5vbmUiOw==

CQl9

Now we need a function, so that every time I click on a tab, it will
1) hide all my

PGRpdj4=

‘s and
2) display the

PGRpdj4=

that corresponds to the tab I clicked…and this of course has to be done using a slick slide effect.

To do this we have this function (this code was largely inspired from this article)

ZnVuY3Rpb24gc2hvdyhsKQ==

CQl7

CQkJaGlkZW0oKTs=

CQkJdmFyIGlkPWwuaHJlZi5tYXRjaCgvIyhcdy4rKS8pWzFdOw==

ICAgICAgICAgICAgbmV3IEVmZmVjdC5CbGluZERvd24oZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoaWQpLHtkdXJhdGlvbjoxLjB9KTs=

CQl9

Note that I’m first using the function

aGlkZW0oKQ==

to hide my

PGRpdj4=

‘s and then on the last line I use a BlinDown effect to slide in my

PGRpdj4=

.

Both these functions have been added to a separate file called magic.js and not included in the main script (but that is my choice).

Now that I have my functions, here is how I call them:

PHVsIGlkPSJtYWlubmF2Ij4=

CTxsaT48YSBocmVmPSIjdGFiMSIgb25jbGljaz0ic2hvdyh0aGlzKTsiPlRhYiAxPC9hPjwvbGk+

CTxsaT48YSBocmVmPSIjdGFiMiIgb25jbGljaz0ic2hvdyh0aGlzKTsiPlRhYiAyPC9hPjwvbGk+

CTxsaT48YSBocmVmPSIjdGFiMyIgb25jbGljaz0ic2hvdyh0aGlzKTsiPlRhYiAzPC9hPjwvbGk+

CTxsaT48YSBocmVmPSIjdGFiNCIgb25jbGljaz0ic2hvdyh0aGlzKTsiPlRhYiA0PC9hPjwvbGk+

PC91bD4=

Every time I click on a tab, its going to call the fucntion

c2hvdygp

which itself calls the function

aGlkZW0oKQ==

.
To finish it off this is what the content of the tabs could be. The content does not have to be static html, it could come from a PHP code.

PGRpdiBpZD0idGFiMSI+VGFiIDEgLSBjb250ZW50IG9mIHRhYjEgLi4uPC9kaXY+

PGRpdiBpZD0idGFiMiI+VGFiIDIgLSBjb250ZW50IG9mIHRhYjIgLi4uPC9kaXY+

PGRpdiBpZD0idGFiMyI+VGFiIDMgLSBjb250ZW50IG9mIHRhYjMgLi4uPC9kaXY+

PGRpdiBpZD0idGFiNCI+VGFiIDQgLSBjb250ZW50IG9mIHRhYjQgLi4uPC9kaXY+

Note that for every

PGEgaHJlZj0iI3RhYlgiLi4u

call I have a corresponding

PGRpdiBpZD0idGFiWC4uLg==

.

You can see this code in action here. Feel free to take it and make it better. You’ll also see that there is no css data in there (except for a couple of

PGRpdj4=

properties) – that’ll be for another post.

I welcome your comments, so feel free to make them.

I’ll re-phrase that…I’ve got a couple of things to sort before I move to the new Zenphoto picture gallery!

A new standard is trying to be established on the web to identify syndicated content. That syndicated content is identified by the above logo. Spread the word and use it. You can get a whole collection of Feed icons in numerous formats from feedicons.