Example Tabs Shortcode Output
The following code is my solution for creating a set of WordPress shortcodes to generate the HTML needed to reproduce the minimal setup for tabs using the jQuery Tools library. [Read more...]
Integrating WordPress and ZenCart – The ZenCart WordPress Theme
October 28, 2010 By 22 Comments
A while back, I posted a screencast which shows my technique for embedding WordPress into Zen Cart™. In recent weeks, a couple of people have requested to see my code. So, I’m providing it in this post. [Read more...]
Adding auto-scroll to the WooThemes VibrantCMS
May 19, 2010 By 6 Comments
One of my clients wanted the featured image slider in the WooThemes VibrantCMS theme to auto-scroll. As I couldn’t find a solution out there, I coded one myself.
Auto-Scroll Demonstration
This video demonstrates the effect achieved by the JavaScript I include in this post:
The Code: VibrantCMS Auto-Scroll JavaScript
To make the featured images auto-scroll in your VibrantCMS theme, you’ll need to add the following code to /vibrantcms/includes/js/featured.js:
Before jQuery(document).ready(function(){ add:
var scrollcount = 1; // a global var used to setup counting between transitions
var scrollinterval = 7000; // time in milliseconds between transitions
var transinterval = 1000; // time in milliseconds for the transition between featured images
function autoscroll(){
var buttontotal = jQuery('#steps ul').children().size();
var marginleft = scrollcount * -960;
jQuery('.widearea').animate({
marginLeft: marginleft + 'px'
},transinterval);
scrollcount++;
if(scrollcount == buttontotal) scrollcount = 0;
}
After jQuery(document).ready(function(){ add:
autoscrollID = setInterval('autoscroll()',scrollinterval);
jQuery('#steps li a').click(function(){
clearInterval(autoscrollID);
});
jQuery('.buttons').click(function(){
clearInterval(autoscrollID);
});
Once you are finished, the complete file will look something like this:
var scrollcount = 1; // a global var used to setup counting between transitions
var scrollinterval = 7000; // time in milliseconds between transitions
var transinterval = 1000; // time in milliseconds for the transition between featured images
function autoscroll(){
var buttontotal = jQuery('#steps ul').children().size();
var marginleft = scrollcount * -960;
jQuery('.widearea').animate({
marginLeft: marginleft + 'px'
},transinterval);
scrollcount++;
if(scrollcount == buttontotal) scrollcount = 0;
}
jQuery(document).ready(function(){
autoscrollID = setInterval('autoscroll()',scrollinterval);
jQuery('#steps li a').click(function(){
clearInterval(autoscrollID);
});
jQuery('.buttons').click(function(){
clearInterval(autoscrollID);
});
// WooThemes auto-scroll code goes here...
});
For those of you who have been hunting for this type of solution, I hope this helps!
Note: I’d call myself an intermediate JavaScript novice. If you see any improvements that can be made in my code, please share them in the comments.
HowTo: The Power Nap and The Power Run
October 1, 2008 By 2 Comments
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. [Read more...]
Using The WordPress Sandbox and The Blueprint CSS Framework Together
April 15, 2008 By 33 Comments
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 <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]--> - 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!
HowTo: Develop Your Photoblog Workflow
February 4, 2008 By Leave a Comment
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. [Read more...]
Fixing Grid and List Views in WP e-Commerce Gold
February 1, 2008 By 10 Comments
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. [Read more...]
HowTo: Start Your Own Photoblog
January 28, 2008 By Leave a Comment
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. [Read more...]
Embedding WordPress into OS Commerce Part II
October 6, 2006 By 124 Comments
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 (demo no longer available, sorry). 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 arguments.
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:
