Go Web Young Man » Tutorials

Using The WordPress Sandbox and The Blueprint CSS Framework Together

Michael — Tue, 15 Apr 2008 16:31:21 +0000

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:

I’ll start by assuming you’ve got WordPress installed and you’re using The Sandbox.
Next, you’ll want to download and unzip the Blueprint CSS Framework, and grab the blueprint folder inside the archive.
Place the blueprint folder inside the folder for your Sandbox theme.
Open the main stylesheet for the Sandbox theme, and add the following at the top of the file:
```
@import url('blueprint/screen.css');
```

Next, open header.php and add the following code in the :

/blueprint/print.css" type="text/css" media="print" />

Finally, while still in header.php, add container to the class attribute:

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

HowTo: Develop Your Photoblog Workflow

Michael — Mon, 04 Feb 2008 13:05:39 +0000

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.

1. Offload Your Pictures to Your Computer

After you’ve taken your pictures, you’ll need to transfer them from your camera to your computer in order to upload them. On my computer, I keep a “Flickr pictures” folder specifically for this task. Inside this folder, I keep a subfolder called “Archive”. Once I’ve uploaded my pictures to Flickr, I will move my photos to the “Archive” folder. This way, I have my photos backed up in two places: my computer and online.

The key principle in this step is: Don’t waste time organizing your pictures on your computer’s hard drive. Think of your computer as the tool you use to get your pictures to Flickr. In addition, having your pictures in one folder on your hard drive makes it easy to back up that folder to a DVD or other storage media.

2. Organize Your Photos While You Upload to Flickr

During the upload process, I use Flickr’s uploading tool to categorize, tag, sort and group my photos. I’ve found this process much more efficient than trying to maintain any sort of organization on my local computer.

Flickr lets you group your photos into sets and collections. For example, you might create a collection called “Hikes” and a set of pictures from one hike within that collection.

In addition, Flickr also lets you “tag” your photos. Tagging is the process of adding short descriptive words to your photos that allows for further sub categorization. Getting back to our previous “hiking” example, you might tag a photo from a hike with “outdoors, summer, mountains, bear attack, frightening” etcetera.

Furthermore, if you’re really crunched for time or have a lot of photos, you can always upload them and then organize them later.

3. Post to Your Heart’s Content

Once you’ve got your pictures uploaded to Flickr, if you followed the steps in the previous tutorial, now you can browse over to your Flickr account whenever the occasion strikes you and simply post a photo to your photoblog. Perhaps you’ll want to get in the habit of posting a new photo to your blog everyday, or maybe you’ll be less frequent with your updates. The great thing about this setup is that you’ll have the freedom to operate however you choose.

Conclusion

Perhaps you’re thinking, “Wait, we can’t be finished! There must be more steps!?” That’s my point exactly. Working with your photoblog should be a painless process. Your photoblog should accent your creativity, not hinder it.

Hopefully, this two-part series has helped you to see how easy it is to start and maintain a photoblog. If this series has helped you create your own photoblog, please leave a comment with a link to your site. In addition, be sure to ask a question if something isn’t too clear, or leave your own favorite photoblog tip.

Fixing Grid and List Views in WP e-Commerce Gold

Michael — Fri, 01 Feb 2008 20:10:04 +0000

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.

The Problem
The Grid View module currently available for purchase on the Instinct website requires the function wpsc_product_url() to generate links to each of the products featured in the grid view. The problem is that this function does not exist in the latest stable version of the plugin (3.5.1); however, it is found in the beta version (3.6 Beta 8).

The Solution
To get rid of the fatal error and get the grid view working, I took the wpsc_product_url() function from the file product_display_functions.php in WP e-Commerce 3.6 Beta 8, removed some 3.6 Beta 8 specific code and added the trimmed down function to the same file in WP e-Commerce 3.5.1.

And now, here’s the function we’ve all been waiting for :

function wpsc_product_url($product_id, $category_id = null){
	global $wpdb;
	if(!stristr(get_option('product_list_url'), "?")) {
		$initial_seperator = "?";
	} else {
		$initial_seperator = "&";
	}
	if(is_numeric($category_id) && ($category_id > 0)) {
		$product_url = get_option('product_list_url').$initial_seperator."category=".$category_id."&product_id=".$product_id;
	} else {
		$product_url = get_option('product_list_url').$initial_seperator."product_id=".$product_id;
	}
	return $product_url;
}

To apply the patch, simply copy and paste the above function into product_display_functions.php in WP e-Commerce 3.5.1. This file should be located in the root folder of your WP e-Commerce plugin.

Conclusion
Finally, keep in mind, I am no expert on the WP e-Commerce plugin. I was in the same boat as everyone else until I started digging through the code of the stable and beta release versions. Therefore, I hope this post will be of service to others out there; however, beyond this patch, I probably don’t know any more about the plugin’s code than you do.

HowTo: Start Your Own Photoblog

Michael — Mon, 28 Jan 2008 13:00:40 +0000

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.

Your Goal: An Easy to Use Photoblog

A photoblog or a photo weblog is a blog that features photographs. As an example, take my WordPress.com blog, The Occasional Post, which I use in conjunction with my Flickr photo account. Whenever the mood strikes me, I’m able to browse over to my Flickr account and use the Post to Blog feature to quickly add a new photo to my blog.

Using Post to Blog combined with the convenience of uploading my photos to Flickr means that I’m able to maintain this blog with minimal time and effort. Plus, since it’s free, this type of setup is great for anyone who wants an inexpensive way to keep your family and friends updated via the Internet.

Step 1: Create your WordPress.com and Flickr Accounts

