I have recently setup a WordPress Network install where a feature on the website automatically creates posts for newly registered users. Users aren’t able to create posts or mange their account but they can view posts that have been created.

As a part of this I also needed to have the navigation pages from the home blog to appear on all network sites since users can’t create their own pages.

Uses:

switch_to_blog()
restore_current_blog()

//theme's header.php
 
//temporarily switch to the home blog (1)
switch_to_blog(1);
$args = array(
	'show_home' 	=> 	1,
	'title_li'		=>	''
);
wp_list_pages_root( $args ); 
 
//continue executing the page as whatever blog was being accessed
restore_current_blog();

As a limited time offer – thanks to a deal with Host Gator – Wildreason Productions is able to provide a basic 2-3 page webpage with a blog and custom logo for free. All you have to do is host your website at Host Gator as a new customer. Click here to signup or get more information about a free website!

Website Samples

            

This was my first attempt to use a template engine inside of WordPress and so far the only challenge I have encountered is the group of functions that print HTML similar to an includes statement. Included in my project are get_header() and get_footer() – native WordPress functions. Wherever in the file that these calls exist is where the output will appear. I could have done something similar to the following:

<?php
 
get_header();
 
$template = new HTML_Template_IT();
$template->loadTemplateFile('tpl_project.html');
 
$template->setVariable('foo', 'bar');
 
$template->show();
 
get_footer();
 
?>

But that felt cheap – as if it were a hacked version of a PHP template engine. I started looking into PHP’s ob_start() family and came up with the following solution:

<?php
 
$template = new HTML_Template_IT();
$template->loadTemplateFile('tpl_project.html');
$template->setVariable('foo', 'bar');
 
/*	This function will turn output buffering on. While 
	output buffering is active no output is sent from 
	the script (other than headers), instead the output 
	is stored in an internal buffer.
*/
ob_start();
 
get_header();
 
/*	Gets the contents of the output buffer without clearing it. */
$header = ob_get_contents();
ob_clean();
 
get_footer();
$footer = ob_get_contents();
 
/*	This function discards the contents of the topmost output
	buffer and turns off this output buffering.
*/
ob_end_clean();
 
$template->setVariable('header', $header);
$template->setVariable('footer', $footer);
 
$template->show();
 
die();
 
?>

Using PHP’s built in output buffering control I am able to capture any output and store it’s contents in a variable without it ever actually becoming output.

Another, more sophisticated, and probably more proper solution would be to extend WordPress’s native do_action() function to allow you to pass it a switch that instructs it to return the contents of the function as opposed to printing it out. So then you could do something like:

$header = get_header(true);

A good idea for a WordPress plugin!

Suggestions/comments always welcome.

I had the pleasure of creating a Google TV enabled web application for a client – Q3030.com. It features keyboard navigation, automatic window resizing based on client browser-height, AJAX navigation, auto scrolling, and much more.

There are a lot of techniques that can be utilized for creating optimized displays on 720p and 1080p televisions. In the end I decided to use CSS zoom to do the resizing for the Google TV device and disable automatic zooming on the device. The biggest challenge presented was the keyboard navigation. In this particular application there are three rows you can navigate: player controls, videos, and channels. Using Javascript, I keep track of the current item the user is on in a variable. One variable stores what “tier” they are on, -1, 0, 1. Then there is a variable for each tier that indicates what position in that tier they are on. The player controls had six controls so the possible positions for that tier are 0-5. Same concept for the video and channels row.

When an arrow key is pressed, depending on the direction, adds or subtracts from the current position or current tier while simultaneously removing a class (CSS) from the item being navigated away from and adding a class to the item being navigated to. This class adds a glow around the element to indicate to the user where they are.

I then added listeners for the enter and spacebar keys. Spacebar pauses/plays the video and enter triggers a click event for whatever element they are currently on. For instance:

