There are lots of scenarios, but the most common problem (assuming the web developer is not an all-out thief) is probably unrealistic expectations due to poor communication. Communication is key. When a client says that they don’t know how to explain what they are asking for, I ask them to search the web for an example. The less the web developer has to guess, the more likely that the client will end up with what they want.

How much should I spend? Budgeting your time and money.

When quoting the price of a job, both parties have to remember that time is money. The situation is most likely to fall apart on low-budget jobs. The biggest disappointments happen when the developer is desperate enough to quote a price that is unrealistically low and/or when the client expects the developer to spend an inordinate amount of time earning a small amount of money. A few years ago I accepted a low-budget job. The client chose a stock template that we would slightly modify. We were clear that on a certain date he would give me all of the text. When he sent the text, he asked me when his web site would be finished. I said “tomorrow”. He seemed very surprised. I had to tell him frankly that in order for me to do a job at that price, I couldn’t spend more than a day on it. The job turned out fine because we set realistic expectations.

At some point an experienced web developer will not accept a job below a certain budget level. We developers have all heard about the client’s friend’s sister’s kid who does this in the basement or garage. When a potential client starts talking about how they can hire some inexperienced person for less money, I am happy to let them go. They often come back because either their web site didn’t turn out well, was never launched, or like the title of this article implies, their relationship with the developer dried up due to unrealistic expectations. A web developer who does not charge enough to make a living often doesn’t last long in the business.

In short, both the developer and the client have to communicate clearly and have realistic expectations. A professional web site developer is usually someone who has several years’ experience, knows how to price a job, has ongoing client relationships, and is therefore not likely to disappear any time soon. Good luck!

The first thing to do is look at Settings > Media and make sure you are happy with the image sizes that are specified there.

While adding or editing a page or post, click the Add An Image icon. If you use the Flash Uploader, you will see that you can select multiple files. The images for your gallery can be in multiple folders or all in one folder.

In the HTML editor, you can add the shortcode [gallery] anywhere in your post or page. In Visual mode, there is an Insert Gallery button.

You can click the Add An Image icon at any time to see the images in the gallery, and also to remove them or change the order.

To get the most out of your image galleries, you will probably want to install a Lightbox plugin, and if you plan to post large galleries, you will want a Pagination plugin. I have found that jQuery Lightbox For Native Galleries and ByREV Gallery Pagination for WordPress, but note that I had to leave AJAX caching turned off to make the latter work without conflicting with another plugin.

Voila! You now have a photo gallery and you didn’t manually resize any photos or write any code!

Examples:

Gallery on a WordPress Page

Gallery in a WordPress Post

This article copyright © John Nasta 2011 – All Rights Reserved

I posted similar information on the wordpress.org forum and people have asked me to elaborate. I am posting it here so that it can be edited later.

The first step is to have a basic understanding of web site design and a program with which to lay out your design. I prefer Photo Shop because it allows me to turn layers on and off to isolate graphics and to create variations on the theme that can easily be turned on or off. Once I have something that I want the client to see, I save it as a JPG file.

This is a beta site for a startup company. After trying several comps, the client chose this one:

My next step is to code the design as a static web page, using the same stylesheet that I plan to use for my theme. I usually start with the stylesheet from the WordPress Default theme and modify it as needed. If your design doesn’t work as a static page, it is probably not going to display correctly in WordPress either. You can see my static page here:

http://johnnasta.com/altr/template.html

Note that the menu, sidebar, and body text areas are just placeholders at this point, but I am able to verify that the basic structure and CSS are working. It helps to assign DIV IDs that are commonly used by WordPress, such as #page, #sidebar, #footer, #content, etc.

The next step is to try your design as a WordPress theme. Simply copy everything from the header.php file of the WordPress Default theme up to and including the <body <?php body_class(); ? >> tag and replace what is in your static HTML file. Also add the <?php wp_footer(); ?> tag just before the </body> tag at the end of the template, and save it as index.php in your theme folder.

