Here is a super basic theme to use as a starting point for development of fancier WordPress themes:
Download the MikeBasic theme (ZIP)
I know it’s not perfect. It’s mostly for me since I do so much WordPress theming and I was getting tired of stripping down other themes to create new ones.
If you have a hosting plan on a Dreamhost shared server and are trying to set up the Magento e-commerce package, you are probably having some problems. Granted, Dreamhost shared servers have some limitations, but that is not a reason to give up completely. Installing Magento on Dreamhost is not only possible, but actually pretty simple using the command line interface (CLI). The reason is that Dreamhost shared hosting has certain built-in limitations on the amount of time a PHP script can process, and the installation of Magento times out before it is complete. Since the command line is A LOT FASTER than running scripts over HTTP, the installation will not time out.
When I was first looking to set up Magento on Dreamhost, I found an article and forum thread on the Magento website that were on point. But they first assume that you know how to use the command line or even know what it is. When I was more of a newbie at web development, I would get frustrated at explanations that gave you the code, but didn’t explain how or where you were supposed to implement that code.
I wrote the tutorial below trying not to assume anything. Better yet, I’ll be explaining how to set it up in a sub-directory (e.g. http://www.examplesite.com/store/). I would recommend setting it up in a sub-directory because you may want to use other packages for other parts of your site and installing different packages in the same directory will cause problems. For example, you may want to install WordPress for your blog at http://www.examplesite.com/blog/.
What I’ll be using:
STEP 1: Log in to your DreamHost Web Panel
Go to the Dreamhost web panel and sign in with your username and password.
STEP 2: Create a blank database
In the left column of the administration panel, click the Goodies -> MySQL databases tab. Near the bottom of the MySQL databases page you will find the “Create a New MySQL Database” section.
In the Database Name field, enter a name for your database. You must select a unique name across the entire shared server, so select something like YOURSITE_magento – replacing YOURSITE with the name of your site (e.g. examplesite_magento).
Next, select your hostname. If you do not already have your hostname created, then create a new hostname. I would suggest mysql.examplesite.com.
Select your First User. If you don’t already have one, create a new user. NOTE: this is not the same as your FTP user or your Dreamhost login credentials. If you create a new user, you must also create a password for the user. Make note of the username and password since you will need it later.
Finally, click the “Add New Database Now” button. It may take 10 minutes or more for the database to be created.
STEP 3: Check to see if your user has shell access
In the Dreamhost administration panel, click the Users -> Manage Users tab. You will see at least one user. If you see “shell” under the type column, then you can skip to the next step. If not, click the edit link on the far right. In the User Account Type field, make sure “Shell account” is selected and save your changes.
STEP 4: Download PuTTY (command line interface tool)
Go to the PuTTY downloads page and get the download for your computer. I get the putty.exe link next to the top PuTTY choice. Place the downloaded file on your desktop.
STEP 5: Log in to your Shell account using PuTTY
Click the putty.exe file on your desktop. You should see the interface window below:
In the Host Name (or IP address) field, enter your host name. With Dreamhost, this value will be your domain name (e.g. examplesite.com). Let the other fields alone and click the “Open” button on the bottom. You should get the command line screen below:
Enter your username first and click the return button. You will then get a line for the password. NOTE: while you are typing the password, the cursor will not move and the characters will not show up, but if you enter your password correctly, you will get a success dialog like the one below:
STEP 6: Create your sub-directory
The first thing to know about the command line is how to navigate through your directories. Type “dir” and click Enter to view your top-level directories. To change to one of those directories, type “cd DIRECTORY_NAME” and replace DIRECTORY_NAME with the directory where your domain points (e.g. “cd examplesite“). Type “dir” again and you will now see the contents of the directory (if there are any). To go back up the directory structure use the command “cd ..” keeping in mind to include to two periods.
Now, create your sub-directory. Change into the directory where you would like to install Magento using the “cd” command above. Create a new directory using the command “mkdir store” – where “store” is going to be the name of the folder where Magento is stored and the sub-directory in your site that points to it. Use the “dir” command to see if the directory was successfully created.
Finally, use the command “cd store” to change into the new directory.
STEP 7: Install Magento with PUTTY
The Magento website has detailed instructions on how to run a full install with the command line, but I am going to re-publish it for the sake of ease.
NOTE: you can cut-and-paste into PuTTY by selecting the text you want to copy on your computer, right-click select “Copy” and then simply right-clicking on the command line cursor in PuTTY.
First, get the zip file of the full install of the Magento by typing in the command below:
wget http://www.magentocommerce.com/downloads/assets/1.6.2.0/magento-1.6.2.0.tar.gz
Next, unzip the file with the following:
tar -zxvf magento-1.6.2.0.tar.gz
When the zip file unpacks, it moves everything into a /magento directory. To move the contents up to your current directory (i.e. /store), run the following (including the period at the end):
mv magento/* magento/.htaccess .
Then, change the permissions on the necessary directories but running the following commands (separately):
chmod -R o+w media var
chmod o+w app/etc
Finally, delete the empty /magento directory and the zip file by running these commands:
rm -r magento
rm -r magento-1.6.2.0.tar.gz
STEP 8: Go through the command line installation wizard
This is the key to the installation. Magento suggests using the web-based installation wizard by loading http://www.example.com/store/downloader in your web browser. Do NOT use the web-based installer. This is the main cause of the problem in Dreamhost. Instead, use the command line installer with the commands below. Cut and paste the code below into a text editor and change the values of the config variables in quotes.
/usr/local/php5/bin/php -f install.php -- \
--license_agreement_accepted "yes" \
--locale "en_US" \
--timezone "America/Los_Angeles" \
--default_currency "USD" \
--db_host "mysql.examplesite.com" \
--db_name "your_db_name" \
--db_user "username" \
--db_pass "password123" \
--db_prefix "" \
--admin_frontname "admin" \
--url "http://www.examplesite.com/store" \
--use_rewrites "yes" \
--use_secure "no" \
--secure_base_url "" \
--use_secure_admin "no" \
--admin_firstname "John" \
--admin_lastname "Smith" \
--admin_email "you@examplesite.com" \
--admin_username "admin" \
--admin_password "password123"
When you click return, the command may run for a little while. When it is complete, you will see a message like this:
SUCCESS: 90de9490f9b2389480340d7c450ede0
Navigate to the location where you installed Magento (e.g. http://www.examplesite.com/store), and you should see the front end of the installation. To navigate to the administration panel, go to http://www.examplesite.com/store/admin and use the username and password from the admin_username and admin_password values that you set above. The rest is up to you.
My first few experiences with shell/command line/SSH were miserable. I was forced to use it for one thing or the other and I just couldn’t understand why the whole process couldn’t be easier. When you start to get it working, you discover its power and ease in doing everything from installing packages to batch resizing images – and may even begin to prefer it over slower methods.
Feedback welcome.
As you can probably tell by now, I am a fan of WordPress. It’s easy to install and style and supported by a great community of developers. It has come a long way from being used strictly as a vanilla blogging platform to become one of the most intuitive, feature-filled open-source content management systems (CMS) on the web.
Many people – even non-techies – have heard of WordPress. Most simply set it up on their web host, choose a theme, and start adding content. That’s all fine and well, but to make custom themes and significant configurations of a site — or to develop any type of higher level site than the photos-of-my-cats-type-blog — you must develop on your computer locally before putting anything on a web host. It’s simply more efficient than making changes one at a time to a web-hosted site and you also avoid exposing unforeseen errors and glitches to the browsing public.
At the top of my local web development environment list is XAMPP. XAMPP is an open-source Apache installation that contains all of the tools necessary for WordPress development right on your computer – without having to FTP your site files to a web server or even be connected to the Internet. In other words, XAMPP is a virtual web server on your computer.
The following tutorial explains how to set up XAMPP so you can get right down to the nitty-gritty and start theming your sites in WordPress. Let’s get to it.
Go to http://www.apachefriends.org/en/xampp.html and download XAMPP for your platform. Since I am currently on a Windows machine, these instructions will apply primarily to Windows, although it will apply (for the most part) to installation on any platform.
Locate the download file and run the installation. By default, XAMPP installs to your main C:\ hard drive. I would not recommend changing this location since I have run into problems when trying to install it to a sub-directory in the past.
If XAMPP has not automatically launched, find the XAMPP icon in your Program Files list and click to open it. A control panel dialog window will open. Next to the Apache and MySQL modules, click the Start button. Wait a few seconds for it to start running. When XAMPP is running, the control panel will look like this:
NOTE: If you have a problem getting the Apache to start running, follow the directions at the end of this post to change the port for XAMPP.
Go to http://www.wordpress.org and download WordPress. As of the date of this post, the version is 3.2.1. It will be saved as a ZIP file or TAR.GZ.
Locate the download and unpack it. You should now see a single folder named wordpress in your destination folder.
On a Windows machine, unless you chose a different installation directory, the HTDOCS directory will be located at C://xampp/htdocs. It will contain a directory named xampp and a couple of index files. Do not erase them.
The HTDOCS directory is where all the action happens. It is the equivalent of the root directory of your web server. Copy the wordpress folder here.
Since you can have multiple sites in HTDOCS, rename the wordpress folder to something identifiable with your site. For simplicity I’ll refer to the wordpress folder as the mysite folder from now on.
Open your browser of choice and type “http://localhost/xampp” in the location bar. This will load the XAMPP dashboard, which looks like this:
In the left side, click the link for phpMyAdmin. This is the PHP-based tool that allows you to interact with your local MySQL database built into XAMPP. On the dashboard, you will see a field to Create New Database. Enter a database name in the box and click Create. Unless you know what you’re doing, ignore the Collation and Interface options.
For now, the database will be empty.
You can use whatever database name you like. I tend to use the convention TYPE_SITENAME_PLATFORM so that dev_mysite_wp tells me it is the development WordPress database for MySite. This is important because you may use several databases for different aspects of a multi-dimensional website. It is also important to know whether the data is dummy development or staging data or real production data when the file is sitting somewhere as an exported SQL file.
In the mysite folder, you will see a file called wp-config-sample.php. Copy and paste this file in the same directory and rename it to wp-config.php. Open the wp-config.php file with your favorite text editor (I use Notepad++). Locate the code that defines the MySQL settings:
// ** MySQL settings – You can get this info from your web host ** //
/** The name of the database for WordPress */
define(‘DB_NAME’, ‘database_name_here’);/** MySQL database username */
define(‘DB_USER’, ‘username_here’);/** MySQL database password */
define(‘DB_PASSWORD’, ‘password_here’);/** MySQL hostname */
define(‘DB_HOST’, ‘localhost’);
The user should be root and the password should be empty. The hostname will remain localhost. So now the settings should be:
// ** MySQL settings – You can get this info from your web host ** //
/** The name of the database for WordPress */
define(‘DB_NAME’, ‘dev_mysite_wp’);/** MySQL database username */
define(‘DB_USER’, ‘root’);/** MySQL database password */
define(‘DB_PASSWORD’, ”);/** MySQL hostname */
define(‘DB_HOST’, ‘localhost’);
You should note that the database name I used is dev_mysite_wp. You should change it to the database name you selected.
Open your browser and point it to http://localhost/mysite/. You should be redirected to the WordPress installation page that looks like this:
Fill out the form with your Site Name, Username, Password, and Your Email. The option to “Allow my site to appear in search engines like Google and Technorati” does not matter since the local installation will not be visible online. Click the “Install WordPress” button. You should be directed to a Success! page.
Click the “Log In” button and enter the Username and Password you just selected. You should be redirected to the WordPress dashboard.
In the mysite folder, open the wp-content/themes folder. This is where all of your themes are located for easy activation. If you are building your own theme, you may want to start from scratch or use a child theme. I will typically use a cleaned-up minimalist blank theme I created myself or sometimes an existing theme.
As the date of this post, the WordPress installation comes with two default themes: Twenty Ten and Twenty Eleven. To develop your own theme using one of these themes as the starting point, follow these steps:
Theme Name: Twenty Eleven. Change this to: Theme Name: MyTheme (or the theme name that you used)In the dashboard located at http://www.{your-site}.com/wp-admin, go to Appearance –> Themes from the menu bar in the left column.
Locate the MyTheme theme and click Activate. When you return to your home page, your site will look like the theme you used as the base. As you develop, the changes will be immediately visible, and you will always have the base themes to fall back on.
Working with the themes and styling them is beyond the scope of this post. You can read more about theming from the WordPress site from the links below:
Cheers!
A common problem occurs if port 80 is already taken by another program – for example, IIS or Skype. In this situation, you must change the port that XAMPP uses. Follow these steps:
You must also change the port being used for the secure sockets layer (SSL).
Restart XAMPP, re-open the XAMPP control panel and try clicking the Start buttons for Apache and MySQL.
Now, in each instance when I refer to http://localhost, use http://localhost:85 instead. For example, to get to the index of mysite, go to http://localhost:85/mysite instead.
Here is my first publicly-available WordPress theme – the MikeGen theme.
The “Gen” is short for generic because I was looking to build a cleaned-up, streamlined base theme that I could use as a starting point for more complicated, flashier themes.
It is a simple, two-column, fixed-width, right-sidebar theme meant for basic blogging. The colors are entirely gray-scale: black, white, gray, and silver. It forces the user to focus on the content of a website without getting distracted by a colorful, ornamental frame.
Download Version 1.0 (LATEST)
http://demo.dockstreetmedia.com/mikegen-theme/
Individual (single) post page
Category archive index. The images are thumbs of the featured image for each post.
Comment section of a single post.
There are two (2) menus for this theme: one for the top navigation bar and one for the footer navigation.
SIDEBAR
There is only one sidebar for this theme.
There are currently only three (3) theme options located under “Appearance -> Theme Options” in the WordPress administration menu panel:
Logo
Header search bar option
Footer search bar option
I will update this theme when time allows. Any comments and suggestions are welcome.
Case Closure is a custom-built WordPress site for a group of arbitration and mediation professionals based in New York City. It is an update to an existing site converted from ASP (Microsoft’s Active Server Pages) to WordPress. The site was also search engine optimized.
JavaScript has been used for quite a long time to make websites come alive without having to jump from page to page. It is a client-side language, which means it loads in your browser when your page loads, but then is able to do things without refreshing the page in the user’s browser (the “client’s side”).
In the beginning, web developers always wrote out JavaScript instructions in full. Some purists still do. The problem with this is that the wheel keeps getting re-invented over and over again.
Along came JavaScript libraries. These libraries put common functions – like dynamically showing and hiding boxes – into a prepackaged file – or “library.” Many libraries have been developed: jQuery, Mootools, Prototype, and script.aculo.us. In my opinion, none have evolved as well as jQuery, which is why I use it almost exclusively.
Enough of the history lesson: let’s get to it. I’m going to walk you through the basics of showing and hiding elements – one of the most common things a web developer will do with jQuery.
Go to http://docs.jquery.com/Downloading_jQuery and download the most recent version of jQuery. It will be a single file. As of the date of this post, it will be jquery-1.6.2.min.js. The “min” just means it has already been “minified” – or stripped of all the line breaks and excess spaces so the file will look like a tight block of code with very long lines. This allows it to load more quickly in the user’s browser.
After you’ve downloaded it, put it into a folder in your site’s directory – anywhere you want as long as it is publicly visible. In a basic HTML site, for example, you can put it in a folder called “javascript” or “js” in the same directory as the index of your site. In other words, you will see the code if you point your browser’s address bar to “http://www.yoursite.com/js/jquery-1.6.2.min.js.”
In the <HEAD> section of your HTML page (or header include), add the following line:
<script type=”text/javascript” language=”javascript” src=”http://www.mysite.com/js/jquery-1.6.2.min.js”></script>
Change the SRC attribute to match your site’s URL.
As an alternative to downloading and linking to the jQuery file, you can simply link to a publicly-hosted copy. For example, the jQuery website provides a hosted version. Simply add the following link to your header file:
<script type=”text/javascript” language=”javascript” src=”http://code.jquery.com/jquery-1.6.2.min.js”></script>
Google and Microsoft also offer public copies. Since I frequently work offline, I tend not to use this option.
Insert the below code in your content section of your HTML page:
<a href=”#” id=”trigger”>Show</a>
<div id=”target”>
<p>This is the hidden div with the content you want to show or hide.</p>
</div>
There are only two elements defined: the A (anchor) link that controls the showing and hiding function, and the DIV (division) that will contain the content that is shown or hidden. I am using an ID for the elements of “trigger” and “target” to help you understand the way jQuery works, but you can use any ID or CLASS.
To give the HTML elements some structure and color, add the following code to your HTML page:
<style type=”text/css”>
a#trigger {
display:inline-block;
background:yellow;
margin:10px;
padding:10px;
border:1px solid orange;
}#target {
display:none;
width:400px;
background:lightblue;
border:1px solid blue;
margin:10px;
padding:10px;
}
</style>
Preferably, you should add this directly into your style sheet. For example, if you are using WordPress, it should go directly into your STYLE.CSS file. In a CSS file, do not use the <STYLE> tags.
Add the following jQuery code to your page:
<script type=”text/javascript”>
$(document).ready(function(){
$(‘a#trigger’).click(function() {
$(‘div#target’).toggle();
return false;
});
});
</script>
I generally put my JavaScript and jQuery in a separate file called COMMON.JS that I include with a link in my header file (also usually an include). You can put it anywhere below the link to the jQuery library.
Let’s break this down, one piece at a time:
<script type=”text/javascript”>
…
</script>
The <SCRIPT> tags are necessary to initiate and wrap the JavaScript and are necessary only because the JavaScript is written inside the HTML page. In an included page with the .JS extension, these tags are not used.
$(document).ready(function(){
…
});
The “doc ready” function must wrap the jQuery functions. It forces the functions inside to load after the document object model (DOM) is loaded but before the page contents are loaded. Without getting too into it, the DOM is the way that JavaScript sees the elements of the HTML page. You can read more about the DOM at http://www.w3.org/DOM.
$(‘a#trigger’).click(function() {
…
});
This is the basic show / hide function. The first part – shown above – defines the trigger ELEMENT and trigger EVENT. The $('a#trigger') part defines the trigger element. In this case, it is an anchor element – using the HTML <A> tag with an ID of “trigger” (a#trigger). The second part is the trigger event. In this case the event is a click (.click(function()). For a list of all events, go to http://api.jquery.com/category/events. When the element is clicked: the functions inside the brackets are run, for example:
$(‘div#target’).toggle();
return false;
The second part of the show / hide function defines the target ELEMENT and EFFECT. In this case, the target element is defined as the DIV with the ID “target” (div#target). The target effect is a toggle. A toggle is simply an effect that reveals an element if it is hidden, or hides an element if it is being shown.
For a list of all possible effects, go to http://api.jquery.com/category/effects/.The “return false” is an important part of the effect function. It prevents the element from doing what it does normally. For example, the <A> tag with an HREF attribute would normally link to another page. With the “return false” instruction, the anchor will no longer link to another page.
View the show/hide demo #1 in the link below.
http://demo.dockstreetmedia.com/jquery-showhide/demo1.html
To see the entire source code, right-click and select “View Source.”
For a smoother sliding effect, change the target effect to “slideToggle” – as shown in the updated jQuery below:
<script type=”text/javascript”>
$(document).ready(function(){
$(‘a#trigger’).click(function() {
$(‘div#target’).slideToggle();
return false;
});
});
</script>
View jQuery show/hide demo #2 in the link below:
http://demo.dockstreetmedia.com/jquery-showhide/demo2.html
For a fading in-and-out effect, change the target effect to “fadeToggle” – as shown in the updated jQuery below:
<script type=”text/javascript”>
$(document).ready(function(){
$(‘a#trigger’).click(function() {
$(‘div#target’).fadeToggle();
return false;
});
});
</script>
View jQuery show/hide demo #3 in the link below:
http://demo.dockstreetmedia.com/jquery-showhide/demo3.html
I hope this tutorial has been helpful in understanding the basics to animating your web pages with JavaScript and jQuery. These show/hide basics are the foundation of very common and useful web effects, including drop-down menus, slideshows, and dynamic forms. With a lot of practice, these difficult-looking, flashy effects become elementary.
Cheers.
Nouveau PR is a website built for a fashion public relations company based in New York using a custom theme for WordPress. The site utilizes jQuery for the sliding drawers and galleries.
The Balvenie Roadshow was a project built primarily using WordPress while working briefly with the good people over at LBi.
The site utilizes a form that captures user nominations for craftspeople all over the United States and a custom back-end system that allows administrators to approve or disapprove the nominations. The site also utilizes a custom feed that combines the most recent Twitter and blog entries. The site has a custom Google API map that displays the locations of the craftspeople that will be visited along the Roadshow and a system for capturing Facebook Likes, built with the help of one of the talented developers over at LBi. The site also utilizes many jQuery elements, including a custom paginator, sliding form, and event countdown.
NOTE: the site design comes from the creative team over at LBi.
Capital IQ Powermoves was a short “mechanic” project working on a WordPress-driven blog for a financial industry news provider. The WordPress theme was redesigned to improve back end performance by streamlining the category and tag system and implementing a better cache system. The theme was also modified to include a search links for custom fields for the names of individuals relevant to each post.
NOTE: the original theme for Capital IQ Powermoves was done by another web developer.
Acuity Healthcare of New Jersey is a content-managed website built using the LAMP environment, Linux, Apache, MySQL, and PHP.
The site runs on a web administrator authentication (login) system and includes a system that allows the client to manage an employee directory, job listings, news articles, and photo gallery in addition to the standard content manager for files and pages.
The content can be allocated to one of three hospital locations, automatically populating the sub-site for that location.
In addition, guests are able to upload resumes and PDF applications to the site, which are in turn converted to emails sent to preset addresses in the company, as well as automated emails sent to the applicant.