if (e.keyCode == 40) {
	//down
	if (tier == 0) {
		tier = 1;
		$('div.previewSelect[rel='+tier1Pos+']').removeClass('selected');
		$('div.show[rel='+tier2Pos+']').addClass('chanSelect');
	}
	else if (tier == -1) {
		imgEl = $('#vidControls img[rel='+tier0Pos+']');
		oldSrc = imgEl.attr('src').split('-');
		newSrc = oldSrc[0] + '.png';
		imgEl.attr("src", newSrc);
		nextEl = $('div.previewSelect[rel='+tier1Pos+']');
		nextEl.addClass('selected');
		nextEl.trigger('mouseenter');
		if (typeof t != 'undefined') { clearTimeout(t); }
		t = setTimeout(function() {
			nextEl.trigger('mouseleave');
		}, 4000);
		tier = 0;
	}
	return false;
}

This is the code to monitor the down arrow key.

Overall, this was a fun project that taught me a lot about Javascript and user experience in the living room. Just when I think I’ve mastered a language or skill set I am presented with a challenge that shows me how much I don’t know. A gallery of TV-ready websites can be found here:

Google TV Spotlight Gallery

More of my projects can be found in my portfolio section.

Technologies used: jQuery, AJAX, Colorbox, PHP, MySQL

Status: Complete.

Suggestions, feedback, hate mail: leave a comment!

Be sure to look for a feature @ CSS Showcase and CSS Breeze soon!

Use this with caution however, as all but the most critical errors will be bypassed. The following shows the most basic implementation of the method:

$debug = false;
function customError($errno, $errstr, $errfile, $errline) {
	global $debug;
	if ($debug) {
		switch ($errno) {
			case E_USER_ERROR:
				echo "<b>ERROR</b> [$errno] $errstr n";
				//optional execution code
				break;			
			case E_USER_WARNING:
				echo "<b>WARNING</b> [$errno] $errstr n";
				//optional execution code
				break;
			case E_USER_NOTICE:
				echo "<b>NOTICE</b> [$errno] $errstr n";
				//optional execution code
				break;
			default:
				echo "Unknown error type: [$errno] $errstr n";
			break;
		}
 
		/* Don't execute PHP internal error handler */
		return true;
	} 
} 
 
set_error_handler("customError");

This can be appended at the top of one your config files and it can be extended to perform different actions on different errors. Setting $debug = true will show you a lot of interesting errors that you probably never knew was happening as a lot of insignificant errors aren’t reported at all.

Again, use with caution!

The following super simple AJAX example is about as barebones as it possible can. There is no error checking and the example actually does very little. It’s meant to be a framework for beginners or a reference for advanced website designers. The only thing to keep in mind when designing sites with AJAX: it doesn’t work if the user has JavaScript disabled. Therefore, a decision has to be made. Make the scripts unobtrusive – results are still obtained without JavaScript – or acknowledge that your site won’t be functional with JavaScript. It’s up to you to determine your audience and decide who to cater to. Facebook for example, doesn’t work without JavaScript.

This example however, still works without JavaScript. But the results are slightly different. The user navigates to demo.html when they click the link as JavaScript isn’t there to intercept the click and halt it (return false in the onclick statement).

A super simple, complete example:

<html>
<head>
<script src="/files/mootools.1.2.3.js" type="text/javascript"></script>
<script type="text/javascript">
function easyAjax() {
  url = 'demo.html';
  new Request({
    url: url,
    method: 'get',
    onSuccess: function(responseText) {
      //write the response to someelement
      $('someelement').set('html', responseText);
     }
  }).send();
  return false;
}
</script>
</head>
 
<body>
 
<p>
  <a href="demo.html" onclick="return easyAjax()">Click</a>
</p>
 
<div id="someelement">
 
</div>
 
</html>

View the working demo.
View the MooTools request documentation

An advanced example with error checking, visual effects, and PHP integration coming soon.

We do a variety of work in the realm of design, including – but not limited to – the following:

1. Website design – Entire website design from the ground up. Graphics,
   on-page SEO, layout. Professional design at a fraction of the price.
2. Graphic design – Entire site design, individual banners, icon sets,
   business cards.