Now upload your new theme and test it. The menu, text, and sidebars are still placeholders, but you can see if your basic CSS structure holds up in WordPress.

Assuming that worked, it’s time to start dividing your theme into sections. Generally, everything up to (but not including) the #content DIV is saved as header.php. You can copy index.php and sidebar.php files directly from the default theme and edit them as necessary. Note that if you have any tags between the sidebar & footer divs in your template, they will have to be added to index.php. For example, if you have your sidebar & content in a container div, your index.php may have to end with:

<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

instead of:

<?php get_sidebar(); ?>

<?php get_footer(); ?>

You can also copy functions.php from the Default theme. The only part of it you really need to keep is the top where the sidebar is registered:

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
}

Save everything from the #footer div down from your original template as footer.php.

At this point you can upload your new index.php, sidebar.php, header.php, footer.php, and functions.php and view your site. You can avoid obliterating previous versions of your theme by uploading new versions into a different folder name (e.g. mytheme_v1-0, mytheme_v1-1, etc.) and changing the version number in the stylesheet each time. You can also copy other theme files from the Default theme, such as comments.php, comments-popup.php, search.php, archive.php, single.php, page.php and modify as needed, or you can write your own. It’s important to understand the WordPress template hierarchy if you are doing this.

Once you’ve got your basic theme working, you can decide whether you need any custom templates for individual pages, posts, categories, etc. If your home page is going to be a static page with a separate template, name that file front-page.php. If it is the only page using that template you won’t need to divide it up into header, sidebar, footer, etc.

Here are some themes that I have developed based on the WordPress Default theme:

AltResources
Artists-N-Order
Strega Salem
Significant Self
The Vincent Nasta Foundation
Shirley & The Mastics

This is just the beginning of theme development, and this information mainly applies to simple two-column themes. There is certainly more to the story. If I can clarify any of this information, please leave a comment. Thanks!

This article copyright © John Nasta 2011 – All Rights Reserved

Blog name & tagline can easily be moved to the top of the sidebar to allow room for Google AdSense® ads above the main content.

The default colors are black, white, gray, blue, brown, and purple. The stylesheet is easily customizable to create your own color scheme.

The easiest way to change the Arinesce logo image (upper left) is to create a new image called Arinesce-Logo.png at 210×100 pixels and upload it in place of the Arinesce logo.

To add or remove header images simply upload or delete them from the Arinesce/images/header/ folder. The images should be 700×120 pixels. Images load randomly, which means that it is possible for the same image to appear two or more times in a row. The more images you have in the folder, the less likely it is for this to happen. If you do not want your header image to change, simply leave only one image and the rotator script in the folder. Do not delete the rotator script unless you change the header background image path in the stylesheet.

Check Out a live demo! (Click this link again to see the header image change)

Download Arinesce Beta 3 (353) (109k zip file)

If you experience any problems with this theme or have questions, please leave a comment below.

Changelog:
2010 – April 1: Released Arinesce Beta 3 (353) (109k zip file)

• Added support for random header background images
• Fixed a minor CSS issue that caused the main background image not to repeat on pages with content shorter than the sidebar

2010 – April 1: Released Arinesce Beta 2 (355) (102k zip file)

• Author URL changed to http://johnnasta.com/blog/?s=arinesce
• Footer hover color changed & footer narrowed by 10px
• Added Recent Posts and Tag Cloud to static sidebar
• Added header background image w/ blog name & tagline for user friendliness
• Three additional header images are supplied with the theme
• Moved Arinesce logo to sidebar

2010 – March 31: Released Arinesce Beta 1 (384) (36k zip file)

This article copyright © John Nasta 2010 – All Rights Reserved

If you’d like to do this, first ask yourself if you feel comfortable editing the code in your theme files, and if you feel comfortable using FTP to upload the edits to your web server. Remember to use a plain-text editor to make all of your edits, not a word processing program like MS Word. If you can do those things without hesitation, you’ve made it over the first hurdle.

