WordPress Academy » Wordpress How-To http://wordpressacademy.org Build a sensational website in 4 weeks using WordPress Sun, 25 Sep 2011 23:38:33 +0000 en hourly 1 How to create a website banner using free image editing software Paint.Net in 15 minutes http://wordpressacademy.org/2010/02/how-to-make-a-banner-for-your-website-using-free-image-editing-software-paint-net/ http://wordpressacademy.org/2010/02/how-to-make-a-banner-for-your-website-using-free-image-editing-software-paint-net/#comments Tue, 16 Feb 2010 13:35:49 +0000 marc http://wordpressacademy.org/2010/02/how-to-make-a-banner-for-your-website-using-free-image-editing-software-paint-net/ I love the free image editing software Paint.Net.  It’s a serious competitor for Photoshop CS4 ($799!) in the do-it-yourself market.  Another (reputedly) more powerful, but harder to use free software is Gimp.  But Paint.Net does the job for me.  Here is a typical application: making a banner for a website.  Below is a step-by-step guide.

But [...]]]> I love the free image editing software Paint.Net.  It’s a serious competitor for Photoshop CS4 ($799!) in the do-it-yourself market.  Another (reputedly) more powerful, but harder to use free software is Gimp.  But Paint.Net does the job for me.  Here is a typical application: making a banner for a website.  Below is a step-by-step guide.

But first, here is the result:

swan2

And here is what you do:

  1. Start Paint.Net.  Make sure the Tools window, the Layers window, and the Colors window are visible.  If not, enable them from the View menu.
    image
  2. Go to your favorite free stock photography site (Google “free stock photography” or check Stock.xchng), find the image you want for your logo, view it at the largest possible resolution, then Right-Click > Copy
  3. Edit > Paste in to New Image
    image
  4. Click on Rectangle Select on the Tools Window (top left)  image and use it to select the part of the image that you want.  Leave some space at the right to do the image fade-out (see below).
    image
  5. Do Image > Crop to Selection
    image
  6. Decide on the banner height: 150 pixels is a good height. Do Image > Resize and enter a Height of 150 and Ok.
    image
  7. Choose your width depending on the width of your website (normally either 800 or 1000 pixels).  Then Image > Canvas Size and put a a Width of 800.  Do not check Maintain Aspect Ratio
    image
    Notice the right of the image has filled with empty or transparent pixels (the grey boxes indicate transparent pixels).
    If you are using a variable-width theme or template and using the image for the background image of the header area, you need to make it at least 1800 pixels (but be aware most browsers will only see the first 1000 or 1200 pixels of width)
  8. Now let’s insert a background color / layer.  Do Layers > Add New Layer.  The Image will remain unchanged but note the Layers window now shows a new layer, “Layer 2”
    image
  9. Now we need to “digress” a bit and talk about layers.  First, for clarity sake, double click on “Layer 1” in the Layers Window and call it “Swan”.  Now double-click on “Layer 2” and call it “Background”
    image
  10. Now Uncheck the box next to “Swan” on the Layers Window.  This makes that layer not visible.  Now you only see the empty (transparent pixels) “Background” layer
    image
    You need to understand layers: images show up in the layer order which is top-to-bottom unless there are transparent pixels on the upper layer(s).  The only reason the swan was showing at all (in the previous frame #7), given that “Background” is actually an upper layer, is becausee the “Background” layer is all empty (transparent) pixels.
  11. Now let’s fill this background with a blue color to merge as closely as possible with the Swan background color.
    First, make the Swan layer visible again and the Background layer invisible. Then select the Color Picker on the Tools Window image and click on a darker area of the swan picture.  Notice the Primary color on the Colors Window has changed to a dark blue / black
    image
    You need to understand the Color window: The upper left box is the Primary color (the drawing color of all tools).  Just below is the Secondary color (the fill color of most tools).  To select a color for drawing, first select either the Primary or the Secondary color box.  Then, either click on a color from one of the palettes, or use the Color Picker tool and click anywhere on the image.
  12. So now you have set the primary color to a dark blue.  Go back to your background layer (select it in the Layers Window), select the Paint Bucket Tool image and click anywhere on the image.
    Oops!  The entire image goes dark blue!
    image
    The reason (of course – if you have read above about layers) is that the “Background” layer is on top of the “Swan” layer.
  13. So you just need to move the Background layer down below the Swan layer. Click on “Background” in the layers window and then the down arrow:
    image
  14. Now you see the swan and the background (remember that the right of the swan image is transparent pixels)
    image
  15. Next: fade-out the swan image right border using the Gradiant tool (transparency gradient) OR gaussian blur it.  (Instructions for this will be provided in a video later).  Here is what you get
    image
  16. Now use the Text tool image to write your banner text. (Also will be demonstrated in a video)
    image
  17. You can insert any other image by following the same procedure: add a new layer, crop and resize.  Remember new layers won’t be visible unless they are on top.
    Hint #1: You can work with multiple images simultaneously inside Paint.Net.  Just Edit > Paste to New Image the new image, crop and resize, then Edit > Select All, Copy, select the image you are actually working on (ie. the banner in the example above) – see the open images on the top right — and Edit > Paste in to New Layer
    Hint #2    : You can increase the screen resolution (visible size of your image) in the View menu, or else by putting your mouse over the image and Ctrl + move the mouse scroll bar.
  18. First save the .pdn (Paint.Net file with all the layers) in case you want to work on it more later.  Then File > Save and save it as jpg and upload it to your website.

That’s it!

If you like this article, please comment.

Related (External) Posts

]]> http://wordpressacademy.org/2010/02/how-to-make-a-banner-for-your-website-using-free-image-editing-software-paint-net/feed/ 24 Installing and using the free screen capture utility “Cropper” on Windows http://wordpressacademy.org/2010/02/installing-and-using-the-free-screen-capture-utility-cropper-on-windows/ http://wordpressacademy.org/2010/02/installing-and-using-the-free-screen-capture-utility-cropper-on-windows/#comments Tue, 16 Feb 2010 13:31:15 +0000 marc http://wordpressacademy.org/2010/02/installing-and-using-the-free-screen-capture-utility-cropper-on-windows/ This is useful not just for capturing screen elements, but also for measuring the pixel-width of items on websites.