WordPress.com is a blogging community powered by the same software that I use to run this website and virtually all of the websites that I build for my clients. Your WordPress.com blog is where you will be displaying your photos for all the world to see. Creating your own blog at WordPress.com is as easy as registering your name and email, picking a layout and getting started by writing your first post.

Flickr is an online photo management and photo sharing community. Their service provides several easy ways to upload and share your photos. Creating your own Flickr account is also free and easy. (As Flickr is owned by Yahoo!, you will need to use a free Yahoo! ID during sign-up.)

Step 2: Add Your WordPress.com Blog to Your Flickr Account

Adding your WordPress.com blog to your Flickr account makes it easy to post photos to your blog. When you add your blog to your account, any time you browse to a photo in your Flickr account, a “Blog This” button will be listed above the photo. Clicking on the button reveals a drop down that lets you select from any blogs you’ve added to your account. Selecting a blog, takes you to a page where you can add a title and any text you want before you click “Post Entry” to send it to your blog.

Follow these steps to add your WordPress.com blog to your Flickr account:

In your Flickr account, select You > Your Account.
Once you are in the Your Account section, select the Extending Flickr tab.
Under the Extending Flickr tab, there will be a section called Your Blogs. Click edit or Add a blog.
Next choose WordPress blog and follow the instructions to finish adding your blog.

Conclusion

Now that you’ve got your WordPress.com blog added to your Flickr account, you’re ready to launch your successful foray into photoblogging. These two easy-to-use free services make it a cinch for anyone to start showcasing their photographic skills online.

If you have further questions or if you’ve found this helpful, please be sure to leave a comment below. Plus, be sure to check back next week for part two of this series called Develop Your Photoblog Workflow where I’ll share tips on how to add some efficiency to your photo offload and uploading process.

Embedding WordPress into OS Commerce Part II

Michael — Fri, 06 Oct 2006 18:28:56 +0000

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.

Keeping 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.

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/.
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).

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');

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:

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
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.
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:

Welcome to Mars Hill

Michael — Mon, 04 Sep 2006 15:09:42 +0000

While 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:

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:

Click here to create a Google Reader account.
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:
Right click here and choose “Save as…” and save the file subscriptions.xml to your Desktop.
In the main menu, click on “Subscriptions >> Edit Subscriptions”:

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

Javascript Back Link

Michael — Tue, 08 Aug 2006 21:40:46 +0000

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

How to Flush your DNS Cache

Michael — Mon, 13 Feb 2006 19:22:57 +0000

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…

**** Request timed out
**** Request timed out
**** Request timed out
**** 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:

Start > Run "cmd"
Do "ipconfig" to see your IP
Do "ipconfig /release" then "ipconfig /renew"
Do "ipconfig /flushdns"
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.

Lightbox JS

Michael — Wed, 18 Jan 2006 16:11:06 +0000

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.

Embedding WordPress into OS Commerce

Michael — Mon, 28 Nov 2005 21:27:59 +0000

I’ve created the following tutorial in response to topic 47148: osCommerce and WordPress at WordPress Support.

While I have been programming PHP for a while, I am new to both OS Commerce and WordPress. That being said, for this integration I have tried to follow the coding standards for creating a new OS Commerce page. If you see any refinements I need to make to my code, feel free to comment. I hope this helps all of you who are looking to integrate OS Commerce and WordPress.

10/06/2006 - UPDATE: In response to comments below, I’ve written a Part II to this tutorial showing how to embed WordPress into a default install of OSC MS2.2.

PLEASE NOTE: The code in this tutorial assumes that your OS Commerce install is located in your server’s web root and your WordPress install is located in a subdirectory named wordpress/.

ALSO NOTE: This tutorial is written for OS Commerce installs using the Basic Template Structure (BTS). For OSC installs using the Simple Template Structure (STS), please see comment number 9 below:

Create a file for your WordPress blog in the root folder of your OS Commerce install. For our purposes, we’ll name this file blog.php. The contents of this file are as follows:

 core:
define('WP_USE_THEMES', false);
require('./wordpress/wp-blog-header.php');

require('includes/application_top.php');
require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_BLOG);
$breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_BLOG));
$content = CONTENT_BLOG;
require(DIR_WS_TEMPLATES . TEMPLATE_NAME . '/' . TEMPLATENAME_BLOG_PAGE);
require(DIR_WS_INCLUDES . 'application_bottom.php');
?>

Open the file oscommerce_root/includes/filenames.php.
- Find the section that begins with the comment // define the content used in the project, and add the following code:
- Find the section that begins with // define the filenames used in the project, and add the following:
- Find the section that begins with // define the templatenames used in the project, and add the following:
Create the following file: oscommerce_root/templates/your_template_dir/blog_page.tpl.php (Note: This file’s filename matches the variable you defined as TEMPLATENAME_BLOG_PAGE in filenames.php).
The contents of this file will vary according to which template you are using (to start, I suggest making a copy of your main_page.tpl.php); however, the body content on this page will be your WordPress blog. You will display your blog using The WordPress Loop. The following file is only meant to show you how to get started. Your blog_page.tpl.php will vary according to the template you are using in OS Commerce:
```
>



  <?php echo TITLE ?>
```
A discussion of The WordPress Loop is beyond the scope of this tutorial; however, here are some excellent resources:
- The WordPress Loop
- The WordPress
  Loop in Action
Create the following file: oscommerce_root/includes/languages/your_language/blog.php (Note: This file must be named the same as the file you created in step 1). The contents of this file are as follows:
Okay, your WordPress blog should now be embedded into your OS Commerce install. Keep in mind that you will need to adjust your menus and links to point to this new page you have created. If your OS Commerce install is located in your site’s web root, and you have used the same filenames suggested in this tutorial, then the link to your blog will be: http://your-domain.com/blog.php.