The next thing you have to do is decide whether you are going to make the domain name point to your WordPress folder or if you are going to copy the site files from your WordPress folder to the folder that the domain name points to.

• If the domain name is changing, you can often point the new domain name to the WordPress folder when you add it in your hosting control panel, and not have to copy or move any files at all.
• If the domain name is not changing but the path to the site is (e.g. moving WordPress to the root folder), and/or you don’t know how to point your domain to a specific folder at the hosting level, you can simply copy all of your WordPress site files via FTP to the folder that the domain name points to.

Two things to do before you upload your site files

Check the .htaccess file in the WordPress folder: WordPress usually writes entries to a .htaccess file in the main WordPress folder. If you are moving the site from a sub-folder to the root or vice-versa, you will have to edit this file. If your site is in a sub-folder called /blog, the .htaccess file in your WordPress folder will contain these lines:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /blog/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /blog/index.php [L]
</IfModule>
# END WordPress

If your site is going to be in the root folder, the references to the sub-folder need to be removed, making it look like this:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Add two lines of code to the functions.php file of the Default theme: As shown in the WordPress Codex article Changing The Site URL, you can add these two lines of code to the top of your functions.php file to tell the database the new site URL:

define('WP_HOME','http://example.com');
define('WP_SITEURL','http://example.com');

Replace example.com with your actual domain name and any sub-folder name that points to your site. The only reason I suggest doing this to the functions.php of the Default theme is so that you don’t have to mess with your active theme’s files. If you prefer to edit the functions.php of your active theme, that will work too. It is advisable to make backups of your functions.php file and your WordPress database at this time.

If you have chosen to edit the functions.php of the Default theme and that is not your active theme, go to your site’s admin at the old URL and activate the Default theme. If you edited the functions.php of your active theme, you can skip this step.

Now that you’ve done your edits, you can upload all of the necessary files to the proper folder. If the folder is not changing, you only need to upload the new functions.php, and possibly the new .htaccess file. If you are changing the folder, upload the entire site to the new folder.

Now simply go to your site at the new URL. It should work. Assuming it works fine, you can upload the backup version of the functions.php (i.e. one that has not been edited). It is important to remove those extra lines of code. Your site is now ready to go.

Additional considerations:

• If you are using a plugin that references a file in your folder structure such as the Google XML Sitemap Generator or a database backup utility, you may need to change the path in the plugin’s settings to the new path.
• You may also need to change the path to your uploads folder in Settings > Miscellaneous
• You may want to use the Broken Link Checker plugin to make sure that you don’t have any broken internal links or redirects in your site caused by the URL change.
• If you feel brave and have a lot of internal links that need to be changed, you can use the Search and Replace plugin to change them all simultaneously.
• If you have moved your WordPress site to a new folder on the server, remember to delete the old files.
• If you have changed your domain name remember to put in a .htaccess 301 redirect from the old location to the new one.
• It is advisable to put a robots.txt file in your root folder so that search engines will crawl and re-index the site. Google may reject your sitemap if you don’t have a robots.txt file giving them access to crawl the site.

If this seems too difficult for you, you may be interested in my article on Accessing Your WordPress Site From The Root Folder, which explains how a simple .htaccess redirect file can point requests from your root URL to your WordPress folder.

Have fun!

This article copyright © John Nasta 2010 – All Rights Reserved

Much like the Thesis theme from DIY Themes, you get a complete back-end interface for customizing the theme. However, Thesis starts at $87 for the Personal license, and Atahualpa is free.

The most important thing to know about how to customize Atahualpa is that you can create your own PHP templates for pages such as multi-post archives (including category & tag pages), search results, single posts, etc. People are often confused by the fact that the theme does not come with templates such as archive.php, search.php, single.php and others that you might expect, but what is not entirely obvious is that you can create these templates and upload them, and WordPress will automatically use them.