Note: you don’t need to use screen-capture to capture images on websites.  Just right-click > Copy. You can also get the image dimension through right-click > Properties.

Download and install Cropper Run it.  An icon appears on your [...]]]> This is useful not just for capturing screen elements, but also for measuring the pixel-width of items on websites.

Note: you don’t need to use screen-capture to capture images on websites.  Just right-click > Copy. You can also get the image dimension through right-click > Properties.

  1. Download and install Cropper
  2. Run it.  An icon appears on your taskbar: image
  3. You must select your destination – either a file directory or the clipboard.  I use the clipboard.  Right-click on the cropper icon in the taskbar, then select Output > Clipboard. 
    Note: without this step it won’t work.
  4. Now click on the Cropper icon.  A floating semi-transparent window appears on your desktop:
    image
    Drag it so the top left is over the area you want to capture, and resize it using the handles at the bottom or right.  Note it gives the image dimensions at the top. 
  5. Capture by double-click or Enter. 
  6. Hide the window with right-click > Hide

The picture is now in your clipboard.  You can use it for whatever purposes such as editing it with the free Paint.net image editing software or including it in a blog post with Windows Live Writer.

]]> http://wordpressacademy.org/2010/02/installing-and-using-the-free-screen-capture-utility-cropper-on-windows/feed/ 0 How to install WordPress + PHP + mySQL to a local development server environment on Windows or Mac, in 3 minutes http://wordpressacademy.org/2010/02/how-to-install-wordpress-php-mysql-to-a-local-development-server-environment-on-windows-localhost/ http://wordpressacademy.org/2010/02/how-to-install-wordpress-php-mysql-to-a-local-development-server-environment-on-windows-localhost/#comments Sun, 14 Feb 2010 22:44:14 +0000 marc http://wordpressacademy.org/2010/02/how-to-install-wordpress-php-mysql-to-a-local-development-server-environment-on-windows-localhost/ This is so easy it will knock your socks off.  It took me 10 minutes, but that was because I wasn’t clear on mySQL security – it should take 3 minutes, so this article could save you 7 minutes.  I did it because I was doing a lot of development with short testing cycles and [...]]]> This is so easy it will knock your socks off.  It took me 10 minutes, but that was because I wasn’t clear on mySQL security – it should take 3 minutes, so this article could save you 7 minutes.  I did it because I was doing a lot of development with short testing cycles and was tired of the server lag-time of my remote server.

Windows Instructions (Mac instructions below)

  1. Download and install WampServer (Windows / Apache / mySQL / PHP – all in one bundle for Windows!)
  2. Start WampServer.  In Windows, the icon will now appear in your taskbar: image
  3. Point your browser to http://localhost
  4. Click on “phpmyadmin” on the lower left
  5. Immediately enter a new database name on the first screen (let’s call it “wp2”) and then Create.
    image
    You are now done with mySQL – no need to create a mySQL user as you would on a regular hosting account, as you  will be using the root mySQL user
  6. Download and unzip latest WordPress.  Ignore the instructions – just listen-up here
  7. The install file unzips to a directory called wordpress.  Copy and paste this directory into your root web server directory, which is normally c:\wamp\www.  So you now have a directory at c:\wamp\www\wordpress
  8. Point your browser to http://localhost/wordpress and proceed through initial screens (it will ask you to create a wp-config.php file).
  9. Enter the database name you entered in Step (“wp2”) and Database user (“root”).  Leave everything else as is and click “Submit”.
    Mac users enter “root” for the password as well (Windows user leave the password blank)
    image
  10. Hit “Continue” until the end.  Make a note of your (auto-generated) password.

You are done.  You can now enter your WordPress dashboard (http://localhost/wordpress/wp-admin) and from there install themes or plugins directly from your dashboard, just as you would normally.

Mac Instructions

  1. Download and install MAMP (Mac / Apache / mySQL / PHP).
  2. After starting MAMP, by default it should automatically load the “MAMP Start Page”. If it doesn’t, click Open start page.
    image
    image
  3. Navigate to the phpMyAdmin tab and create a database for your local WordPress installation. In this example below the database is called “wp2”.  Click Create.
    image
  4. Download and unzip the latest WordPress. Put the decompressed folder wherever you want. I recommend putting it in “/Users/(your user name)/Sites/“  You’ll link to it in Step 6.
  5. Return to MAMP, go to Preferences and check Ports. Click Set to Default Apache and MySQL Ports (the default ports should be: 80 for Apache/HTTP, and 3306 for MySQL)
    image
  6. Go to the Apache tab and select the location of your Sites folder (see Step 4).  Click OK.
    For example: If you point Apache to the folder /Users/(yourusername)/Sites/, and inside that folder you put the unzipped wordpress folder, then you access it in your browser at http://localhost/wordpress.
    image
  7. Now point your browser and navigate to http://localhost/wordpress and then follow the Windows instructions above from  Step 9 to install WordPress.

(Mac instructions kind courtesy of Collin Burton)

Very cool – thanks to the good folks at WampServer and WordPress.org.

If you like this article, please comment.

]]> http://wordpressacademy.org/2010/02/how-to-install-wordpress-php-mysql-to-a-local-development-server-environment-on-windows-localhost/feed/ 50 HTML tips: floating image and paragraph/text alignment: starting a new paragraph after a floating image http://wordpressacademy.org/2010/02/html-tips-floating-image-and-paragraphtext-alignment-starting-a-new-paragraph-after-a-floating-image-2/ http://wordpressacademy.org/2010/02/html-tips-floating-image-and-paragraphtext-alignment-starting-a-new-paragraph-after-a-floating-image-2/#comments Thu, 11 Feb 2010 15:16:20 +0000 marc http://wordpressacademy.org/2010/02/html-tips-floating-image-and-paragraphtext-alignment-starting-a-new-paragraph-after-a-floating-image-2/ Image and text alignment are a very frequent source of frustration for website owners.  Unfortunately, mixing text and images in HTML isn’t quite so simple as in Microsoft Word.

A common problem is horizontal alignment of images and / or positioning new paragraphs after a left- or right-floating image.  See for example:

Here is a floating [...]]]> Image and text alignment are a very frequent source of frustration for website owners.  Unfortunately, mixing text and images in HTML isn’t quite so simple as in Microsoft Word.

A common problem is horizontal alignment of images and / or positioning new paragraphs after a left- or right-floating image.  See for example:

image Here is a floating left-aligned image.  Note that you need to specify either an image class (in WordPress <img class=”alignleft” src=”path-to-the-image” /> or else an <img align=”left” src=”…” /> attribute, along with (normally) an attribute style=”border-right: 5px;” or so  You can do this either in Windows Live Writer or with the WordPress Visual Editor.)

Here is a new paragraph that I want to start after the image.  As you can see it’s not working. I could put in a bunch of line breaks <br/> to make this happen, but the exact number depends on the width of my display and may also depend on the browser.

To accomplish this, you could use tables, of course, but this introduces its own set of problems and is also clunky.  Here is a more elegant solution:  just wrap the new paragraph around a <div style=”clear:both;”> </div>, for example:

image This is my first line
Right before here I have (in HTML) <div style=”clear:both;”>. Notice the new paragraph starts at the bottom of the image. Then I close the </div>.
]]> http://wordpressacademy.org/2010/02/html-tips-floating-image-and-paragraphtext-alignment-starting-a-new-paragraph-after-a-floating-image-2/feed/ 9 Changing CSS list and bullet style in WordPress to add a background image (with a check-mark or whatever) http://wordpressacademy.org/2010/02/changing-css-list-and-bullet-style-in-wordpress-to-add-a-background-image/ http://wordpressacademy.org/2010/02/changing-css-list-and-bullet-style-in-wordpress-to-add-a-background-image/#comments Wed, 10 Feb 2010 21:14:46 +0000 marc http://wordpressacademy.org/2010/02/changing-list-and-bullet-style-in-wordpress-to-add-a-background-image/ Sometimes you want to spice-up your WordPress pages (especially sales-letter pages) to replace the standard list-bullet dot or square with a custom images, for example compare:

