WordPress Experiments

My last few weeks can be described with one word NEW.
First of all I got a new job which was followed with new tasks, day schedule, priorities (my hobbies have to wait till I have more free time ). I got new bike – OK, not really new because it’s older then me ;) but it’s my OWN and I don’t need to ask other people for favors any more (moreover – it’s as Dutch as it can be – Gazella without gears and with back break ;). I’ve discovered new friends.
Then came WP related news. Release of WP 2.5 that made me to think about upgrade (my previous version was 2.2.3) and get new theme since I still had the one I started this website with.
Before I even started to look for new template I knew already it has to be one from those coded by Sadish Bala since I know without checking their functionality and usability suits my needs. I’ve chosen Intense (one sidebar on right side) but redesigned it a little: made it wider, changed colors and some functionalities.
Then I’ve downloaded WP 2.5. Honestly the main reason I didn’t upgrade earlier were built in tags with very poor tag cloud. But I’ve found Configurable Tag Cloud Plugin by Keith Solomon so I lost my last excuse ;). I’ve spent almost two weeks (result of new job – very limited spare time) playing with it, testing plugins. I have to admit they did really good job and list of new features is long and impressive. So very shortly what I like/don’t like:

• it took me a while to get used to new layout of admin panel; what for they moved Settings, Plugins and Users tabs to right side? Somehow it doesn’t make much sense for me
• in Write Post/Page panel categories and page template were moved below editor leaving empty space in the sidebar
• there is no list of all tags visible
• ID’s of posts, pages, categories and links disappeared from the Manage panel which results in extra work when using functions exclude/include based on ID
• cool Flash Uploader for media files (note! In WP 2.5 it doesn’t work properly in Opera browser; fortunately WP 2.5.1 already has a fix for it ;)
• it’s good to know new version of plugin is available and link to it is included; but I wouldn’t have trust automate upgrade option; it didn’t work for Lightbox and WP-Highslide plugins
• I can easily set size of thumbnails and medium (new option) pictures; no more messing with core files ;)

That list isn’t complete. It contains only thoughts I had after one evening with WP 2.5. Just very first impression ;).
I hope I finally find some time for new posts as well. Especially that I’m full of ideas :).

I don’t take part in many events that happen in the blog-world (maybe I should say WordPress-world) but that one seemed to be different and I feel like it’s really cool one.
CSS Naked Day is being organized for the third time. In 2006 Dustin Diaz wrote :

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and; well, a fun play on words.

I’m not professional web designer but I know more about it then average user of Internet. I know it takes some effort, time and creativity to make good design. Good would mean not only looking and working properly in most popular browsers (including number #1 ;) IE 6.0 ) but also friendly for other users.
And I know how it is when someone *forgets* to give you credits. When someone sign up under your work.
So let’s go naked to show respect to all who make good designs!
UPDATE. Below there’s a screenshot of WordPress experiments during that day ;)

Last time I have described how to create tabs with background image that changes when moving mouse over it. Here is a short update for “none-WordPress powered” websites ;).
The only one challenge was to make ‘current page’ to work. It didn’t took me much time to find a solution.
Each php page need to start with: <?php $thisPage="index"; ?>
Of course name within quotation marks need to be unique for each page and it’s helpful if it reflects its content.
Then comes html markup for navigation tabs:

<div id="menu">
<ul id="tabs">
<li class="page"<?php if ($thisPage=="index") echo " id=\"currentpage\""; ?>>
<a href="http://website-url/index.php" title="Main Page">Main Page</a></li>
<li class="page"<?php if ($thisPage=="about") echo " id=\"currentpage\""; ?>>
<a href="http://website-url/about.php" title="About">About</a></li>
<li class="page"<?php if ($thisPage=="news") echo " id=\"currentpage\""; ?>>
<a href="http://website-url/news.php" title="News">News</a></li>
</ul>
</div>

And CSS stylization:
Continue Reading »

