Oct 1, 2008

HowTo: The Power Nap and The Power Run

If you maintain any sort of regular hours on the job (i.e. 9 to 5, etc), at some point or another I’m guessing you’ve experienced the “workday doldrums.” This is when either through boredom, fatigue or “office fever” (aka cabin fever) you hit a productivity wall. In this post, I’m going to propose two solutions which will leave you feeling refreshed, revived and ready to tackle the rest of the day. Continue Reading

Apr 15, 2008

Using The WordPress Sandbox and The Blueprint CSS Framework Together

Lately, I’ve taken a liking to building WordPress themes using a combination of the WordPress Sandbox and the Blueprint CSS Framework. If you’re a designer who builds custom WordPress themes and you haven’t heard of either of these two masterpieces of code, an introduction is in order. Then, after you’ve met, I’ll show you how to invite Blueprint to come and play The Sandbox.

The WordPress Sandbox – The perfect start to your next WordPress theme
Straight out of the box, the WordPress Sandbox theme is an exercise in styling simplicity. Lacking any graphics and featuring white on black text, the theme is just waiting for a CSS wizard to craft her next masterpiece.

In addition, the theme features a couple of custom functions that generate CSS classes for the specific context of a particular markup element. For example, let’s say you want to style posts in your “Reflections” category different from posts in your “Quotes” category. Custom functions in The Sandbox make this easy by generating custom class selectors specific to each category.

All-in-all, The Sandbox comes with all the basic building blocks you need to get started building your own custom theme. Having built custom themes using The Sandbox over the past year, I wouldn’t think of starting anywhere else.

The Blueprint CSS Framework – A Solid CSS Foundation
During the past couple of months I’ve become aware of the Blueprint CSS Framework. While I’ve been working with The Sandbox, I keep finding myself coding the same basic CSS declarations for headings, paragraphs, lists and the like. During that time, I’ve thought about coming up with my own basic rules to include with The Sandbox; however, fortunately the Blueprint Framework far outdoes what I was thinking. Among other things, it features:

  • An easily customizable grid
  • Sensible typography
  • Relative font-sizes everywhere
  • A typographic baseline
  • An extendable plugin system
  • Perfected CSS reset
  • A stylesheet for printing
  • No bloat of any kind

It’s the perfect baseline for my CSS. Furthermore, I’ve only just begun to grasp and harness the power of its grid which allows for precise placement of your columns and other design elements.

Invite Blueprint to Play In The Sandbox
Enough with the introductions, let me show you how to get these two code bases working together:

  1. I’ll start by assuming you’ve got WordPress installed and you’re using The Sandbox.
  2. Next, you’ll want to download and unzip the Blueprint CSS Framework, and grab the blueprint folder inside the archive.
  3. Place the blueprint folder inside the folder for your Sandbox theme.
  4. Open the main stylesheet for the Sandbox theme, and add the following at the top of the file: 
    @import url('blueprint/screen.css');
  5. Next, open header.php and add the following code in the <head>: 
    <link rel="stylesheet" href="<?php bloginfo("template_directory"); ?>/blueprint/print.css" type="text/css" media="print" />
<!--[if IE]><link rel="stylesheet" href="<?php bloginfo("template_directory"); ?>/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->
  6. Finally, while still in header.php, add container to the <body> class attribute: 
    <body class="<?php sandbox_body_class() ?> container">

That’s it. You’re now ready to build your own custom theme using the WordPress Sandbox and the Blueprint CSS Framework!

Feb 4, 2008

HowTo: Develop Your Photoblog Workflow

In part one of this series, I showed how easy it is to create your own free photoblog using WordPress.com and Flickr. Now that you know how to create your own photoblog, I’m going to share my tips for maintaining an efficient photoblogging workflow. Continue Reading

Feb 1, 2008

Fixing Grid and List Views in WP e-Commerce Gold

Recently, one of my clients asked me to setup and configure an online store using WordPress and the plugin WP e-Commerce Gold by Instinct Entertainment. As a part of the design, I needed to implement the Grid View module to display the products in a nice layout. Unfortunately, whenever I tried to use the Grid View, I was confronted with this error:

Fatal error: Call to undefined function wpsc_product_url() in grid_display_functions.php on line 47

A quick search of all the files for this plugin revealed that function wpsc_product_url(){…} was nowhere to be found. Furthermore, searching on “undefined function wpsc_product_url()” revealed that others are having this problem too, and the admins on the forums at Instinct Entertainment don’t seem to be too helpful either. So, I had to come up with my own patch which I am happy to share with everyone else who has run into the same problem. Continue Reading

Jan 28, 2008

HowTo: Start Your Own Photoblog

Do you like taking pictures, and at the same time wish you had an easy and personalized way to share them online? In this tutorial, I’m going to show you how to take advantage of two free services (WordPress.com and Flickr) to start your own photoblog. Continue Reading

Oct 6, 2006

