Log in

In Response

Looking at popular ideas in design and lifehacking from a science perspective




In Response is a blog examining current topics in design and lifehacking from a scientific perspective. It is part of Nightning.breathtaken.net the personal creative playground for Cheryl Chung.

For additional information about me, please refer to the About page.

Content & design © 2008 Cheryl Chung

free web stats



February 17th, 2011

The Capilano University Documentary Film Program's new website. is up and running! I'm very pleased to take part in this project to help the documentary film students to promote themselves and their work online. The site features some of the short documentaries produced by Cap U students. So if you like documentaries films or are interested in learning more about Cap U Documentary Film Program, which is located in North Vancouver, BC, Canada, you should check it out.

Here's the link again: Capilano U Documentary Films

March 9th, 2010

I've uploaded 2 more screencast tutorials on YouTube. Continuing on from the last set. These two covers how to modify the header and sidebar wordpress files.

I'm going to put all of these tutorials together, along with written descriptions, on my e-learning site HTML 2 WordPress. That's scheduled to launch at the end of the month.

Enough chit chat, time for more vids!

Remember you can view these in HD. :D

WordPress Tutorial: Customizing Header.php Part 1/4

WordPress Tutorial: Customizing Header.php Part 2/4

WordPress Tutorial: Customizing Header.php Part 3/4

WordPress Tutorial: Customizing Header.php Part 4/4

WordPress Tutorial: Customizing Sidebar.php Part 1/3

WordPress Tutorial: Customizing Sidebar.php Part 2/3

WordPress Tutorial: Customizing Sidebar.php Part 3/3

February 21st, 2010

I'm in the process of creating screencasts for a new e-learning site as a school project. The site is called HTML 2 WordPress. A how-to guide for converting a HTML layout into a WP theme. The first 3 tutorials are finished and uploaded on YouTube. This is my first time recording screencasts, so I would love some constructive criticism.

So check them out.

How to install a local web server onto your computer

How to setup WordPress Part 1
How to setup WordPress Part 2

How to secure your WordPress Site Part 1
How to secure your WordPress Site Part 2

February 18th, 2010

Today I was looking at new plug-ins for WordPress and I ended up finding a new one for SEO that seems to work like a charm.

I'm talking about HeadSpace2 SEO. It allows you to customize titles, meta descriptions and keywords for all your pages using one simple interface. It also adds additional widgets to your new post and new page interface to allow you to specify page title, description and tags for that page. There's also a tags widget that offers you suggestions based on your content and yahoo search. I did not notice any bugs customizing the page settings using the latest version (HeadSpace2 SEO v3.6.32) with WordPress 2.9.2.

Google Analytics under the Site Modules tab also works fine... Google Webmaster Tools doesn't though. However that is easy enough to add into the header.php template file. So overall the plug-in does the job.

I've also installed Google XML SiteMaps to autogenerate sitemaps to NNbox.ca and notify search engines every time new content is added to the site. It's a breeze to install and seems to work perfectly with WP 2.9.2. Good stuff!

January 11th, 2010

After a couple of days of working on other stuff, I finally found the time to upload my WP install to my domain. The copying and transfer process, like everything else, is relatively simple.

Here are the steps:

1. Create new database in your hosting account

Depending on your plan and your access to C-Panel, you might have to ask your administrator to set up the database for you. If you do have access to phpMyAdmin or equivalent database management system, simply repeat the same process as I've described previously in my WAMP & Wordpress setup post.

Remember you need to copy down the
  • DB name
  • DB username
  • DB password
  • DB host

Assuming the database is hosted on the same server as your domain, your DB host will be "localhost". If you are using an external mySQL database, you will be given the host address.

2. Upload local WordPress folder to domain

Take the whole WP folder on your computer and upload that through ftp to your hosting account. Alternatively, you can choose to install a fresh copy by re-downloading it off WordPress.

3. Change wp-config file

Remember the database information you've taken down early? Open up the wp-config.php file (it's found just down the main WP folder you've uploaded) and fill the information, save and re-upload it back to the directory. Your ftp client might ask if you wish to replace the existing file, select "yes" or "overwrite". In a fresh install, you might not have a wp-config.php file, open the file titled wp-config-sample.php instead. Make the necessary changes and re-save the file as "wp-config.php".

4. Configure WP

This step ought to be familiar... Type in your domain name (or the address where your WP folder is located). If everything is setup, you will be presented with the install WordPress in 5 minutes set of dialogue boxes again. Fill everything in as usual. Create your new admin account, permalinks, template selection etc. as outlined in my WAMP & WordPress setup post again. Remember to upload your template into the wp-content folder if you used a fresh WP install!

5. Import posts and pages

Now, we need to export all the posts and pages we have in our local database. Log into your wp-admin account on localhost. Locate Tools on the left dashboard bar. Click on the arrow key to expand the group and select "Export". Under options, you probably want to keep the restricts open to "All Authors". Then hit the button to "Download export files".

Then login to the admin account on your domain's wordpress admin panel. This time click on Tools > Import. Choose to import from WordPress and select your WP export data file. Hit Okay and WP will present you with the option to create new users for authors or to remap them onto existing users. I went with remapping to prevent creating duplicate users. Hit Okay again and WP will add your posts and pages into the database.

6. Check for consistency

Finally, go through every page of your site to ensure everything is working correctly. If your css or page links uses page IDs, it's a good idea to check to see if the IDs are still the same. I didn't have any problems with my pages though. :)

And that's it! You're done.

January 7th, 2010

I found this great code snippet in a Smashing Magazine article for display your latest tweet using just php. It works fine for basic text only tweets, but runs into problems when the tweet contains quotes marks, links etc. The feed pass symbols like & as safe html entities, which of course doesn't display correctly on page. So I made some modifications to get that fixed.

Here's the code:

<div id="twitter">
<h2><a href="http://twitter.com/YOURUSERNAME">Latest tweet</a></h2>

// Your twitter username.
$username = "YOURUSERNAME";

// Prefix - some text you want displayed before your latest tweet.
// (HTML is OK, but be sure to escape quotes with backslashes: for example href=\"link.html\")
$prefix = "<div class=\"tweetentry\">";

// Suffix - some text you want display after your latest tweet. (Same rules as the prefix.)
$suffix = "</div>";

$feed = "http://search.twitter.com/search.atom?q=from:" . $username . "&rpp=1";

function parse_feed($feed) {
$stepOne = explode("<content type=\"html\">", $feed);
$stepTwo = explode("</content>", $stepOne[1]);
$tweet = $stepTwo[0];
$tweet = str_replace("&lt;", "<", $tweet);
$tweet = str_replace("&gt;", ">", $tweet);
$tweet = str_replace("&quot;", "\"", $tweet); // fix quote marks for links
$tweet = str_replace ("&amp;apos;", "&apos;", $tweet); // fix apostrophes
return $tweet;

$twitterFeed = file_get_contents($feed);
echo stripslashes($prefix) . parse_feed($twitterFeed) . stripslashes($suffix);

January 3rd, 2010

Today has been a productive day. I learned a few basic WP theme styling functions, including wp_page_menu() from this reference page. The page lists common template functions included in the WP codex along with a brief description of input parameters. It's quite helpful.

Using those functions and the Stalkers template, I managed to create custom pages for my site home, about and design pages. You can create a custom page template by adding an extra PHP file in the themes folder. Call it whatever you wish, just remember to place this at the top of the file.

Template Name: Name of your custom page

Then, include your header, loop, sidebar and footer files as required just like the index.php or single.php pages.

Save the file and log into the backend of WP as admin. On the edit page, on the right hand side, you should find "Template" under Attributes. Select your custom page and hit update. :)

Read more about custom page templates on the WP Codex.

January 2nd, 2010

I didn't have much time today to work on WordPress stuff... so all I did was dissect the famous WP loop. I did find a site that offers a basic tutorial for creating WP themes from scratch though. They start from the very beginning... as in assuming you don't know about PHP, CSS or even HTML... Cherry picking stuff off it works okay.