Feature #1 Feature #2 Etc…

To:

Feature #1 Feature #2 Etc…

A bit more visually appealing eh?  You could always go to W3 School CSS tutorial and figure out the CSS code to do this, and then [...]]]> Sometimes you want to spice-up your WordPress pages (especially sales-letter pages) to replace the standard list-bullet dot or square with a custom images, for example compare:

  • Feature #1
  • Feature #2
  • Etc…

To:

  • Feature #1
  • Feature #2
  • Etc…

A bit more visually appealing eh?  You could always go to W3 School CSS tutorial and figure out the CSS code to do this, and then apply it to your CSS file, but then it would apply site-wide (globally) which you may not want.  Better instead to create a custom class called “redcheck” or similar, as follows:

.redcheck {
    background:transparent url(/images/redcheck.gif) no-repeat scroll 0 0;
    list-style-type:none;
    padding-left: 20px;
}

Add this to your CSS file (any good theme will allow you to create custom CSS, otherwise just edit the default style.css in Theme > edit)

The easiest way to apply the style to your text is with TinyMCE Advanced, as described in a previous article.

The above HTML will then look like:

<ul>
 <li class="redcheck">Feature #1</li>
 <li class="redcheck">Feature #2</li>
 <li class="redcheck">Etc…</li>
</ul>

If you are working by hand (rather than with  TinyMCE) then you don’t want to put the “class=” on every LI element, so you would instead write this:

ul.redcheck li {
  background:transparent url(/images/redcheck.gif) no-repeat scroll 0 0;
  list-style-type:none;
  padding-left: 20px;
}

and apply the class only to the high-level element (UL) as follows:
<ul class="redcheck">
  <li>Feature #1</li>
  <li>Feature #2</li>
  <li>Etc…</li>
</ul>

Note that you will have to upload the checkmark image (or similar) to somewhere on your site, I suggest a directory “images” off your WordPress root.

Good luck!

PS: Try this too:

.bigred {font-size: 24px; color:red;}

and then <span class=”bigred”>Some text</span>
Much better than sprinkling font changes throughout your document

PPS: If you have WordPress Spire Theme all these things (and much more) will be taken care of for you

]]> http://wordpressacademy.org/2010/02/changing-css-list-and-bullet-style-in-wordpress-to-add-a-background-image/feed/ 11 Using the WordPress advanced visual editor (TinyMCE Advanced) to apply CSS styles, edit tables, search-and-replace, spell-check and more http://wordpressacademy.org/2010/02/using-the-wordpress-advanced-visual-editor-tinymce-advanced-to-apply-css-styles-edit-tables-search-and-replace-spell-check-and-more/ http://wordpressacademy.org/2010/02/using-the-wordpress-advanced-visual-editor-tinymce-advanced-to-apply-css-styles-edit-tables-search-and-replace-spell-check-and-more/#comments Wed, 10 Feb 2010 19:58:52 +0000 marc http://wordpressacademy.org/2010/02/using-the-wordpress-advanced-visual-editor-tinymce-advanced-to-apply-css-styles-edit-tables-search-and-replace-spell-check-and-more/ There is a superior visual editor for WordPress that you can install and configure to your site in 2 minutes.  It’s called TinyMCE Advanced.  It offers a rich expansion over the default editor, particularly:

Imports all CSS classes from the main theme stylesheet and add them to a drop-down list. Support for making and editing tables (with [...]]]> There is a superior visual editor for WordPress that you can install and configure to your site in 2 minutes.  It’s called TinyMCE Advanced.  It offers a rich expansion over the default editor, particularly:

  • Imports all CSS classes from the main theme stylesheet and add them to a drop-down list.
  • Support for making and editing tables (with a very cool context sensitive menu to add, delete and merge columns and rows, set table properties etc).
  • In-line CSS styles.
  • Advanced link and image dialogs that offer a lot of options.
  • Search and Replace while editing.
  • Support for XHTML specific tags
  • Add/remove (div based) layers, with relative or absolute positioning via drag-and-drop etc.

Here is how it works:

  1. Search, install and activate “TinyMCE advanced” from Plugins > Add new
  2. In Settings > TinyMCE Advanced, drag and drop as many icons as you want (or all of them) from the bottom panel onto the 3rd line of the toolbar.
    image
  3. Check “Import the current theme CSS Classes” at the bottom
  4. “Save Changes”

Now (for example) in your visual editor, highlight any text and choose the applicable style (ie. “redcheck”) from the drop-down:

image

Your style will be applied:

image

