Embedding Google Maps broke my WordPress text editor

Today I tried to embed a custom Google Map to my blog and ended up with an unusable WordPress editor! It didn’t even allow me to remove the iFrame -code.

Here is how I broke it:

  1. Created a custom Google Maps -map
  2. Copied the embed-map-html code (an iFrame) to the Code field in WP
  3. Saved the post as a draft
  4. Loaded my and when I saved the blog post as a draft and discovered that I couldn’t edit the post any more

To recover from this it would have been possible to discard the draft but since I had put some time in editing I didn’t want to do that. Instead I fired up my MySQL editor and tried to locate the html text in the database for manual removal. All of a sudden it struck me. The easy solution! The good solution! I disabled JavaScript in Firefox, loaded the web page and viola! I got the simple WordPress text editor back and could remove the iFrame-code from Google Maps.

Firefox disable javascript

I have now attached a post-it with the text ”Keep It Simple Stupid” on my monitor (again). Simon has got one as well.

SharpWired News Site!

The Planet SharpWired site is now online on our source forge project page!

A screenshot of the SharpWired planet (080813)

Since sourceforge don’t allow outgoing connections on project web pages I have set up the planet elsewhere and uploads the files to sourceforge every hour using rsync. This means that there is a delay for maximum one hour before the page and news feeds are updated. It’s not perfect, but I think it’s good enough. For now at least.

Update: More information about the planet and the customized SharpWired PlanetPlanet skin/template can be found in the SharpWired Wiki.

Update 2: The wiki isn’t alive anymore but here are two screenshots of how it looked.

Please report any problems or errors and have a nice weekend!

WordPress 2.1

I have just done the upgrade from WordPress 2.04 to WordPress 2.1 on this blog. I love to do these upgrades since that’s the only time I upgrade all plugins, themes etc!

The editor in WordPress 2.1 is beautiful! I LOVE that WordPress now includes spell checker and auto save of your posts as drafts!

Well, try it out!

Web developer Add-on for Firefox

Aardvark screen shotI used to use the the Web Developer extension for Firefox when writing CSS. The only feature I used was the feature to display a red box around your different elements to see how changes affects them when there is something wrong. But I have always seen this Add-on a bit clumsy for this purpose which almost always leaves me with setting a red border for all the elements that I want to ”debug”, and that’s even more clumsy!
Hopefully these problems are at it’s end now! Yesterday Magnus showed me Aadvark. This Firefox Add-on lets you display different elements by hovering them with the mouse.

Try it out!

ps. If you are on Firefox 2, you might need to use the Nightly Tester Tools to be able to install Aadvark.

New Manticore Skateboards Web Site!

Manticore Skateboard - BannerAt last! The new Manticore Skateboards web site is launched. I have been working on this for some weeks now and it feels great to release it!

All content is created and will be administrated with the wonderful WordPress software.

Screenshots

Screenshot: Manticore Skateboards #3 - News page Screenshot: Manticore Skateboards #3 - Team page Screenshot: Manticore Skateboards #3 - Team page: Jim Augustsson Screenshot: Manticore Skateboards #3 - Product page: Flylite series Screenshot: Manticore Skateboards #3 - Contact page

CSS Image rollover menu lists

Today I needed to build a menu consisting of images for a new website we are launching in a couple of days. I wanted to use a simple list with the links and use the background property for each li element to show the images. The text in the link-images were rotated and that caused a problem, I had to hide the default link text when the style sheet was loaded and display the text when the style sheet was unavailable (if you for example are having visual problems or use a PDA).

The next problem was to have a nice way to change the background image if a link is active or if a link is hovered. This can be done using JavaScripts, but I wanted to use CSS instead. This can be achieved using the a:hover pseudo class and output a class=”active” for the active element.

If this sounds like something you need, read the following:

  • Stuart Langridge describes how a background image can ”override” the default text in an element
  • Pixy describes how rollovers without JavaScripts can be accomplished
  • SimpleBits describes how these two techniques can be combined

Update (060731): I have found one problem with this solution. If you surf the site with CSS enabled, but images disabled you are not going to see the menu. I have not yet any solution to this, but I’ll update this post once I have found a solution.

Using WordPress as news column

When building my latest web site (Slipstream Longboards) I figured that I should use some existing tools for the news column. Since I had some knowledge about WordPress I decided to go with that. What I wanted was to use the nice WYSIWG editor WordPress and also to have a nice way to generate the RSS Feeds.

I started reading on the WordPress web site and found that there is a nice API for this type of sites (See the Codex pages).

Basically, this is what I did:

  1. Installed WordPress
  2. Moved and transformed the old data
  3. Outputed the data from WordPress to a non WordPress page
  4. Outputed the data from WordPress to a RSS Feed

I will describe how I did step two, tree and four below. For more information about installing WordPress see the WordPress web site.

Move and transform the old data

Since the old data was a limited amount of data (about 10 news posts) I figured that I should just output the data and then do some text manipulation which made it compliant to the MovableType format and then import it into WordPress. This turned out to work well and I had the data inserted into WordPress in less than an hour.

Output the data to a page outside of WordPress

To get the data from WordPress I used the WordPress loop which is a way to query the database and output the data. It is realy easy to use.

First you include a file from WordPress using:

define('WP_USE_THEMES', false);
require('./news/wp-blog-header.php');

Then you can use the WordPress Loop.

if ( have_posts() ) : while ( have_posts() ) : the_post();
// Output your data here
endwhile;

To output for example the title and the body for your posts you use:

if ( have_posts() ) : while ( have_posts() ) : the_post();
the_title();
the_content();
endwhile;

It is possible to restrict the data to only output for example posts with a different author or to only output posts in a specific category. See the Codex page for more information about this.

Output the data from WordPress to a RSS Feed

To customize the RSS Feed for this web site I simply copied the wp-rss2.php from WordPress and changed;

  1. the URL to the web site to point to the first page for the web site instead of the first page for the blog
  2. the URLs to each item to be displayed on the web site instead of the blog
  3. I also had to include the wp-blog-header.php file (all as done above) and remove the include for the wp-config.php and delete the the call to the wp(feed=rss2)

And that produced a nice feed.