I was pretty busy recently but I hope I will be able to share with you results of my recent projects ;).
Pretty often we use image as background of navigation tabs. Applying them is pretty easy. We need to create image and cut it into two pieces. Smaller one – 15 px wide – is assign to <a> element and fixed on the left side of tab and bigger one – 200 px wide – is assign to <li> element and fixed to the right side of tab. This way tab background can stretch when we put more content into it.
Problems starts once we want to have different background image when moving mouse over them. Actually there is only one problem – IE – that is able to apply pseudo-class hover only for <a> elements. Hence it doesn’t display proper background on right side of the tab because it has <li> element assigned.
But there is a way to go around and have functional menu working even in IE. Solution I provide below isn’t my original idea. I have learnt it thanks to google ;) . Mainly. It is powerful source of information if you know how to ask right questions. This way I’ve found few great articles on that subject that helped me to solve my issue. I hope it will be useful for you too!

In WP

All list items (li) generated by wp_list_pages() are marked with the class page_item. When wp_list_pages() is called while displaying a Page, the list item for that Page is given the additional class current_page_item.

We need that information to create proper css.

First goes html markup usually found in header.php file:

<div id="menu">
<ul id="tabs">
<li <?php if(is_home()){echo 'class="current_page_item"';}?>><a href="<?php echo get_settings('home'); ?>/" title="Home">Home</a></li>
<?php wp_list_pages('depth=1&title_li='); ?>
</ul>
</div>


Now goes style.css:
Continue Reading »

Treść tego wpisu jest dostępna również w języku polskim

Most WorPress users still use categories to assign particular post to pre-defined subject. Sometimes we would like to emphase this using different color for post title or background. In other cases we want to skip the date of publication or remove comments template from posts belonging to particular category.
It’s much easier to achieved then you may think although it requires some work [nothing is easy ;)].
I will explain you how to do that in index.php file.
That’s the_loop from default Kubrick theme:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> by <?php the_author() ?></small>
<div class="entry"> <?php the_content('Read the rest of this entry &raquo;'); ?> </div>
<p class="postmetadata">Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
</div>
<?php endwhile; ?>

First we need to introduce variables depending on categories. We use function in_category(‘ID’) where ID need to be replaced with number of category we want to apply this variable to. Then in style.css file we need to add necessary stylization like different font or background color.

Continue Reading »

The most common home page on WP powered site contains posts listed in chronological order (from the newest to the oldest one). But sometimes we need different layout. Fortunately WP is quite flexible and allows to create many customized lists of posts.
I’m not going to list all of them since I guess such list would never end up. But I will show some of the most popular customizations including required changes.
All changes will be applied to index.php file (the one within folder with theme we use) since that’s the one responsible for main page look.
I have already written about two custom main pages:

• displaying one post plus list of titles of other posts – Main Page – one post plus list of titles of other posts
• excluding one particular category from main page – http://www.nietoperzka.com/wptraining/about-category-xphp-file/ (first paragraph)

But they use different functions.
Here I would like to show how functions like <?php $posts=query_posts($query_string . ' '); ?>, <?php query_posts(" "); ?> and <?php $temp_query = $wp_query; query_posts(' '); ?> can be used.
The best one (in my opinion ;) ) is the first one. It has one important advantage over the other two. If we set to display 10 posts per page(in admin panel -> option -> reading) and we have more then 10 posts meeting the condition we set in our index.php file functions <?php query_posts(" "); ?>and <?php $temp_query = $wp_query; query_posts(' '); ?> WON’T work properly. On following pages we will see the same posts as on the main page.. That’s why I would recommend them only in situations when number of posts we want to display on main page is smaller then number of posts per page set in admin panel.

The most common usage (in my practice):
1. <?php $posts=query_posts($query_string . ' '); ?>
In index.php file we need to replace <?php if (have_posts()) : while (have_posts()) : the_post(); ?> with below piece of code to have:
Continue Reading »

Uahh.. that’s quite a long time since my last post here ;).

- – -Short ‘excuse’
I’ve been working on Polish translation of some entries and WordPress Codex documentation. Apparently in my country even among people occupied with internet/computer related stuff knowledge of English seems to be rather basic. I was kind of surprise with this because I thought this language is already very popular.. Anyway I decided to ‘help’ some people interested in WordPress and prepare some texts in Polish. And that takes lots of time ;). But.. Christmas is coming and finally I have some extra time (that’s weird actually).
- – -End of ‘excuse’