Notes:

  1. If you are using Firefox, the context menus Cut / Copy / Paste are disabled by default by the Firefox security settings (which can be very annoying).  You will need to enable them using the information in this  article (installing the AllowClipboard Helper plugin).
  2. The function to import the current CSS doesn’t work in Atahualpa or other CSS files that are automatically-generated or complex.  You will need to cut-and-paste into the TInyMCE custom CSS file (see the bottom of Settings > TinyMCE under “Advanced”)
  3. Only “pure” CSS classes will get imported, ie.  “div.redcheck {…}” won’t work and neither will “.redcheck li {…}”

For more information on changing list and bullet style in WordPress see also the following article.

]]> http://wordpressacademy.org/2010/02/using-the-wordpress-advanced-visual-editor-tinymce-advanced-to-apply-css-styles-edit-tables-search-and-replace-spell-check-and-more/feed/ 15 How to control image size and type (.jpg or .png) in Windows Live Writer http://wordpressacademy.org/2010/01/how-to-control-image-size-and-type-jpg-or-png-in-windows-live-writer/ http://wordpressacademy.org/2010/01/how-to-control-image-size-and-type-jpg-or-png-in-windows-live-writer/#comments Sat, 16 Jan 2010 13:44:32 +0000 marc http://wordpressacademy.org/2010/02/how-to-control-image-size-and-type-jpg-or-png-in-windows-live-writer/ Windows Live Writer is a marvelous tool for putting rich content (images and video) into a blog post and pasting / cropping / resizing images mixed-in with text.  It only suffers from one limitation that I can see: when  pasting an image from the clipboard it always generates a .png image which tends to be [...]]]> Windows Live Writer is a marvelous tool for putting rich content (images and video) into a blog post and pasting / cropping / resizing images mixed-in with text.  It only suffers from one limitation that I can see: when  pasting an image from the clipboard it always generates a .png image which tends to be at least 5 to 10 times larger than its .jpg equivalent.

Of course for small images this is not so much a problem.  I have a problem though when it creates 300-400kb images that ought to be 50 or 70kb.

Here is a solution: save the file to .jpg in your image editing software.  Then in Windows Explorer just Right-click > Copy the file name.  Now when you paste it into Live Writer, it creates it as a jpg!

]]> http://wordpressacademy.org/2010/01/how-to-control-image-size-and-type-jpg-or-png-in-windows-live-writer/feed/ 0 Free project management software, team collaboration, automated time-tracking and invoicing tools http://wordpressacademy.org/2010/01/free-project-management-software-team-collaboration-automated-time-tracking-and-invoicing-tools/ http://wordpressacademy.org/2010/01/free-project-management-software-team-collaboration-automated-time-tracking-and-invoicing-tools/#comments Fri, 01 Jan 2010 09:37:00 +0000 marc http://wordpressacademy.org/2010/01/free-project-management-software-team-collaboration-automated-time-tracking-and-invoicing-tools/ I run a website development and internet marketing service company with an international provider (outsourcing) network, mostly recruited from ODesk.  I need a way to effectively manage multiple concurrent projects and assure semi-automated billing to my customers, many of who pay for services on an hourly basis.

The solution

For 3 years I ran a website [...]]]> The problem

I run a website development and internet marketing service company with an international provider (outsourcing) network, mostly recruited from ODesk.  I need a way to effectively manage multiple concurrent projects and assure semi-automated billing to my customers, many of who pay for services on an hourly basis.

The solution

For 3 years I ran a website development firm using Basecamp project management.  Basecamp is the leader hands-down in online project management tools.  However, at $50-$150/mth for a company my size (35 to 100 open projects) it can get pricey. 

Then I found the open-source ProjectPier.  Basically a clone of Basecamp, it has all of the key functionality except for time-tracking and the ability to respond to a message by email.  It’s easy and intuitive to use for my customers, which is key.  So – I wouldn’t switch to ProjectPier if I was already running an active business with Basecamp (Basecamp kicks ass) however, if starting fresh I would use ProjectPier. 

Note also that there are dozens of free or open-source project management software apps, but none of them comes close to ProjectPier (IMHO) in terms of effectiveness and ease-of-use in the case of a distributed team that includes clients (non-technical users that can’t invest time in learning the system).  This is the Basecamp project management methodology, described below.

Time tracking and invoicing

Ability to have my contractors book time on projects and then automate the invoicing was also a key requirement. 

Basecamp has an API for which leading vendors have provided affordable tools and add-ons.  Basecamp add-ons for automated time-tracking and invoicing include (among many others) Freshbooks ($20/mth and up), that has very powerful invoicing features including the ability to automatically charge clients credit cards through your merchant account.  Freshbooks in turn integrates with numerous time-tracking tools such as Tick ($19/mth and up).

Avoid the monthly fees however with two very affordable time-tracking and billing applications for your desktop: Xpert Timer ($100 for PRO version) and Easy Time Tracking  ($50).  These are both single-user licenses which allow you to track unlimited projects and clients, and generate professional invoices.

