Tag: WordPress

Making the change from HTML pages to WordPress

This article is for Web designers who want to switch a website that was built using dot html pages to WordPress. It is a relative snap to transfer any website, large or small, to WordPress.
The benefits of using WordPress instead of static pages are numerous. Concerns over losing ranking and generating 404’s are reasonable ones but they are concerns I am going to address in the following steps.

First Step:Get the latest version of WordPress &Install WordPress into it’s own directory.
Installing WordPress in it’s own directory allows you to work on the new design behind the scenes.If you don’t want to do that you can of course work on your own server and then upload the theme to your client’s WP installation. I like to work within the client environment so I can get to know any problems or quirks on the server before going live. Not all servers are created equal. Go to Settings>> Privacy and block search engines so that the work in progress does not get indexed if working on the client server. Or create a robots.txt file if one doesn’t already exist and type in
Disallow
/wordpress
Remember to remove this directive when going live.

Next Step:Making New Pages Out Of Old Pages.
An easy but time consuming step is copying and pasting the old html page content into the new WordPress pages and re instituting page order using the Page Order option
in the WordPress Page Editor. Number the old html pages and assign page order accordingly. If you have only 5 old pages to be carried over, you’ll be done very quickly. Designers handling the redesign of a much larger site with Parent and Child pages will have extra steps-especially if they need to build a drop down menu out of pages with child pages.Never fear:there are plugins that create dropdown menus for you. The one from We Eat Bricks looks the most promising

What the Blank is index.php?p=4? About-Us.htm looked so much better!
Using the permalink structure /%category%/% postname%
http://www.website.com/about-us.htm becomes http://www.website.com/about-us.
You choose this option in Settings>>Permalinks and find the Custom option. Paste what is in bold type into the field named Custom.

I heard recently that the fuss over pretty permalinks might have gotten a little overheated and that engines can and do index these kind of urls. But you will no doubt agree www.website.com/about-us looks a lot nicer than www.website.com/?p=4.

SEO Stuff
In my experience of redesigning websites, most had no SEO when I got my hands on them anyway but why continue on a bad path? As a web designer you might feel you should not have to worry about aspects that seem to fall more into the Marketing arena, right? Maybe. But many times the reason a client wants a redesign in the first place has nothing to do with how the site looks and more to do with such performance issues as: they aren’t getting as much traffic as they want or making many sales or landing as high in the SERPS as they would like. Fair or unfair they will probably blame you if their site doesn’t get climb higher in the SERPS after you deliver the new site. You should tell them that the more unique their content/product/service the more results they will see and that it will take time to see these results,too.Please do not make any unrealistic guarantees and make sure they are aware that the more often they update their sites the more they will be crawled.

There is one page that should not be carried over into the new design:the Splash or Intro Page.The Internet should be for offering information but because Splash Pages have very little information to offer, search engines tend to see this one page as the whole site and go away without indexing any links or real information about the website. I could go one step further and blame low performance on the Splash Page alone.The index page needs to be clean and uncluttered,true but don’t repeat the mistake of choosing style over substance.If you take a look at successful websites you will see that most put a lot of information on the index page.

All in One SEO
because WordPress doesn’t supply an option to create meta descriptions install the All in One SEO plugin.After you’ve activated this plugin each page will have a new All In One Seo option when you edit them.

Writing Meta Descriptions
If you are lucky the previous designer took care to create good meta descriptions for each page they made and then you can just paste this into the All In One SEO description field box.But if not you’re going to have to read the page content and pluck out of it a 160 character long description. 160 characters is believed to be the length after which search engines stop reading.

Using Keywords
It is argued over and over that Search Engines ignore keywords. If writing a Post instead of a Page you can use Tags and the All In One SEO plugin will use those tags as keywords.You shouldn’t worry overly about meta keywords.

Unique Page Titles
Page Titles need to be unique whether an it’s for an archive or a category or a Page page.
For Pages the title issue is taken care of when you publish the new page.Out of the box, most WordPress theme’s way of handling the title section needs a bit of help. So you should also install this code in the header.php file of the theme you are using:
[php]<title><?php

// Page or Single Post
if ( is_page() or is_single() ) {
the_title();

// Category Archive
} elseif ( is_category() ) {
printf( __(‘Archive for &lsquo;%s&rsquo;’), single_cat_title(”, false) );

// Tag Archive
} elseif ( function_exists(‘is_tag’) and function_exists(‘single_tag_title’) and is_tag() ) {
printf( __(‘Tag Archive for &lsquo;%s&rsquo;’), single_tag_title(”, false) );

// General Archive
} elseif ( is_archive() ) {
printf( __(‘%s Archive’), wp_title(”, false) );

// Search Results
} elseif ( is_search() ) {
printf( __(‘Search Results for &lsquo;%s&rsquo;’), get_query_var(‘s’) );
}