Take for instance one of the most popular questions asked about customizing Atahualpa in the BFA Forum. How do I get Atahualpa to display full posts on archive pages instead of post excerpts? The answer is diabolically simple. Just download the index.php file from Atahualpa and save it as archive.php. Remove the part of the template that calls in The WordPress Loop:

<?php /* This is the actual WordPress LOOP.
The output can be edited at Atahualpa Theme Options -> Style & edit the Center column */
bfa_center_content($bfa_ata['content_inside_loop']); ?>

and replace it with loop code from the archive.php of a theme that displays full posts on the archive pages, such as the WordPress Default theme:

<div <?php post_class() ?>>
<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
<small><?php the_time('l, F jS, Y') ?></small>
<div class="entry">
<?php the_content() ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
</div>

You can edit this code as well. One thing you might want to do is replace <div class="entry"> with <div class="post-bodycopy"> so that the body text will follow the styling guidelines set by Atahualpa.

If you don’t want to display the time & date above the post, simply move or remove <small><?php the_time('l, F jS, Y') ?></small>. If you don’t want the meta data to appear below your posts, simply remove that whole paragraph.

If you are familiar with WordPress coding, then you know that <?php the_content() ?> is what displays the full post content.

When you are finished editing, just upload your new file and WordPress will recognize and use it.

This also applies to using plugins that require you to add a piece of PHP code to one of your template files that Atahualpa does not come with. If the template doesn’t exist, just create it, upload it, and WordPress will use it.

Diabolically simple, yet not obvious…

This article copyright © John Nasta 2010 – All Rights Reserved

I see a lot of people asking how to make their WordPress site accessible from the root directory folder. In most standard installations, WordPress is installed in a sub-folder and the only way to access the site is to add that sub-folder name to the site’s URL.

If you read the wordpress.org support forum you’ll find posts suggesting that you move the WordPress index.php file to the root folder and change a few things in that file. You’ll also see replies from people who have tried it unsuccessfully.

Here’s a little trick that will allow you to access your WordPress site from the root URL without moving or modifying any of the WordPress installation files. This method will “hide” the WordPress installation’s folder name when people access your home page but they will see the folder name in URLs when they start clicking around…

Check your root folder for a file called .htaccess (note that the dot is before the file name). If there is one, download it. If not, create one with a plain text editor such as Windows Notepad. Make sure that when you save it, the file type is set to “All Files” so that your editor doesn’t try to add an extension onto the file name.

Make sure that these lines are included in your .htaccess file. For this example the root URL is shown as domain.ext and the WordPress folder is shown as wpfolder. You will have to change these values to match your own domain name, extension, and WordPress folder name:

RewriteEngine On
Options +FollowSymlinks
RewriteCond %{HTTP_HOST} domain.ext$
RewriteCond %{REQUEST_URI} !wpfolder/
RewriteRule ^(.*)$ wpfolder/$1


Upload this file to the root directory of your web server as a plain text file. You’re done!

Now go to Google Webmaster Tools and let them know the “preferred URL” of your home page so you don’t get penalized for duplicate content.

This article copyright © John Nasta 2009 – All Rights Reserved

• Light – Rating icons are shown only for dangerous sites, No pop-ups
• Basic (Recommended) – Rating icons shown for all sites, Search Results ratings shown in pop-up window
• Child Safety – Blocks access to sites that contain adult language and content, All unrated sites are blocked

Set to Basic default, WOT will warn you if you attempt to connect to any sites that have a poor level of Trustworthiness, Vendor Reliability, or Privacy. A “poor” or “very poor” rating in any area will trigger a warning. When child safety mode is in place, it will also block sites that contain mature or inappropriate content.

Once installed the security levels can be customized or turned off. Settings include the ability to choose whether WOT will give you a warning that lets you choose whether or not to proceed, or block the site completely. The utility also gives you the ability to rate sites that you visit (if you create a user account) as follows:

From mywot.com…