I chose Easy Time Tracking because it synchronizes to Easy Project.Net project management system ($500 for 5-user license + Windows hosting on Godaddy $5/mth). I can import my sub-contractor hours from Easy Project.Net into Easy Time Tracking and invoice from there.  The software is very simple and intuitive to use and generates professional-looking invoices.

While I am saving up for Easy Projects.Net however ($500 is not small change), I can still manually bill my clients with Easy Time Tracking and the time-sheet information in ProjectPier.  Total cost: $50. 

Basecamp (and ProjectPier) project management and time-tracking methodology

A quick review of Basecamp for project teams here.

Work is organized into projects, which have team members (developers) and clients (client companies with multiple client users per company).

Each project has one or more ongoing message threads, in which team members and/or clients ask questions, make requests or share progress (including uploading files and artifacts).  Usually messages have a distribution list that includes everyone assigned to the project (everyone gets an email when a new message or reply is posted). Messages can be public (includes the client) or private (includes only team members).

It’s also possible to assign “ToDo’s” (tasks) to team members, log completion of them, and record hours against them.

ProjectPier doesn’t currently support logging hours, but it is possible to log hours in a private message thread, so not a big issue. 

The main issue with both Basecamp and ProjectPier where clients are concerned is getting them to post in the correct message thread (that has the ongoing dialogue) rather than in new threads.  This is easier in Basecamp since they can just respond to the system email which will post the reply to the thread (and send everyone else notification).  ProjectPier doesn’t support this.

]]> http://wordpressacademy.org/2010/01/free-project-management-software-team-collaboration-automated-time-tracking-and-invoicing-tools/feed/ 1 Why traditional website publishing is dead (and why you should use WordPress or similar CMS instead) http://wordpressacademy.org/2009/12/why-traditional-website-publishing-is-dead-and-why-you-should-use-wordpress-or-similar-cms-instead/ http://wordpressacademy.org/2009/12/why-traditional-website-publishing-is-dead-and-why-you-should-use-wordpress-or-similar-cms-instead/#comments Tue, 08 Dec 2009 08:36:35 +0000 marc http://wordpressacademy.org/why-traditional-website-publishing-is-dead-and-why-you-should-use-wordpress-or-similar-cms-instead/ Summary: This articles discusses the benefits of using a Content Mangement System (CMS) such as WordPress, Joomla, Drupal, DotNetNuke, etc, for creating your website; and compares the new technology to the old way of creating a website, that involved using a web designer and a static html site that went through various stages (mockup, conversion [...]]]> Summary: This articles discusses the benefits of using a Content Mangement System (CMS) such as WordPress, Joomla, Drupal, DotNetNuke, etc, for creating your website; and compares the new technology to the old way of creating a website, that involved using a web designer and a static html site that went through various stages (mockup, conversion to html or “slicing”, feedback / review, and publication). In particular, it discusses the benefits of the WordPress platform for creating a small business or professional website; and the basic procedure for getting a WordPress professional or corporate website up and running.

Up until a few years ago, if you wanted a professional website, you hired a web designer.  You gave them all your content, your graphics, some ideas of what you wanted your site to look like, and a few thousand dollars.  They produced a “mockup” (snapshot of your future site) in Photoshop, and you went back-and-forth a few times with revisions.   After your final approval, the mockup was “sliced” (converted to an html template in Dreamweaver), the content added, and the site went live.  The entire process took from two weeks to two months.  The type of site produced is called a “static html website”.  It was possible for you to make minor changes to the content of the site, however, if you wanted to add pages or change the navigation structure, you had to go back to your designer.  If you wanted programmatic features such as a blog or a bulletin board (forum), it was extra.

Nowadays, unless we’re dealing with a very high-end or graphic-intensive site, nobody will settle for that.  Due to great improvements and huge popularity of open-source Content Management Systems (CMS), particularly WordPress, Joomla and Drupal, you can put up a nice-looking site in days rather than months, and at about one tenth the cost (or even for free).

In the rest of this article we’ll focus on WordPress, since it is the easiest to use of the popular CMS’s and yet has all the functionality that is required by your typical small business website.

WordPress is an open-source CMS that is optimized for blogging (which is the posting of sequential articles on a given topic or theme).  However, it is also very good at creating static pages (ie. web pages whose content is fixed such as “About us”, etc), which are the “bread and butter” of your average small business or self-employed website. In addition:

  • WordPress comes configured “out of the box” for the greatest search-engine visibility – you just need to set certain parameters correctly.  Also search-engines love blogs and other frequently updated content.
  • You can easily add or delete pages, change your theme, and change your content, and the changes will be immediately reflected on your site and in the navigation structure of your site
  • If you have special needs (such as a Calendar of events for example), it’s very likely that somebody somewhere has written a piece of code (called a “plugin”) that solves your problem, and is giving it away for free.  If it’s not free, it’s probably very cheap.  There are numerous plugins that turn WordPress into a paid-membership site, which is a very nice way to sell your content down the road
  • You can write your content offline using a tool such as the free Windows Live Writer, which makes it very easy to add rich content (images and videos) to your site and/or your newsletter.