// Insert separator for the titles above
if ( !is_home() and !is_404() ) {
_e(‘ at ‘);
}

// Finally the blog name
bloginfo(‘name’);

?></title>[/php]

That will sort out Archives,Tags,Categories titles which you can also tell the engines not to index in Settings>> All In One SEO. Download the plain text file here:seotitles
I edited the file recently because of some confusion of mine over some very similar html characters:
‘ ’
« »
[html]&lsquo; &rsquo;[/html]
[html]&laquo; &raquo;[/html]
The file is using lsquo and rsquo….

Going Live
You have all your pages set up and the design is finished and you are ready to go live, what next?
Read this article on installing WordPress in it’s own directory.If you’ve followed all the steps your new WordPress site should appear when you go to http://www.website.com/. If your old index.html page still pops up then you have a little more work to do. Paste this into main .htaccess:
DirectoryIndex index.php index.html
Placing index.php first takes care of that little problem.

Redirecting Traffic 301
Gather a list of all the old site’s links.
http://www.website.com/about-us.htm
http://www.website.com/contact.htm
http://www.website.com/projects.htm

Find the top level .htaccess in your website root and open it up for editing with a plain text editor like NotePad or Textwrangler.If you use a Mac you will have to rename the file to htaccess.txt so that you can save it to reupload it. Macs hide . files.

Redirect 301 /about-us.htm http://www.website.com/about-us
Redirect 301 /contact.htm http://www.website.com/contact
Redirect 301 /projects.htm http://www.website.com/projects
Repeat this until you have covered every last page from the old website’s linkage structure.
Save the file and upload it back to the top level directory.

Last is to turn off blocking search engines in Settings>>Privacy.

Important Last Steps You’ll Be Glad You Took:
Add www.website.com to Google and Create and Submit a Sitemap in Google Webmaster Tools. You’ll also want to make good use of Google Analytics.

WordPress as a CMS:Too Complicated for Clients?

It depends.
I’ve noticed that my clients are not big on selecting categories when they write new posts. And it is the rare client that pays any attention to Tags.But for the average client I would not recommend setting up a site that needs Custom Fields. Categories, yes. Categories are far more intuitive and a much easier concept to grasp.If your client is advanced enough to use Custom Fields chances are they don’t really need you at all!

But for the average client,if I have set up a site that depends on the correct selection of categories before publishing, I have to teach them that they must select the right category when writing a new post.If they get it (and most of my clients do get) it works.
Using WordPress as a blog does not depend on picking the right category. Because all posts get looped by index.php whether they are in category 3 or category 1003. But maintaining a site that is using WordPress as a CMS and a blog requires playing by some simple rules.

WP as a CMS, 2 Blogs in One
Here is an example of WordPress as a CMS that might be considered “too complicated” for some clients to upkeep. This site has a home page template using one version of index.php and a simple custom query to show only Featured posts. While another template loops only the Events posts. For this site I kept it very simple by creating only 2 categories. By keeping it this simple and knowing that my average client does not tend to create new categories just for kicks fingers crossed, this will be an easy site to maintain.

How to get 2 “blogs” in one. One “blog” on the frontpage that shows only one category and another “blog” that will use one master category to show all the other posts.
I left Reading settings as “Frontpage displays: your latest posts”. I wanted those latest posts to be from only one category. And then I wanted to exclude these posts from the other “blog” and vice versa. The question was use a category template or use a custom query in a template? I’ve used both and it’s my opinion that category templates are the better way to go.

Using a custom query
Trying to get posts in a template from one or 2 categories using a custom query breaks the next post navigation. This means you either have to set your Reading settings to show 100 posts or to use the showposts=100 in the custom query. It’s not that elegant. And I always felt it was a broken but working kind of way to use WP. Meaning it sort of does what you want but not really.

Using a category template
To use a category template all you have to do is copy your index.php and rename it category-1.php.
In this project’s case, category 1 is the Events category which is the second blog and is going to be used as a “real” blog. Upload category-1.php to your theme folder. That is all you have to do.How does WP know to use this file? When it comes to categories WP is set up to look for a category template first.

How to keep posts belonging to category 1 out of the front page?
Paste this in the template you are using for the Featured posts to keep category 1 posts out of the front page: [php]<?php query_posts($query_string . "&cat=3,-1"); ?>[/php]