3. PHP (server-side scripting) – Custome PHP design and scripting. An example of one of our PHP projects is our online favicon generator.
4. Component installation – E-commerce, blog, image gallery, CMS, media players, etc
5. Site redesign – For sites that need to be visually refreshed, made more user-friendly, or made more search friendly.
6. Ongoing SEO – Marketing, creating backlinks, keyword research.
7. MySQL Database Design – Services ranging from complex relational database design, simple user management, to existing database optimization.
8. E-commerce – Integrate an e-commerce solution on a new or existing website to offer new or existing services.

What is involved in the design process?

Typically, the following is what you can expect through the design process:

1. Initial consultation
2. Quote and proposal (including expectations and timeframe)
3. First invoice (initial deposit)
4. Design mock-up
5. Final invoice (remaining balance)
6. Website delivery

Does your design include SEO?

This is an important question that always needs clarification. As the designer, our responsibility to the client lies in creating a website that meets their expectations in terms of functionality and design. It also includes creating a website that is search-engine friendly. Some of the characteristics of a search-engine friendly site are:

1. Code that is clean. Messy code isn’t easily readable or indexed by search engines.
2. Properly organized layout. The content of a site should be laid out similar to an English paper. Title, introduction, body, and summary. All of which includes proper headings and sub-headings. This is all taken into account when search engines index websites.
3. A discussion with the client on what keywords will be targeted for their website. While we may be able to guess, it is ultimately up to the client what keywords they would like to target. We will offer input and do basic research, but it is critical that our clients (the content generators) know what keywords they are targeting.
4. Proper use of internal links. Creating external links to your site is an important part of ongoing SEO. Creating internal links that point to important
   documents on your site is an important part of creating a search-engine friendly website. The more frequently a link to a particular document appears on your site, the more important search engines believe it to be.
5. URL design. It is not only helpful for users to know where they are by looking at the URL, but it also adds to keyword relevance for search engines when your document’s URL’s are descriptive.
6. Sitemaps. Sitemaps are not only important for your users to be able to quickly navigate your site, but they are important for search engines as well. There are two types of sitemaps. A visual sitemap, like the one at the bottom of our page, and an XML sitemap. An XML sitemap is a structured XML file that resides at the root of your site that isn’t used by visitors. It is used by search engines to help map out your site. Both types of sitemaps are included in the design (if requested) but updates to the sitemap are part of ongoing SEO. Alternatively, we can include a self-updating sitemap for an additional charge.
7. Load time. Page load time (database design, graphics, etc) has a small effect on search engine prioritization, but it is important nonetheless. We work to design efficient databases and graphics with short load times in order to maximize the user experience and optimize your site for search engines.

All of these things are very important in creating a search-engine friendly website. And they are all included in the design process. Ongoing SEO is another topic, and while we offer it as an additional service, it is not included in the design cost of your website.

Why do you discourage Flash?

Flash is a dying technology. This is a bold statement, but it is true. And it is a dying technology for many reasons. It is buggy, difficult to index for search engines, and doesn’t play well at all on mobile devices. While we have and can include Flash on your website, things like Flash intros and Flash slideshows are HIGHLY discouraged. Search engine optimization should take priority over flashy lights and most Flash effects can be achieved with JavaScript and/or CSS. Used sparingly, it can add a nice touch to a website. But used heavily and irresponsibly, it can drastically damage your ability to achieve high search engine rankings.

What about prices?

This is a topic that comes up occasionally: why aren’t prices discussed on your website? For our studio, website creation is personal. Every project is unique, and for that reason we price each project uniquely. Pricing is guaranteed to be fair and competitive. However, we produce professional designs and layouts so if you are serious about creating a website that is ready for search engine rankings and having a personal experience throughout the process, be ready for our rates. We aren’t a hack-and-slash design studio; communication is fast, expectations are clear, and production is fast and efficient.

Generally speaking, a basic, static 3-page website (home, about, contact) will range between $350-$550, depending on the amount of requirements. Blog, e-commerce, galleries, etc will typically be in addition to the initial setup fee. Prices are always flexible and we are willing to work with you for payment plans. We also offer hosting and maintenance packages that drastically reduce the initial setup fee.