Here is the process that you will typically go through to create a professional small business website using WordPress:

  1. Open a cPanel-enabled web hosting account, which costs $5-10/mth.
  2. Install WordPress from your web hosting account control panel using cPanel’s “Fantastico” application (about 5 min). Any Linux hosting will support WordPress, but I like a cPanel hosting system for its user-friendliness and capabilities
  3. Download, install and configure any of the excellent free WordPress templates that are available on the web (about 15 min)
  4. Download, install and configure the necessary plugins.  At minimum I recommend : All in One SEO Pack, Google XML Sitemaps, Comment Relish, Subscribe to Comments, and Email Shroud (about 15 min)
  5. Configure your newsletter system and add your newsletter signup code to your side-bar (about 15 min). See this article. Almost every small business needs a newsletter to stay in touch with customers
  6. Create your content
  7. Hire a web designer to make you a banner, or else find a free or inexpensive one, or else make it yourself in Photoshop
  8. Your site goes live – tell all your friends and business associates.  It helps to have an active Linkedin or Facebook account for this.  If you have current customers, import them into your newsletter system. Although a courtesy email is recommended, you are allowed (under CAN-SPAM) to add people to your newsletter with whom you have already done business.
  9. Continue writing great content of interest to your readers.  Some of them are sure to become customers.

Bottom line: your site will be up and ready for business in 4-8 hours of work, rather than months.

Just a few final tips if you are new to this:

  1. Find a competent and reasonably-priced web person – but be sure to explain to them that you want to be educated.  There are plenty of people on the freelancer marketplaces (RentACoder, Guru, or Elance) who want your business.
  2. Don’t obsess initially about your site’s design or presentation.  Just get the content out there.  You can easily change your presentation later.
]]> http://wordpressacademy.org/2009/12/why-traditional-website-publishing-is-dead-and-why-you-should-use-wordpress-or-similar-cms-instead/feed/ 5 How to find a good WordPress theme for your business or corporate website http://wordpressacademy.org/2009/12/how-to-find-a-good-wordpress-theme-for-your-business-or-corporate-website/ http://wordpressacademy.org/2009/12/how-to-find-a-good-wordpress-theme-for-your-business-or-corporate-website/#comments Tue, 08 Dec 2009 02:42:25 +0000 marc http://wordpressacademy.org/how-to-find-a-good-wordpress-theme-for-your-business-or-corporate-website/ This is an important decision for several reasons:

Your site’s appearance (“look and feel”) is determined by your theme.  A good theme will make the difference between a professional-looking site and one that isn’t. You should choose your theme fairly soon after you begin your site, since it does have an impact on how you create your [...]]]> This is an important decision for several reasons:

  • Your site’s appearance (“look and feel”) is determined by your theme.  A good theme will make the difference between a professional-looking site and one that isn’t.
  • You should choose your theme fairly soon after you begin your site, since it does have an impact on how you create your content (i.e., two or three-column layouts, screen width, etc).  In WordPress, content is mostly separate from presentation, so you can always change your theme later. If you do this however you will lose most of the work that you have put into customizing your theme, so it is better to start right away with the theme that you will be ultimately using.
  • Themes are customizable to differing degrees.  All themes can be customized by modifying the PHP theme files directly, but this can be technical and time-consuming.  You are better off choosing a theme that already has the functionality and the look that you want.  You are also typically better off choosing a Theme framework over  a regular theme. This is described further below. A theme framework allows you to customize options such as the presence or absence of side-bars directly through the theme options page.

Theme selection is more of an art than a science, but here is how I get my clients started:

  1. Start with WordPress most popular (free) themes – you may find a “bull’s eye” theme there, and if not you might get some ideas.  Remember that there are disadvantages to using a regular theme vs. a theme framework, even if that theme is a “bull’s eye” from a visual point of view (see below).
  3. Consider Artisteer ($50).  This is a Windows software that you can design the layout locally and has a lot of different options.  When you are done you export the theme files and upload to your site with FTP.  It creates visually rich sites, although a bit on the simple side.  Also works for Joomla and Drupal content-management systems (which is very cool).
  4. However, recommendeded Theme frameworks:

    These come up again and again.
    The reason a theme framework is recommended, is that most anything that you want to do later you will be able to do via customizing the theme options within your dashboard, rather than modifying the theme files in PHP.  Remember: you can do almost anything you want with WordPress – however it will be more or less work depending on whether your theme supports it (and/or whether you can find a plugin that supports it).
    Quality of support is also a serious concern.  In many cases paid themes provide better support.  The exception to this is Atahualpa (well-supported in the user forums).

  5. Honorable mention (paid): WooThemes, iThemes Flexx, and ThemeForest themes (Themeforest is a large directory of themes priced from $3 and up).
  6. Honorable mention (free): WhiteHouse, Hybrid, Thematic and Lysa.  These all install directly from your WP dashboard and have a clean uncluttered look
  7. If you are going with Atahualpa, look for inspiration to the Atahualpa theme showcase and  Atahualpa showing off thread on the Bytes For All support forum.
  8. Decide if you are going to need drop-down menus, since not all themes support them. If you have less than 10 pages on your site, do not use drop-down menus.
  9. If you are looking for a theme for a specific business type, try searching the WordPress theme directory site or else Googling directly, ie, “WordPress theme for therapist”.