On to the loop

Apparently WordPress favors the use of the colon format using "endif" and "endwhile" instead of the good old curly braces {}. It makes me feel a little antsy coming in from a scripting background since it's easy for editors to pick up the closing tag pairs but not so much for "endifs". I suspect I can use my brackets instead and the code will still work fine, but for the sake of conventions... I'll use endifs.

Taken from my notes... (I wish I have a plugin to format this in color. Ah well, you can copy and paste it into an editor.)

/* LOOP! */
WordPress formating uses endif; and endwhile; instead of {}
Be VERY CAREFUL to close off functions correctly.

Syntax used:

if (condition) :
run stuff here if true;
more stuff;

stuff to run if false;

while (condition) :
run stuff here as long as condition is true;
counter whatnot to change condition;


// actual loop

<?php if (have_posts()) :?> // Check to see there's posts before running loop, prevents function errors
<php while (have_posts()) : the_post(); ?> // the_post() advance post position by one
// Stuff to do in loop here
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>

<?php endif; ?>

/* Additional notes on the loop
For front page,
Your Latest Posts option: loop displays actual "posts"
A Static Page option: loop display only the single selected page info and no posts or other pages.

January 1st, 2010

Today is officially my first day of learning WordPress. Although I did spent yesterday setting up my computer so I can install WordPress...

I guess the information about the APACHE server etc is probably useful if you're starting this from scratch. So I might as well describe my setup.

I decided to run the server off a Windows box (laptop running Windows XP SP3). Why Windows and not my Mac? Only because I don't want to clutter up my Mac with extra junk. I downloaded WAMPServer2 off their website. WAMP is Windows, Apache, MySQL, PHP... it is literally an Apache, MySQL and PHP server installation package for Windows. Installation was dead easy. Just download and run their .EXE file. Select your installation location, SMTP info (optional) and whether to set Firefox as your default browser is about all you have to do. Of course there's also plenty of tutorials out there detailing every step. :)

WAMPServer sits in your tray while it's running... Check to see if it's working by typing


into your browser. A page listing information about your install should appear. (You can also click on the WAMP Server tray icon and select Localhost to launch the page. If that's good, your new install is working fine.

That's what I did yesterday... plus other unrelated configurations on my box (I did a clean install again because I messed up my partitions. Oops!)

Today, I installed WordPress, following this video screencasts tutorial. Chris Coyier from CSS-Tricks have a ton of great tutorials on web design and dev. I especially like his screencasts. This video is a tad dated though, WordPress is now on version 2.9, so the admin panel is a little different than the one shown in the screencast but it's easy enough to follow.

Things that are different with a local install of WAMP:

1. Create a new database using myPHPAdmin from WAMP

See this guide for a walk-through. As a safety thing though, I'm not sure if I'll use "admin" as the login name for the database seeing as it'll be the first name a hacker will guess if the server is live.

2. Changing WP permalink

If you try to change the permalink as shown in Chris Coyier's screencast, WP will allow you to make the change, but when you click on the page links. Those will not load. The reason is that on a default WAMP install, the "rewrite_module" is disabled. You need to use the WAMP panel and turn that back on. (It's under the APACHE tab). Select that and it'll work. :)

That's enough rambling for today.
For my New Year resolution, I'm going to teach myself the ins and outs of WordPress. Since I've just redesigned my portfolio as a class project in INTE111 and I planned on linking my blog and twitter to the site, I thought this will be perfect candidate for turning into a WordPress site.

I have only played around with WordPress in the past and have never truly gotten into the backend of the CMS, creating and modifying themes. I do have a little bit of experience with php and mySQL though, so we'll see how far along I get.

I figure lots of people would like to learn WordPress. It'll probably be useful for me to blog about the various useful tutorials and sites as well as the things I learn throughout my learning experience. After all, if I run into problems, I'm sure others will as well. :)
Powered by LiveJournal.com