Ford Motor Company launches WordPress driven site

Screenshot of the Ford Autoshow site built in WordPressWe’ve been saying it all along- WordPress is a great Content Management System (CMS)- now mega-companies are starting to figure out that Googlelove is more important than Flash driven sites.

With a lot of CSS wizardry, you can make your WordPress site look like anything you want- Take a look at Ford’s site:

Ford Motor Company – NAIAS Detroit 2007 » At The Show

Apparently, Ford doesn’t quite get it- the site is down as of Monday 15 Jan 2007

Continue reading →

How to: Upload themes and plugins for WordPress using FireFTP and our server

When we install WordPress for clients, we often include a nice selection of themes and some essential plugins. However, many people want to change the look of their site- by uploading new themes- or add new functionality to WordPress using Plugins. Here is how you update your WordPress install using FireFTP a free plug-in FTP for Firefox.

FTP stands for File Transfer Protocol, and the FireFTP extension for Firefox is a free, open source solution- other programs that do the same thing on a Mac are Fetch and Transmit. On a PC, you can get SmartFTP or FTP Explorer. FireFTP will do everything you need- and it’s free.
First you have to have Firefox installed- go to www.getfirefox.com to download a copy (if you haven’t already). Install Firefox- and don’t worry, it can reside peacefully next to Internet Explorer or Safari- you can have multiple browsers on your machine. It’s our opinion that you should make it your primary browser- and import all settings from your current default browser- but that is up to you.

Once in Firefox- go to TOOLS>ADD ONS

This will take you to the page where all the extensions are listed. Find the Search box- and type in FIREFTP- it should take you to this page: https://addons.mozilla.org/search.php?q=Fireftp&type=E&app=firefox

Click on FIREFTP, and then the “Install now” button. Restart Firefox and you should now have a little seahorse in your tool bar- and “FireFTP” as an option in your TOOLS menu.

Screenshot of Firefox tool bar icons

The icons: back, forward (dimmed), refresh, stop, FireFTP (the blue seahorse), Sage, autofill, new tab.

Now that you have FireFTP installed- you have to set it up for accessing your WordPress installation.

These are instructions for our server– using a standard Linux, Apache, MySQL and PHP (LAMP) running Cpanel.

First- click on the “Manage Accounts” text on the left side- create new account.

Main Tab: 

Account Name: What ever you want to call your site.

Host: url.tld (example: websitetology.com)

Login: your site login, will be different than your WordPress login

Password: your site login, may be different than your WordPress login

Connection type tab: 

Check “Passive mode”

Initial directories:

Local: a folder on your computer where you will keep your WordPress files.

Remote: www

Advanced tab:

No need to enter anything in these- although you can decide on how you want your file names to be structured- either Leave Case Alone, convert to lower case, or  CONVERT TO UPPER CASE (note- all files must not have spaces in them.)

Clicking on connect should open the connection- with your local folder on the left- and your www folder on the server on the right.Screenshot from FireFTP

There will be a long list of files on the server- with a lot of them starting with WP – this is your WordPress install- the only, ONLY, folder you will move things in and out of is your wp-content folder.

Inside it you will find three folders,  Uploads, themes and plugins.

These are where you place your content- respectively.

Uploads is where the WordPress upload tool will place your files- using a year, month, date file hierarchy. Sometimes you may go in here to update a file, or check a link structure. Most of you will never have to access this folder.

The Themes folder is where you will copy the entire folder of a theme that you have downloaded to your computer from someplace like the WordPress Theme Viewer. To upload the file from your computer to the server- have the closed folder that contains your theme on the left, and the themes folder open on the right- select the theme on the left- and click the right arrow button in the center-FireFTP will begin the upload process.

Screenshot of FireFTP for uploading theme to WordPress To upload- select the file on left- Pool, click right arrow and it will move from your computer to the server.

Once the files are done the FTP process- you log into your WordPress admin panel- the Desktop, click on the presentation tab- and activate your new theme.

To upload Plugins- you do the same thing- only upload them into your Plugin folder.

If you have any questions- or run into problems with these instructions- please comment below- and I will update or clarify the instructions.

Continue reading →

Breaking your WordPress theme- sidebar moves down?

I’ve posted about this before: http://blogosopher.com/?p=66 and mentioned the same source: Lorelle.

There are two common reasons people have their themes “break” or act oddly:

  1. they’ve copied formatted text from Microsoft Word that starts adding code that “overrides” the CSS of your theme.
  2. the picture or object that they try to place in their post is too big.

You can easily identify the first problem by noticing that your font has changed in a post and everything following it. The way to fix it is to go to your edit post function- click the “quicktag” HTML button- and search out any thing that says “span” “font” and a font name, “H1″ H2” etc- (it will be in the “< " and ">” carrot figures) these are not tags that the standard WordPress interface uses. Anything you undo here- will be able to be fixed in the standard WYSIWG view of the “Write Post” window- where you can reformat to your heart’s content. Sometimes Microsoft Word adds so much trash- it’s easier to copy the content back into Word- and then save it as text only before pasting into the Write Post window.

The second problem- where the sidebar moves to the bottom- typically is only seen by the 90% of people who still aren’t using Firefox. Microsoft Internet Explorer doesn’t understand some of the fundamental code to CSS (still)- and you must test by looking at your site using IE 6 on a PC. The simple solution- use Thumbnails- and never have images wider than about 400 pixels. However if you want to read all the details of this problem- Lorelle has a ton of good links – look at the excerpt of her post- then continue on to the link:
Lorelle on WordPress

One of the more common complaints and problems for new WordPress users is the issue of their images breaking their WordPress Theme. The Theme they choose is wonderful, reflective of their personality and blog, and the moment they upload their first photograph, it seems to break their blog.Web Design Sidebar pushes out over the content areaHave you ever tried to shove a square peg into a round hole? Or squeeze into a size 2 dress when you really should be wearing a 22? The results are what happens to web page designs when someone tries to cram something too big into a small space.

All web pages today feature at least two “columns”, two side-by-side sections to display their content. One is typically called the sidebar and the other is the content or main column or something similar. Each of these columns are known as containers, as they contain content and design elements within their borders. When something goes into these containers that exceeds their inherent width, they tend to stretch and break the design.

Put something wider than the width of the sidebar into the sidebar and it stretches to accommodate it. Since it’s literally pushed beyond its seam, it shoves the content section down to the bottom of the page. Put something wider than the width of the content section into the content section, and it shoves the sidebar around. If what you include in any container on your web page is wider than the designated width, something has got to give and it is usually your web page layout and structure.

The key is to only put things that are the maximum width into these columns (containers) so they won’t stretch and bork your web page design.

Continue reading →