Uploading and installing a theme

If you purchase a commercial theme, you will need to upload it to your web site and activate it.  The easiest way to do this is via the Theme > Add New Theme command (in your WordPress dashboard), and then activate the “Upload” tab, and navigate to the theme zipfile provided by your theme vendor.  The second way to this is to unzip the theme and then upload it via FTP.  You ill need an FTP client software for this (I like Filezilla), and you will need to know your hosting account username and password.  See this article for additional instructions.

Tip: you don’t need a hosting account to play around with WordPress – try the local server installation method which takes 3 minutes.  Forget about WordPress.com – it doesn’t support the full range of themes and plugins (specifically Atahualpa).

How to customize (style) a theme

The first thing you will usually do is substitute your company banner and logo.  You can make yourself a banner using free image editing sofware Paint.Net.  You will need to upload your banner image to your website using FTP, and place it inside the correct directory of your server (normally ./wp-content/themes/yourthemename/images).

If your theme was generated with Artisteer: all your styling was done by the program, and so at this point you are done with your styling, and just need to setup your Widgets (see below).

Otherwise: check out your customizable theme options (in WordPress Admin > Appearance > Theme Options).  If you are using a theme framework, you will be able to set the width of your site and the presence / absence of side-bars.

The best themes and theme frameworks also give you control of the styling of every element of your site, such as background color, font, margins, etc.  You need to know a little CSS to do this, but this is quite simple and if in doubt you can Google “CSS background color” (or whatever) for the precise syntax, or to go to W3Schools CSS tutorial.

If you are styling your site CSS, there is a very cool software called Firebug, which is a Firefox addin that lets you examine each element of your site, view the underlying CSS code, and modify the CSS code on the fly and see the results.  You can use it, essentially, to copy the styling of any site on the internet (and it’s legal!).  You can find / detect color settings on another website using the Firefox Colorzilla plugin.  CSS normally needs the hex color code that looks like #AA0944 – this is hexadecimal notation, two hex digits each for the color values: Red, Green, Blue (00 to FF).

One you have styled your site to your desired look-and-feel, you need to setup your side-bars.

How to setup your side-bars with the Widget control

  1. In your WordPress admin go to Appearance > Widgets
  2. Select the left or right side-bar (on the far right of your screen)
  3. Drag your choice of widget onto the side-bar and edit it / customize it.
  4. Save your settings, then view your site

The most important widget to know is the “Text” widget, which lets you insert custom html text to your side-bar.  Use this, for example, to put your mailing list signup code in your side-bar, or put your contact information, or place Google ads or affiliate links.  It helps to know a little html, but if you don’t, don’t worry.  Just type your text and ask your designer or webmaster to format it, or else look at the underlying html from a site that you want to emulate (in most browsers do View > Page Source and then search for the text that you want to view the html for, or else use Firebug, put your cursor over the element, and then right-click.

Note that until you place at least one widget in your side-bar, most themes provide default settings that will decide what goes in your side-bars.  So, to take control of this, you need to place at least one widget.

Publishing images and videos to your WordPress site

The easiest way to publish images (with automatic resizing) and video to WordPress is with Windows Live Writer and is described in this article.

You can use Windows Live Writer also just to crop or resize images to your site.  Say for example you want to put some images in the sidebar.  You can’t use the WordPress built-in visual editor to edit sidebar html code.  Instead, try this in Windows Live Writer:

  1. Write the text snippet and paste-in images your want
  2. Publish to a temporary post
  3. From your WP dashboard, edit your temporary post, enable the HTML view, select all and copy, delete the temporary article, and then paste the HTML into your sidebar widget area.

Mailing list management and WordPress

WordPress is a wonderful platform to create a mailing list (newsletter subcribe box) for your customers – and it can even be free.  Details in this article.

]]> http://wordpressacademy.org/2009/12/how-to-find-a-good-wordpress-theme-for-your-business-or-corporate-website/feed/ 9