Embedding WordPress into OS Commerce Part II

It has been almost twelve months since I published my first tutorial on embedding WordPress into OS Commerce. At the time, I was relatively new to working with OSC, so I was unaware of the many different template modules available for the software. Through the comments on my post, I learned that the OSC install that I was working with used the Basic Template Structure (BTS). However, people inquired about adjusting my tutorial for use with the Simple Template System (STS). Still more persons asked questions pertaining to default installs of OSC MS2.2.

osc_wordpress.jpgKeeping all of these comments in mind, this month I put together a default install of OSC MS2.2 with an integrated WordPress blog. What follows is a step-by-step tutorial (with the novice in mind) showing you how to do this. For the many people who are looking for an effective way to integrate OS Commerce and WordPress, I hope this tutorial proves to be a valuable and effective contribution to the OSC Community.

  1. First, you will need to install OSC MS2.2 on your web server. This tutorial will assume that your OSC install is located in the default location for a typical OSC install: http://yourdomain.com/catalog/.
  2. Next, install WordPress in the /catalog/ directory (i.e. http://yourdomain.com/catalog/wordpress/). Once you’ve installed WordPress, login to your WordPress admin and set Options > General > Blog address (URI) to “http://yourdomain.com/catalog/blog.php” (Note: If you would prefer to have your blog file named something other than blog.php, be sure to set this value accordingly and rename the file that you upload in step 4).
  3. Now, just after the opening comments of the /catalog/includes/application_top.php file, add the following PHP code: 
    // turn off WordPress themes and include the WordPress core:
define('WP_USE_THEMES', false);
require('./wordpress/wp-blog-header.php');
  4. Next, download these two files (blog.php and stylesheet.blog.css) and place them in the root of your OSC install.

Additional Refinement: Displaying Blog Headlines on your Catalog Homepage
For added functionality, here are instructions for including a WordPress static page and blog headlines on the homepage of your OSC store:

  1. Before making this edit, you’ll want to make a backup of your default OSC homepage by renaming the file /catalog/index.php to index.ORIGINAL.php
  2. Now, download this new index.php file and upload it to your /catalog/ directory. This new index file will display your last 4 blog headlines in a column on the right of the page body. Plus, the value for TEXT_MAIN found in /catalog/includes/languages/english/index.php will display in the left column of the page body.
  3. In addition, starting on line 292 of this new index file, I have a switch inserted that will check for the presence of Vito Tardia’s Improved Include Page WordPress Plugin. If you install Vito’s plugin in WordPress, you can edit the iinclude_page() function call on line 294 to include the contents of any WordPress static page by simply editing the page ID in the function’s arguements.

Needing Additional Help?
If you’re a total novice when it comes to the web, you can hire me to perform the aforementioned services for you. At the demonstration website mentioned in this post, you can purchase one of these options:

Sep 4, 2006

Welcome to Mars Hill

Mars Hill in Athens, GreeceWhile I was listening to The Way of the Master podcast yesterday, the host related the idea that the Internet is the new Mars Hill. I’ve also been thinking about this lately, and today I would like to take the time to bring you into the discussion.

“What is Mars Hill?” you may be asking. In Acts 17, Mars Hill is where Paul spent time reasoning with the philosophers of Athens. A parenthetical by the author of Acts reports that “All the Athenians and the foreigners who lived there used to spend their time in nothing else than telling or listening to something new.” (NET Trans)

Mars Hill, or the Areopagus as it was known to the Athenians in that day, was known as a place for the open exchange of ideas. It was here that Paul brought the teachings of Christ into the intellectual arena alongside the philosophies of the Epicureans and the Stoics (Acts 17: 18). In other words, Paul presented Christianity as a worthy philosophical opponent to competing worldviews.

Likewise, in the present day, the Internet has very much arrived and continues to grow as our modern day Mars Hill. For example, during The Way of the Master podcast I mentioned at the beginning of this post, the host mentioned that they had posted a part of his debate with an atheist on the online video service called YouTube. In response to this post, another atheist video taped his challenges to their video and posted it on YouTube. Finally, during The Way of the Master podcast, the host gave his responses to the atheist’s challenges. The exchange of ideas taking place was intriguing, and it represented an example of Christianity competing in the marketplace of ideas.

Now, after reading this post, perhaps you are interested in getting involved in this modern day Mars Hill. Maybe you would like to contribute your voice to the discussion or at least listen in? Well as a means of allowing you to listen in, I would like to introduce you to a web application called an RSS Reader. More specifically, I would like to introduce you to my favorite RSS Reader known as the Google Reader:

Google Reader

What is RSS?
First off, RSS is an acronym for Really Simple Syndication. RSS is the means by which blog authors make their blogs available for mass distribution. People like you and me can use an RSS Reader to subscribe to RSS feeds and thereby read their favorite blogs via a common interface at their leisure. For example, in my RSS Reader, I currently subscribe to the following blogs:

  • Between Two Worlds – “A Mix of Theology, Philosophy, Politics, and Culture”
  • Challies Dot Com – Personal blog of Tim Challies a cool Canadian, web designer, and Christian thinker.
  • Fellowship Church Sermons – podcast sermons from my church
  • PreachingTheBible.com – John Piper sermons
  • Pyromaniacs – “The Pyromaniacs are usually provocative, often annoying, always opinionated, rarely subtle, and sometimes worth listening to. Our doctrinal perspective is essentially in agreement with the London Baptist Confessions of 1644 and 1689.”
  • Stand to Reason Blog – A Christian apologetics organization founded by Greg Koukl. I also subscribe to their daily and weekly podcasts.
  • The A-Team Blog – “Take a stand for the truth, but do it in LOVE, fool!”
  • The Christian Mind – “‘If Christians cannot communicate as thinking beings, they are reduced to encountering one another only at the shallow level of gossip and small talk. Hence the perhaps peculiarly modern problem – the loneliness of the thinking Christian.’ – Harry Blamires, The Christian Mind“
  • the evangelical outpost – “Reflections on culture, politics, and religion from an evangelical worldview.“
  • Way of the Master Radio – Daily radio show hosted by Todd Friel
  • World Magazine Blog – The blog of World Magazine

Forget Bookmarks! You need an RSS Reader:
In the distant past of the Internet (let’s say 2 or 3 years ago), if you wanted to keep up with the latest postings on the aforementioned websites, you might bookmark all of the above links in your web browser and check them periodically. Of course this would take a lot of time and a good amount of clicking. However, on today’s World Wide Web the new way of keeping up with all of your favorite websites is via site RSS feeds displayed in your favorite RSS Reader.

In my case, this is where the Google RSS Reader comes in. The Google RSS Reader features an easy to use interface that allows me to subscribe to the RSS feeds of my favorite blogs. Once I’ve subscribed to a feed, I can browse the titles of new posts via a sortable left hand column. Clicking on a title displays the post in the main content window on the screen. Furthermore, if the post contains audio (this is commonly known as a podcast), the Google Reader displays a simple audio player interface that allows me to play the file.

Get Google Reader:
By this point, if you’re saying, “I would like to try out the Google Reader for myself,” then let me help you get started:

  1. Click here to create a Google Reader account.
  2. Once you’ve created a Google Reader account and you are logged in, if you would like to get started with some blog subscriptions, you may import my subscriptions if you wish. To do this, follow these instructions:
  3. Right click here and choose “Save as…” and save the file subscriptions.xml to your Desktop.
  4. In the main menu, click on “Subscriptions >> Edit Subscriptions”:

    5. reader_editsubscriptions.gif

  5. Then, click on “Import/Export”.
  6. Click on the “Browse…” button in the “Import your subscriptions” area.
  7. Find the file subscriptions.xml on your Desktop, double-click it, and then click Upload.
  8. If you followed these instructions correctly, at this point, you should now have my blog subscriptions in your Google Reader. Enjoy!

Aug 8, 2006

Javascript Back Link

I’m always having to Google the code for a Javascript back link; therefore, I thought I would save myself the time and post an example on my blog:

Back

Feb 13, 2006

How to Flush your DNS Cache

If you read the title of this post and you said, "What the heck is DNS Cache?". Let me recommend that you return to looking at Picture of the Day. On the other hand, if you’re interested in what I’m talking about read on:

Today I’ve been waiting for a domain to point to my web server. Furthermore, the sooner this happens the better. Well, as it turns out, a quick check of the domain at DNSreport.com shows that the DNS for this domain has been updated properly. However, when I browse the web via my office cable Internet connection, the domain is still pointing to its old name servers.

In order to confirm that I am experiencing a problem via my cable Internet connection, from a command prompt, I run:

C:\> tracert mydomain.com

The response is:

C:\> Tracing route to mydomain.com [***.***.***.***] over a maximum of 30 hops…

  1. **** Request timed out
  2. **** Request timed out
  3. **** Request timed out
  4. **** Request timed out

and so on and so forth. 

Well, what this seems to indicate is that I can’t browse to mydomain.com because my cable Internet provider’s DNS cache hasn’t been updated. Therefore, I do the following to flush my DNS cache:

  1. Start > Run "cmd"
  2. Do "ipconfig" to see your IP
  3. Do "ipconfig /release" then "ipconfig /renew" 
  4. Do "ipconfig /flushdns"
  5. Now, do "nslookup mydomain.com". 

Now, if the DNS cache was your problem, you should be able to view mydomain.com via your web browser. 

Jan 18, 2006

Lightbox JS

Here’s a link to an off-site tutorial for an excellent way to display images on your website. Perhaps I’ll get around to implementing it around here some day:

From the website:
Lightbox JS is a simple, unobtrusive script used to to overlay images on the current page. It’s a snap to setup and works on all modern browsers.