Blockquote problems with paragraph spacing in the visual editor

I decided to turn off the visual editor in WordPress today. It has an annoying habit of removing the <p> and <br /> tags when you switch to the code tab. This would not be a problem if it did not remove the blank lines inside a <blockquote> tag, too. This problem occurs when you start out on the visual tab, go to the code tab, return to the visual tab and then go back to the code tab. The second time you go to the code tab the blank line disappears. The end result is a paragraph with all of the sentences bunched together in one paragraph. Yea, it looks pretty ugly. I cannot see how this could be per design, so I submitted this as a bug.

I found that if you use the manual editor, the <p> and <br /> tags and the line spacing get stored with the post correctly. This change should work out for me since I write most of my posts using LiveWriter and I use the manual editor primarily to tweak the html.

The problem that started me on this merry chase was a subtle line spacing issue with paragraphs inside a blockquote. I did not know that my CSS for paragraphs inside a blockquote used margin: 0px; and this margin value removed the blank line that normally follows a paragraph. Changing this code to margin: 0 0 15px; restored the normal paragraph spacing. Of course, the source of this problem is obscured if the visual editor keeps stripping out the <p> tag. Use your Yahoo! account as an OpenID

In an ideal world, some or all of the sites with large user databases (Yahoo!, AOL, Google, Amazon and so on) would act as OpenID providers, allowing their users to sign in to OpenID supporting sites around the Web. Until that happens, people who want to use OpenID need to sign up for Yet Another Account to do, launched today, is my attempt at speeding up the process. It uses Yahoo!’s Browser-Based Authentication API to allow you to sign in with a Yahoo! account, then lets you create one or more OpenIDs (of the form to use with sites that support the OpenID standard.

In effect, it lets you use your Yahoo! account as an OpenID.

Source: Use your Yahoo! account as an OpenID

Okay, I got distracted again. This time it was OpenID. It did not take me too long to setup an Open ID using my Yahoo! account and figure out how to authorize logins. It took me a little longer to figure out why I may want to use Open ID.

The primary advantage of using Open ID is with posting comments on other people’s web sites who require that you prove your identity before you make a comment. This can get pretty cumbersome to manage if you have a lot of sites that require you to setup a userid and password. For me Open ID is marginally useful but it is an interesting step in the right direction of managing your online identity.

For kicks I decided to try out the latest version of the WordPress OpenID plugin. It kind of works. The problems I have noticed so far are:

  1. I cannot login using OpenID my test blog(localhost/blog) running under XAMPP. I get a OpenID Authentication Failed: Bad signature.
  2. I had to add a slash to the url in the Trust root option.
  3. The login form is messed up on the remote server. It has “WordPress User:” and “Open Identity:” in a large font(i.e. Heading 2) with two boxes in which you can enter the OpenID. Only the second box works. I am running PHP version 4.4.4 on this server and GMP is not compiled into PHP. The login screen looked fine on my local test blog.
  4. There is a little funkiness with the first login to a WordPress site using OpenID.
    1. First you login into WordPress using your OpenID.
    2. Most of the time you will get an authenticate screen from for you to approve. If you do not get an approval screen(e.g. IE), you should open a new window and login to and see if you have any approvals waiting for you.
    3. Once you authenticate your access, you get a WP login screen where you need to enter the OpenID a second time. It doesn’t tell you why you are getting this screen but I think this is when your userid is created in WordPress.
    4. You should now be logged into WordPress. You should go to profile and modify the default geeky settings to something a little more descriptive and human-like.
  5. Once you have a userid created in WordPress subsequent logins should go smoothly.
  6. The OpenID plugin status information box will autoexpand when you move the mouse over it to show the details about the plugin on the remote server while it does not autoexpand on the local server.

Depending on your version of PHP and whether the GMP and BCMath libraries, this plugin works differently but it does work. Since OpenID probably has value, my solution to the login form problem was to hack the user-interface.php file and comment out lines 107-114. I am not sure what the code thought it should be doing at that point but I know the form works as designed without that code messing it up.

WordPress Hack: Rotating Banners

As you know I use WordPress as my blogging platform simply because I love PHP and the simplicity that comes with a beautiful syntax. This post shows you how to create a rotating banner for your WordPress blog.

Getting Your Banners Together

First of all this is just a dirty template hack that will not go away as you upgrade your WordPress distribution. The first step is to create a set of banners you want to rotate and name them sequentially. For example, mine are named vladville-bar1.jpg, vladville-bar2.jpg, vladville-bar3.jpg and so on. Here they are:





Look familiar? Great. Notice how only one number in the filename changes? Now upload all of these banners to the same directory, mine are in /images.

Hack The Template

The second step is to actually hack the template file. Because WordPress is PHP based you can embed PHP code anywhere in your template. Mine is in the header.php but you can use this trick anywhere you want to.

Remember how only the number was different? The only thing I did was instruct PHP to select a random number from a range and insert that number in HTML code. So here is the entire mastery:

<table background=”/images/vladville-bar<?php echo rand(1,23); ?>.jpg” width=”800″ height=”155″ border=”0″>

Thats the entire mastery right there. When the template is parsed by WordPress and PHP it will call a rand function which returns a random integer in the range between 1 and 23. I happen to have 23 images on the server so returning a random number between 1–23 will return a number of one of the images in that range. The <?php part tells the server to start interpreting the next block of text as code instead of just plain filler. The ?> stops it. The echo sends stuff back to be printed and 1,23 are parameters sent to the rand function. Every time the page is reloaded the rand() function should return a different random number between 1–23 giving my visitors a different random banner from my pool of 23. For example:

First time rand(1,23) executes it returns 5. As a result, you will see vladville-bar5.jpg

<table background=”/images/vladville-bar5.jpg” width=”800″ height=”155″ border=”0″>

Second time rand(1,23) executes it returns 17. As a result, you will see vladville-bar17.jpg

<table background=”/images/vladville-bar17.jpg” width=”800″ height=”155″ border=”0″>

Thats all there is to it but I figured I’d start slow and build up. Imagine the possibilities here, you can insert greetings based on the time of day, display random quotes, insult visitors by guessing their IQ with rand(5,30) and so on.

So get creative. Your blog does not have to be borg it should reflect your individuality. After all, its all yours.

Link to WordPress Hack: Rotating Banners

This is multi-purpose post. First I want to try this hack on my test WordPress blog. If I have time I want to try and configure a demo website to replace the current Habitat for Humanity affiliate website. The two most important characteristics that can lead to a successful HFH website is current news and photos. Using a blog can make the website easier to update and keep current. Rotating current photos on the front page makes the page more interesting for casual visitors but will require a little more computer knowlege.

My second objective is make this post using the GreatNews reader/Live Writer plugin. I have been using GreatNews for several weeks and I occasionally use w.bloggar via a GreatNews plugin to comment on other people’s posts. GreatNews supports several “Blog This” options including the plugin to w.bloggar. Today GreatNews released a plugin to make Live Writer a “Blog This” option. I was actually thinking about cloning the w.bloggar plugin to provide this functionality to Live Writer but someone beat me to it. Live Writer and w.bloggar are both nice front ends for blogs but Live Writer has a better user interface. For those who are unaware of these tools, they are the latest attempts to add a little extra word processing functionality to the process of creating new posts.

Since I prefer my websites to validate as xhtml, I run into occasional problems when I comment or include posts from other people. The html editors provided with most blogs are okay for new posts and most simple comment posts. I can look at the html code and fix the simple mistakes. When there are a lot of mistakes and you need a little extra help, Live Writer and w.bloggar can make editing the post easy and quick.

In looking at this post in Live Writer I have to admit I prefer this interface over the w.bloggar interface. It is not a hard decision. Wyswig is easier to use than raw html. It is nice that all of the links and images have the right addresses.