Trustworthiness: Do you trust this website? Is it safe to use? Does it deliver what it promises?

A poor rating may indicate identity theft potential, Internet scams, credit card fraud, phishing, lottery scams, viruses, adware, or spyware.

An unsatisfactory rating indicates that the site may contain annoying advertisements, excessive pop-ups, or content that makes your browser crash.

Vendor reliability: Is the site safe for buying and selling, or for business transactions in general? A poor rating indicates possible fraud or a bad shopping experience.

Privacy: Can you trust the site owner, safely supply your e-mail address, and download files?A poor rating indicates spam, adware, or spyware.

Child safety: Does the site contain age-inappropriate material (content that is sexually oriented, hateful, or violent in nature) or encourage activities that are dangerous or illegal?

How to rate sites:

• Use your mouse to move the user rating symbol
• By moving the user rating symbol you indicate what you think of the site
• Your rating will be saved when you close the rating window or click outside it

WOT generates these statistics based on user feedback:

Confidence: Indicates the amount of supporting evidence.

Scorecard: Shows rating details with comments from users and trusted sources. You may also leave your own comment.

Download it for free at http://www.mywot.com

This article copyright © John Nasta 2009 – All Rights Reserved

Domain Name

• By installing WordPress on your own server, you can drive traffic to your own domain and increase your web site’s overall search engine ranking.
• On wordpress.com you can buy a domain name for $15 per year or map to an existing domain name for $10 per year. If you don’t have a domain of your own and don’t wish to purchase one, you can have a subdomain on wordpress.com (e.g. http://yoursitename.wordpress.com) for free.

Installation & Setup

• Setting up on wordpress.com is as simple as providing a valid email address and filling out an online form. Just about anyone can do it.
• Installing WordPress on your own server can also be very simple. Many web hosts provide an automatic installer, which again only requires completing an online form. I like Lunarpages because for only $4.95 per month you can get unlimited disk space, unlimited bandwidth, and an unlimited number of subdomains, add-on domains, POP email addresses, and databases. They also have an automatic installer that allows you to set up multiple instances of WordPress whether on one domain or different domains.

Disk space

• You get 3GB of disk space for free on wordpress.com. You can add 5 GB for $20/year, 15 GB for $50/year, or 25 GB for $90/year.
• On your own domain, you potentially have unlimited disk space. With Lunarpages, unlimited disk space costs $4.95/month, $59.40 per year, or $118.80 for 26 months (approximately $4.57/month).

Advertising

• When you install WordPress on your own server, you can host ads and generate income from your site.
• When your site is on wordpress.com, WordPress places ads on your site (they only show to visitors who are not logged in). If you don’t want the ads on your site, that will cost you $30 per year.

Users

• When your site is on wordpress.com, you are limited to 30 users. If you want to remove the limit, it will cost you $30 per year.
• When you install WordPress on your own server, you can have an unlimited number of users.

Privacy Settings

• On wordpress.com, privacy settings allow you to make your site public, hide your site from search engines, or make your site only accessible by logging in.
• When you install WordPress on your own server, you can make your site public or hide your site from search engines, but making it only accessible by login requires a plugin.

Themes

• On wordpress.com, you can choose from over 60 themes, and you can customize the CSS.
• When WordPress is installed on your own server, you can choose from literally thousands of free themes, purchase premium themes, or design your own themes. You can also modify the CSS as well as the theme scripts, which allows you to modify a stock theme to make it look completely original. Checkout the WordPress Themes Directory. You can also search Google or other search engines for Free WordPress Themes.

Widgets & Plugins

• On wordpress.com you can choose from about 25 widgets. WordPress adds widgets to the list by popular demand. You can’t install plugins.
• When you host your own WordPress site you can choose from thousands of free plugins that add functionality to your blog including email subscription managers, shopping cart, database tools, social bookmarking, photo galleries, event calendars, the list goes on and on. Many of these plugins include widgets that allow you to display additional information in the sidebar along with the standard WordPress widgets. Check out the WordPress Plugins Directory. You can also write your own plugins and widgets, or have custom plugins and widgets developed for you.

Upgrades

• On wordpress.com upgrades are done automatically. You don’t even have to think about it.
• On your own installation you simply click a link to upgrade WordPress or your plugins. Since version 2.7 there is no need to upgrade manually or install an automatic upgrade plugin. Automatic upgrading is built in.

Now that you know many of the differences, what do installing WordPress on your own server and hosting your site on wordpress.com have in common?

• Create web pages, blog posts, or both
• Pages and posts can be public or private (require user privileges)
• Subscribe via RSS
• On-site search engine
• Allow users to add comments
• Upload and insert media
• Add links to your favorite sites
• Your site can be public or private (hidden from search engines)
• Same great support forums
• Akismet spam filtering (optional on your own installation)
• Import content from other blogs
• Export content from your blog to another blog
• Multiple user levels (visitor, subscriber, contributor, author, admin)
• Delete your site at any time

Still can’t decide? Then start a site on wordpress.com, get your feet wet, and see if you want to dive in. It’s totally free to begin and you don’t have to register a domain name or find a hosting company. You can always export your content into a WordPress installation on your own server if you decide to do that at a later time. Conversely, if you find that hosting your own installation hasn’t worked out for you, you can always migrate it to wordpress.com.

This article copyright © John Nasta 2009 – All Rights Reserved

It is not widget-ready and the sidebar is not contained within <UL> or <OL> tags.

The single post template (single.php) does not call in the sidebar, so when a user goes to an individual post the navigation disappears.

single.php also contains over a dozen validation problems. The Minima theme that alternate0 is based on does not use the single.php template, so I can only assume that the person who adapted this template was a terrible coder. If you haven’t invested any time in this theme it might actually be easier to start with the Minima theme and customize it to look like alternate0. They are very similar.

It is set to a fixed width of 700px, which wastes a lot of screen space for most users.

The links in the header are hard-coded and need to be manually changed in order to be of any use.

It does not contain any RSS links.

The comments.php file has Google ads hard-coded into it and you’ll have to know how to remove them.

comments.php also contains a hard-coded link to a subscription management page on the author’s site and a “subscribe to comments” checkbox that doesn’t work. Both have to be removed.

The sidebar contains hard-coded links to the author’s sites under “Good Reading” and the “Alternate0 is based on…” credits. You’ll also want to remove the “Your Google Ads Here” text while you’re at it. The sidebar is full of junk that you’ll want to get rid of, yet doesn’t include things that would be desirable such as Recent Posts, Links, Pages, and Meta sections.

The sidebar Categories drop-down has a hard-coded /blog/ path, so if your WP installation is not in a folder called “blog” the drop-down will not work.

The footer.php also contains hard-coded links to other sites.

The CSS does not contain several required classes including alignleft, alignright, aligncenter, and wp-caption.

The theme comes with files called templates.php and testimonials.php that appear to be there for no reason other than to promote the author’s other themes and socio-political agenda.

The authors did not respond when I tried to reach them by email, and a comment on the ThoughtMechanics web site in which I politely asked for some help with this template was apparently deleted from the moderation queue without being published or responded to.

In short, it looks nice but be prepared to do a lot of hacking to make it usable.

I am working on fixing this theme because I have a client who likes the way it looks. I’ve gotten all of the above fixed except for the disappearing navigation on single posts, which I am having trouble getting to line up properly (that’s what my question to the authors was about). I also have not made it widget ready because so far my client hasn’t had any need for that, and I have to concentrate on what they do need first. Once it’s fixed I will make it available to others. In the meantime this theme is not one that you can expect to simply unzip and use. I will also try to work some of the WP v.2.7+ features into it such as comment threading. This template was written in 2005 and I have to assume that the author has abandoned it.

This article copyright © John Nasta 2009 – All Rights Reserved