code explanation
Category 3 is the Featured Posts category that I do want on the front page. Category 1 has a minus before it because I do not want posts from the Events (category 1) showing upon the home page.The template for the Featured posts is the main index.php file.The template for the Events Posts is a copy of the main index.php file.


How to keep posts belonging to category 3 out of the Blog?
Because WordPress will show posts from a specific category if you use a category template only posts from the Events category will show up on the blog pages. So you don’t have to do anything extra to this template.

Navigation
If Categories are the backbone of WordPress then Navigation is the backbone of your website.
(Many ready made themes already provide this in header.php ) but are set up for WordPress to be used as a blog so they probably include a link to Home and then add in the code below as well. But if you write a page called Home “Home” will then show up twice in your menu–which you probably don’t want.I find it is easier to include or exclude pages from my top navigation rather than hand coding in a link to pages. Here is how to include or exclude:
[php]<ul id="nav"><?php wp_list_pages(‘sort_column=menu_order&depth=1&exclude=12,16,18&title_li=’);?></ul>[/php]

code explanation
What this does is build a navigation menu of your pages while excluding pages with ids 12,16 and 18.
Excluding pages from the top menu is easy– all you have to know is the id number of the page you would like to exclude.This code will not show child pages.*

If you need a category title to show in your navigation you can do this:
[php]<ul id="nav"><?php wp_list_pages(‘sort_column=menu_order&depth=1&exclude=12,16,18&title_li=’);?><?php wp_list_categories(‘sort_column=name&title_li=&exclude=3’); ?></ul>[/php]

code explanation
Now your menu will show all your pages and at the end will show the Events category but will exclude the Featured category.

This does have it’s drawbacks.There is a limit to how many tabs you can have in a horizontal menu without going 2 tier. If my clients don’t add new categories doesn’t mean your client’s won’t.

So another way to insert a tab for the Events category would be to do this:
[php]<ul id="nav"><?php wp_list_pages(‘sort_column=menu_order&depth=1&exclude=12,16,18&title_li=’);?><li><a href=" <?php echo get_category_link($category_id=1);?> ">Events</a></li>
</ul>[/php]

Of course this has it’s drawbacks, too. It will make sure your menu doesn’t get overcrowded with category tabs but it will only create a tab for the Events category. If there are child categories of the Events category they will not be displayed in the list of posts. (**Not True!-Yay**)Still, this might be the best way to go. You can show other categories in a sidebar or use a query to show the child categories in the Events category template. Or you can use Yet Another Related Posts plugin (YAPP) or similar that creates a list of related posts using parameters.

Any site you hand off is going to require some attention from you.If you know you won’t be able to give your time try to set up the website accordingly. Don’t expect a client to get it right away. Be prepared to repeat instructions.

*This plugin will create a dropdown on any page with child pages:Multi Level Navigation .It should be used to replace your current menu so pay attention to the Advanced options.You will have to play with the css a bit but they also provide a css generator.

Get Grid View Without the Gold Cart

gratuitous blog post imageWPSC means WordPress Shopping Cart, a plugin for WordPress.

What: Too cheap to buy a Gold Cart Module for your WPSC plugin? Well, it isn’t only out of cheapness that I’m writing this (anyway I make my clients buy the module for other reasons like more payment gateways than PayPal) it’s the constant battle to optimize SEO. This shopping cart plugin is possibly the best thing to happen to WordPress but it gives less than great SEO. Duplicate title tags,missing or too short meta descriptions.

How: Use the WordPress editor in Visual Mode to insert a product group into a Page or Post.

The more familiar I get with how low ranking websites get knocked for duplicate content (yep, Google gives more leeway to popular sites with loads of incoming links and high page rank) the more value I see in adding a product group/category to a page or post rather than use the one page to show your entire store.

The editor in HTML mode will not show the shopping cart button. And if you turned this option off in your user profile you won’t ever see this button. So go to your user profile and turn Use Visual Editor back on.
So go to Write > Page and click on the cart icon to choose a category from product groups. Select, insert,save. Once you preview you’ll see that the products scroll down the page.
Don’t publish just yet.

Here is some sweet sweet CSS to fake the Grid View, save 20 bucks and get some good SEO working (that those rich guys that paid for Grid View probably won’t have).
This part is so incredibly easy I could kiss myself. In fact I will.

