Graphika Studioz – Web Design, Development, Hosting and SEO Services – Parksville, Qualicum Beach

Truglaze.com is a website design I recently did for a client. Built with Ruby on Rails, it consists of a full custom CMS with a Flash Application to showcase all his selected photos from a portfolio component.

With over 5 years of experience with WordPress, the powerful blogging / CMS application used to create millions of websites and blogs around the world, I have seen many, ups, downs, bumps, car jackings, fistacuffs, thrown computers, head bang on walls etc. After just updating my site for, hmm… the 8th time?, I’ve decided to write a post that will hopefully help some people out in starting a new site with WordPress.

1) Find a good theme

Finding a good theme is hard.  Their are tons of them.  All over the internet.  The reason I say this is because, if I would have found a good theme I liked from the start I probably wouldn’t have changed it so many times and ran into the many problems I’m about to list below.  Don’t download themes from places you don’t know or trust.  Believe it or not there are themes out there that will do bad things in many different ways.  I have not experienced this but I’ve heard stories, so just be careful.

2) Don’t hack the theme

If your like me you’ll probably end up doing this anyway, but I’ve lost data due to poor backup practices. I’ve overwritten previous files in the wp-content directory and that isn’t fun.  Hacking themes isn’t really that big a deal if you know what your doing, but just make sure you backup your stuff first.  If you don’t know what your doing just stay away from this, you’ll probably end up becoming “OH: he tosses the computer across the room” and starting from scratch again.  Besides if you find a good theme you probably won’t need to hack anything.  It will also be less hassle when you want to upgrade the theme.

3) Use permalinks!!!

I’ve seen so many people start a blog, and then down the road realize their uri’s could be way prettier and help out seo immensely.  They switch to use permalinks then see all their incoming links 404 with page not found.  This results in having to use the old ugly way: ?page_id=9 instead of the better: /2009/12/9/some-long-title-permalink-with-keywords.  I could be wrong on this in that WordPress may have upped the ante and is now finding_by_id_or_permalink.  Either way just do it, it’s easy. Settings -> Permalinks in the Admin panel.

4) Categories are for categories

When I started my first WordPress site, I created hundreds of categories, using them like tags mostly because I didn’t really understand the whole category tag thing.  Well when I wanted to use categories for my main navigation, I ran into huge problems.  Categories can or don’t have to be used for navigation but in the future you may find a cool theme that uses nifty drop down menus of your categories, so just use categories for categories.  If  you have a site that’s all about junk food, then your categories could be: chocolate, drinks, cookies, ice cream and chips.  Try and limit the number of categories to under 10.  Plan your site out and think of the future growth of your site.  Can all posts and future posts fit into these categories?  If you can’t keep it under 10 then use parent categories.

5) Tags are for tags

Tags are pretty much for breaking down your content even more than categories. You can go all out here, add what ever you want, keeping in mind you what to use tags to relate to what your post is about. That way if you have say 3 posts that are all relative to 1 thing, you can add a specific tag to each of those posts and users can find all 3 of your posts that are similar on one page.

6) Cache your site

WordPress by default is fairly fast and responsive, but if your on a shared server, even a private server without much memory your site could end up doing some pretty annoying things if you have a traffic spike.  WordPress is very customizable and you can add tons of different plugins, so go find a good caching plugin to serve up static content instead of having to do database calls every request.  WP Super Cache is an example of a very good caching plugin.  There are lots of others so find one that suits your needs.

7) Backup your Database

I’ve ruined a few sites by not backing up the database, then upgrading or doing something stupid and loosing lots or all the data within.  There has been many similar stories of people just being dumb or doing work at 3am when they shouldn’t have and clicking the wrong button.  Many hosts allow you to set this up right in your panel, or if your a bit tech savy you can create a crontab to hit a command to do the dirty work.  You can also just download a sql dump every so often.  I currently use the method describe on my automate mysql backups post.

8) Setup comment moderation

With all the crap that goes on now a days with spamming etc, I strongly suggest setting up at least: Comment author must have a previously approved comment or even: An administrator must always approve the comment. This way you will never get spammed with crap content from bots or real people, and google won’t blacklist your site for having inappropriate content on it.

9) Use Viviti!

If your not into WordPress and can’t get your head around it for what ever reason, there are other sweet options out there. Out of the box type options that will just work with no fudging, pixel pushing, etc.  Just for Jerrett’s amusement: Viviti is one of them.  Why is it so rad?  Well it just works… out of the box. You can easily customize it, you can do pretty much anything with it, and it’s built with the Ruby on Rails framework (me likes).  Basically you don’t really need to worry about any of the things mentioned above.  So give it a shot, It’s definitely worth a try.

Webaim has posted a very interesting and very full of information article with results on how disabled people with screen readers view web pages. I was shocked at alot of the results and will be bookmarking the page for future reference forsure.

After spending about 6 hours reserching how to handle errors when using ajax requests to create, update and do other actions in Ruby on Rails I got fed up and started doing it on my own, with a little help from Agile Web Development with Rails.

I spent countless hours looking through google and found nothing I liked, and this is why I’m writing this post. I also found nothing that showed all the code, from view to controller to js. So I’ll try and include everything here.

First background on what I wanted to do… I have an index.html.erb file that loops through an object that contains a bunch of stuff. What I wanted was:

1. Have a form_remote_for at the bottom of this list that would do an Ajax.Request
2. Have the new form values save to the database
3. Print the new data to the bottom of the current list
4. And handle any errors so the user would know wtf was going on

Ryan Bates has a sweet railscast screencast showing how to implement… well everything except the error handling. I’m just going to make it really simple just so you get an idea.

My index.html.erb file:

<table id="teams">
 <tr>
  <th>Team name</th>
  <% if logged_in? -%>
   <th>Action</th>
  <% end -%>
  </tr>
  <% for @team in @teams -%>
   <tr>
    <td><%= link_to @team.name, league_team_path(@league.id, @team.id) %></td>
    <% if logged_in? -%>
     <td>
      <%= link_to_remote image_tag('file_remove.png'), :url => team_path(@team.id), :method => :delete, :confirm => "Are you sure?" %>
      <%= link_to image_tag('file_edit.png'), edit_team_path(@team.id) %>
     </td>
    <% end -%>
   </tr>
  <% end -%>
</table>
<% if logged_in? -%>
 <div class="ajax_form">
  <% form_remote_for :team, :url => teams_path do |f| -%>
   <p id="team_name_para">
    <label id="team_name_label" for="team_name">Team name:</label>
    <%= f.text_field :name, :class => "large_set_width", :value => "" %>
    <button class="form_submit" type="submit"><span>Save</span></button>
   </p>
  <% end -%>
 </div>
<% end -%>

This is pretty basic, I just loop through all teams and print them out into a table with admin actions to edit and delete. Then the form_remote_for at the bottom that sends an Ajax.Request

My teams_controller.rb create action:

def create
 @team = @league.teams.build(params[:team])
 if @team.save
  respond_to do |format|
   flash[:notice] = @team.name + ' was successfully created.'
   format.html { redirect_to teams_path(@team) }
   format.js {
    render :update do |page|
     page.insert_html :bottom, :teams, :partial => "partials/assets/team", :object => @team
     page.replace_html :notice, "<p>"+flash[:notice]+"</p>"
     page.show 'notice'
     page.visual_effect :highlight, 'notice'
    end
   }
  end
 else
  respond_to do |format|
   format.html { render :action => "new" }
   format.js {
    render :update do |page|
     page.visual_effect :shake, "team_name_para"
     page.replace_html :team_name_label, @team.errors.full_messages
     page << "$('team_name_para').addClassName('form_error_message');"
    end
   }
  end
 end
end

This is pretty basic as well, we have the usual if @team.save and the html format in the respond to. What you want to look at is the format.js block. Instead of rendering a rjs file, were just going to take care of everything right in the controller. The first page.insert_html inserts the content from the team partial that gets the @team object passed to it. Partial looks like this:

<tr>
 <td><%= link_to @team.name, team_path(@team.id) %></td>
 <% if logged_in? -%>
  <td>
   <%= link_to_remote image_tag('file_remove.png'), :url => team_path(@team.id), :method => :delete, :confirm => "Are you sure?" %>
   <%= link_to image_tag('file_edit.png'), edit_league_team_path(@league.id, @team.id) %>
  </td>
 <% end -%>
</tr>

So basically that just renders to the bottom of the table… Then the next 3 just handle the flash[:notice]. I put in some scriptaculous goodness as well. One issue I had was the flash[:notice]. In my application.html.erb layout I had:

<% if flash[:notice] -%>
 <div id="notice">
  <%= flash[:notice] %>
 </div>
<% end -%>

But this wasn’t going to work with the page.replace_html :notice because the div didn’t exist yet until the flash was created. So I switch things up and applied css to the paragraph tag instead of the div:

<div id="notice">                       
 <% if flash[:notice] -%>
  <p><%= flash[:notice] %></p>
 <% end -%>
</div>

Now for the fun part… err umm not so fun error handling. You’ll notice that the if @team.save has an else like usual. So we can do format.js like above. First if there were errors I would shake the entire paragraph tag that contains the label, input and button. This is some more scriptaculous goodness and really tells the user there’s something wrong. Next because we are only working with one input we can replace the html inside the label with @team.error.full_messages and add a class name so we can turn it red so they know there’s an error on that field.

That’s it!! Pretty simple stuff. Also if you have something more complex with multiple input and fields we can handle the errors a bit differently. First you can put an empty div on your page somewhere:

<div id="ajax_form_errors"></div>

Then in the else statement just add this into the format.js block:

page.replace_html :ajax_games_form_errors, :partial => "partials/assets/errors"

Then the errors.html.erb partial:

<div id="errorExplanation" class="errorExplanation">
 <h2><%= @game.errors.count %> errors prohibited this game from being saved</h2>
 <p>There were problems with the following fields:</p>
 <ul>
  <% @game.errors.each_full do |msg| -%>
   <li><%= msg %></li>
  <% end -%>
 </ul>
</div>

What were doing here is basically just the same thing ActiveRecord::Errors does with it default setup for error handling. Looping over the errors and printing them out in a list item.

That’s it that’s all. Lemme know if you have any problems and I’ll try and help you out the best I can.

I’ve made a cool drop down menu system using Prototype and Scriptaculous javascript libraries that utilizes some of the cool effects to create an animated menu system.

Anyway here is droplicious v.2.1 I won’t be putting up new versions here anymore. It will now be at github (see link below… right below)

Droplicious at github: http://github.com/darrenterhune/droplicious

Please comment any bugs or other questions on this post, or submit issues at github Thanks!