Few times I was asked how to export links (Blogroll) to new WordPress installation. Below there is a solution I’ve found looong time ago on WP forum. Unfortunately I don’t remember name of an author of this script. If someone knows it I will appreciate feedback so I can include this information.

Importing link to WP is easy if we have them saved as .opml file (in admin panel there is tab Links -> Import Links). So the only one difficulty is export links from the old WP. Below is script you can download and save as links2opml.php. Then you need to upload it to your old WP installation (the one you want to export links from) to the same folder as wp-config.php file (top folder of installation).
Next step is to login to admin panel of WP you want to import links to, and go to Links -> Import Links. Add URl which will look like http://url-of-site-you-import-links-from/link2opml.php. And that’s it. Piece of cake .
  Export of links (2.3 KiB)

I know I’m not normal ;) . I mean when I create a project that is powered by some software I don’t focus only on project itself but I’m also trying to learn as much as possible about software. I’ve realized there is no chance to make very good project without knowing how the software works, what possibilities it offers and how can I improve them.
It’s pretty irritating when people create just graphic (= only main page look!) for WordPress and then ask:

How shall I apply it to WordPress? I have heard it’s a very good system but I have never worked with it before. Can you help me to create my own theme?

I wonder what really do they expect. That someone will create theme for them based on this graphic? Apparently seems like that’s exactly what they do want. They really have no idea how WP works and how much time it requires to make sure everything works fine .
Here is example I worked on last few days. The original theme is Curved designed by Aditi Tuteja from TextNData.
I was asked to use it is an inspiration for three columns theme with Web 2.0 look [here it means using glossy, transparent colors and gradients plus nice rounded corners]. Cool! I like such challenges :).
Continue Reading »

Tadaaam! My first serious modification of theme released for downloads .
On my sites I use themes created by Sadish Bala because.. they are just great. I have played with them long enough to feel comfortable with (almost) all kind of modifications. Hence I decided not only create MistyLook (I guess the most famous from all) with two sidebars but also make it available for downloads.
I didn’t change much apart from adding extra sidebar and creating new header and profile images. I also changed the way particular elements of the list in sidebar are being displayed – the background is constant, no sidebox for each part of the list. I think it looks better when you have to sidebars side by side.
This version has all features regular MistyLook has such as Page Template for archives, contact and links pages [to use them you need to create new page and assign appropriate template to it ] and co-operation with widget plugins and the newest version of WordPress (2.3).
I will appreciate all kinds of opinion and information on how it works for you and if you have encountered any problems (although I do hope you won’t have any ).
You can download it here or on official MistyLook site. Have fun!
  MistyLook with 2 sidebars (97.8 KiB)

Tooltip is (according to Wiki)

a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small box appears with supplementary information regarding the item being hovered over.

Just like on this image.
Although in Opera browser I use on a daily basis tooltips are built in (you can turn them on or off) I realize some people don’t use it and still may want to see where the link they are going to click on will redirect them to. So I’ve decided to get some for my site.
First choice was WS ToolTip plugin but I’ve learned it’s based on Dustin Diaz JS script Sweet Titles. I decided to use Sweet Titles then because I think the less plugins you use the better (I mean whenever it’s possible to use some script or change the code instead) – smaller chance any of them won’t cooperate with other ;). It appeared also to be very easy to customize in different ways.
I got read off round corners and double border because they don’t match may site look and feel. I’ve changed colors to match those I use here. Since some of my title as relatively long I decided to make the tooltip box little bit longer and displaying more characters. First dimension might be changed in stylesheet while the second requires change in sweetTitles.js. I have replaced addy = (anch.href.length > 25 ? anch.href.toString().substring(0,25)+"..." : anch.href);
with

addy = (anch.href.length > 42 ? anch.href.toString().substring(0,42)+"..." : anch.href);

I only didn’t like thumbs linked to full size images showing tooltip. But I have found solution; it required adding to sweetTitles.js only one line of code

if (current[j].childNodes[0].nodeName.toLowerCase() != 'img')

right after for ( j=0; j<curLen; j++ ).
Voila!