UNIQUEsite.co.uk

To Wordpress or not to Wordpress?

Wed, 11 Nov 2009 12:22:30 +0000

I am undecided about relying on products like wordpress to heavily in website design. Don't get me wrong, wordpress is a great product, it is powerful, efficient, well designed and modular. But I'm seeing an increasing number of websites that all look essentially the same, as they are just adjusted versions of wordpress blogs.

With Laura's website at www.laura-jane-evans.com I wanted to leverage the features of wordpress, whilst freeing myself from the design constraints. I could have created a theme for wordpress and achieved an incredibly similar result, but, being stubborn, I wanted to try creating a website outside of wordpress and then "plugging in" to it.

The essential code to include on your page is

<?PHP
define('WP_USE_THEMES', false);
require('wordpress/wp-blog-header.php');
?>

From this point, you can include all your usual tags such as wp_list_categories and the statement

<?PHP while (have_posts()) : the_post(); ?>
...
<?PHP endwhile; ?>

I used the mod_rewrite statement in a .htaccess file to point each page to my index.php which did all the work.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php [L]
</IfModule>

This means that any request that isn't a file or folder on the server will just load index.php.

If my wordpress "blog address" is configured to /blog, a link to /blog/?p=123 will load that post. Or it can be made prettier by changing your permalink settings.

I know it seems like a lot of work to achieve something simple, but I feel it gave me the freedom to create my own site design, with a seamless integration of the wordpress blog. It could even be used to include a blog in an existing site without major changes.

"Read More" Javascript Technique

Wed, 30 Sep 2009 12:38:56 +0100

For my blog, I wished for people to be able to begin reading an article before delving into the entire entry, especially for longer posts. This is a common technique, resulting in a "Read More" link after a set number of characters. The only difference here, is the rest of the article loads into the same page, it was simply hidden, and is revealed by javascript.

The script for determining where to place the read more link was taken from Snipplr and cuts text off after a given number of charaters, but tries to keep whole sentences intact (it looks much nicer).

I altered the function to include the read more text:

function trimText($intLength, $strText) {
	// Find last fullstop in $strText before $intLength characters.
	$intLastPeriodPos = strpos(strrev(substr($strText, 0, $intLength)), ".");
	// If no fullstops, trim until $intLength characters.
	if ($intLastPeriodPos === false) {
		$intLastPeriodPos = 0;
	}
	// Shorten the text...
	$strReturn = substr($strText, 0, ($intLength - $intLastPeriodPos));
	// ...create the link...
	$strReturn .= "<a href='#' class='readmore'>Read more...</a>";
	// ...and put the remaining text in a hidden span.
	$strReturn .= "<span class='hidden'>" . substr($strText, ($intLength - $intLastPeriodPos)) . "</span>";
	return $strReturn;
}

Whenever you want to shorten some text, simply write:

if (strlen($textToBeReplaced) > 300) {
	$articleText = trimText(300, $articleText);
}
echo $articleText;

This hides the last text (a sentence just before 300 characters), and creates the link, but what about showing it again? Simple Javascript is all that is needed (with the help of jQuery).

The Javascript looks like this:

$(document).ready(function() {
	$(".readmore").click(function() {
		// Hide the link.
		$(this).hide();
		// Fade in the remaining text.
		$(this).next().fadeIn();
		return false;
	});
});

That is essentially all there is to it, and I'm pleased with the outcome. It creates an article that is just an overview, but can easily be expanded without waiting for anything to load.

Don't forget you don't want to handicap non-javascript visitors, so make sure the hidden spans are only hidden via javascript. I didn't show this above in order to simplify the code.

Welcome

Wed, 30 Sep 2009 03:11:29 -0500

I decided it was time I added a blog to my website, so I can let people know what I'm up to, and hopefully offer some advice to other website designers. I hope to update this on a regular basis, so stay tuned!