Create wireframes in Google Docs

A while ago I found this awesome free wireframe templates for Google Drawings, the latest member of the Google Docs suite.

A big thanks to Morten Just who shared his templates.

I also recommend that you checkout the I ♥ wireframes blog if you need some inspiration.

Posted in Web Development | Tagged , , | Leave a comment

Writing your own iframe shortcode plugin for WordPress

When you want simplify publishing of specific elements or code chunks, WordPress Shortcodes might come in handy. Basically it replaces a piece of text that you insert via the editor with something else, defined in your template or in a plugin.

Here’s an example on how to create a plugin that allows you to insert iframes using shortcodes. Regular iframe tags can be inserted via the HTML editor in WordPress, but the example below will give you a hint on what it can be used for.

<?php
/*
Plugin Name: Iframe Shortcode Plugin
Plugin URI: http://www.guidecloud.com/2010/07/14/writing-your-own-iframe-shortcode-plugin-for-wordpress/
Description: Add iframes to Posts and Pages within WordPress.
Author: GuideCloud.com
Version: 1.0
Author URI: http://www.guidecloud.com/
License: GPL2
*/

class guidecloud_iframe_shortcode {
    function shortcode($atts, $content=null) {
		extract(shortcode_atts(array(
			'url' 	=> '',
			'scrolling' 	=> 'no',
			'width' 	=> '100%',
			'height' 	=> '500',
			'frameborder' 	=> '0',
			'marginheight' 	=> '0',
		), $atts));

		if (empty($url)) return '<!-- Iframe: You did not enter a valid URL -->';

	return '<iframe src="'.$url.'" title="" scrolling="'.$scrolling.'" width="'.$width.'" height="'.$height.'" frameborder="'.$frameborder.'" marginheight="'.$marginheight.'"><a href="'.$url.'" target="_blank">'.$url.'</a></iframe>';
    }
}

add_shortcode('iframe', array('guidecloud_iframe_shortcode', 'shortcode'));
?>

Create a new file called iframe-shortcode.php, paste the code above and upload it to your wp-content/plugins/ directory. Go to “Plugins” in your WordPress administration and activate the plugin.

Once the plugin has been activated you can place iframe shortcodes, like the example below, into your WordPress posts.

[iframe url="http://www.linktoiframe.com/iframepage/" height="500" width="100%" scrolling="no" frameborder="0" marginheight="0"]

You can also download the plugin here:
WordPress Iframe Shortcode Plugin

More reading:

Posted in Web Development | Tagged , , , , | Leave a comment

WordPress 3.0 – now available!

One of the most interesting updates of WordPress was launched this evening – WordPress 3.0.

Among the 1,217 bug fixes and feature enhancements you will find:

  • Custom Post Types – no more need to hack posts or pages into something they’re not
  • Merge between WordPress MU and regular WordPress – now available within the same version. More info here.
  • Custom menus – create your own menu
  • New default theme – Twenty Ten

Introducing WordPress 3.0 “Thelonious”

Thanks to everyone involved – you’ve done an amazing job!

Posted in Web Development | Tagged , , , , | Leave a comment

“Installation failed” when upgrading WordPress? Here’s the solution

After a few hours of trying to find a solution to the “Installation failed” error message, when using the automatic upgrade feature in WordPress, I found this thread

There are a number of variations on this error message, some more descriptive than others. This solution will however only work when you just get ”Installation failed” as the error – nothing more, nothing less. In this case it was tested on a WordPress 2.8 to WordPress 2.8.4 upgrade with WordPress installed in the website’s root folder.

The solution

The FTP account, used for the automatic upgrades, did in this case have the WordPress installation folder as it’s root folder. By moving the FTP root up one level, above the WordPress installation folder. Example:

FTP root folder – before:
/home/domains/mydomain.com/public_html/

FTP root folder - after:
/home/domains/mydomain.com/

Your web host might be able to help you out if you can’t configure this using your control panel.

Happy upgrading!

Posted in Web Development | Tagged , , , , | Leave a comment

Share code snippets and texts on Twitter via Snipt

Snipt - Share code and texts on TwitterSnipt is a great little tool that allows you to share code chunks or texts via a short URL, eg. when posting on Twitter. Just paste the text/code into the text box, click on “Snip it!” and you’ll have a short URL ready to be shared.

To Snipt:
http://snipt.org/

Posted in Web Development | Tagged , , | Leave a comment

How to setup 301 Permanent Redirect on a specific page

The following instruction will show you how to redirect a specific file on your website to a new location.

When should I use “301 Permanent Redirect”?

HTTP 301 Permanent Redirects should be used when you are about to change page name on a page that has been included in any search engine index. The 301 redirect ensures that search engines and users are directed to the correct page. The HTTP 301 Status Code means that the page has been moved to a new location, permanently.

Permanent Redirects using PHP

Add the following code to your PHP page:

<?php
// Permanent redirection
header("HTTP/1.1 301 Moved Permanently");
header("Location: http://www.newlink.com/");
exit();
?>

301 Permanent Redirect using ASP.Net

Add the following code to your ASP.Net page:

<script runat="server">
private void Page_Load(object sender, System.EventArgs e)
{
Response.Status = "301 Moved Permanently";
Response.AddHeader("Location",http://www.newurl.com/);
}
</script>

Permanent Redirects in ASP Classic (VB)

Add the following code to your ASP page:

<%@ Language=VBScript %>
<%
' Permanent Redirect
Response.Status = "301 Moved Permanently"
Response.AddHeader "Location", "http://www.newlink.com/"
Response.End
%>

Redirect a specific page using .htaccess on Apache

If your website is running on an Apache server, you can add your redirects to a file named .htaccess (no file extension). Add the code below using a text editor and upload fhe file to your website’s root directory.

RewriteEngine on
Redirect 301 /oldpagename.html http://www.newlink.com/newpagename.html

Permanent Redirects in Internet Information Server (IIS)

Follow these steps to redirect a specific page or folder to a new location:

  1. Open “Internet Information Services (IIS) Manager”, found under “Start > Control Panel > Administrative Tools”.
  2. Browse to the website and file/folder you would like to redirect
  3. Right click on the file/folder and choose “Properties”
  4. Select the “A redirection to a URL” radiobutton (see screenshot below)
  5. Enter the new URL in the “Redirect to:” field
  6. Check the “A permanent redirection for this resource” checkbox
  7. Click on “Apply”

"Configure

More information

HTTP Status Code Definitions
HTTP 301 on Wikipedia
List of HTTP status codes on Wikipedia
301 redirects on Google Webmasters Help

Posted in Search Engine Optimization (SEO), Web Development | Tagged , , , , , , , , , | Leave a comment