Fake Grid View CSS
Add this to style.css in your theme folder:
[css]
#homepage_products{overflow:hidden;}
#homepage_products .category_view_product .product_details .wpsc_product_title{font-size:12px;}
#homepage_products .category_view_product{width:200px;height:300px;float:left;margin:8px 3px;}
[/css]
The height and width and margins will have to be tweaked to fit your wishes.You can make the product titles smaller and change color.You can also have borders.It’s wide open for customization.But the float:left is what matters and creates the grid.Having overflow:hidden in the wrapper div keeps the page from looking screwy.

SEO
Next thing is to download the All in One SEO pack plugin for WordPress, unzip, upload to plugins folder, activate settle up the options and go back to your almost done Page or Post.Pop open the All in One SEO box in the editor page, below Categories. You’ll see title,description and keyword fields. Writing in your description will solve the short or missing meta description problem. If you used a post you can skip the keywords field and use tags instead. Tags are better anyway.

Use a Page or a Post?
In WordPress categories are king and you can great things with category templates.You can only use categories with posts. I would rather be able to place a single product into a Post.I think this would open up a lot more flexibility in using this plugin. This is supposed to be an option in the latest release of the plugin but either it doesn’t work or I have another plugin that breaks the button code for this. Entirely possible.

Last but not least tweak your header.php. Look for the line with html]blah blah blah [/html] delete it and paste this in it’s place:
[php]<title><?php

// Page or Single Post
if ( is_page() or is_single() ) {
the_title();

// Category Archive
} elseif ( is_category() ) {
printf( __(‘Archive for &lsquo;%s&rsquo;’), single_cat_title(”, false) );

// Tag Archive
} elseif ( function_exists(‘is_tag’) and function_exists(‘single_tag_title’) and is_tag() ) {
printf( __(‘Tag Archive for &lsquo;%s&rsquo;’), single_tag_title(”, false) );

// General Archive
} elseif ( is_archive() ) {
printf( __(‘%s Archive’), wp_title(”, false) );

// Search Results
} elseif ( is_search() ) {
printf( __(‘Search Results for &lsquo;%s&rsquo;’), get_query_var(‘s’) );
}

// Insert separator for the titles above
if ( !is_home() and !is_404() ) {
_e(‘ at ‘);
}

// Finally the blog name
bloginfo(‘name’);

?></title>[/php]

That helps take care of the duplicate title problem for categories and archives.
The all in one seo pack does most of the work and this does the rest. It’s very cool.

WP Post Revisions&WP-Ecommerce

wpsc, an abbreviation of wp-shoppingcart, a plugin for WordPress.
Post Revisions Buggy-ness & WP-Shoppingcart plugin
Most people get nervous when it comes to mySQL database tables.So I was glad to find a way to fix this bug without having to use phpmyadmin.

After I upgraded to WP 2.6 and upgraded the wpsc cart plugin to version 3.6.8 I noticed that revision-71 was being inserted into my single product urls. 71 being the id of the edited page.
This bug also happened with WP 2.6 and wp-shoppingcart 3.6.7.It only happened to pages containing wpsc short code:
[shoppingcart ] [productspage ] [tranactionresults ] [userlog ]

I did some forum searching and found this plugin by Jeremy Clark.
Re creating the bug was easy enough to do. All I had to do was deactivate the disable posts revisions plugin and edit a wpsc page. Voila: revision-pageid reappeared in the single product urls all over again.

** Note**
I’m actually using this plugin: Disable Revisions and Autosave
Link: http://exper.3drecursions.com/2008/07/25/disable-revisions-and-autosave-plugin/
Description: Disable the Revisions and Autosave functions. Original idea and code by Lester Chan and Untwisted Vortex. But Jeremy’s does the same thing. Use either one.

I re activated the plugin and deleted the product listing page. I created a new page, pasting the productspage shortcode into it. Then I checked the Admin in Settings and noticed that not only the product listing page link was messed up-the Verify Your Order link was also messed up, because I had edited that page as well after I deactivated the disable post revisions plugin.

Fixing stuff
Get this plugin
Test for whether or not you can just activate this plugin to get rid of the bug without having to delete the page containing some shortcode.If this fixes the bug you don’t need to delete pages.
If the problem still exists delete the page,copy the short code into the new one and publish it.
Check Admin in Settings in Ecommerce to see if your page urls are correct.
If they contain revision-pageid, correct the url and hit Update Page Urls.
Reload the Admin page in Settings>Ecommerce to make sure the corrected link(s) “stick”.
To make absolutely sure this is fixed go back and edit a page containing wpsc short code (just hit save).Then view the page and see if the single product links work.